@xtyle/core 0.5.0

package/dist/manifest/code.manifest.js

@@ -0,0 +1,269 @@
+const htmlExample = `<xtyle-code lang="ts">const greet = (name: string) =&gt; \`hi \${name}\`;</xtyle-code>
+
+<xtyle-code lang="rust" preload>fn main() { println!("hello"); }</xtyle-code>`;
+const svelteExample = `<script lang="ts">
+	import { Code } from "@xtyle/svelte";
+</script>
+
+<Code lang="ts">{\`const greet = (name: string) => \\\`hi \${name}\\\`;\`}</Code>`;
+const astroExample = `---
+import Code from "@xtyle/astro/Code.astro";
+---
+
+<Code lang="ts" code={\`const greet = (name: string) => \\\`hi \${name}\\\`;\`} />`;
+const htmlWrapExample = `<xtyle-code lang="ts" wrap>const message = "a long line that soft-wraps in a narrow column instead of scrolling sideways";</xtyle-code>`;
+const svelteWrapExample = `<script lang="ts">
+	import { Code } from "@xtyle/svelte";
+</script>
+
+<Code lang="ts" wrap>{\`const message = "a long line that soft-wraps instead of scrolling";\`}</Code>`;
+const astroWrapExample = `---
+import Code from "@xtyle/astro/Code.astro";
+---
+
+<Code lang="ts" wrap code={\`const message = "a long line that soft-wraps instead of scrolling";\`} />`;
+const htmlLineNumbersExample = `<xtyle-code lang="ts" line-numbers>function add(a: number, b: number) {
+	return a + b;
+}
+
+const sum = add(2, 3);</xtyle-code>`;
+const svelteLineNumbersExample = `<script lang="ts">
+	import { Code } from "@xtyle/svelte";
+</script>
+
+<Code lang="ts" lineNumbers>{\`function add(a, b) {
+	return a + b;
+}\`}</Code>`;
+const astroLineNumbersExample = `---
+import Code from "@xtyle/astro/Code.astro";
+---
+
+<Code lang="ts" lineNumbers code={\`function add(a, b) {
+	return a + b;
+}\`} />`;
+const htmlHighlightExample = `<xtyle-code lang="ts" line-numbers highlight="2,4">function total(items) {
+	let sum = 0;
+	for (const n of items) sum += n;
+	return sum;
+}</xtyle-code>`;
+const svelteHighlightExample = `<script lang="ts">
+	import { Code } from "@xtyle/svelte";
+</script>
+
+<Code lang="ts" lineNumbers highlight="2,4">{\`function total(items) {
+	let sum = 0;
+	for (const n of items) sum += n;
+	return sum;
+}\`}</Code>`;
+const astroHighlightExample = `---
+import Code from "@xtyle/astro/Code.astro";
+---
+
+<Code lang="ts" lineNumbers highlight="2,4" code={\`function total(items) {
+	let sum = 0;
+	for (const n of items) sum += n;
+	return sum;
+}\`} />`;
+const htmlCaptionExample = `<xtyle-code lang="ts" caption="theme.ts">export const accent = "#5b8cff";</xtyle-code>`;
+const svelteCaptionExample = `<script lang="ts">
+	import { Code } from "@xtyle/svelte";
+</script>
+
+<Code lang="ts" caption="theme.ts">{\`export const accent = "#5b8cff";\`}</Code>`;
+const astroCaptionExample = `---
+import Code from "@xtyle/astro/Code.astro";
+---
+
+<Code lang="ts" caption="theme.ts" code={\`export const accent = "#5b8cff";\`} />`;
+export const codeManifest = {
+    id: "code",
+    name: "Code",
+    category: "content",
+    summary: "A read-only, syntax-highlighted code block themed entirely from the code-token family.",
+    description: "Code is a turnkey, read-only code block with the tokenizer built in; it's the first component to read the `--code-*` family. It tokenizes with Prism, whose output is class-based, so the block re-themes live the moment the theme changes: the colors are just cascading CSS variables, never baked inline. The `lang` prop names the language with aliases resolved (`ts` → `typescript`), and the source is the element's text content (or, for Astro, a `code` prop). Grammar loading is fully lazy and per-language. A page with no code block loads nothing; a page with a few languages loads Prism core once plus only those grammar chunks, walking each grammar's dependencies first. At runtime the block paints immediately as plain-but-themed text and recolors in place once the grammar resolves, so there is no flash and no layout shift; the Astro binding tokenizes at build and ships pre-colored with zero browser JS. `preload` warms a block's grammar eagerly to kill even the minor recolor flash, sharing one warm path with the page-level `XtyleCode.warm()` static. An unknown language falls back to plain-but-themed text rather than erroring.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "pre",
+            description: "The block surface: the scroll container that carries the code background and padding.",
+            selector: ".xtyle-code",
+            tokens: ["--code-bg", "--code-fg", "--radius-md", "--font-mono", "--text-sm", "--space-4"],
+        },
+        {
+            name: "code",
+            description: "The tokenized source: `.token.*` spans colored by the per-scope code tokens.",
+            selector: ".xtyle-code code",
+            tokens: ["--code-keyword", "--code-string", "--code-comment", "--code-function"],
+        },
+        {
+            name: "caption",
+            description: "An optional header strip above the block, set via `caption` (a filename, say); reads in the mono face on a neutral surface and rounds the block's top corners into it.",
+            selector: ".xtyle-code-caption",
+            tokens: ["--neutral-bg", "--neutral-text", "--field-border", "--radius-md", "--font-mono", "--text-xs"],
+        },
+        {
+            name: "copy",
+            description: "The copy-to-clipboard button, anchored top-right; fades in on hover or focus and flashes a vivid `Copied` state on success.",
+            selector: ".xtyle-code-copy",
+            tokens: ["--neutral-bg", "--field-border", "--radius-sm", "--success-vivid"],
+        },
+        {
+            name: "line-number",
+            description: "The per-line counter gutter, shown when `line-numbers` is set; it sticks to the left edge as the code scrolls sideways and reads dimmed, like a comment.",
+            selector: ".xtyle-code-line::before",
+            tokens: ["--code-comment", "--field-border", "--code-bg", "--space-4", "--space-2"],
+        },
+        {
+            name: "line-highlight",
+            description: "A line called out by `highlight`; the whole row is tinted with `--code-line-highlight`, the low-alpha accent the algorithm derives for exactly this.",
+            selector: ".xtyle-code-line[data-line-highlight]",
+            tokens: ["--code-line-highlight"],
+        },
+    ],
+    props: [
+        {
+            name: "lang",
+            type: "string",
+            description: "The language id, with aliases resolved (`ts` → `typescript`). An unknown id falls back to plain-but-themed text.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "code",
+            type: "string",
+            description: "The source to highlight. Optional for html/svelte (the text content is used); the canonical input for Astro's build-time tokenization.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "preload",
+            type: "boolean",
+            default: "false",
+            description: "Warm this block's grammar eagerly and emit a `modulepreload` hint, killing the minor recolor flash on known code-heavy pages.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "copy",
+            type: "boolean",
+            default: "true",
+            description: "The copy-to-clipboard button. On by default; set `copy=\"false\"` to drop it. It only paints where it can work: hidden in an insecure context (no Clipboard API) and on the zero-JS Astro path.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "wrap",
+            type: "boolean",
+            default: "false",
+            description: "Soft-wrap long lines instead of scrolling them horizontally. Purely declarative; the host attribute drives a CSS rule, so it needs no JavaScript and works on the zero-JS Astro path.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "line-numbers",
+            type: "boolean",
+            default: "false",
+            description: "Number each line in a gutter that stays put while the code scrolls sideways. Tag-aware, so a token spanning lines (a block comment, a multi-line string) still numbers cleanly, and it co-operates with `wrap` (a wrapped line keeps a single number at its top). The gutter is pure derived chrome; it borrows `--code-comment` and `--field-border`, adding no tokens, and renders on the zero-JS Astro path too.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "highlight",
+            type: "string",
+            description: "Tint chosen lines with `--code-line-highlight` to call out the ones that matter: a 1-based spec like `2`, `2,4`, or `4-6`, mixable as `1,3-5,8`. Pairs with `line-numbers`, works under `wrap`, and renders on the zero-JS Astro path; it reuses a token the algorithm already derives, so it adds none.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "caption",
+            type: "string",
+            description: "A caption header above the block, typically a filename. Left empty, no header renders. It rounds the block's top corners into the strip and reads in the mono face; it reuses chrome tokens, so it adds none, and renders on the zero-JS Astro path.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The source code as text content (html/svelte). For Astro, pass the source via the `code` prop instead.",
+            bindings: ["html", "svelte"],
+        },
+    ],
+    consumedTokens: [
+        "--code-bg",
+        "--code-fg",
+        "--code-selection",
+        "--code-line-highlight",
+        "--code-comment",
+        "--code-punctuation",
+        "--code-tag",
+        "--code-number",
+        "--code-string",
+        "--code-attr",
+        "--code-operator",
+        "--code-keyword",
+        "--code-function",
+        "--code-type",
+        "--code-regexp",
+        "--code-variable",
+        "--space-4",
+        "--radius-md",
+        "--font-mono",
+        "--text-sm",
+        "--leading-normal",
+        "--space-1",
+        "--space-2",
+        "--neutral",
+        "--neutral-bg",
+        "--neutral-fg",
+        "--neutral-text",
+        "--field-border",
+        "--border-thin",
+        "--radius-sm",
+        "--font-sans",
+        "--text-xs",
+        "--duration-fast",
+        "--ease-standard",
+        "--success",
+        "--success-vivid",
+    ],
+    composition: [
+        "Set `lang` to the source's language; use an alias (`ts`, `html`, `js`) and it resolves to the canonical grammar.",
+        "On a code-heavy page, call `XtyleCode.warm([\"ts\", \"rust\"])` once at startup, or mark individual blocks `preload`, to load grammars before first paint.",
+        "For a language Prism does not ship, register it with `XtyleCode.registerLanguage(name, grammar)` and use that name as `lang`.",
+        "Reach for the Astro binding when the code is known at build time; it ships pre-colored with zero grammar bytes in the browser.",
+    ],
+    a11y: [
+        "Renders semantic `<pre><code>`, so assistive tech announces the block as preformatted code.",
+        "Coloring is presentational only: the token spans add no meaning, so the code reads identically with styles off.",
+        "The copy control is a real `<button>` with an accessible name, keyboard-operable, and reachable on touch where there is no hover; on a successful copy its name updates to `Copied` so the action is announced.",
+    ],
+    examples: [
+        {
+            id: "languages-and-preload",
+            title: "Languages and preload",
+            description: "A TypeScript block and a preloaded Rust block, both colored from the code-token family.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "soft-wrap",
+            title: "Soft-wrap long lines",
+            description: "`wrap` folds long lines into the column instead of scrolling them sideways. It's a declarative host attribute, so it needs no JavaScript and works on the static Astro path.",
+            source: { html: htmlWrapExample, svelte: svelteWrapExample, astro: astroWrapExample },
+        },
+        {
+            id: "line-numbers",
+            title: "Line numbers",
+            description: "`line-numbers` adds a counter gutter that sticks to the left edge as the code scrolls and keeps a single number per logical line even under `wrap`.",
+            source: { html: htmlLineNumbersExample, svelte: svelteLineNumbersExample, astro: astroLineNumbersExample },
+        },
+        {
+            id: "highlight-lines",
+            title: "Highlighting lines",
+            description: "`highlight` tints the lines that matter, via a 1-based spec like `2,4` or `4-6`, drawn from the `--code-line-highlight` token the algorithm already derives; it pairs with `line-numbers`.",
+            source: { html: htmlHighlightExample, svelte: svelteHighlightExample, astro: astroHighlightExample },
+        },
+        {
+            id: "caption",
+            title: "A caption header",
+            description: "`caption` adds a header strip above the block for a filename or label, rounding the top corners into it. It reuses chrome tokens and renders on the static Astro path.",
+            source: { html: htmlCaptionExample, svelte: svelteCaptionExample, astro: astroCaptionExample },
+        },
+    ],
+};
+//# sourceMappingURL=code.manifest.js.map

package/dist/manifest/code.manifest.js.map

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

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

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const colorPickerManifest: ComponentManifest;
+//# sourceMappingURL=color-picker.manifest.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/color-picker.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAwDpD,eAAO,MAAM,mBAAmB,EAAE,iBAuUjC,CAAC"}