@llumi/design-system 1.0.1 → 2.1.0

package/highlighter.mjs

@@ -0,0 +1,403 @@
+import { nothing as f, html as h, unsafeCSS as p } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+import { property as c, customElement as v } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js";
+import { refractor as u } from "https://cdn.jsdelivr.net/npm/refractor@5.0.0/core";
+import { i as w } from "./icon-button-BwB11RGC.js";
+import { L as b } from "./llumi-element-BWRwgzW5.js";
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const y = [
+  "ghcolors",
+  "oneLight",
+  "oneDark",
+  "dracula"
+], x = /* @__PURE__ */ new Set(["oneDark", "dracula"]), d = {
+  ghcolors: {
+    bg: "#ffffff",
+    fg: "#393A34",
+    tokens: {
+      comment: "#999988",
+      prolog: "#999988",
+      doctype: "#999988",
+      cdata: "#999988",
+      punctuation: "#393A34",
+      property: "#36acaa",
+      tag: "#00009f",
+      boolean: "#36acaa",
+      number: "#36acaa",
+      constant: "#36acaa",
+      symbol: "#36acaa",
+      deleted: "#9a050f",
+      selector: "#00009f",
+      "attr-name": "#00a4db",
+      string: "#e3116c",
+      inserted: "#36acaa",
+      operator: "#393A34",
+      entity: "#36acaa",
+      url: "#36acaa",
+      atrule: "#00a4db",
+      "attr-value": "#e3116c",
+      keyword: "#00a4db",
+      function: "#9a050f",
+      regex: "#36acaa",
+      variable: "#36acaa"
+    }
+  },
+  oneLight: {
+    bg: "hsl(230, 1%, 98%)",
+    fg: "hsl(230, 8%, 24%)",
+    tokens: {
+      comment: "hsl(230, 4%, 64%)",
+      prolog: "hsl(230, 4%, 64%)",
+      doctype: "hsl(230, 8%, 24%)",
+      cdata: "hsl(230, 4%, 64%)",
+      punctuation: "hsl(230, 8%, 24%)",
+      property: "hsl(5, 74%, 59%)",
+      tag: "hsl(5, 74%, 59%)",
+      boolean: "hsl(35, 99%, 36%)",
+      number: "hsl(35, 99%, 36%)",
+      constant: "hsl(35, 99%, 36%)",
+      symbol: "hsl(5, 74%, 59%)",
+      deleted: "hsl(5, 74%, 59%)",
+      selector: "hsl(119, 34%, 47%)",
+      "attr-name": "hsl(35, 99%, 36%)",
+      string: "hsl(119, 34%, 47%)",
+      char: "hsl(119, 34%, 47%)",
+      builtin: "hsl(119, 34%, 47%)",
+      inserted: "hsl(119, 34%, 47%)",
+      operator: "hsl(221, 87%, 60%)",
+      entity: "hsl(230, 8%, 24%)",
+      url: "hsl(198, 99%, 37%)",
+      atrule: "hsl(35, 99%, 36%)",
+      "attr-value": "hsl(119, 34%, 47%)",
+      keyword: "hsl(301, 63%, 40%)",
+      function: "hsl(221, 87%, 60%)",
+      "class-name": "hsl(35, 99%, 36%)",
+      regex: "hsl(119, 34%, 47%)",
+      important: "hsl(5, 74%, 59%)",
+      variable: "hsl(221, 87%, 60%)"
+    }
+  },
+  oneDark: {
+    bg: "hsl(220, 13%, 18%)",
+    fg: "hsl(220, 14%, 71%)",
+    tokens: {
+      comment: "hsl(220, 10%, 40%)",
+      prolog: "hsl(220, 10%, 40%)",
+      doctype: "hsl(220, 14%, 71%)",
+      cdata: "hsl(220, 10%, 40%)",
+      punctuation: "hsl(220, 14%, 71%)",
+      property: "hsl(355, 65%, 65%)",
+      tag: "hsl(355, 65%, 65%)",
+      boolean: "hsl(29, 54%, 61%)",
+      number: "hsl(29, 54%, 61%)",
+      constant: "hsl(29, 54%, 61%)",
+      symbol: "hsl(355, 65%, 65%)",
+      deleted: "hsl(355, 65%, 65%)",
+      selector: "hsl(95, 38%, 62%)",
+      "attr-name": "hsl(29, 54%, 61%)",
+      string: "hsl(95, 38%, 62%)",
+      char: "hsl(95, 38%, 62%)",
+      builtin: "hsl(95, 38%, 62%)",
+      inserted: "hsl(95, 38%, 62%)",
+      operator: "hsl(207, 82%, 66%)",
+      entity: "hsl(220, 14%, 71%)",
+      url: "hsl(187, 47%, 55%)",
+      atrule: "hsl(29, 54%, 61%)",
+      "attr-value": "hsl(95, 38%, 62%)",
+      keyword: "hsl(286, 60%, 67%)",
+      function: "hsl(207, 82%, 66%)",
+      "class-name": "hsl(29, 54%, 61%)",
+      regex: "hsl(95, 38%, 62%)",
+      important: "hsl(355, 65%, 65%)",
+      variable: "hsl(207, 82%, 66%)"
+    }
+  },
+  dracula: {
+    bg: "#282a36",
+    fg: "#f8f8f2",
+    tokens: {
+      comment: "#6272a4",
+      prolog: "#6272a4",
+      doctype: "#6272a4",
+      cdata: "#6272a4",
+      punctuation: "#f8f8f2",
+      property: "#ff79c6",
+      tag: "#ff79c6",
+      boolean: "#bd93f9",
+      number: "#bd93f9",
+      constant: "#ff79c6",
+      symbol: "#ff79c6",
+      deleted: "#ff79c6",
+      selector: "#50fa7b",
+      "attr-name": "#50fa7b",
+      string: "#50fa7b",
+      char: "#50fa7b",
+      builtin: "#50fa7b",
+      inserted: "#50fa7b",
+      operator: "#f8f8f2",
+      entity: "#f8f8f2",
+      url: "#f8f8f2",
+      atrule: "#f1fa8c",
+      "attr-value": "#f1fa8c",
+      keyword: "#8be9fd",
+      function: "#f1fa8c",
+      "class-name": "#f1fa8c",
+      regex: "#ffb86c",
+      important: "#ffb86c",
+      variable: "#f8f8f2"
+    }
+  }
+};
+function L(t, e) {
+  return Object.entries(e).map(([r, o]) => `${t} .token.${r} { color: ${o}; }`).join(`
+`);
+}
+function g(t, e) {
+  return `${t} { background: ${e.bg}; color: ${e.fg}; }
+${L(t, e.tokens)}`;
+}
+function _() {
+  const t = y.map(
+    (e) => g(`:host([theme="${e}"])`, d[e])
+  );
+  return t.unshift(g(":host", d.ghcolors)), t.join(`
+`);
+}
+function $(t, e) {
+  return e.some(
+    ([r, o]) => t >= r && t <= o
+  );
+}
+function C(t) {
+  return y.includes(t ?? "") ? t : "ghcolors";
+}
+function A(t) {
+  return t.split(`
+`).map((e) => e === "" ? [] : [{ classes: [], text: e }]);
+}
+function E(t) {
+  const e = [[]];
+  for (const r of t)
+    r.text.split(`
+`).forEach((s, n) => {
+      var l;
+      n > 0 && e.push([]), s !== "" && ((l = e[e.length - 1]) == null || l.push({ classes: r.classes, text: s }));
+    });
+  return e;
+}
+function j(t) {
+  const e = [], r = (o, s) => {
+    var m;
+    if (o.type === "text") {
+      e.push({ classes: s, text: o.value ?? "" });
+      return;
+    }
+    const n = (m = o.properties) == null ? void 0 : m.className, l = o.type === "element" ? Array.isArray(n) ? n : n ? [n] : [] : s;
+    for (const k of o.children ?? []) r(k, l);
+  };
+  return r(t, []), E(e);
+}
+const T = {
+  html: "markup",
+  xml: "markup",
+  js: "javascript",
+  ts: "typescript",
+  py: "python",
+  rs: "rust",
+  sh: "bash",
+  shell: "bash",
+  md: "markdown"
+}, S = {
+  markup: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/markup"),
+  css: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/css"),
+  javascript: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/javascript"),
+  jsx: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/jsx"),
+  typescript: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/typescript"),
+  tsx: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/tsx"),
+  json: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/json"),
+  bash: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/bash"),
+  python: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/python"),
+  rust: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/rust"),
+  go: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/go"),
+  java: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/java"),
+  yaml: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/yaml"),
+  markdown: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/markdown"),
+  sql: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/sql"),
+  diff: () => import("https://cdn.jsdelivr.net/npm/refractor@5.0.0/diff")
+};
+function D(t) {
+  const e = T[t] ?? t;
+  return { canonical: e, loader: S[e] };
+}
+var q = Object.defineProperty, H = Object.getOwnPropertyDescriptor, i = (t, e, r, o) => {
+  for (var s = o > 1 ? void 0 : o ? H(e, r) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (s = (o ? l(e, r, s) : l(s)) || s);
+  return o && s && q(e, r, s), s;
+};
+const O = {
+  fromAttribute: (t) => t === null ? !0 : !(t === "false" || t === "0"),
+  toAttribute: (t) => t ? null : "false"
+};
+let a = class extends b {
+  constructor() {
+    super(...arguments), this.language = "", this.theme = "ghcolors", this.code = "", this.copyButton = !0, this._tokenLines = [], this._seq = 0, this._highlightTask = Promise.resolve(), this._warnedLang = "";
+  }
+  /** Code source: `code` property, else light-DOM text content. */
+  get resolvedCode() {
+    var t;
+    return this.code || ((t = this.textContent) == null ? void 0 : t.trim()) || "";
+  }
+  /** Test hook: resolves when the in-flight highlight pass has finished. */
+  get whenHighlighted() {
+    return this._highlightTask;
+  }
+  willUpdate(t) {
+    (t.has("language") || t.has("code")) && (this._highlightTask = this.runHighlight()), t.has("theme") && this.classList.toggle(
+      "is-dark",
+      x.has(C(this.theme))
+    );
+  }
+  async runHighlight() {
+    const t = this.resolvedCode, e = this.language, r = ++this._seq;
+    this._tokenLines = A(t), this.requestUpdate();
+    const { canonical: o, loader: s } = D(e);
+    if (!s) {
+      e && e !== this._warnedLang && (this._warnedLang = e, console.warn(
+        `<llumi-highlighter>: language "${e}" is not supported; rendering plain text`
+      ));
+      return;
+    }
+    try {
+      const n = await s();
+      if (r !== this._seq) return;
+      u.registered(o) || u.register(n.default);
+      const l = u.highlight(t, o);
+      this._tokenLines = j(l), this.requestUpdate();
+    } catch (n) {
+      console.warn(
+        `<llumi-highlighter>: failed to highlight "${e}"`,
+        n
+      );
+    }
+  }
+  renderLines() {
+    const t = !!this.highlight;
+    return this._tokenLines.map((e, r) => {
+      const o = r + 1, s = this.highlight && !$(o, this.highlight);
+      return h`<span
+				class="line"
+				style=${s ? "opacity:0.3;transition:opacity 0.2s ease" : ""}
+			>
+				${t ? h`<span class="ln">${o}</span>` : f}
+				<span class="line-content"
+					>${e.map(
+        (n) => h`<span class=${n.classes.join(" ")}>${n.text}</span>`
+      )}</span
+				>
+			</span>`;
+    });
+  }
+  render() {
+    return h`<div class="wrap">
+			<div class="overlay">
+				<span class="lang">${this.language}</span>
+				${this.copyButton ? h`<llumi-copy-button
+							.getValue=${() => this.resolvedCode}
+							title="Copy code"
+						></llumi-copy-button>` : f}
+			</div>
+			<pre><code>${this.renderLines()}</code></pre>
+		</div>`;
+  }
+};
+a.styles = [
+  b.styles,
+  p(w),
+  p(_()),
+  p(`
+			:host { display: block; }
+			.wrap { position: relative; }
+			.overlay {
+				position: absolute;
+				top: 0.5rem;
+				right: 0.5rem;
+				z-index: 1;
+				display: flex;
+				align-items: center;
+				gap: 0.5rem;
+			}
+			.lang {
+				user-select: none;
+				font-size: 0.75rem;
+				opacity: 0.6;
+			}
+			:host(.is-dark) .lang { color: #c9ccd3; opacity: 0.8; }
+			pre {
+				margin: 0;
+				border-radius: 0.5rem;
+				padding: 1rem;
+				overflow: auto;
+				font-size: 0.8125rem;
+				background: inherit;
+				color: inherit;
+			}
+			code {
+				font-family: var(--llumi-font-mono, ui-monospace, monospace);
+				display: block;
+			}
+			.line { display: flex; min-height: 1lh; }
+			.ln {
+				user-select: none;
+				width: 2.5em;
+				flex: none;
+				text-align: right;
+				padding-right: 1em;
+				opacity: 0.4;
+			}
+			.line-content { white-space: pre; }
+			/* Embedded copy-button: smaller than the standalone 36px. Its idle
+			   (and working) colors follow the CODE theme — currentColor here
+			   resolves to the host's theme text color — instead of the document's
+			   --llumi-* tokens, so the icon stays legible on every theme no matter
+			   the page's light/dark mode. The done/error feedback colors are left
+			   to the shared icon-button rule. */
+			llumi-copy-button button:has(> i:only-child) {
+				width: 1.75rem;
+				height: 1.75rem;
+				background: transparent;
+			}
+			llumi-copy-button button:has(> i:only-child) > i {
+				width: 0.875rem;
+				height: 0.875rem;
+			}
+			llumi-copy-button button:has(> i:only-child):not(.is-done):not(.is-error) {
+				color: color-mix(in oklab, currentColor 60%, transparent);
+				border-color: color-mix(in oklab, currentColor 22%, transparent);
+			}
+			llumi-copy-button
+				button:has(> i:only-child):hover:not(:disabled):not(.is-done):not(.is-error) {
+				background: color-mix(in oklab, currentColor 12%, transparent);
+				color: color-mix(in oklab, currentColor 85%, transparent);
+			}
+		`)
+];
+i([
+  c()
+], a.prototype, "language", 2);
+i([
+  c({ reflect: !0 })
+], a.prototype, "theme", 2);
+i([
+  c()
+], a.prototype, "code", 2);
+i([
+  c({ attribute: !1 })
+], a.prototype, "highlight", 2);
+i([
+  c({ attribute: "copy-button", converter: O })
+], a.prototype, "copyButton", 2);
+a = i([
+  v("llumi-highlighter")
+], a);
+export {
+  a as LlumiHighlighter
+};

package/icon-button-BwB11RGC.js

@@ -0,0 +1,5 @@
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const o = ":where(button:has(>i:only-child)){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--llumi-color-border, oklch(92% .004 286.32));border-radius:var(--llumi-radius, .5rem);background:var(--llumi-color-surface, oklch(100% 0 0));color:var(--llumi-color-fg, oklch(21% .006 285.885));cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none}:where(button:has(>i:only-child):hover:not(:disabled)){background:color-mix(in oklab,var(--llumi-color-fg, oklch(21% .006 285.885)) 6%,transparent)}:where(button:has(>i:only-child):focus-visible){outline:2px solid var(--llumi-color-ring, oklch(55.8% .288 302.321));outline-offset:2px}:where(button:has(>i:only-child):disabled){opacity:.6;cursor:default}:where(button:has(>i:only-child)>i){display:inline-flex;width:1rem;height:1rem}:where(button:has(>i:only-child)>i>svg){width:100%;height:100%}:where(button.is-done:has(>i:only-child)){border-color:var(--llumi-color-success, oklch(62.7% .194 149.214));color:var(--llumi-color-success, oklch(62.7% .194 149.214))}:where(button.is-error:has(>i:only-child)){border-color:var(--llumi-color-danger, oklch(57.7% .245 27.325));color:var(--llumi-color-danger, oklch(57.7% .245 27.325))}:where(button.is-working:has(>i:only-child)>i>svg){animation:llumi-spin 1s linear infinite}@keyframes llumi-spin{to{transform:rotate(360deg)}}";
+export {
+  o as i
+};

package/icons-BaUbjt-v.js

@@ -0,0 +1,42 @@
+import { svg as c, html as e } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+function r(t) {
+  return e`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${t}
+  </svg>`;
+}
+const a = {
+  check: r(c`<path d="M20 6 9 17l-5-5" />`),
+  copy: r(
+    c`<rect width="14" height="14" x="8" y="8" rx="2" ry="2" /><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />`
+  ),
+  download: r(
+    c`<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /><path d="M12 3v12" /><path d="m7 10 5 5 5-5" />`
+  ),
+  gripVertical: r(
+    c`<circle cx="9" cy="12" r="1" /><circle cx="9" cy="5" r="1" /><circle cx="9" cy="19" r="1" /><circle cx="15" cy="12" r="1" /><circle cx="15" cy="5" r="1" /><circle cx="15" cy="19" r="1" />`
+  ),
+  maximize: r(
+    c`<polyline points="15 3 21 3 21 9" /><polyline points="9 21 3 21 3 15" /><line x1="21" x2="14" y1="3" y2="10" /><line x1="3" x2="10" y1="21" y2="14" />`
+  ),
+  messageSquare: r(
+    c`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />`
+  ),
+  spinner: r(c`<path d="M21 12a9 9 0 1 1-6.219-8.56" />`),
+  trash: r(
+    c`<path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />`
+  ),
+  x: r(c`<path d="M18 6 6 18" /><path d="m6 6 12 12" />`)
+};
+export {
+  a as i
+};