@llumi/design-system 1.0.1 → 2.0.0

package/dist/copy-button.md

@@ -0,0 +1,128 @@
+# `<llumi-copy-button>`
+
+Copy-to-clipboard icon button with animated success/error feedback.
+
+## What it is
+
+A minimal icon button that copies text to the clipboard and shows live state transitions:
+
+| State | Visual |
+|-------|--------|
+| idle | copy icon |
+| copying | spinning indicator (button disabled) |
+| copied | green ✓ icon, resets after 1 s |
+| error | red × icon, resets after 1 s |
+
+---
+
+## Usage
+
+> **Requires the base theme.** This is a light-DOM element styled by the design-system stylesheet — load `@llumi/design-system/base.css` (or `base.css`) on the page, or the button renders unstyled.
+
+```html
+<!-- 1. Register the element (auto side-effect) -->
+<script type="module">
+  import "@llumi/design-system/copy-button";
+</script>
+
+<!-- 2. Drop the tag wherever you need it -->
+<llumi-copy-button value="Text to copy"></llumi-copy-button>
+```
+
+Or with named import:
+
+```js
+import { LlumiCopyButton } from "@llumi/design-system/copy-button";
+```
+
+---
+
+## Copy source precedence
+
+The text that gets written to the clipboard is resolved from the first source that is available, in this order:
+
+1. **`getValue` (JS function property)** — highest precedence. Assign a function:
+   ```js
+   document.querySelector("llumi-copy-button").getValue = () => editor.getValue();
+   ```
+2. **`get-value` (attribute)** — a dotted path to a function on `globalThis`, resolved at click time via plain property traversal (no `eval`, no `new Function`). The component warns in the console if the path does not resolve to a function:
+   ```html
+   <llumi-copy-button get-value="myApp.getSnippet"></llumi-copy-button>
+   ```
+   ```js
+   window.myApp = { getSnippet: () => editor.getValue() };
+   ```
+3. **`value` (string attribute)** — a plain, static string:
+   ```html
+   <llumi-copy-button value="npm install @llumi/design-system"></llumi-copy-button>
+   ```
+4. **`""` (empty string)** — fallback when none of the above is set.
+
+---
+
+## Attributes and properties
+
+| Name | Type | Default | Notes |
+|------|------|---------|-------|
+| `value` | `string` attr + prop | `""` | Static text to copy. Lowest-precedence source. |
+| `title` | `string` attr + prop | `"Copy to clipboard"` | Native tooltip; mirrored to `aria-label`. |
+| `getValue` | `() => string` prop only | `undefined` | JS function property. No HTML attribute equivalent. Highest-precedence source. |
+| `get-value` | `string` attr | — | Dotted path on `globalThis` resolving to a function. Resolved at click time. |
+| `disabled` | — | — | Managed internally while copying; do not set manually. |
+
+---
+
+## Events
+
+Both events bubble and are composed.
+
+### `llumi-copy`
+
+Fires on a successful clipboard write.
+
+```ts
+element.addEventListener("llumi-copy", (e: CustomEvent<{ text: string }>) => {
+  console.log("Copied:", e.detail.text);
+});
+```
+
+### `llumi-copy-error`
+
+Fires when `navigator.clipboard.writeText` rejects (e.g. permission denied in a non-HTTPS context or missing user gesture).
+
+```ts
+element.addEventListener("llumi-copy-error", (e: CustomEvent<{ error: unknown }>) => {
+  console.error("Copy failed:", e.detail.error);
+});
+```
+
+---
+
+## Styling
+
+### Styling the button (light DOM)
+
+The component renders in **light DOM**, so the inner `<button>` is a normal,
+fully styleable element — no shadow piercing required:
+
+```css
+llumi-copy-button button {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+}
+```
+
+### CSS custom properties
+
+Each token has a sensible `oklch` fallback, so the component is usable without a design-system theme.
+
+| Token | Role | Fallback |
+|-------|------|---------|
+| `--llumi-color-success` | Border + icon colour in the copied state | `oklch(62.7% 0.194 149.214)` (green) |
+| `--llumi-color-danger` | Border + icon colour in the error state | `oklch(57.7% 0.245 27.325)` (red) |
+| `--llumi-color-surface` | Button background | `oklch(100% 0 0)` (white) |
+| `--llumi-color-border` | Button border | `oklch(92% 0.004 286.32)` (light grey) |
+| `--llumi-color-fg` | Icon colour (idle) | `oklch(21% 0.006 285.885)` (near-black) |
+| `--llumi-color-ring` | Focus-visible outline | `oklch(55.8% 0.288 302.321)` (purple) |
+| `--llumi-radius` | Button border-radius | `0.5rem` |

package/dist/copy-button.mjs

@@ -0,0 +1,161 @@
+import { html as d } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+import { property as u, customElement as h } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js";
+import { i as s } from "./icons-DBLWcA83.js";
+import { L as b } from "./llumi-element-DTeRDxao.js";
+import { defineMachine as m } from "https://cdn.jsdelivr.net/npm/yay-machine@1.5.0";
+/*! @llumi/design-system v2.0.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.0.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const p = 1e3, f = m({
+  initialState: { name: "idle" },
+  states: {
+    idle: {
+      on: {
+        COPY: { to: "copying", data: ({ event: t }) => ({ text: t.text }) }
+      }
+    },
+    copying: {
+      onEnter: ({ state: t, send: e }) => {
+        navigator.clipboard.writeText(t.text).then(() => e({ type: "COPY_SUCCESS", text: t.text })).catch((o) => e({ type: "COPY_ERROR", error: o }));
+      },
+      on: {
+        COPY_SUCCESS: { to: "copied" },
+        COPY_ERROR: { to: "error" }
+      }
+    },
+    copied: {
+      onEnter: ({ send: t }) => {
+        const e = setTimeout(() => t({ type: "DONE" }), p);
+        return () => clearTimeout(e);
+      },
+      on: {
+        DONE: { to: "idle" },
+        COPY: { to: "copying", data: ({ event: t }) => ({ text: t.text }) }
+      }
+    },
+    error: {
+      onEnter: ({ send: t }) => {
+        const e = setTimeout(() => t({ type: "DONE" }), p);
+        return () => clearTimeout(e);
+      },
+      on: {
+        DONE: { to: "idle" },
+        COPY: { to: "copying", data: ({ event: t }) => ({ text: t.text }) }
+      }
+    }
+  }
+});
+function y(t, e = globalThis) {
+  let o = e;
+  for (const r of t.split(".")) {
+    if (o == null) return;
+    o = o[r];
+  }
+  return o;
+}
+var C = Object.defineProperty, E = Object.getOwnPropertyDescriptor, c = (t, e, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? E(e, o) : e, l = t.length - 1, a; l >= 0; l--)
+    (a = t[l]) && (i = (r ? a(e, o, i) : a(i)) || i);
+  return r && i && C(e, o, i), i;
+};
+function O(t) {
+  throw new Error(`Unexpected state: ${JSON.stringify(t)}`);
+}
+let n = class extends b {
+  constructor() {
+    super(...arguments), this.value = "", this.title = "Copy to clipboard";
+  }
+  /** Light DOM so the document-level base.css button style applies. */
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.instance = f.newInstance().start(), this.unsubscribe = this.instance.subscribe(
+      ({ state: t, event: e }) => this.onTransition(t, e)
+    );
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), (t = this.unsubscribe) == null || t.call(this), this.unsubscribe = void 0, (e = this.instance) == null || e.stop(), this.instance = void 0;
+  }
+  onTransition(t, e) {
+    (e == null ? void 0 : e.type) === "COPY_SUCCESS" ? this.dispatchEvent(
+      new CustomEvent("llumi-copy", {
+        detail: { text: e.text },
+        bubbles: !0,
+        composed: !0
+      })
+    ) : (e == null ? void 0 : e.type) === "COPY_ERROR" && this.dispatchEvent(
+      new CustomEvent("llumi-copy-error", {
+        detail: { error: e.error },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.requestUpdate();
+  }
+  /**
+   * Resolve the text to copy, by precedence:
+   *   getValue() (function prop)
+   *   → get-value (attribute: dotted path to a function on globalThis, resolved at click time)
+   *   → value (string attr)
+   *   → ""
+   */
+  resolveText() {
+    if (typeof this.getValue == "function") return this.getValue();
+    const t = this.getAttribute("get-value");
+    if (t) {
+      const e = y(t);
+      if (typeof e == "function")
+        return String(e());
+      console.warn(
+        `<llumi-copy-button>: get-value="${t}" did not resolve to a function on globalThis`
+      );
+    }
+    return this.value ?? "";
+  }
+  onClick() {
+    var t;
+    (t = this.instance) == null || t.send({ type: "COPY", text: this.resolveText() });
+  }
+  viewFor(t) {
+    switch (t) {
+      case "idle":
+        return { icon: s.copy, cls: "" };
+      case "copying":
+        return { icon: s.spinner, cls: "is-working" };
+      case "copied":
+        return { icon: s.check, cls: "is-done" };
+      case "error":
+        return { icon: s.x, cls: "is-error" };
+      default:
+        return O(t);
+    }
+  }
+  render() {
+    var o;
+    const t = ((o = this.instance) == null ? void 0 : o.state.name) ?? "idle", e = this.viewFor(t);
+    return d`<button
+			type="button"
+			class=${e.cls}
+			title=${this.title}
+			aria-label=${this.title}
+			?disabled=${t === "copying"}
+			@click=${this.onClick}
+		>
+			<i>${e.icon}</i>
+		</button>`;
+  }
+};
+c([
+  u()
+], n.prototype, "value", 2);
+c([
+  u()
+], n.prototype, "title", 2);
+c([
+  u({ attribute: !1 })
+], n.prototype, "getValue", 2);
+n = c([
+  h("llumi-copy-button")
+], n);
+export {
+  n as LlumiCopyButton
+};

package/dist/download-button.md

@@ -0,0 +1,106 @@
+# `<llumi-download-button>`
+
+Download-a-string-as-a-file icon button with animated success/error feedback.
+
+## What it is
+
+A minimal icon button that downloads a string as a file and shows live state:
+
+| State | Visual |
+|-------|--------|
+| idle | download icon |
+| downloading | spinning indicator (button disabled) |
+| downloaded | green ✓ icon, resets after 1 s |
+| error | red × icon, resets after 1 s |
+
+---
+
+## Usage
+
+> **Requires the base theme.** This is a light-DOM element styled by the design-system stylesheet — load `@llumi/design-system/base.css` (or `base.css`) on the page, or the button renders unstyled.
+
+```html
+<script type="module">
+  import "@llumi/design-system/download-button";
+</script>
+
+<llumi-download-button filename="data.json" mime-type="application/json"></llumi-download-button>
+```
+
+Set the content via the `getValue` function property (Lit binding `.getValue=${…}`,
+or assign it in JS):
+
+```js
+const btn = document.querySelector("llumi-download-button");
+btn.getValue = () => JSON.stringify(state, null, 2);
+```
+
+---
+
+## Attributes and properties
+
+| Name | Type | Default | Notes |
+|------|------|---------|-------|
+| `getValue` | `() => string` prop only | `undefined` | Returns the content to download. Called at click time. No HTML attribute. |
+| `filename` | `string` attr + prop | `""` | **Required.** A click with no filename logs a `console.warn` and does nothing. |
+| `mime-type` | `string` attr (prop `mimeType`) | `"text/plain"` | MIME type passed to the `Blob`. |
+| `title` | `string` attr + prop | `"Download file"` | Native tooltip; mirrored to `aria-label`. |
+| `disabled` | — | — | Managed internally while downloading; do not set manually. |
+
+---
+
+## Events
+
+Both events bubble and are composed.
+
+### `llumi-download`
+
+Fires after the file download is triggered.
+
+```ts
+element.addEventListener("llumi-download", (e: CustomEvent<{ filename: string }>) => {
+  console.log("Downloaded:", e.detail.filename);
+});
+```
+
+### `llumi-download-error`
+
+Fires if building or triggering the download throws.
+
+```ts
+element.addEventListener("llumi-download-error", (e: CustomEvent<{ error: unknown }>) => {
+  console.error("Download failed:", e.detail.error);
+});
+```
+
+---
+
+## Styling
+
+The component renders in **light DOM**, so style the inner `<button>` directly —
+no shadow piercing required:
+
+```css
+llumi-download-button button {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 9999px;
+}
+```
+
+The shared icon-button look (and `.is-done` / `.is-error` state colours) is defined
+once in `base.css` and shared with `<llumi-copy-button>`.
+
+### CSS custom properties
+
+Each token has a sensible `oklch` fallback.
+
+| Token | Role | Fallback |
+|-------|------|---------|
+| `--llumi-color-success` | Border + icon colour in the downloaded state | `oklch(62.7% 0.194 149.214)` (green) |
+| `--llumi-color-danger` | Border + icon colour in the error state | `oklch(57.7% 0.245 27.325)` (red) |
+| `--llumi-color-surface` | Button background | `oklch(100% 0 0)` (white) |
+| `--llumi-color-border` | Button border | `oklch(92% 0.004 286.32)` (light grey) |
+| `--llumi-color-fg` | Icon colour (idle) | `oklch(21% 0.006 285.885)` (near-black) |
+| `--llumi-color-ring` | Focus-visible outline | `oklch(55.8% 0.288 302.321)` (purple) |
+| `--llumi-radius` | Button border-radius | `0.5rem` |

package/dist/download-button.mjs

@@ -0,0 +1,177 @@
+import { html as u } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+import { property as l, customElement as p } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js";
+import { i as a } from "./icons-DBLWcA83.js";
+import { L as f } from "./llumi-element-DTeRDxao.js";
+import { defineMachine as h } from "https://cdn.jsdelivr.net/npm/yay-machine@1.5.0";
+/*! @llumi/design-system v2.0.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.0.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const d = 1e3, O = h({
+  initialState: { name: "idle" },
+  states: {
+    idle: {
+      on: {
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    },
+    downloading: {
+      onEnter: ({ state: e, send: t }) => {
+        try {
+          const i = URL.createObjectURL(
+            new Blob([e.text], { type: e.mimeType })
+          ), o = document.createElement("a");
+          o.href = i, o.download = e.filename, o.click(), URL.revokeObjectURL(i), queueMicrotask(
+            () => t({ type: "DOWNLOAD_SUCCESS", filename: e.filename })
+          );
+        } catch (i) {
+          queueMicrotask(() => t({ type: "DOWNLOAD_ERROR", error: i }));
+        }
+      },
+      on: {
+        DOWNLOAD_SUCCESS: { to: "downloaded" },
+        DOWNLOAD_ERROR: { to: "error" }
+      }
+    },
+    downloaded: {
+      onEnter: ({ send: e }) => {
+        const t = setTimeout(() => e({ type: "DONE" }), d);
+        return () => clearTimeout(t);
+      },
+      on: {
+        DONE: { to: "idle" },
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    },
+    error: {
+      onEnter: ({ send: e }) => {
+        const t = setTimeout(() => e({ type: "DONE" }), d);
+        return () => clearTimeout(t);
+      },
+      on: {
+        DONE: { to: "idle" },
+        DOWNLOAD: {
+          to: "downloading",
+          data: ({ event: e }) => ({
+            text: e.text,
+            filename: e.filename,
+            mimeType: e.mimeType
+          })
+        }
+      }
+    }
+  }
+});
+var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, t, i, o) => {
+  for (var n = o > 1 ? void 0 : o ? w(t, i) : t, c = e.length - 1, m; c >= 0; c--)
+    (m = e[c]) && (n = (o ? m(t, i, n) : m(n)) || n);
+  return o && n && b(t, i, n), n;
+};
+function y(e) {
+  throw new Error(`Unexpected state: ${JSON.stringify(e)}`);
+}
+let r = class extends f {
+  constructor() {
+    super(...arguments), this.filename = "", this.mimeType = "text/plain", this.title = "Download file";
+  }
+  /** Light DOM so the document-level base.css button style applies. */
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.instance = O.newInstance().start(), this.unsubscribe = this.instance.subscribe(
+      ({ state: e, event: t }) => this.onTransition(e, t)
+    );
+  }
+  disconnectedCallback() {
+    var e, t;
+    super.disconnectedCallback(), (e = this.unsubscribe) == null || e.call(this), this.unsubscribe = void 0, (t = this.instance) == null || t.stop(), this.instance = void 0;
+  }
+  onTransition(e, t) {
+    (t == null ? void 0 : t.type) === "DOWNLOAD_SUCCESS" ? this.dispatchEvent(
+      new CustomEvent("llumi-download", {
+        detail: { filename: t.filename },
+        bubbles: !0,
+        composed: !0
+      })
+    ) : (t == null ? void 0 : t.type) === "DOWNLOAD_ERROR" && this.dispatchEvent(
+      new CustomEvent("llumi-download-error", {
+        detail: { error: t.error },
+        bubbles: !0,
+        composed: !0
+      })
+    ), this.requestUpdate();
+  }
+  onClick() {
+    var e, t;
+    if (!this.filename) {
+      console.warn(
+        '<llumi-download-button>: "filename" is required; ignoring click'
+      );
+      return;
+    }
+    (t = this.instance) == null || t.send({
+      type: "DOWNLOAD",
+      text: ((e = this.getValue) == null ? void 0 : e.call(this)) ?? "",
+      filename: this.filename,
+      mimeType: this.mimeType
+    });
+  }
+  viewFor(e) {
+    switch (e) {
+      case "idle":
+        return { icon: a.download, cls: "" };
+      case "downloading":
+        return { icon: a.spinner, cls: "is-working" };
+      case "downloaded":
+        return { icon: a.check, cls: "is-done" };
+      case "error":
+        return { icon: a.x, cls: "is-error" };
+      default:
+        return y(e);
+    }
+  }
+  render() {
+    var i;
+    const e = ((i = this.instance) == null ? void 0 : i.state.name) ?? "idle", t = this.viewFor(e);
+    return u`<button
+			type="button"
+			class=${t.cls}
+			title=${this.title}
+			aria-label=${this.title}
+			?disabled=${e === "downloading"}
+			@click=${this.onClick}
+		>
+			<i>${t.icon}</i>
+		</button>`;
+  }
+};
+s([
+  l()
+], r.prototype, "filename", 2);
+s([
+  l({ attribute: "mime-type" })
+], r.prototype, "mimeType", 2);
+s([
+  l()
+], r.prototype, "title", 2);
+s([
+  l({ attribute: !1 })
+], r.prototype, "getValue", 2);
+r = s([
+  p("llumi-download-button")
+], r);
+export {
+  r as LlumiDownloadButton
+};

package/dist/highlighter.md

@@ -0,0 +1,45 @@
+# llumi-highlighter
+
+Syntax-highlighted code block (Prism via `refractor`), with 4 themes, an optional
+copy button, and line-range dimming. Renders in **shadow DOM** (theme/token CSS is
+encapsulated).
+
+## Usage
+
+Load the design-system base stylesheet once (for the document), then the component:
+
+```html
+<link rel="stylesheet" href="@llumi/design-system/base.css" />
+<script type="module" src="@llumi/design-system/highlighter"></script>
+
+<!-- code via the `code` property (recommended) -->
+<llumi-highlighter language="typescript"></llumi-highlighter>
+<script>
+  document.querySelector("llumi-highlighter").code =
+    "const greet = (name) => console.log(name);";
+</script>
+
+<!-- or as text content -->
+<llumi-highlighter language="rust">fn main() { println!("hi"); }</llumi-highlighter>
+```
+
+## Properties / attributes
+
+| Name | Attr | Type | Default | Description |
+|------|------|------|---------|-------------|
+| `language` | `language` | `string` | `""` | Prism language id (e.g. `typescript`, `python`). Aliases: `ts`, `js`, `py`, `rs`, `sh`, `md`, `html`. Unsupported → plain text + a console warning. |
+| `theme` | `theme` | `ghcolors \| oneLight \| oneDark \| dracula` | `ghcolors` | Color theme. |
+| `code` | `code` | `string` | `""` | Code source; falls back to the element's text content. |
+| `highlight` | — (property) | `[number, number][]` | — | 1-based line ranges. When set, line numbers show and other lines dim to 30% opacity. |
+| `copyButton` | `copy-button` | `boolean` | `true` | Show the copy button. Disable with `copy-button="false"`. |
+
+## Events
+
+The embedded copy button emits (bubbling, composed — they cross the shadow boundary):
+`llumi-copy` `{ detail: { text } }` and `llumi-copy-error` `{ detail: { error } }`.
+
+## Supported languages
+
+`markup`/`html`/`xml`, `css`, `javascript`/`js`, `jsx`, `typescript`/`ts`, `tsx`,
+`json`, `bash`/`sh`/`shell`, `python`/`py`, `rust`/`rs`, `go`, `java`, `yaml`,
+`markdown`/`md`, `sql`, `diff`. (Grammars load lazily on first use.)