fix(npm) :: install dependencies only once at root level

.github/workflows/ci.yml

@@ -201,9 +201,11 @@ jobs:
         with:
           node-version: 24
           cache: 'npm'
-          cache-dependency-path: ./tests/end-to-end/package-lock.json
+          cache-dependency-path: ./package-lock.json
       - run: sudo apt-get update && sudo apt-get install -y unixodbc-dev
-      - run: npm ci && npx playwright install --with-deps --only-shell chromium
+      - run: npm ci
+        working-directory: .
+      - run: npx playwright install --with-deps --only-shell chromium
       # The browser tests exercise the official site, but they do not need a
       # separate Rust build. Reuse the binary compiled and tested above.
       - name: Download Linux binary

.gitignore

@@ -12,3 +12,5 @@ xbed.sql
 node_modules/
 sqlpage/sqlpage.db
 tests_uploads/
+/test-results/
+/playwright-report/

CHANGELOG.md

@@ -6,6 +6,12 @@
  - Added a `toast` component with plain-text or Markdown content, icons, colors, six screen placements, configurable auto-dismiss timing, optional manual dismissal, URL-fragment triggers, and automatic stacking of queued notifications.
  - `sqlpage.send_mail` now supports rich email bodies. Use `body_html` for a caller-provided HTML alternative, or `body_md` to render Markdown as HTML. Messages retain a plain-text alternative; `body` may be omitted when `body_md` is used, and `body_md` and `body_html` cannot be combined.
  - Form `options_source` URLs now preserve existing query parameters when adding the dynamic `search` parameter.
+ - Stacked charts now stack their series by `x` value instead of by point order, which used to give wrong totals when a series was missing a point.
+ - `line`, `area`, `scatter`, `bubble` and `heatmap` charts with text labels on the x axis now line their series up by label, leaving a gap where a series skips one.
+ - `column` charts now display vertical bars instead of nothing at all.
+ - `stacked` is now ignored on chart types that cannot stack, instead of displaying an empty chart.
+ - Map coordinates that are not a pair of numbers, like a latitude with no longitude, are now ignored instead of breaking the whole map.
+ - Screen readers now announce the title of the modal component instead of an unnamed dialog.
 
 ## v0.45
 

CONTRIBUTING.md

@@ -109,8 +109,8 @@ cargo run
 In a separate terminal, run the tests:
 
 ```bash
-cd tests/end-to-end
 npm install
+cd tests/end-to-end
 npx playwright install chromium
 npm run test
 ```

biome.json

@@ -6,7 +6,8 @@
       "!**/*.svg",
       "!examples/official-site/pgconf",
       "!tests/end-to-end/test-results",
-      "!.zed/*.json"
+      "!.zed/*.json",
+      "!.claude/*.json"
     ],
     "ignoreUnknown": true
   },

build.rs

@@ -74,6 +74,16 @@ async fn process_input_file(client: &awc::Client, path_out: &Path, original: Fil
                 return;
             }
             outfile.write_all(b"\n").unwrap();
+        } else if let Some(name) = line
+            .strip_prefix("/* !include ./")
+            .and_then(|rest| rest.strip_suffix(" */"))
+        {
+            let included_path = format!("sqlpage/{name}");
+            println!("cargo:rerun-if-changed={included_path}");
+            let included = std::fs::read(&included_path)
+                .unwrap_or_else(|e| panic!("Unable to read {included_path}: {e}"));
+            outfile.write_all(&included).unwrap();
+            outfile.write_all(b"\n").unwrap();
         } else {
             writeln!(outfile, "{line}").unwrap();
         }

examples/CRUD - Authentication/www/css/style.css

@@ -1,23 +1,23 @@
 .menu_options_slim {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .menu_language_slim {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .menu_language {
   min-width: 200%;
 }
 
 div.dropdown-menu- {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 a.dropdown-item- {
-  min-width: inherit !important;
+  min-width: inherit;
 }
 
 .slim_item {
-  min-width: inherit !important;
+  min-width: inherit;
 }

examples/official-site/assets/highlightjs-and-tabler-theme.css

@@ -60,8 +60,8 @@
   --tblr-red: var(--tblr-danger);
 
   /* Luminous links */
-  --tblr-link-color: hsl(212, 70%, 75%) !important; /* Star glow */
-  --tblr-link-hover-color: hsl(212, 70%, 85%) !important; /* Supernova */
+  --tblr-link-color: hsl(212, 70%, 75%); /* Star glow */
+  --tblr-link-hover-color: hsl(212, 70%, 85%); /* Supernova */
   --tblr-carousel-caption-color: var(--tblr-muted-color);
 
   /* Ethereal shadows */
@@ -241,7 +241,8 @@ pre:has(code) {
 
 @media print {
   pre:has(code) {
+    /* biome-ignore lint/complexity/noImportantStyles: .markdown pre is more specific and caps the height at 20rem */
     max-height: none !important;
-    box-shadow: none !important;
+    box-shadow: none;
   }
 }

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -650,7 +650,7 @@ INSERT INTO component(name, icon, description) VALUES
 INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'chart', * FROM (VALUES
     -- top level
     ('title', 'The name of the chart.', 'TEXT', TRUE, TRUE),
-    ('type', 'The type of chart. One of: "line", "area", "bar", "column", "pie", "scatter", "bubble", "heatmap", "rangeBar"', 'TEXT', TRUE, FALSE),
+    ('type', 'The type of chart. One of: "line", "area", "bar", "column", "pie", "scatter", "bubble", "heatmap", "rangeBar". "column" is a synonym of "bar".', 'TEXT', TRUE, FALSE),
     ('time', 'Whether the x-axis represents time. If set to true, the x values will be parsed and formatted as dates for the user.', 'BOOLEAN', TRUE, TRUE),
     ('xmin', 'The minimal value for the x-axis. When time is true, this can be a date or timestamp.', 'TEXT', TRUE, TRUE),
     ('xmax', 'The maximum value for the x-axis. When time is true, this can be a date or timestamp.', 'TEXT', TRUE, TRUE),
@@ -664,7 +664,7 @@ INSERT INTO parameter(component, name, description, type, top_level, optional) S
     ('marker', 'Marker size', 'REAL', TRUE, TRUE),
     ('labels', 'Whether to show the data labels on the chart or not.', 'BOOLEAN', TRUE, TRUE),
     ('color', 'The name of a color in which to display the chart. If there are multiple series in the chart, this parameter can be repeated multiple times.', 'COLOR', TRUE, TRUE),
-    ('stacked', 'Whether to cumulate values from different series.', 'BOOLEAN', TRUE, TRUE),
+    ('stacked', 'Whether to cumulate values from different series. Supported by the "line", "area" and "bar" chart types, and ignored by the others. Series are aligned on their x values, and a series that has no value for a given x counts as zero there.', 'BOOLEAN', TRUE, TRUE),
     ('toolbar', 'Whether to display a toolbar at the top right of the chart, that offers downloading the data as CSV.', 'BOOLEAN', TRUE, TRUE),
     ('show_legend', 'Whether to display the legend listing all chart series. Defaults to true.', 'BOOLEAN', TRUE, TRUE),
     ('logarithmic', 'Display the y-axis in logarithmic scale.', 'BOOLEAN', TRUE, TRUE),
@@ -717,6 +717,20 @@ INSERT INTO example(component, description, properties) VALUES
     '{"series": "Marketing", "x": 2022, "value": 15}, '||
     '{"series": "Human resources", "x": 2021, "value": 30}, '||
     '{"series": "Human resources", "x": 2022, "value": 55}]')),
+    ('chart', 'A stacked area chart, showing how each series contributes to a total.
+The `stacked` property also works with the `line` and `bar` chart types.
+
+Series are aligned on their `x` values, and a series that has no value for a given `x` counts as zero there:
+below, the graphics card draws no power outside of the render.
+If a missing value does not mean zero in your data, make all the series share the same `x` values,
+for instance by rounding timestamps to a common interval.',
+    json('[{"component":"chart", "title": "Power draw", "type": "area", "stacked": true, "time": true, "ytitle": "watts", "color": ["blue", "teal"], "marker": 4}, '||
+    '{"series": "CPU", "x": "2024-03-01T10:00:00Z", "value": 45}, '||
+    '{"series": "CPU", "x": "2024-03-01T10:15:00Z", "value": 52}, '||
+    '{"series": "CPU", "x": "2024-03-01T10:30:00Z", "value": 48}, '||
+    '{"series": "CPU", "x": "2024-03-01T10:45:00Z", "value": 44}, '||
+    '{"series": "GPU", "x": "2024-03-01T10:15:00Z", "value": 120}, '||
+    '{"series": "GPU", "x": "2024-03-01T10:30:00Z", "value": 140}]')),
     ('chart', 'A line chart with multiple series. One of the most common types of charts, often used to show trends over time.
 Also demonstrates the use of the `toolbar` attribute to allow the user to download the graph as an image or the data as a CSV file.', 
     json('[{"component":"chart", "title": "Revenue", "ymin": 0, "toolbar": true},

examples/rich-text-editor/rich_text_editor.js

@@ -141,7 +141,7 @@ function markdownToDelta(markdown) {
  */
 function mdastToDelta(tree) {
   const delta = { ops: [] };
-  if (!tree || !tree.children) return delta;
+  if (!tree?.children) return delta;
 
   for (const node of tree.children) {
     traverseMdastNode(node, delta);
@@ -230,7 +230,6 @@ function traverseMdastNode(node, delta, attributes = {}) {
       break;
 
     case "listItem": {
-      // biome-ignore lint/correctness/noUnusedVariables: object destructuring with a spread
       const { list, ...listItemChildrenAttributes } = attributes;
 
       for (const child of node.children || []) {

package.json

@@ -2,7 +2,7 @@
   "name": "sqlpage",
   "version": "1.0.0",
   "scripts": {
-    "test": "biome check .",
+    "test": "biome check . && node --test \"tests/js/**/*.spec.ts\"",
     "format": "biome format --write .",
     "fix": "biome check --fix --unsafe ."
   },
@@ -13,5 +13,8 @@
   "license": "MIT",
   "devDependencies": {
     "@biomejs/biome": "^2.5.4"
-  }
+  },
+  "workspaces": [
+    "tests/end-to-end"
+  ]
 }