@haiyue/ui 0.2.1 → 0.2.2

package/dist/portable/icons.js

@@ -0,0 +1,24 @@
+/** Public vector geometry. 24 × 24, 1.8 unit round strokes, no font or platform assets. */
+export const HY_ICONS = Object.freeze({
+    save: [[[4, 3], [17, 3], [21, 7], [21, 21], [3, 21], [3, 3], [4, 3]], [[7, 3], [7, 9], [17, 9], [17, 3]], [[7, 21], [7, 14], [17, 14], [17, 21]]],
+    export: [[[12, 15], [12, 3]], [[7, 8], [12, 3], [17, 8]], [[4, 14], [4, 21], [20, 21], [20, 14]]],
+    play: [[[7, 4], [20, 12], [7, 20], [7, 4]]], pause: [[[8, 4], [8, 20]], [[16, 4], [16, 20]]],
+    reset: [[[4, 9], [6, 5], [10, 3], [15, 3], [19, 6], [21, 10], [21, 14], [18, 19], [14, 21], [9, 20], [6, 17]], [[4, 3], [4, 9], [10, 9]]],
+    step: [[[5, 5], [15, 12], [5, 19], [5, 5]], [[19, 5], [19, 19]]],
+    settings: [[[19.438, 10.007], [21.848, 10.264], [21.848, 13.736], [19.438, 13.993], [18.668, 15.85], [20.192, 17.736], [17.736, 20.192], [15.85, 18.668], [13.993, 19.438], [13.736, 21.848], [10.264, 21.848], [10.007, 19.438], [8.15, 18.668], [6.264, 20.192], [3.808, 17.736], [5.332, 15.85], [4.562, 13.993], [2.152, 13.736], [2.152, 10.264], [4.562, 10.007], [5.332, 8.15], [3.808, 6.264], [6.264, 3.808], [8.15, 5.332], [10.007, 4.562], [10.264, 2.152], [13.736, 2.152], [13.993, 4.562], [15.85, 5.332], [17.736, 3.808], [20.192, 6.264], [18.668, 8.15], [19.438, 10.007]], [[15.0, 12.0], [14.942, 12.585], [14.772, 13.148], [14.494, 13.667], [14.121, 14.121], [13.667, 14.494], [13.148, 14.772], [12.585, 14.942], [12.0, 15.0], [11.415, 14.942], [10.852, 14.772], [10.333, 14.494], [9.879, 14.121], [9.506, 13.667], [9.228, 13.148], [9.058, 12.585], [9.0, 12.0], [9.058, 11.415], [9.228, 10.852], [9.506, 10.333], [9.879, 9.879], [10.333, 9.506], [10.852, 9.228], [11.415, 9.058], [12.0, 9.0], [12.585, 9.058], [13.148, 9.228], [13.667, 9.506], [14.121, 9.879], [14.494, 10.333], [14.772, 10.852], [14.942, 11.415], [15.0, 12.0]]],
+    back: [[[14, 4], [6, 12], [14, 20]], [[6, 12], [21, 12]]], chevronDown: [[[6, 9], [12, 15], [18, 9]]],
+    check: [[[4, 12], [9, 17], [20, 6]]], close: [[[6, 6], [18, 18]], [[18, 6], [6, 18]]], add: [[[12, 4], [12, 20]], [[4, 12], [20, 12]]],
+});
+for (const paths of Object.values(HY_ICONS)) {
+    for (const points of paths) {
+        for (const point of points)
+            Object.freeze(point);
+        Object.freeze(points);
+    }
+    Object.freeze(paths);
+}
+/** Safe SVG built only from the library's numeric paths. Color inherits from its host. */
+export function hyIconSvg(name) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${HY_ICONS[name].map(points => `<polyline points="${points.map(p => p.join(',')).join(' ')}"/>`).join('')}</svg>`;
+}
+//# sourceMappingURL=icons.js.map

package/dist/portable/index.d.ts

@@ -2,3 +2,6 @@ export { HYPage } from './page.js';
 export type { HYPageOptions, HYPageStatus, HYBinding } from './page.js';
 export { HY_THEME_TOKENS, hyNativeTheme, hyThemeVariables } from './theme.js';
 export type { HYThemeVariables } from './theme.js';
+export { HY_ICONS, hyIconSvg } from './icons.js';
+export { hyResponsiveGrid, hyResponsiveWorkspace } from './responsive.js';
+export type { HYResponsiveGridOptions, HYResponsiveWorkspaceOptions } from './responsive.js';

package/dist/portable/index.js

@@ -1,3 +1,5 @@
 export { HYPage } from './page.js';
 export { HY_THEME_TOKENS, hyNativeTheme, hyThemeVariables } from './theme.js';
+export { HY_ICONS, hyIconSvg } from './icons.js';
+export { hyResponsiveGrid, hyResponsiveWorkspace } from './responsive.js';
 //# sourceMappingURL=index.js.map

package/dist/portable/responsive.d.ts

@@ -0,0 +1,20 @@
+/** Platform-independent logical-pixel layout decisions. */
+export interface HYResponsiveGridOptions {
+    readonly minCardWidth?: number;
+    readonly maxColumns?: number;
+    readonly gap?: number;
+}
+export declare function hyResponsiveGrid(width: number, options?: HYResponsiveGridOptions): Readonly<{
+    columns: number;
+    gap: number;
+    cardWidth: number;
+}>;
+export interface HYResponsiveWorkspaceOptions {
+    readonly minPaneWidth?: number;
+    readonly gap?: number;
+}
+export declare function hyResponsiveWorkspace(width: number, height: number, options?: HYResponsiveWorkspaceOptions): Readonly<{
+    split: boolean;
+    gap: number;
+    referenceHeight: number;
+}>;

package/dist/portable/responsive.js

@@ -0,0 +1,15 @@
+export function hyResponsiveGrid(width, options = {}) {
+    const { minCardWidth = 260, maxColumns = 4, gap = 16 } = options;
+    if (!Number.isFinite(width) || width < 0 || !Number.isFinite(minCardWidth) || minCardWidth <= 0 || !Number.isInteger(maxColumns) || maxColumns < 1 || !Number.isFinite(gap) || gap < 0)
+        throw new RangeError('Invalid responsive grid dimensions');
+    const columns = Math.max(1, Math.min(maxColumns, Math.floor((width + gap) / (minCardWidth + gap))));
+    return Object.freeze({ columns, gap, cardWidth: Math.max(0, (width - gap * (columns - 1)) / columns) });
+}
+export function hyResponsiveWorkspace(width, height, options = {}) {
+    const { minPaneWidth = 420, gap = 16 } = options;
+    if (![width, height, gap].every(v => Number.isFinite(v) && v >= 0) || !Number.isFinite(minPaneWidth) || minPaneWidth <= 0)
+        throw new RangeError('Invalid responsive workspace dimensions');
+    const split = width >= minPaneWidth * 2 + gap && height >= 420;
+    return Object.freeze({ split, gap, referenceHeight: Math.min(280, Math.max(0, height - 120), Math.max(120, Math.round(height * .38))) });
+}
+//# sourceMappingURL=responsive.js.map

package/dist/portable/theme.d.ts

@@ -8,12 +8,17 @@ export declare const HY_THEME_TOKENS: Readonly<{
     readonly danger: "--hy-invalid-border-color";
     readonly border: "--hy-border-color";
     readonly focus: "--hy-focus-ring-color";
+    readonly selected: "--hy-selected-bg-color";
+    readonly pressed: "--hy-pressed-bg-color";
+    readonly disabled: "--hy-disabled-text-color";
+    readonly elevated: "--hy-surface-elevated-color";
+    readonly onAccent: "--hy-on-accent-color";
     readonly fontSize: "--hy-font-size";
     readonly lineHeight: "--hy-line-height";
     readonly gap: "--hy-gap";
     readonly radius: "--hy-radius";
 }>;
-export type HYThemeVariables = Readonly<Record<(typeof HY_THEME_TOKENS)[keyof typeof HY_THEME_TOKENS], string>>;
+export type HYThemeVariables = Readonly<Record<(typeof HY_THEME_TOKENS)['text' | 'muted' | 'surface' | 'input' | 'accent' | 'danger' | 'border' | 'focus' | 'fontSize' | 'lineHeight' | 'gap' | 'radius'], string> & Partial<Record<(typeof HY_THEME_TOKENS)[keyof typeof HY_THEME_TOKENS], string>> & Record<string, string>>;
 export declare function hyNativeTheme(theme: HYTheme, fontScale?: number): HYTheme;
 /** Returns data for an adapter to apply; importing it never creates a stylesheet. */
 export declare function hyThemeVariables(theme: HYTheme, fontScale?: number): HYThemeVariables;

package/dist/portable/theme.js

@@ -3,6 +3,7 @@ import { snapshot } from '../core/data.js';
 export const HY_THEME_TOKENS = Object.freeze({
     text: '--hy-text-color', muted: '--hy-secondary-text-color', surface: '--hy-surface-color', input: '--hy-input-bg-color',
     accent: '--hy-accent-color', danger: '--hy-invalid-border-color', border: '--hy-border-color', focus: '--hy-focus-ring-color',
+    selected: '--hy-selected-bg-color', pressed: '--hy-pressed-bg-color', disabled: '--hy-disabled-text-color', elevated: '--hy-surface-elevated-color', onAccent: '--hy-on-accent-color',
     fontSize: '--hy-font-size', lineHeight: '--hy-line-height', gap: '--hy-gap', radius: '--hy-radius',
 });
 export function hyNativeTheme(theme, fontScale = 1) {
@@ -10,7 +11,7 @@ export function hyNativeTheme(theme, fontScale = 1) {
     if (!theme || typeof theme !== 'object')
         bad('theme');
     for (const key of Object.keys(theme))
-        if (!['color', 'fontSize', 'lineHeight', 'gap', 'radius'].includes(key))
+        if (!['color', 'fontSize', 'lineHeight', 'gap', 'radius', 'typography'].includes(key))
             bad(key);
     if (!Number.isFinite(fontScale) || fontScale <= 0)
         bad('fontScale');
@@ -23,11 +24,29 @@ export function hyNativeTheme(theme, fontScale = 1) {
             bad(`color.${key}`);
     }
     for (const key of Object.keys(theme.color))
-        if (!['text', 'muted', 'surface', 'input', 'accent', 'danger', 'border', 'focus'].includes(key))
+        if (!['text', 'muted', 'surface', 'input', 'accent', 'danger', 'border', 'focus', 'selected', 'pressed', 'disabled', 'elevated', 'onAccent'].includes(key))
             bad(`color.${key}`);
+    for (const [key, value] of Object.entries(theme.color))
+        if (typeof value !== 'string' || !/^#[\da-f]{6}([\da-f]{2})?$/i.test(value))
+            bad(`color.${key}`);
+    const typography = {};
+    if (theme.typography !== undefined) {
+        if (!theme.typography || typeof theme.typography !== 'object' || Array.isArray(theme.typography))
+            bad('typography');
+        for (const [key, value] of Object.entries(theme.typography)) {
+            if (!['title', 'body', 'caption'].includes(key) || !value || typeof value !== 'object')
+                bad(`typography.${key}`);
+            for (const field of Object.keys(value))
+                if (!['fontSize', 'lineHeight', 'weight'].includes(field))
+                    bad(`typography.${key}.${field}`);
+            if (![value.fontSize, value.lineHeight].every(v => Number.isFinite(v) && v > 0 && Number.isFinite(v * fontScale)) || (value.weight !== undefined && !['normal', 'medium', 'bold'].includes(value.weight)))
+                bad(`typography.${key}`);
+            typography[key] = { ...value, fontSize: value.fontSize * fontScale, lineHeight: value.lineHeight * fontScale };
+        }
+    }
     if (!Number.isFinite(theme.fontSize * fontScale) || !Number.isFinite(theme.lineHeight * fontScale))
         bad('fontScale');
-    return snapshot({ color: { ...theme.color }, fontSize: theme.fontSize * fontScale, lineHeight: theme.lineHeight * fontScale, gap: theme.gap, radius: theme.radius });
+    return snapshot({ color: { ...theme.color }, fontSize: theme.fontSize * fontScale, lineHeight: theme.lineHeight * fontScale, gap: theme.gap, radius: theme.radius, ...(theme.typography ? { typography } : {}) });
 }
 /** Returns data for an adapter to apply; importing it never creates a stylesheet. */
 export function hyThemeVariables(theme, fontScale = 1) {
@@ -35,6 +54,7 @@ export function hyThemeVariables(theme, fontScale = 1) {
     return Object.freeze(Object.fromEntries([
         ...Object.entries(data.color).map(([key, value]) => [HY_THEME_TOKENS[key], value]),
         ...['fontSize', 'lineHeight', 'gap', 'radius'].map(key => [HY_THEME_TOKENS[key], `${data[key]}px`]),
+        ...Object.entries(data.typography ?? {}).flatMap(([key, value]) => [[`--hy-${key}-font-size`, `${value.fontSize}px`], [`--hy-${key}-line-height`, `${value.lineHeight}px`], [`--hy-${key}-font-weight`, value.weight === 'bold' ? '700' : value.weight === 'medium' ? '500' : '400']]),
     ]));
 }
 //# sourceMappingURL=theme.js.map

package/dist/qr-code.d.ts

@@ -0,0 +1,62 @@
+export type HYQRCodeErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H';
+export type HYQRCodeStatus = 'empty' | 'ready' | 'error';
+export interface HYQRCodeRenderDetail {
+    readonly value: string;
+    readonly version: number;
+    readonly moduleCount: number;
+    readonly errorCorrectionLevel: HYQRCodeErrorCorrectionLevel;
+}
+export interface HYQRCodeErrorDetail {
+    readonly message: string;
+}
+export interface HYQRCodeIconErrorDetail {
+    readonly src: string;
+}
+/** Local SVG QR generation with a bounded decorative image or named icon slot. */
+export declare class HYQRCode extends HTMLElement {
+    private readonly _frame;
+    private readonly _svg;
+    private readonly _background;
+    private readonly _modules;
+    private readonly _iconFrame;
+    private readonly _image;
+    private readonly _slot;
+    private readonly _message;
+    private _code;
+    private _key;
+    private _pathKey;
+    private _lastIcon;
+    private _iconReady;
+    private _state;
+    private _error;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get value(): string;
+    set value(value: string);
+    get size(): number;
+    set size(value: number);
+    get color(): string;
+    set color(value: string);
+    get backgroundColor(): string;
+    set backgroundColor(value: string);
+    /** Quiet zone in modules. At least four modules are retained. */
+    get margin(): number;
+    set margin(value: number);
+    /** Defaults to H with an icon and M otherwise. An explicit level takes precedence. */
+    get errorCorrectionLevel(): HYQRCodeErrorCorrectionLevel;
+    set errorCorrectionLevel(value: HYQRCodeErrorCorrectionLevel);
+    get icon(): string;
+    set icon(value: string);
+    /** Requested image/slot size in CSS pixels. Actual coverage is bounded for readability. */
+    get iconSize(): number;
+    set iconSize(value: number);
+    get iconMargin(): number;
+    set iconMargin(value: number);
+    get status(): HYQRCodeStatus;
+    private _hasSlotIcon;
+    private _render;
+}
+export declare function defineQRCodeComponents(): void;

package/dist/qr-code.js

@@ -0,0 +1,224 @@
+import { qrcodegen } from './internal/qrcodegen.js';
+const levels = { L: qrcodegen.QrCode.Ecc.LOW, M: qrcodegen.QrCode.Ecc.MEDIUM, Q: qrcodegen.QrCode.Ecc.QUARTILE, H: qrcodegen.QrCode.Ecc.HIGH };
+function integer(value, fallback, min, max) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, Math.floor(number))) : fallback;
+}
+/** Local SVG QR generation with a bounded decorative image or named icon slot. */
+export class HYQRCode extends HTMLElement {
+    _frame = document.createElement('div');
+    _svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    _background = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    _modules = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    _iconFrame = document.createElement('div');
+    _image = document.createElement('img');
+    _slot = document.createElement('slot');
+    _message = document.createElement('span');
+    _code = null;
+    _key = '';
+    _pathKey = '';
+    _lastIcon = '';
+    _iconReady = false;
+    _state = 'empty';
+    _error = '';
+    static get observedAttributes() {
+        return ['value', 'size', 'color', 'background-color', 'margin', 'error-correction-level', 'icon', 'icon-size', 'icon-margin', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-block; max-width: 100%; vertical-align: middle; color: var(--hy-text-color, #eef0ff); font: 12px/1.5 system-ui, sans-serif; }
+      :host([hidden]), [hidden] { display: none !important; }
+      .frame { position: relative; box-sizing: border-box; max-width: 100%; aspect-ratio: 1; }
+      svg { display: block; width: 100%; height: 100%; }
+      .icon { position: absolute; box-sizing: border-box; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; background: var(--_qr-background); border-radius: var(--hy-qr-code-icon-radius, 4px); pointer-events: none; overflow: hidden; }
+      img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
+      slot { display: contents; }
+      ::slotted([slot="icon"]) { display: block; box-sizing: border-box; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; overflow: hidden; }
+      .message { position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: 12px; text-align: center; color: var(--hy-secondary-text-color, #a9add4); background: var(--hy-surface-color, #10132f); border: 1px solid var(--hy-border-color, #343765); border-radius: var(--hy-qr-code-radius, 8px); }
+    `;
+        this._frame.className = 'frame';
+        this._frame.part.add('frame');
+        this._svg.part.add('code');
+        this._svg.setAttribute('aria-hidden', 'true');
+        this._svg.setAttribute('shape-rendering', 'crispEdges');
+        this._background.part.add('background');
+        this._modules.part.add('modules');
+        this._svg.append(this._background, this._modules);
+        this._iconFrame.className = 'icon';
+        this._iconFrame.part.add('icon');
+        this._iconFrame.setAttribute('aria-hidden', 'true');
+        this._iconFrame.inert = true;
+        this._image.alt = '';
+        this._image.draggable = false;
+        this._image.part.add('icon-image');
+        this._slot.name = 'icon';
+        this._iconFrame.append(this._slot, this._image);
+        this._message.className = 'message';
+        this._message.part.add('message');
+        this._frame.append(this._svg, this._iconFrame, this._message);
+        root.append(style, this._frame);
+        this._image.addEventListener('load', () => {
+            if (!this.isConnected || !this._image.naturalWidth)
+                return;
+            this._iconReady = true;
+            this._render();
+        });
+        this._image.addEventListener('error', () => {
+            if (!this.isConnected || !this._lastIcon)
+                return;
+            this._iconReady = false;
+            this._render();
+            this.dispatchEvent(new CustomEvent('qr-icon-error', { detail: { src: this._lastIcon }, bubbles: true, composed: true }));
+        });
+    }
+    connectedCallback() { this._slot.addEventListener('slotchange', this._render); this._render(); }
+    disconnectedCallback() {
+        this._slot.removeEventListener('slotchange', this._render);
+        this._lastIcon = '';
+        this._iconReady = false;
+        this._image.removeAttribute('src');
+    }
+    attributeChangedCallback() { this._render(); }
+    get value() { return this.getAttribute('value') ?? ''; }
+    set value(value) { this.setAttribute('value', String(value ?? '')); }
+    get size() { return integer(this.getAttribute('size'), 200, 64, 2048); }
+    set size(value) { this.setAttribute('size', String(integer(value, 200, 64, 2048))); }
+    get color() { return this.getAttribute('color') ?? ''; }
+    set color(value) { this.setAttribute('color', value); }
+    get backgroundColor() { return this.getAttribute('background-color') ?? ''; }
+    set backgroundColor(value) { this.setAttribute('background-color', value); }
+    /** Quiet zone in modules. At least four modules are retained. */
+    get margin() { return integer(this.getAttribute('margin'), 4, 4, 16); }
+    set margin(value) { this.setAttribute('margin', String(integer(value, 4, 4, 16))); }
+    /** Defaults to H with an icon and M otherwise. An explicit level takes precedence. */
+    get errorCorrectionLevel() {
+        const value = this.getAttribute('error-correction-level')?.toUpperCase();
+        if (value === 'L' || value === 'M' || value === 'Q' || value === 'H')
+            return value;
+        return this.icon || this._hasSlotIcon() ? 'H' : 'M';
+    }
+    set errorCorrectionLevel(value) { this.setAttribute('error-correction-level', value); }
+    get icon() { return this.getAttribute('icon') ?? ''; }
+    set icon(value) { this.setAttribute('icon', value ?? ''); }
+    /** Requested image/slot size in CSS pixels. Actual coverage is bounded for readability. */
+    get iconSize() { return integer(this.getAttribute('icon-size'), 32, 4, 512); }
+    set iconSize(value) { this.setAttribute('icon-size', String(integer(value, 32, 4, 512))); }
+    get iconMargin() { return integer(this.getAttribute('icon-margin'), 2, 0, 64); }
+    set iconMargin(value) { this.setAttribute('icon-margin', String(integer(value, 2, 0, 64))); }
+    get status() { return this._state; }
+    _hasSlotIcon() {
+        return this._slot.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+    }
+    _render = () => {
+        if (!this.isConnected)
+            return;
+        const value = this.value;
+        const level = this.errorCorrectionLevel;
+        const key = JSON.stringify([value, level]);
+        let generated = false;
+        let failed = false;
+        if (key !== this._key) {
+            this._key = key;
+            this._code = null;
+            this._error = '';
+            this._state = value ? 'ready' : 'empty';
+            if (value) {
+                try {
+                    const bytes = new TextEncoder().encode(value);
+                    if (bytes.length > 7089)
+                        throw new RangeError('Value too long');
+                    const segments = /^[\x00-\x7f]*$/.test(value) ? qrcodegen.QrSegment.makeSegments(value) : [qrcodegen.QrSegment.makeEci(26), qrcodegen.QrSegment.makeBytes([...bytes])];
+                    this._code = qrcodegen.QrCode.encodeSegments(segments, levels[level], 1, 40, -1, false);
+                    generated = true;
+                }
+                catch {
+                    this._state = 'error';
+                    this._error = 'This value is too long for the selected error correction level.';
+                    failed = true;
+                }
+            }
+        }
+        const background = CSS.supports('color', this.backgroundColor) ? this.backgroundColor : 'var(--hy-qr-code-background-color, #ffffff)';
+        const color = CSS.supports('color', this.color) ? this.color : 'var(--hy-qr-code-color, #111827)';
+        this._frame.style.width = `${this.size}px`;
+        this._frame.style.setProperty('--_qr-background', background);
+        this._frame.dataset.state = this._state;
+        this._svg.toggleAttribute('hidden', this._state !== 'ready');
+        this._message.hidden = this._state === 'ready';
+        this._message.textContent = this._state === 'error' ? this._error : 'Enter a value to generate a QR code.';
+        this._message.setAttribute('role', this._state === 'error' ? 'alert' : 'status');
+        if (this._state === 'ready') {
+            this._frame.setAttribute('role', 'img');
+            this._frame.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'QR code');
+        }
+        else {
+            this._frame.removeAttribute('role');
+            this._frame.removeAttribute('aria-label');
+        }
+        this._background.setAttribute('fill', background);
+        this._modules.setAttribute('fill', color);
+        const code = this._code;
+        const pathKey = `${key}:${this.margin}`;
+        if (!code) {
+            this._modules.removeAttribute('d');
+            this._pathKey = '';
+        }
+        else if (pathKey !== this._pathKey) {
+            this._pathKey = pathKey;
+            const extent = code.size + this.margin * 2;
+            this._svg.setAttribute('viewBox', `0 0 ${extent} ${extent}`);
+            this._background.setAttribute('width', String(extent));
+            this._background.setAttribute('height', String(extent));
+            const path = [];
+            for (let y = 0; y < code.size; y++) {
+                for (let x = 0; x < code.size;) {
+                    if (!code.getModule(x, y)) {
+                        x++;
+                        continue;
+                    }
+                    const start = x;
+                    while (x < code.size && code.getModule(x, y))
+                        x++;
+                    path.push(`M${start + this.margin},${y + this.margin}h${x - start}v1h-${x - start}z`);
+                }
+            }
+            this._modules.setAttribute('d', path.join(''));
+        }
+        const slotted = this._hasSlotIcon();
+        const src = slotted || !code ? '' : this.icon;
+        if (src !== this._lastIcon) {
+            this._lastIcon = src;
+            this._iconReady = false;
+            if (src)
+                this._image.src = src;
+            else
+                this._image.removeAttribute('src');
+        }
+        this._image.hidden = slotted || !src;
+        this._iconFrame.hidden = !code || (!slotted && !this._iconReady);
+        if (code) {
+            // Include the backing margin in the coverage limit; percentages also
+            // preserve that limit when max-width shrinks the rendered code.
+            const coverage = Math.min(this.iconSize + this.iconMargin * 2, this.size * code.size / (code.size + this.margin * 2) * .2);
+            const padding = Math.min(this.iconMargin, coverage / 4);
+            this._iconFrame.style.width = this._iconFrame.style.height = `${coverage / this.size * 100}%`;
+            this._iconFrame.style.padding = `${padding / this.size * 100}%`;
+        }
+        if (generated && code)
+            this.dispatchEvent(new CustomEvent('qr-render', {
+                detail: { value, version: code.version, moduleCount: code.size, errorCorrectionLevel: level }, bubbles: true, composed: true,
+            }));
+        if (failed)
+            this.dispatchEvent(new CustomEvent('qr-error', { detail: { message: this._error }, bubbles: true, composed: true }));
+    };
+}
+export function defineQRCodeComponents() {
+    if (!customElements.get('hy-qr-code'))
+        customElements.define('hy-qr-code', HYQRCode);
+}
+//# sourceMappingURL=qr-code.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiyue/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": false,
   "description": "Dependency-free Web Components for HaiyueStudio tools and products.",
   "license": "MIT",
@@ -57,6 +57,10 @@
       "types": "./dist/collapse.d.ts",
       "import": "./dist/collapse.js"
     },
+    "./carousel": {
+      "types": "./dist/carousel.d.ts",
+      "import": "./dist/carousel.js"
+    },
     "./cascader": {
       "types": "./dist/cascader.d.ts",
       "import": "./dist/cascader.js"
@@ -125,6 +129,10 @@
       "types": "./dist/table.d.ts",
       "import": "./dist/table.js"
     },
+    "./qr-code": {
+      "types": "./dist/qr-code.d.ts",
+      "import": "./dist/qr-code.js"
+    },
     "./radio": {
       "types": "./dist/radio.d.ts",
       "import": "./dist/radio.js"
@@ -149,6 +157,14 @@
       "types": "./dist/skeleton.d.ts",
       "import": "./dist/skeleton.js"
     },
+    "./modal": {
+      "types": "./dist/modal.d.ts",
+      "import": "./dist/modal.js"
+    },
+    "./masonry": {
+      "types": "./dist/masonry.d.ts",
+      "import": "./dist/masonry.js"
+    },
     "./split": {
       "types": "./dist/split.d.ts",
       "import": "./dist/split.js"
@@ -244,6 +260,7 @@
     "@playwright/test": "^1.63.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "codemirror": "^6.0.2",
+    "jsqr": "1.4.0",
     "rollup": "^4.63.4",
     "typescript": "^5.2.0"
   }