@aceshooting/lyra-ui 1.0.1 → 1.1.0

package/dist/components/word-cloud/word-cloud.js

@@ -0,0 +1,255 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing, svg } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { srOnly } from '../../internal/a11y.js';
+import { layoutWordCloud, MAX_WORDS } from './word-cloud-layout.js';
+import { styles } from './word-cloud.styles.js';
+const DEFAULT_MIN_FONT_SIZE = 12;
+const DEFAULT_MAX_FONT_SIZE = 48;
+const PALETTE_SIZE = 8;
+const FALLBACK_PALETTE = ['#0969da', '#1a7f37', '#9a6700', '#cf222e', '#8250df', '#bf3989', '#0a7d91', '#57606a'];
+/** Must match `[part='word']`'s `font-weight` in word-cloud.styles.ts -- canvas
+ *  measures at `normal` weight by default, which is narrower than the actually
+ *  rendered bold glyphs, so the spiral layout's collision boxes would end up
+ *  too small versus what's actually painted if this ever drifts out of sync. */
+const WORD_FONT_WEIGHT = 600;
+const NAV_KEYS = new Set(['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp', 'Home', 'End']);
+/** Padding, in px, between a focused word's glyph box and its drawn focus ring. */
+const FOCUS_RING_PAD = 2;
+let scratchCtx;
+/** A detached canvas used solely to measure rendered text width for layout. */
+function getScratchCtx() {
+    if (scratchCtx === undefined) {
+        scratchCtx = document.createElement('canvas').getContext('2d');
+    }
+    return scratchCtx;
+}
+const warnedSkipCounts = new Set();
+function warnSkippedWords(count) {
+    if (warnedSkipCounts.has(count))
+        return;
+    warnedSkipCounts.add(count);
+    console.warn(`<lyra-word-cloud> could not place ${count} word(s) (blank text, over the ${MAX_WORDS}-word cap, or ` +
+        'the layout search was exhausted) -- they were dropped, not rendered.');
+}
+/**
+ * `<lyra-word-cloud>` — a zero-dependency SVG word/tag cloud. First-party
+ * invention (no Web Awesome equivalent). Each word's rendered size is scaled
+ * from its `weight` and placed via an outward Archimedean-spiral search (the
+ * standard word-cloud heuristic: heaviest words placed first, each one
+ * spiraling out from the center until it clears every word already placed).
+ *
+ * Unlike sibling `lyra-sparkline`/`lyra-heatmap` (one `role="img"` glyph
+ * standing in for an aggregate value), the individual words here are the
+ * meaningful interactive content — but with up to `MAX_WORDS` of them, making
+ * every single one its own tab stop would be a poor keyboard experience.
+ * Instead, like `lyra-heatmap`'s cells, the whole `[part="svg"]` is one tab
+ * stop with roving arrow-key focus (Home/End jump to the first/last word,
+ * Enter/Space activates the focused one), a drawn `[part="focus-ring"]`, and
+ * a visually-hidden `aria-live="polite"` status announcement.
+ *
+ * @customElement lyra-word-cloud
+ * @event lyra-word-click - Fired on click, or Enter/Space on the focused word.
+ * `detail: { text, weight, group }`.
+ * @csspart base, svg, word, focus-ring, live-region, empty
+ */
+export class LyraWordCloud extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** The words to lay out. Re-laid-out whenever this (or a sizing property) changes. */
+        this.words = [];
+        /** Font size, in px, for the lowest-weight word. */
+        this.minFontSize = DEFAULT_MIN_FONT_SIZE;
+        /** Font size, in px, for the highest-weight word. */
+        this.maxFontSize = DEFAULT_MAX_FONT_SIZE;
+        /** `sqrt` compresses the weight->font-size mapping so one heavy word doesn't dwarf the rest. */
+        this.scale = 'linear';
+        /** `mixed` lets some words render rotated 90° for denser packing. */
+        this.orientations = 'horizontal';
+        this.cachedLayout = { placed: [], skipped: [], width: 0, height: 0 };
+        /** Roving-focus cursor -- an index into `navOrder()`, not into `cachedLayout.placed`. */
+        this.focusedIndex = null;
+        /** Text of the visually-hidden `aria-live="polite"` status announcement. */
+        this.liveText = '';
+        this.measureText = (text, fontSize) => {
+            const ctx = getScratchCtx();
+            if (!ctx)
+                return text.length * fontSize * 0.6;
+            ctx.font = `${WORD_FONT_WEIGHT} ${fontSize}px ${this.fontFamily()}`;
+            return ctx.measureText(text).width;
+        };
+        this.onWordClick = (word) => {
+            const order = this.navOrder();
+            const idx = order.findIndex((w) => w.originalIndex === word.originalIndex);
+            this.focusedIndex = idx === -1 ? null : idx;
+            if (idx !== -1)
+                this.announce(order[idx]);
+            this.svgEl?.focus();
+            this.activate(word);
+        };
+        this.onKeyDown = (e) => {
+            const order = this.navOrder();
+            if (order.length === 0)
+                return;
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                if (this.focusedIndex !== null)
+                    this.activate(order[this.focusedIndex]);
+                return;
+            }
+            if (!NAV_KEYS.has(e.key))
+                return;
+            e.preventDefault();
+            if (this.focusedIndex === null) {
+                this.focusedIndex = 0;
+                this.announce(order[0]);
+                return;
+            }
+            let next = this.focusedIndex;
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown')
+                next = Math.min(order.length - 1, this.focusedIndex + 1);
+            else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp')
+                next = Math.max(0, this.focusedIndex - 1);
+            else if (e.key === 'Home')
+                next = 0;
+            else if (e.key === 'End')
+                next = order.length - 1;
+            this.focusedIndex = next;
+            this.announce(order[next]);
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles, srOnly]; }
+    fontFamily() {
+        return getComputedStyle(this).getPropertyValue('--lyra-font').trim() || 'sans-serif';
+    }
+    paletteColors() {
+        if (this.palette?.length)
+            return this.palette;
+        const cs = getComputedStyle(this);
+        const colors = [];
+        for (let i = 0; i < PALETTE_SIZE; i++) {
+            colors.push(cs.getPropertyValue(`--lyra-word-cloud-color-${i + 1}`).trim() || FALLBACK_PALETTE[i]);
+        }
+        return colors;
+    }
+    /** Stable keyboard tab order -- the order words were declared in `words`,
+     *  independent of the weight-sorted placement order. */
+    navOrder() {
+        return [...this.cachedLayout.placed].sort((a, b) => a.originalIndex - b.originalIndex);
+    }
+    willUpdate(changed) {
+        if (changed.has('words') ||
+            changed.has('minFontSize') ||
+            changed.has('maxFontSize') ||
+            changed.has('scale') ||
+            changed.has('orientations')) {
+            this.cachedLayout = layoutWordCloud(this.words, {
+                minFontSize: this.minFontSize,
+                maxFontSize: this.maxFontSize,
+                scale: this.scale,
+                orientations: this.orientations,
+                measureText: this.measureText,
+            });
+            if (this.cachedLayout.skipped.length > 0)
+                warnSkippedWords(this.cachedLayout.skipped.length);
+            // The previous focus cursor may no longer address a real word once the
+            // data changes out from under it.
+            this.focusedIndex = null;
+            this.liveText = '';
+        }
+        this.setAttribute('role', 'group');
+        this.setAttribute('aria-label', `Word cloud of ${this.words.length} word${this.words.length === 1 ? '' : 's'}`);
+    }
+    activate(word) {
+        this.emit('lyra-word-click', { text: word.text, weight: word.weight, group: word.group });
+    }
+    announce(word) {
+        this.liveText = `${word.text}, ${word.weight}`;
+    }
+    /** Axis-aligned focus-ring rect for `w`, already accounting for its rotation. */
+    focusRingRect(w) {
+        const boxW = w.rotated ? w.height : w.width;
+        const boxH = w.rotated ? w.width : w.height;
+        return {
+            x: w.x - boxW / 2 - FOCUS_RING_PAD,
+            y: w.y - boxH / 2 - FOCUS_RING_PAD,
+            width: boxW + 2 * FOCUS_RING_PAD,
+            height: boxH + 2 * FOCUS_RING_PAD,
+        };
+    }
+    render() {
+        const layout = this.cachedLayout;
+        if (layout.placed.length === 0) {
+            return html `<div part="base"><div part="empty">No data</div></div>`;
+        }
+        const colors = this.paletteColors();
+        const groupColor = new Map();
+        const colorFor = (word) => {
+            if (word.color)
+                return word.color;
+            if (word.group) {
+                if (!groupColor.has(word.group))
+                    groupColor.set(word.group, colors[groupColor.size % colors.length]);
+                return groupColor.get(word.group);
+            }
+            return colors[word.originalIndex % colors.length];
+        };
+        const order = this.navOrder();
+        const focused = this.focusedIndex !== null ? order[this.focusedIndex] : undefined;
+        const ring = focused ? this.focusRingRect(focused) : undefined;
+        return html `
+      <div part="base">
+        <svg part="svg" tabindex="0" viewBox="0 0 ${layout.width} ${layout.height}" @keydown=${this.onKeyDown}>
+          ${layout.placed.map((w) => svg `<text
+              part="word"
+              x=${w.x}
+              y=${w.y}
+              font-size=${w.fontSize}
+              fill=${colorFor(w)}
+              transform=${w.rotated ? `rotate(-90, ${w.x}, ${w.y})` : nothing}
+              @click=${() => this.onWordClick(w)}
+            >${w.text}</text>`)}
+          ${ring
+            ? svg `<rect part="focus-ring" x=${ring.x} y=${ring.y} width=${ring.width} height=${ring.height}></rect>`
+            : ''}
+        </svg>
+        <div part="live-region" class="sr-only" role="status" aria-live="polite">${this.liveText}</div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ attribute: false })
+], LyraWordCloud.prototype, "words", void 0);
+__decorate([
+    property({ attribute: 'min-font-size', type: Number })
+], LyraWordCloud.prototype, "minFontSize", void 0);
+__decorate([
+    property({ attribute: 'max-font-size', type: Number })
+], LyraWordCloud.prototype, "maxFontSize", void 0);
+__decorate([
+    property()
+], LyraWordCloud.prototype, "scale", void 0);
+__decorate([
+    property()
+], LyraWordCloud.prototype, "orientations", void 0);
+__decorate([
+    property({ attribute: false })
+], LyraWordCloud.prototype, "palette", void 0);
+__decorate([
+    query('[part="svg"]')
+], LyraWordCloud.prototype, "svgEl", void 0);
+__decorate([
+    state()
+], LyraWordCloud.prototype, "focusedIndex", void 0);
+__decorate([
+    state()
+], LyraWordCloud.prototype, "liveText", void 0);
+defineElement('word-cloud', LyraWordCloud);

package/dist/components/word-cloud/word-cloud.stories.d.ts

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

package/dist/components/word-cloud/word-cloud.stories.js

@@ -0,0 +1,55 @@
+import { html } from 'lit';
+const meta = {
+    title: 'WordCloud',
+    component: 'lyra-word-cloud',
+    tags: ['autodocs'],
+};
+export default meta;
+const WORDS = [
+    { text: 'JavaScript', weight: 90 },
+    { text: 'TypeScript', weight: 75 },
+    { text: 'Lit', weight: 60 },
+    { text: 'Web Components', weight: 55 },
+    { text: 'HTML', weight: 40 },
+    { text: 'CSS', weight: 38 },
+    { text: 'Shadow DOM', weight: 25 },
+    { text: 'Custom Elements', weight: 22 },
+    { text: 'Accessibility', weight: 18 },
+    { text: 'SVG', weight: 15 },
+    { text: 'Design Tokens', weight: 12 },
+    { text: 'Testing', weight: 10 },
+];
+export const Default = {
+    render: () => html `<lyra-word-cloud .words=${WORDS} style="height: 20rem"></lyra-word-cloud>`,
+};
+export const SqrtScale = {
+    render: () => html `<lyra-word-cloud .words=${WORDS} scale="sqrt" style="height: 20rem"></lyra-word-cloud>`,
+};
+export const MixedOrientation = {
+    render: () => html `<lyra-word-cloud .words=${WORDS} orientations="mixed" style="height: 20rem"></lyra-word-cloud>`,
+};
+export const GroupedColors = {
+    render: () => html `<lyra-word-cloud
+      style="height: 20rem"
+      .words=${[
+        { text: 'React', weight: 80, group: 'framework' },
+        { text: 'Vue', weight: 60, group: 'framework' },
+        { text: 'Svelte', weight: 40, group: 'framework' },
+        { text: 'Jest', weight: 55, group: 'testing' },
+        { text: 'Playwright', weight: 45, group: 'testing' },
+        { text: 'Vitest', weight: 30, group: 'testing' },
+        { text: 'Vite', weight: 50, group: 'tooling' },
+        { text: 'esbuild', weight: 20, group: 'tooling' },
+    ]}
+    ></lyra-word-cloud>`,
+};
+export const CustomPalette = {
+    render: () => html `<lyra-word-cloud
+      style="height: 20rem"
+      .words=${WORDS}
+      .palette=${['#e63946', '#f1a208', '#2a9d8f', '#264653']}
+    ></lyra-word-cloud>`,
+};
+export const Empty = {
+    render: () => html `<lyra-word-cloud style="height: 10rem"></lyra-word-cloud>`,
+};

package/dist/components/word-cloud/word-cloud.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/word-cloud/word-cloud.styles.js

@@ -0,0 +1,54 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    /* Categorical palette for words with no explicit color/group, cycled by
+       index (and reused per-group once a group's first color is assigned).
+       Data-driven literals, same rationale as lyra-heatmap's
+       --lyra-heatmap-scale-lo/-hi -- exposed as retheme-able custom
+       properties instead of hardcoded in word-cloud.ts. */
+    --lyra-word-cloud-color-1: #0969da;
+    --lyra-word-cloud-color-2: #1a7f37;
+    --lyra-word-cloud-color-3: #9a6700;
+    --lyra-word-cloud-color-4: #cf222e;
+    --lyra-word-cloud-color-5: #8250df;
+    --lyra-word-cloud-color-6: #bf3989;
+    --lyra-word-cloud-color-7: #0a7d91;
+    --lyra-word-cloud-color-8: #57606a;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lyra-space-xs);
+  }
+  svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+  svg:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='word'] {
+    cursor: pointer;
+    font-family: var(--lyra-font);
+    font-weight: 600;
+    text-anchor: middle;
+    dominant-baseline: middle;
+    transition: opacity var(--lyra-transition-fast);
+  }
+  [part='word']:hover {
+    opacity: 0.75;
+  }
+  [part='focus-ring'] {
+    fill: none;
+    stroke: var(--lyra-focus-ring-color);
+    stroke-width: 2px;
+    pointer-events: none;
+  }
+  [part='empty'] {
+    color: var(--lyra-color-text-quiet);
+    font-size: 0.875rem;
+  }
+`;

package/dist/internal/a11y.js

@@ -1,7 +1,8 @@
 import { css } from 'lit';
+import { tag } from './prefix.js';
 let counter = 0;
 /** Monotonic unique id, scoped by a short label (e.g. `nextId('listbox')`). */
-export const nextId = (scope) => `lyra-${scope}-${++counter}`;
+export const nextId = (scope) => `${tag(scope)}-${++counter}`;
 /** Visually-hidden-but-screen-reader-available helper class. */
 export const srOnly = css `
   .sr-only {

package/dist/internal/rtl.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Whether `el` resolves to RTL text direction. Logical CSS properties
+ * (`inset-inline-start`, etc.) already flip visual layout for free, but
+ * pointer/keyboard math that reasons about physical left/right (drag ratios,
+ * arrow-key direction) has to consult this explicitly to match.
+ */
+export declare function isRtl(el: Element): boolean;

package/dist/internal/rtl.js

@@ -0,0 +1,9 @@
+/**
+ * Whether `el` resolves to RTL text direction. Logical CSS properties
+ * (`inset-inline-start`, etc.) already flip visual layout for free, but
+ * pointer/keyboard math that reasons about physical left/right (drag ratios,
+ * arrow-key direction) has to consult this explicitly to match.
+ */
+export function isRtl(el) {
+    return getComputedStyle(el).direction === 'rtl';
+}

package/dist/lyra.d.ts

@@ -3,6 +3,7 @@ import './components/toast/toast.js';
 import './components/toast/toast-item.js';
 import './components/combobox/combobox.js';
 import './components/combobox/option.js';
+import './components/select/select.js';
 import './components/date-picker/date-picker.js';
 import './components/date-picker/date-input.js';
 import './components/flag/flag.js';
@@ -20,6 +21,7 @@ import './components/graph/graph.js';
 import './components/tree/tree.js';
 import './components/tree/tree-node.js';
 import './components/chart/chart.js';
+import './components/chart/lite-chart.js';
 import './components/chart/bar-chart.js';
 import './components/chart/line-chart.js';
 import './components/chart/pie-chart.js';
@@ -33,6 +35,7 @@ import './components/chart/histogram.js';
 import './components/map/map.js';
 import './components/file-input/file-input.js';
 import './components/widget/widget.js';
+import './components/word-cloud/word-cloud.js';
 export { LyraSparkline } from './components/sparkline/sparkline.js';
 export { LyraToast } from './components/toast/toast.js';
 export type { ToastPlacement, ToastCreateOptions } from './components/toast/toast.js';
@@ -43,6 +46,7 @@ export type { ToastOptions, ToastHandle } from './components/toast/toaster.js';
 export { LyraCombobox } from './components/combobox/combobox.js';
 export type { OptionFilter } from './components/combobox/combobox.js';
 export { LyraOption } from './components/combobox/option.js';
+export { LyraSelect } from './components/select/select.js';
 export { LyraDatePicker } from './components/date-picker/date-picker.js';
 export type { DateRange } from './components/date-picker/date-picker.js';
 export { LyraDateInput } from './components/date-picker/date-input.js';
@@ -52,7 +56,7 @@ export { LyraEmpty } from './components/empty/empty.js';
 export { LyraSkeleton } from './components/skeleton/skeleton.js';
 export type { SkeletonVariant, SkeletonEffect } from './components/skeleton/skeleton.js';
 export { LyraStat } from './components/stat/stat.js';
-export type { StatVariant } from './components/stat/stat.js';
+export type { StatVariant, StatGoodDirection } from './components/stat/stat.js';
 export { LyraTable } from './components/table/table.js';
 export type { TableColumn } from './components/table/table.js';
 export { LyraGauge } from './components/gauge/gauge.js';
@@ -73,6 +77,8 @@ export type { TreeItem } from './components/tree/tree.js';
 export { LyraTreeNode } from './components/tree/tree-node.js';
 export { LyraChart } from './components/chart/chart.js';
 export type { Series, LyraChartType } from './components/chart/chart.js';
+export { LyraLiteChart } from './components/chart/lite-chart.js';
+export type { LiteSeries, LyraLiteChartType } from './components/chart/lite-chart.js';
 export { LyraBarChart } from './components/chart/bar-chart.js';
 export { LyraLineChart } from './components/chart/line-chart.js';
 export { LyraPieChart } from './components/chart/pie-chart.js';
@@ -90,6 +96,8 @@ export { LyraMap } from './components/map/map.js';
 export type { LegendEntry, ChoroplethLayer } from './components/map/map.js';
 export { LyraFileInput } from './components/file-input/file-input.js';
 export { LyraWidget } from './components/widget/widget.js';
+export { LyraWordCloud } from './components/word-cloud/word-cloud.js';
+export type { WordCloudWord } from './components/word-cloud/word-cloud.js';
 export type { MapMarker } from './components/map/map.js';
 export type { ComboboxSource, ComboboxSourceRow } from './components/combobox/combobox.js';
 export type { CalendarDay } from './components/heatmap/calendar-grid.js';

package/dist/lyra.js

@@ -4,6 +4,7 @@ import './components/toast/toast.js';
 import './components/toast/toast-item.js';
 import './components/combobox/combobox.js';
 import './components/combobox/option.js';
+import './components/select/select.js';
 import './components/date-picker/date-picker.js';
 import './components/date-picker/date-input.js';
 import './components/flag/flag.js';
@@ -21,6 +22,7 @@ import './components/graph/graph.js';
 import './components/tree/tree.js';
 import './components/tree/tree-node.js';
 import './components/chart/chart.js';
+import './components/chart/lite-chart.js';
 import './components/chart/bar-chart.js';
 import './components/chart/line-chart.js';
 import './components/chart/pie-chart.js';
@@ -34,6 +36,7 @@ import './components/chart/histogram.js';
 import './components/map/map.js';
 import './components/file-input/file-input.js';
 import './components/widget/widget.js';
+import './components/word-cloud/word-cloud.js';
 // …and the barrel re-exports classes, helpers, and types.
 export { LyraSparkline } from './components/sparkline/sparkline.js';
 export { LyraToast } from './components/toast/toast.js';
@@ -41,6 +44,7 @@ export { LyraToastItem } from './components/toast/toast-item.js';
 export { toast } from './components/toast/toaster.js';
 export { LyraCombobox } from './components/combobox/combobox.js';
 export { LyraOption } from './components/combobox/option.js';
+export { LyraSelect } from './components/select/select.js';
 export { LyraDatePicker } from './components/date-picker/date-picker.js';
 export { LyraDateInput } from './components/date-picker/date-input.js';
 export { LyraFlag } from './components/flag/flag.js';
@@ -61,6 +65,7 @@ export { LyraGraph } from './components/graph/graph.js';
 export { LyraTree } from './components/tree/tree.js';
 export { LyraTreeNode } from './components/tree/tree-node.js';
 export { LyraChart } from './components/chart/chart.js';
+export { LyraLiteChart } from './components/chart/lite-chart.js';
 export { LyraBarChart } from './components/chart/bar-chart.js';
 export { LyraLineChart } from './components/chart/line-chart.js';
 export { LyraPieChart } from './components/chart/pie-chart.js';
@@ -75,6 +80,7 @@ export { binValues } from './components/chart/histogram-bin.js';
 export { LyraMap } from './components/map/map.js';
 export { LyraFileInput } from './components/file-input/file-input.js';
 export { LyraWidget } from './components/widget/widget.js';
+export { LyraWordCloud } from './components/word-cloud/word-cloud.js';
 export { LyraElement } from './internal/lyra-element.js';
 export { FormAssociated } from './internal/form-associated.js';
 export { LYRA_PREFIX, tag, defineElement } from './internal/prefix.js';