@aceshooting/lyra-ui 1.1.0 → 2.0.0

package/llms.txt

@@ -21,7 +21,7 @@
 
 ## Component tiers
 
-The library shipped in five incremental batches; `llms-full.txt` is ordered the same way:
+The library shipped in six incremental batches; `llms-full.txt` is ordered the same way:
 
 - **v1 core** — form controls, toasts, sparkline, and flags: `lyra-combobox`/`lyra-option`,
   `lyra-select` (a closed-list, button-trigger single-select sharing `lyra-option` with
@@ -44,6 +44,21 @@ The library shipped in five incremental batches; `llms-full.txt` is ordered the
 - **Map & file-input** — `lyra-map` (`maplibre-gl` wrapper with legend + choropleth layer + point
   markers, needs the optional peer `maplibre-gl`), `lyra-file-input` (drag-drop + click-to-browse
   dropzone, emits raw `File[]`).
+- **Conversation & Agent UI** — chat/tool-call/agent-config building blocks for streaming AI
+  interfaces: `lyra-dialog`/`confirm()`, `lyra-tabs`, `lyra-checkbox`, `lyra-switch`,
+  `lyra-json-viewer`, `lyra-live-region` (+ `internal/announcer.ts`'s throttled `Announcer`),
+  `lyra-markdown` (needs the optional peers `marked`/`dompurify`), `lyra-chat-message`,
+  `lyra-typing-indicator`, `lyra-tool-call-chip`, `lyra-tool-result-view` (+ its
+  `registerToolRenderer()` renderer registry), `lyra-tool-result-dialog`, `lyra-chat-composer`
+  (form-associated), `lyra-attachment-chip`, `lyra-stream-status`, `lyra-virtual-list`,
+  `lyra-conversation-item`, `lyra-model-select`, `lyra-slider` (form-associated),
+  `lyra-tool-select-dialog`, `lyra-citation-badge`, `lyra-source-list`/`lyra-source-card`,
+  `lyra-app-rail`, `lyra-responsive-panel`, `lyra-mention-popover`, `lyra-streaming-text`,
+  `lyra-thinking-panel`, `lyra-generation-status`, `lyra-code-block` (needs the optional peer
+  `shiki`), `lyra-tool-approval-dialog`, `lyra-tool-param-form`, `lyra-menu`/`lyra-menu-item`,
+  `lyra-chip`/`lyra-chip-group`, `lyra-model-settings-panel`, `lyra-context-meter`,
+  `lyra-dock-panel`, `lyra-document-preview`, `lyra-media-card`, `lyra-attachment-trigger`,
+  `lyra-kbd`, `lyra-result-card`/`lyra-result-field`.
 
 ## Also useful
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "Free, clean-room Lit web components — a companion to Web Awesome.",
   "license": "MIT",
   "type": "module",
@@ -42,10 +42,11 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
+    "@types/geojson": "^7946.0.16",
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@aceshooting/lyra-flags": "^1.1.0",
+    "@aceshooting/lyra-flags": "^1.3.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.4.0",
     "chart.js": "^4.5.0",
     "chartjs-plugin-zoom": "^2.2.0",
@@ -53,7 +54,10 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
-    "maplibre-gl": "^5.24.0"
+    "dompurify": "^3.4.12",
+    "maplibre-gl": "^5.24.0",
+    "marked": "^18.0.6",
+    "shiki": "^4.3.1"
   },
   "peerDependenciesMeta": {
     "@aceshooting/lyra-flags": {
@@ -80,20 +84,31 @@
     "chartjs-plugin-zoom": {
       "optional": true
     },
+    "dompurify": {
+      "optional": true
+    },
     "maplibre-gl": {
       "optional": true
+    },
+    "marked": {
+      "optional": true
+    },
+    "shiki": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@aceshooting/lyra-flags": "^1.1.0",
+    "@aceshooting/lyra-flags": "^1.3.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@open-wc/testing": "^4.0.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.4.5",
+    "@sinonjs/fake-timers": "^11.3.1",
     "@types/d3-drag": "^3.0.7",
     "@types/d3-force": "^3.0.10",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-zoom": "^3.0.8",
     "@types/geojson": "^7946.0.16",
+    "@types/sinonjs__fake-timers": "^15.0.1",
     "@web/dev-server-esbuild": "^2.0.0",
     "@web/test-runner": "^1.0.0",
     "@web/test-runner-playwright": "^1.0.0",
@@ -103,13 +118,16 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "dompurify": "^3.4.12",
     "maplibre-gl": "^5.24.0",
+    "marked": "^18.0.6",
     "playwright": "^1.61.1",
+    "shiki": "^4.3.1",
     "typescript": "^7.0.2"
   },
   "customElements": "custom-elements.json",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
+    "build": "rm -rf dist && tsc -p tsconfig.json",
     "test": "wtr",
     "test:watch": "wtr --watch",
     "manifest": "cem analyze --litelement --outdir .",

package/dist/components/chart/bar-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/bar-chart.stories.js

@@ -1,20 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Bar',
-    component: 'lyra-bar-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-bar-chart
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-bar-chart>
-    `;
-    },
-};

package/dist/components/chart/box-plot.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/box-plot.stories.js

@@ -1,29 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/BoxPlot',
-    component: 'lyra-box-plot',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const boxes = [
-            {
-                label: 'Loss',
-                data: [
-                    { min: 1, q1: 2, median: 3, q3: 4, max: 5 },
-                    { min: 2, q1: 3, median: 4, q3: 5, max: 6 },
-                    { min: 1.5, q1: 2.5, median: 3.5, q3: 4.5, max: 6.5 },
-                ],
-            },
-        ];
-        return html `
-      <lyra-box-plot
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['K=2', 'K=3', 'K=4']}
-        .boxes=${boxes}
-      ></lyra-box-plot>
-    `;
-    },
-};

package/dist/components/chart/bubble-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/bubble-chart.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Bubble',
-    component: 'lyra-bubble-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const bubblePoints = [
-            { x: 10, y: 20, r: 8 },
-            { x: 15, y: 10, r: 12 },
-            { x: 20, y: 30, r: 6 },
-        ];
-        const series = [
-            { label: 'Clusters', points: bubblePoints },
-        ];
-        return html `
-      <lyra-bubble-chart
-        height="16rem"
-        style="width: 22rem"
-        .datasets=${series}
-      ></lyra-bubble-chart>
-    `;
-    },
-};

package/dist/components/chart/chart.stories.d.ts

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-/**
- * The `config` property is the raw Chart.js passthrough escape hatch — it is
- * deep-merged over the `Series`-generated config, so a nested key like
- * `options.plugins.title` can be set without discarding the rest of the
- * generated config the `type`/`labels`/`datasets` attributes produce.
- */
-export declare const ConfigPassthrough: Story;
-/** `horizontal` sets Chart.js's `indexAxis: 'y'`, flipping bars onto a horizontal axis. */
-export declare const Horizontal: Story;
-/** `stacked` stacks every dataset sharing an axis on top of each other instead of side by side. */
-export declare const Stacked: Story;
-/**
- * The `--lyra-chart-grid-color`/`-tick-color`/`-legend-color`/`-tooltip-bg`/
- * `-tooltip-text` custom properties retheme Chart.js's canvas-drawn chrome
- * (grid lines, axis ticks/titles, legend labels, tooltip). Chart.js can't
- * consume `var()` directly, so these are resolved via `getComputedStyle`
- * once per draw — see `themeColors()` in `chart.ts`.
- */
-export declare const ThemedTokens: Story;
-/**
- * `lyra-point-click` fires whenever a click lands on (or nearest,
- * intersect-only) a data point/segment — covers any `type`, not just bars.
- * `refreshTheme()` forces a redraw so an out-of-band theme change (e.g. a
- * host-level dark-mode toggle that doesn't touch any `lyra-chart` property)
- * is picked up immediately, rather than waiting for the next reactive update.
- */
-export declare const PointClickAndRefreshTheme: Story;

package/dist/components/chart/chart.stories.js

@@ -1,141 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Chart',
-    component: 'lyra-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-chart
-        type="bar"
-        height="16rem"
-        style="width: 22rem"
-        legend
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-chart>
-    `;
-    },
-};
-/**
- * The `config` property is the raw Chart.js passthrough escape hatch — it is
- * deep-merged over the `Series`-generated config, so a nested key like
- * `options.plugins.title` can be set without discarding the rest of the
- * generated config the `type`/`labels`/`datasets` attributes produce.
- */
-export const ConfigPassthrough = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-chart
-        type="bar"
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-        .config=${{
-            options: { plugins: { title: { display: true, text: 'Quarterly revenue' } } },
-        }}
-      ></lyra-chart>
-    `;
-    },
-};
-/** `horizontal` sets Chart.js's `indexAxis: 'y'`, flipping bars onto a horizontal axis. */
-export const Horizontal = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-chart
-        type="bar"
-        horizontal
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-chart>
-    `;
-    },
-};
-/** `stacked` stacks every dataset sharing an axis on top of each other instead of side by side. */
-export const Stacked = {
-    render: () => {
-        const series = [
-            { label: 'Product A', data: [12, 19, 14, 22] },
-            { label: 'Product B', data: [8, 11, 9, 15] },
-        ];
-        return html `
-      <lyra-chart
-        type="bar"
-        stacked
-        legend
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-chart>
-    `;
-    },
-};
-/**
- * The `--lyra-chart-grid-color`/`-tick-color`/`-legend-color`/`-tooltip-bg`/
- * `-tooltip-text` custom properties retheme Chart.js's canvas-drawn chrome
- * (grid lines, axis ticks/titles, legend labels, tooltip). Chart.js can't
- * consume `var()` directly, so these are resolved via `getComputedStyle`
- * once per draw — see `themeColors()` in `chart.ts`.
- */
-export const ThemedTokens = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-chart
-        type="bar"
-        legend
-        height="16rem"
-        style="
-          width: 22rem;
-          --lyra-chart-grid-color: #e5484d;
-          --lyra-chart-tick-color: #e5484d;
-          --lyra-chart-legend-color: #e5484d;
-          --lyra-chart-tooltip-bg: #1a1a1a;
-          --lyra-chart-tooltip-text: #fff;
-        "
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-      ></lyra-chart>
-    `;
-    },
-};
-/**
- * `lyra-point-click` fires whenever a click lands on (or nearest,
- * intersect-only) a data point/segment — covers any `type`, not just bars.
- * `refreshTheme()` forces a redraw so an out-of-band theme change (e.g. a
- * host-level dark-mode toggle that doesn't touch any `lyra-chart` property)
- * is picked up immediately, rather than waiting for the next reactive update.
- */
-export const PointClickAndRefreshTheme = {
-    render: () => {
-        const series = [{ label: 'Revenue', data: [12, 19, 14, 22] }];
-        return html `
-      <lyra-chart
-        type="bar"
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Q1', 'Q2', 'Q3', 'Q4']}
-        .datasets=${series}
-        @lyra-point-click=${(e) => console.log('lyra-point-click', e.detail)}
-      ></lyra-chart>
-      <button
-        type="button"
-        @click=${(e) => {
-            const chart = e.target.previousElementSibling;
-            chart.refreshTheme();
-        }}
-      >
-        refreshTheme()
-      </button>
-    `;
-    },
-};

package/dist/components/chart/doughnut-chart.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/doughnut-chart.stories.js

@@ -1,26 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Doughnut',
-    component: 'lyra-doughnut-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [
-            {
-                label: 'Browsers',
-                data: [58, 18, 15, 9],
-                color: ['#5b8def', '#f7b955', '#59c19a', '#b6b8c3'],
-            },
-        ];
-        return html `
-      <lyra-doughnut-chart
-        height="16rem"
-        style="width: 16rem"
-        .labels=${['Chrome', 'Firefox', 'Safari', 'Other']}
-        .datasets=${series}
-      ></lyra-doughnut-chart>
-    `;
-    },
-};

package/dist/components/chart/histogram.stories.d.ts

@@ -1,5 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;

package/dist/components/chart/histogram.stories.js

@@ -1,17 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Histogram',
-    component: 'lyra-histogram',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => html `
-    <lyra-histogram
-      bins="6"
-      height="16rem"
-      style="width: 22rem"
-      .values=${[2, 4, 4, 5, 6, 6, 6, 7, 8, 9, 9, 10, 11, 12, 12, 13, 15]}
-    ></lyra-histogram>
-  `,
-};

package/dist/components/chart/line-chart.stories.d.ts

@@ -1,22 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Default: Story;
-/**
- * `area` fills every series lacking its own per-series `fill` (unlike
- * `Default`'s "Sessions" series, which opts into a fill via its own
- * `fill: true` instead of the chart-wide default).
- */
-export declare const AreaFill: Story;
-/** `zoom` enables wheel/drag/pinch zoom; a reset-zoom button appears once zoomed. */
-export declare const WithZoom: Story;
-/** A second series on `axis: "y2"` plots against its own right-side scale, labelled by `y2-label`. */
-export declare const DualAxis: Story;
-/**
- * `beginAtZero` lets the y axis start near the data's own minimum instead of
- * 0 — set via the `.beginAtZero` property, since the `begin-at-zero`
- * *attribute*'s presence (not its string value) is what Lit's boolean
- * converter reads, so `begin-at-zero="false"` would not turn it off.
- */
-export declare const WithoutBeginAtZero: Story;

package/dist/components/chart/line-chart.stories.js

@@ -1,99 +0,0 @@
-import { html } from 'lit';
-const meta = {
-    title: 'Charts/Line',
-    component: 'lyra-line-chart',
-    tags: ['autodocs'],
-};
-export default meta;
-export const Default = {
-    render: () => {
-        const series = [
-            { label: 'Sessions', data: [4, 7, 6, 9, 12], fill: true },
-            { label: 'Errors', data: [1, 2, 1, 0, 3], color: '#e5484d' },
-        ];
-        return html `
-      <lyra-line-chart
-        height="16rem"
-        style="width: 22rem"
-        legend
-        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        .datasets=${series}
-      ></lyra-line-chart>
-    `;
-    },
-};
-/**
- * `area` fills every series lacking its own per-series `fill` (unlike
- * `Default`'s "Sessions" series, which opts into a fill via its own
- * `fill: true` instead of the chart-wide default).
- */
-export const AreaFill = {
-    render: () => {
-        const series = [{ label: 'Sessions', data: [4, 7, 6, 9, 12] }];
-        return html `
-      <lyra-line-chart
-        area
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        .datasets=${series}
-      ></lyra-line-chart>
-    `;
-    },
-};
-/** `zoom` enables wheel/drag/pinch zoom; a reset-zoom button appears once zoomed. */
-export const WithZoom = {
-    render: () => {
-        const series = [{ label: 'Sessions', data: [4, 7, 6, 9, 12, 8, 15, 10, 6, 9] }];
-        return html `
-      <lyra-line-chart
-        zoom
-        height="16rem"
-        style="width: 22rem"
-        .labels=${['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O']}
-        .datasets=${series}
-        @lyra-zoom=${(e) => console.log('lyra-zoom', e.detail)}
-      ></lyra-line-chart>
-    `;
-    },
-};
-/** A second series on `axis: "y2"` plots against its own right-side scale, labelled by `y2-label`. */
-export const DualAxis = {
-    render: () => {
-        const series = [
-            { label: 'Sessions', data: [40, 70, 60, 90, 120] },
-            { label: 'Conversion rate', data: [0.02, 0.03, 0.025, 0.04, 0.05], axis: 'y2' },
-        ];
-        return html `
-      <lyra-line-chart
-        legend
-        height="16rem"
-        style="width: 22rem"
-        y-label="Sessions"
-        y2-label="Conversion rate"
-        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        .datasets=${series}
-      ></lyra-line-chart>
-    `;
-    },
-};
-/**
- * `beginAtZero` lets the y axis start near the data's own minimum instead of
- * 0 — set via the `.beginAtZero` property, since the `begin-at-zero`
- * *attribute*'s presence (not its string value) is what Lit's boolean
- * converter reads, so `begin-at-zero="false"` would not turn it off.
- */
-export const WithoutBeginAtZero = {
-    render: () => {
-        const series = [{ label: 'Temperature (°C)', data: [18, 19, 21, 20, 22] }];
-        return html `
-      <lyra-line-chart
-        height="16rem"
-        style="width: 22rem"
-        .beginAtZero=${false}
-        .labels=${['Jan', 'Feb', 'Mar', 'Apr', 'May']}
-        .datasets=${series}
-      ></lyra-line-chart>
-    `;
-    },
-};

package/dist/components/chart/lite-chart.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-/** Zero-dependency alternative to `lyra-chart` — plain SVG/DOM, no `chart.js` peer dep. */
-export declare const Default: Story;
-export declare const GroupedBars: Story;
-/** `stacked` sums each category's bars into one segmented bar instead of grouping them side by side. */
-export declare const StackedBars: Story;
-export declare const Line: Story;
-/** Clicking (or Enter/Space on a focused) bar/point fires `lyra-point-click`, same detail shape as `lyra-chart`'s. */
-export declare const ClickToFilter: Story;