@xtyle/core 0.5.0

package/dist/elements/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/elements/code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAYjE;;;;;;;;;;;;GAYG;AACH,qBAAa,SAAU,SAAQ,YAAY;IAC1C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,OAAO,CAAC,QAAQ,CAEb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,aAAa,CAAqB;IAC1C,OAAO,CAAC,SAAS,CAA4C;IAE7D,mGAAmG;IACnG,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAI3C,mGAAmG;IACnG,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI7E,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAExC;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,oFAAoF;IACpF,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IAED,mFAAmF;IACnF,IAAI,WAAW,IAAI,OAAO,CAEzB;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAE7B;IAED,gGAAgG;IAChG,IAAI,SAAS,IAAI,MAAM,GAAG,IAAI,CAE7B;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAE7C;IAED,wFAAwF;IACxF,IAAI,OAAO,IAAI,MAAM,GAAG,IAAI,CAE3B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAE3C;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,MAAM,GASjB;IAED;;;;;;OAMG;IACH,OAAO,CAAC,SAAS;IAYjB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;IAkBjC,gGAAgG;YAClF,UAAU;IAoBxB;;;;;OAKG;IACH,OAAO,CAAC,YAAY;IAUpB;;;;;OAKG;IACH,OAAO,CAAC,OAAO;IAYf,qGAAqG;IACrG,OAAO,CAAC,WAAW;CAInB"}

package/dist/elements/code.js

@@ -0,0 +1,212 @@
+import { XtyleElement, define } from "./base.js";
+import { codeHostCss, plainCodeHtml, splitCodeLines, codeGutterWidth, parseLineSpec } from "../markup/index.js";
+import { highlight, registerLanguage as registerGrammar, resolveLanguage, warmLanguages, } from "./code-highlight.js";
+import { FragmentHost } from "./fragment-host.js";
+import { wireHostControls } from "./host-controls.js";
+import { manifest, fragmentSources } from "./fragments/code/source.generated.js";
+/**
+ * A read-only, syntax-highlighted code block that colors itself entirely from the
+ * `--code-*` token family, so it re-themes live as the theme changes. The source is
+ * the element's text content (or a `code` attribute); the language comes from `lang`
+ * (aliases resolved, `ts` → `typescript`). At runtime the block paints immediately as
+ * plain-but-themed text, then recolors in place once the grammar resolves — same
+ * characters, spans just gain color, so there is no layout shift. An unknown language
+ * stays at the plain-but-themed render rather than erroring.
+ *
+ * Grammar loading is fully lazy and per-language; `preload` warms this block's grammar
+ * eagerly (and the binding emits a `modulepreload` hint). The `preload` attribute and
+ * the static `warm()` share one internal warm path.
+ */
+export class XtyleCode extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "code", {
+        applyIntent: () => { },
+    });
+    static get observedAttributes() {
+        return ["language", "code", "preload", "copy", "line-numbers", "highlight", "caption"];
+    }
+    renderToken = 0;
+    wiredControls = new Set();
+    copyTimer;
+    /** Page-level warm: eagerly load these languages' grammars now. Shares the `preload` warm path. */
+    static warm(langs) {
+        return warmLanguages(langs);
+    }
+    /** Register a grammar Prism does not ship, making `name` resolvable like any built-in language. */
+    static registerLanguage(name, grammar) {
+        registerGrammar(name, grammar);
+    }
+    get lang() {
+        return this.getAttribute("language") ?? "";
+    }
+    set lang(value) {
+        this.reflectString("language", value);
+    }
+    get code() {
+        return this.getAttribute("code");
+    }
+    set code(value) {
+        this.reflectString("code", value);
+    }
+    get preload() {
+        return this.hasAttribute("preload");
+    }
+    set preload(value) {
+        this.reflectBoolean("preload", value);
+    }
+    /** The copy-to-clipboard button is on by default; set `copy="false"` to drop it. */
+    get copy() {
+        return this.getAttribute("copy") !== "false";
+    }
+    set copy(value) {
+        if (value)
+            this.removeAttribute("copy");
+        else
+            this.setAttribute("copy", "false");
+    }
+    /** Number each line in a counter gutter that stays put under horizontal scroll. */
+    get lineNumbers() {
+        return this.hasAttribute("line-numbers");
+    }
+    set lineNumbers(value) {
+        this.reflectBoolean("line-numbers", value);
+    }
+    /** Tint chosen lines with `--code-line-highlight`; a 1-based spec like `2`, `2,4`, or `4-6`. */
+    get highlight() {
+        return this.getAttribute("highlight");
+    }
+    set highlight(value) {
+        this.reflectString("highlight", value);
+    }
+    /** A caption header above the block, e.g. a filename; left empty, no header renders. */
+    get caption() {
+        return this.getAttribute("caption");
+    }
+    set caption(value) {
+        this.reflectString("caption", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get source() {
+        const fromAttr = this.code;
+        if (fromAttr !== null)
+            return fromAttr;
+        // light DOM: the element's own `textContent` is now the rendered chrome, so read the raw
+        // source the host captured out of the light DOM before the scaffold painted (untrimmed, to
+        // preserve the text-content API exactly); fall back to `textContent` before the first paint.
+        const captured = this.fragment.slottedNodes("");
+        if (captured.length)
+            return captured.map((node) => node.textContent ?? "").join("");
+        return this.textContent ?? "";
+    }
+    /**
+     * Wrap each line into rows when numbering or highlighting is on — tagging the highlighted
+     * ones and, when numbering, sizing the gutter to the block's largest line number so it never
+     * clips or floats; otherwise pass the source through and drop the gutter override. Both the
+     * wrapped markup and the line count come from one `splitCodeLines` call, so the gutter width
+     * can never drift from the rows it labels.
+     */
+    withLines(html) {
+        const spec = this.highlight ? parseLineSpec(this.highlight) : undefined;
+        if (!this.lineNumbers && !spec) {
+            this.style.removeProperty("--xtyle-code-gutter");
+            return html;
+        }
+        const split = splitCodeLines(html, spec);
+        if (this.lineNumbers)
+            this.style.setProperty("--xtyle-code-gutter", codeGutterWidth(split.lines));
+        else
+            this.style.removeProperty("--xtyle-code-gutter");
+        return split.html;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(codeHostCss);
+        const language = resolveLanguage(this.lang);
+        const html = this.withLines(plainCodeHtml(this.source));
+        this.seedScaffold(html, language);
+        this.seedCaption();
+        this.fragment.update({ html, language, caption: this.caption });
+        if (this.preload && this.lang)
+            void warmLanguages([this.lang]);
+        this.recolor();
+        wireHostControls(this.root, manifest, { "copy-source": { enabled: this.copy, run: () => this.copySource() } }, this.wiredControls);
+    }
+    /** Write the raw source to the clipboard and flash a `Copied` state, reverting after a beat. */
+    async copySource() {
+        const button = this.root.querySelector("[data-copy]");
+        const label = this.root.querySelector("[data-copy-label]");
+        if (!button)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.source);
+        }
+        catch {
+            return;
+        }
+        button.dataset.copied = "";
+        button.setAttribute("aria-label", "Copied");
+        if (label)
+            label.textContent = "Copied";
+        if (this.copyTimer)
+            clearTimeout(this.copyTimer);
+        this.copyTimer = setTimeout(() => {
+            delete button.dataset.copied;
+            button.setAttribute("aria-label", "Copy code");
+            if (label)
+                label.textContent = "Copy";
+        }, 2000);
+    }
+    /**
+     * Seed the freshly-painted scaffold with themed plain-text source synchronously, so a
+     * client-only (no-DSD) first paint shows fully-populated source immediately rather than
+     * an empty box until the async fragment runtime warms and the mount hook fills it. The
+     * async `update` then upgrades an already-populated block.
+     */
+    seedScaffold(html, language) {
+        const code = this.root.querySelector("[data-code]");
+        if (!(code instanceof HTMLElement) || code.firstChild)
+            return;
+        const languageClass = `language-${language ?? "none"}`;
+        code.className = languageClass;
+        code.innerHTML = html;
+        const pre = this.root.querySelector("[data-root]");
+        if (pre instanceof HTMLElement)
+            pre.className = `xtyle-code ${languageClass}`;
+    }
+    /**
+     * Paint the highlighted source once its grammar resolves. The result is driven back
+     * through the same fragment `update` as the plain first paint — so it becomes the
+     * fill's latest applied state and a deferred first-load paint cannot wipe it — rather
+     * than written straight to the DOM where the two paths would race.
+     */
+    recolor() {
+        const lang = this.lang;
+        if (!resolveLanguage(lang))
+            return;
+        const source = this.source;
+        const token = ++this.renderToken;
+        void highlight(source, lang).then((result) => {
+            if (token !== this.renderToken)
+                return;
+            if (result.language === null)
+                return;
+            this.fragment.update({ html: this.withLines(result.html), language: result.language, caption: this.caption });
+        });
+    }
+    /** Fill the caption header synchronously on first paint, before the async fragment runtime warms. */
+    seedCaption() {
+        const caption = this.root.querySelector("[data-caption]");
+        if (caption instanceof HTMLElement)
+            caption.textContent = this.caption ?? "";
+    }
+}
+define("xtyle-code", XtyleCode);
+//# sourceMappingURL=code.js.map

package/dist/elements/code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.js","sourceRoot":"","sources":["../../src/elements/code.ts"],"names":[],"mappings":"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"}

package/dist/elements/color-picker.d.ts

@@ -0,0 +1,90 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import { type ChannelModel, type ColorFormat, type HarmonyScheme } from "../index.js";
+declare const SNAP_TARGETS: readonly ["web-safe", "named"];
+type SnapTarget = (typeof SNAP_TARGETS)[number];
+export declare class XtyleColorPicker extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static formAssociated: boolean;
+    private internals;
+    private hsv;
+    private alpha;
+    private planeMaxC;
+    private lastShape;
+    private needsWire;
+    private fragment;
+    static get observedAttributes(): string[];
+    constructor();
+    /** The author-configurable set of readout models the format button cycles. Defaults to all. */
+    get modes(): ColorFormat[];
+    get channelModel(): ChannelModel | null;
+    get snapTargets(): SnapTarget[];
+    /** A presence-based boolean attribute, off only when explicitly `"false"`/`"none"` (so `name="true"` from a binding still reads on). */
+    private boolAttr;
+    /** Whether the OKLCH perceptual plane (lightness × chroma at the current hue) is shown. */
+    get planeEnabled(): boolean;
+    /** Whether the picker collapses to a swatch button that opens the full UI in a popover. */
+    get triggerEnabled(): boolean;
+    get format(): ColorFormat;
+    set format(value: ColorFormat);
+    get swatches(): string[];
+    get contrastAgainst(): string | null;
+    /** The active harmony scheme, or null when the `harmony` attribute is unset or unknown. */
+    get harmonyScheme(): HarmonyScheme | null;
+    /** Opt-in: the alpha track and an alpha channel in the value appear only when set. */
+    get alphaEnabled(): boolean;
+    get value(): string;
+    set value(next: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private ingest;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    private syncFormatButton;
+    private cycleFormat;
+    private openEyeDropper;
+    connectedCallback(): void;
+    private syncForm;
+    private emit;
+    private setColor;
+    private patchHsv;
+    private setAlpha;
+    private currentAlpha;
+    private commitChannels;
+    private applySnap;
+    private oklchChannels;
+    /** The widest in-gamut chroma at a hue, with headroom, so the plane's chroma axis fills the field. */
+    private planeChromaAxis;
+    /** The canvas is its own hue cache (its `dataset.hue`), so the pixels only repaint when the hue slice moves. */
+    private renderPlane;
+    private setFromPlane;
+    private dragPlane;
+    private onPlaneKeydown;
+    private el;
+    /** In-place visual update — keeps focus on the handles (no innerHTML rebuild). */
+    private paint;
+    private fractionFrom;
+    private dragTrack;
+    private dragArea;
+    private onSvKeydown;
+    private onHueKeydown;
+    private onAlphaKeydown;
+    private onValueCommit;
+    protected render(): void;
+    /** Wire the live-DOM interactions the fragment scaffold can't express as delegated handlers —
+     * pointer drags (need `getBoundingClientRect` / `setPointerCapture`), keyboard nav that moves
+     * focus onto handles, the popover positioning, the eyedropper, and channel/value commits. Runs
+     * only when the scaffold is freshly built (initial mount or a shape remount), so listeners never stack. */
+    private wireEvents;
+    private warnIfUnnamed;
+    protected template(): string;
+    private currentHex;
+    /** The color-math-derived inputs the fragment can't compute in its sandbox: the host resolves
+     * swatch hexes, channel slider values, and the named-snap label, and passes them as bindings. */
+    private get bindings();
+    /** Structural shape ops can't patch incrementally — any change here rebuilds the scaffold via the
+     * fragment host (a remount). Live color edits (the HSV state) are painted in place by `paint()`. */
+    private shapeSignature;
+    private applyIntent;
+    private elementId;
+}
+export {};
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/elements/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/elements/color-picker.ts"],"names":[],"mappings":"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"}