origam 2.5.0 → 2.6.1

package/dist/src/utils/Theme/apply-theme.util.cjs

@@ -0,0 +1,148 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.applyTheme = applyTheme;
+exports.applyThemes = applyThemes;
+exports.installedThemesFromList = installedThemesFromList;
+exports.resolveThemeVars = resolveThemeVars;
+exports.semanticTreeToVars = semanticTreeToVars;
+exports.themeSelector = themeSelector;
+exports.themeToCss = themeToCss;
+exports.themeVarsToVars = themeVarsToVars;
+var _tokenName = require("./token-name.util.cjs");
+const STYLE_ELEMENT_PREFIX = "origam-theme";
+function normaliseVarName(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+const VARS_GROUP_ROOTS = {
+  color: ["color"],
+  rounded: ["radius"],
+  border: ["border"],
+  typo: ["font"],
+  shadow: ["shadow"],
+  spacing: ["space"],
+  motion: ["motion"]
+};
+function isSemanticLeaf(node) {
+  const t = typeof node;
+  return t === "string" || t === "number";
+}
+function semanticTreeToVars(tree, rootPath) {
+  const out = {};
+  const walk = (node, path) => {
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      const nextPath = [...path, key];
+      if (isSemanticLeaf(child)) {
+        out[(0, _tokenName.tokenPathToCssVar)(nextPath, false)] = child;
+      } else {
+        walk(child, nextPath);
+      }
+    }
+  };
+  walk(tree, [...rootPath]);
+  return out;
+}
+function themeVarsToVars(vars) {
+  let out = {};
+  for (const group of Object.keys(VARS_GROUP_ROOTS)) {
+    const tree = vars[group];
+    if (!tree) continue;
+    out = {
+      ...out,
+      ...semanticTreeToVars(tree, VARS_GROUP_ROOTS[group])
+    };
+  }
+  return out;
+}
+function resolveThemeVars(theme) {
+  const fromVars = theme.vars ? themeVarsToVars(theme.vars) : {};
+  const fromCssVars = {};
+  if (theme.cssVars) {
+    for (const key of Object.keys(theme.cssVars)) {
+      fromCssVars[normaliseVarName(key)] = theme.cssVars[key];
+    }
+  }
+  return {
+    ...fromVars,
+    ...fromCssVars
+  };
+}
+function themeSelector(theme) {
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const hasMode = theme.mode === "light" || theme.mode === "dark";
+  if (!hasName && !hasMode) return ":root";
+  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  const attrs = `[data-theme="${theme.name}"]${hasMode ? `[data-mode="${theme.mode}"]` : ""}`;
+  return `:root:root${attrs}, ${attrs}`;
+}
+function themeToCss(theme) {
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map(name => `  ${name}: ${vars[name]};`).join("\n");
+  return `${themeSelector(theme)} {
+${decls}
+}
+`;
+}
+function applyTheme(theme) {
+  if (typeof document === "undefined") return null;
+  const vars = resolveThemeVars(theme);
+  if (Object.keys(vars).length === 0) return null;
+  const namePart = theme.name ? `-${theme.name}` : "";
+  const modePart = theme.mode === "light" || theme.mode === "dark" ? `-${theme.mode}` : "";
+  const id = `${STYLE_ELEMENT_PREFIX}${namePart}${modePart}`;
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = id;
+    style.setAttribute("data-origam-theme", theme.name ?? "root");
+    if (modePart) style.setAttribute("data-origam-mode", theme.mode);
+    document.head.appendChild(style);
+  }
+  style.textContent = themeToCss(theme);
+  return id;
+}
+function applyThemes(themes) {
+  const ids = [];
+  for (const theme of themes) {
+    const id = applyTheme(theme);
+    if (id) ids.push(id);
+  }
+  return ids;
+}
+function installedThemesFromList(themes) {
+  const order = [];
+  const modesByName = /* @__PURE__ */new Map();
+  const metaByName = /* @__PURE__ */new Map();
+  for (const theme of themes) {
+    if (!theme.name) continue;
+    if (!modesByName.has(theme.name)) {
+      modesByName.set(theme.name, /* @__PURE__ */new Set());
+      metaByName.set(theme.name, {});
+      order.push(theme.name);
+    }
+    if (theme.mode === "light" || theme.mode === "dark") {
+      modesByName.get(theme.name).add(theme.mode);
+    }
+    const meta = metaByName.get(theme.name);
+    if (meta.label === void 0 && theme.label) meta.label = theme.label;
+    if (meta.description === void 0 && theme.description) meta.description = theme.description;
+    if (meta.swatch === void 0 && theme.swatch) meta.swatch = theme.swatch;
+  }
+  return order.map(name => {
+    const meta = metaByName.get(name);
+    return {
+      name,
+      modes: [...modesByName.get(name)],
+      label: meta.label ?? name,
+      ...(meta.description !== void 0 ? {
+        description: meta.description
+      } : {}),
+      ...(meta.swatch !== void 0 ? {
+        swatch: meta.swatch
+      } : {})
+    };
+  });
+}

package/dist/src/utils/Theme/apply-theme.util.d.ts

@@ -0,0 +1,65 @@
+import type { IOrigamTheme } from '../../interfaces';
+import type { ISemanticTree, IThemeVars, TInstalledThemes, TThemeVars } from '../../types';
+/**
+ * Walk a hand-authored semantic tree depth-first, prefixing every leaf path
+ * with `rootPath` and converting it to a `--origam-*` name through the shared
+ * `tokenPathToCssVar` grammar (primitive/semantic side, never component). The
+ * leaf value passes through verbatim — a gradient string is just a color value.
+ */
+export declare function semanticTreeToVars(tree: ISemanticTree, rootPath: ReadonlyArray<string>): TThemeVars;
+/**
+ * Collapse the structured `vars` token bucket (the normal authoring path) into a
+ * flat CSS-var map. Each group (`color` / `rounded` / `border` / `typo` /
+ * `shadow` / `spacing` / `motion`) is walked under its `--origam-*` root path.
+ */
+export declare function themeVarsToVars(vars: IThemeVars): TThemeVars;
+/**
+ * Resolve an `IOrigamTheme` to its flat CSS-var map.
+ *
+ * Precedence (low → high): the structured `vars` token bucket (the normal
+ * authoring path), then the `cssVars` raw `--origam-*` escape hatch (always
+ * wins on key collision).
+ */
+export declare function resolveThemeVars(theme: IOrigamTheme): TThemeVars;
+/**
+ * Compute the CSS selector a theme block targets, from its `name` / `mode`:
+ *   - neither            → `:root`
+ *   - name only          → `[data-theme="<name>"]`
+ *   - mode only          → `[data-mode="<mode>"]`
+ *   - name + mode        → `[data-theme="<name>"][data-mode="<mode>"]`
+ *
+ * A `mode` of `'auto'` is treated as "no mode scoping".
+ */
+export declare function themeSelector(theme: IOrigamTheme): string;
+/**
+ * Serialise an `IOrigamTheme` to a CSS rule string:
+ *   `<selector> {\n  --origam-…: value;\n  …\n}`
+ *
+ * Pure — no DOM access. Used both by `applyTheme` (runtime injection) and by
+ * the Theme Builder's CSS export so a single code path produces both.
+ */
+export declare function themeToCss(theme: IOrigamTheme): string;
+/**
+ * Inject (or replace) a theme's CSS variables into `<head>` at runtime.
+ * SSR-safe: a no-op when `document` is unavailable. Returns the `<style>`
+ * element id used, or `null` when skipped (SSR / empty theme).
+ *
+ * The element id derives from the theme name so multiple named themes can
+ * coexist; re-applying the same theme replaces its block in place.
+ */
+export declare function applyTheme(theme: IOrigamTheme): string | null;
+/**
+ * Install a list of themes at once: injects each one's scoped block (via
+ * `applyTheme`) and returns the ids that were actually written (SSR / empty
+ * themes are skipped, so the result may be shorter than the input).
+ */
+export declare function applyThemes(themes: IOrigamTheme[]): string[];
+/**
+ * Collapse an `IOrigamTheme[]` into the distinct-brand summary exposed to
+ * consumers: one entry per `name`, listing every concrete mode that brand was
+ * installed for, plus the UI metadata (`label` / `description` / `swatch`)
+ * gathered from the objects of that brand (first non-empty value wins; `label`
+ * falls back to `name`). Themes without a `name` (root-scoped) are ignored —
+ * they are not selectable brands. Pure (no DOM access), so it runs SSR-side.
+ */
+export declare function installedThemesFromList(themes: IOrigamTheme[]): TInstalledThemes;

package/dist/src/utils/Theme/apply-theme.util.js

@@ -0,0 +1,125 @@
+import { tokenPathToCssVar } from "./token-name.util.js";
+const STYLE_ELEMENT_PREFIX = "origam-theme";
+function normaliseVarName(key) {
+  return key.startsWith("--") ? key : `--${key}`;
+}
+const VARS_GROUP_ROOTS = {
+  color: ["color"],
+  rounded: ["radius"],
+  border: ["border"],
+  typo: ["font"],
+  shadow: ["shadow"],
+  spacing: ["space"],
+  motion: ["motion"]
+};
+function isSemanticLeaf(node) {
+  const t = typeof node;
+  return t === "string" || t === "number";
+}
+export function semanticTreeToVars(tree, rootPath) {
+  const out = {};
+  const walk = (node, path) => {
+    for (const key of Object.keys(node)) {
+      const child = node[key];
+      const nextPath = [...path, key];
+      if (isSemanticLeaf(child)) {
+        out[tokenPathToCssVar(nextPath, false)] = child;
+      } else {
+        walk(child, nextPath);
+      }
+    }
+  };
+  walk(tree, [...rootPath]);
+  return out;
+}
+export function themeVarsToVars(vars) {
+  let out = {};
+  for (const group of Object.keys(VARS_GROUP_ROOTS)) {
+    const tree = vars[group];
+    if (!tree) continue;
+    out = { ...out, ...semanticTreeToVars(tree, VARS_GROUP_ROOTS[group]) };
+  }
+  return out;
+}
+export function resolveThemeVars(theme) {
+  const fromVars = theme.vars ? themeVarsToVars(theme.vars) : {};
+  const fromCssVars = {};
+  if (theme.cssVars) {
+    for (const key of Object.keys(theme.cssVars)) {
+      fromCssVars[normaliseVarName(key)] = theme.cssVars[key];
+    }
+  }
+  return { ...fromVars, ...fromCssVars };
+}
+export function themeSelector(theme) {
+  const hasName = typeof theme.name === "string" && theme.name.length > 0;
+  const hasMode = theme.mode === "light" || theme.mode === "dark";
+  if (!hasName && !hasMode) return ":root";
+  if (!hasName) return `[data-mode="${theme.mode}"]`;
+  const attrs = `[data-theme="${theme.name}"]${hasMode ? `[data-mode="${theme.mode}"]` : ""}`;
+  return `:root:root${attrs}, ${attrs}`;
+}
+export function themeToCss(theme) {
+  const vars = resolveThemeVars(theme);
+  const decls = Object.keys(vars).map((name) => `  ${name}: ${vars[name]};`).join("\n");
+  return `${themeSelector(theme)} {
+${decls}
+}
+`;
+}
+export function applyTheme(theme) {
+  if (typeof document === "undefined") return null;
+  const vars = resolveThemeVars(theme);
+  if (Object.keys(vars).length === 0) return null;
+  const namePart = theme.name ? `-${theme.name}` : "";
+  const modePart = theme.mode === "light" || theme.mode === "dark" ? `-${theme.mode}` : "";
+  const id = `${STYLE_ELEMENT_PREFIX}${namePart}${modePart}`;
+  let style = document.getElementById(id);
+  if (!style) {
+    style = document.createElement("style");
+    style.id = id;
+    style.setAttribute("data-origam-theme", theme.name ?? "root");
+    if (modePart) style.setAttribute("data-origam-mode", theme.mode);
+    document.head.appendChild(style);
+  }
+  style.textContent = themeToCss(theme);
+  return id;
+}
+export function applyThemes(themes) {
+  const ids = [];
+  for (const theme of themes) {
+    const id = applyTheme(theme);
+    if (id) ids.push(id);
+  }
+  return ids;
+}
+export function installedThemesFromList(themes) {
+  const order = [];
+  const modesByName = /* @__PURE__ */ new Map();
+  const metaByName = /* @__PURE__ */ new Map();
+  for (const theme of themes) {
+    if (!theme.name) continue;
+    if (!modesByName.has(theme.name)) {
+      modesByName.set(theme.name, /* @__PURE__ */ new Set());
+      metaByName.set(theme.name, {});
+      order.push(theme.name);
+    }
+    if (theme.mode === "light" || theme.mode === "dark") {
+      modesByName.get(theme.name).add(theme.mode);
+    }
+    const meta = metaByName.get(theme.name);
+    if (meta.label === void 0 && theme.label) meta.label = theme.label;
+    if (meta.description === void 0 && theme.description) meta.description = theme.description;
+    if (meta.swatch === void 0 && theme.swatch) meta.swatch = theme.swatch;
+  }
+  return order.map((name) => {
+    const meta = metaByName.get(name);
+    return {
+      name,
+      modes: [...modesByName.get(name)],
+      label: meta.label ?? name,
+      ...meta.description !== void 0 ? { description: meta.description } : {},
+      ...meta.swatch !== void 0 ? { swatch: meta.swatch } : {}
+    };
+  });
+}

package/dist/src/utils/Theme/token-name.util.cjs

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOKEN_INTENT_STATES = void 0;
+exports.isBemChildKey = isBemChildKey;
+exports.tokenPathToCssVar = tokenPathToCssVar;
+exports.tokenPathToCssVarName = tokenPathToCssVarName;
+const TOKEN_INTENT_STATES = exports.TOKEN_INTENT_STATES = /* @__PURE__ */new Set(["primary", "secondary", "ghost", "success", "warning", "danger", "info", "error", "selected", "outlined", "elevated", "filter", "hover", "active", "disabled", "focus"]);
+function isBemChildKey(key) {
+  return /^[a-zA-Z]+$/.test(key) && !key.includes("-");
+}
+function tokenPathToCssVarName(path, isComponent) {
+  if (isComponent) {
+    const [blockName, ...rest] = path;
+    if (rest.length === 0) {
+      return `origam-${blockName}`;
+    }
+    if (rest.length > 1 && TOKEN_INTENT_STATES.has(rest[0])) {
+      const [state, ...propParts] = rest;
+      return `origam-${blockName}--${state}---${propParts.join("-")}`;
+    }
+    if (rest.length > 1 && isBemChildKey(rest[0])) {
+      const [child, ...propParts] = rest;
+      if (propParts.length > 1 && TOKEN_INTENT_STATES.has(propParts[0])) {
+        const [state, ...innerProp] = propParts;
+        return `origam-${blockName}__${child}--${state}---${innerProp.join("-")}`;
+      }
+      return `origam-${blockName}__${child}---${propParts.join("-")}`;
+    }
+    return `origam-${blockName}---${rest.join("-")}`;
+  }
+  if (path.length === 2) {
+    return `origam-${path[0]}---${path[1]}`;
+  }
+  if (path.length === 3) {
+    return `origam-${path[0]}__${path[1]}---${path[2]}`;
+  }
+  if (path.length === 4) {
+    return `origam-${path[0]}__${path[1]}--${path[2]}---${path[3]}`;
+  }
+  return `origam-${path.join("-")}`;
+}
+function tokenPathToCssVar(path, isComponent) {
+  return `--${tokenPathToCssVarName(path, isComponent)}`;
+}

package/dist/src/utils/Theme/token-name.util.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Token-path → origam CSS-variable-name naming grammar (runtime).
+ *
+ * This is the runtime / Theme-Builder-export twin of the build-time core in
+ * `scripts/token-name.mjs`. Both implement the SAME algorithm; a parity unit
+ * test (`token-name.util.spec.ts`) asserts they stay byte-identical so the
+ * names baked into the published CSS sheets never drift from the names a
+ * runtime-injected or exported theme produces.
+ *
+ * Why two copies instead of one shared module: the build script is a Node
+ * `.mjs` that runs before the library is bundled, while the published library
+ * only ships `src/**\/*.ts` (mkdist). A relative import from `src` into
+ * `scripts/` would not survive the build, so the implementation is duplicated
+ * and protected by the parity test instead.
+ *
+ * Grammar (`---` separates block from property, `--` a state/modifier, `__` a
+ * BEM child):
+ *
+ *   COMPONENT
+ *     ['btn']                            → --origam-btn
+ *     ['btn', 'background-color']        → --origam-btn---background-color
+ *     ['btn', 'primary', 'background-color'] → --origam-btn--primary---background-color
+ *     ['card', 'overlay', 'background-color'] → --origam-card__overlay---background-color
+ *     ['card', 'overlay', 'hover', 'opacity'] → --origam-card__overlay--hover---opacity
+ *
+ *   PRIMITIVE / SEMANTIC (by path length)
+ *     ['color', 'black']                 → --origam-color---black
+ *     ['color', 'neutral', '500']        → --origam-color__neutral---500
+ *     ['color', 'action', 'primary', 'bg'] → --origam-color__action--primary---bg
+ */
+/**
+ * Component-level intent / state / modifier segments. A path segment matching
+ * one of these (in a component context) is emitted with the `--` modifier
+ * separator rather than treated as a BEM child or property.
+ */
+export declare const TOKEN_INTENT_STATES: ReadonlySet<string>;
+/**
+ * A BEM child key is a single bare word (letters only, no separators / digits).
+ * Property keys typically contain hyphens (`background-color`) so they fail
+ * this test and are emitted as properties rather than children.
+ */
+export declare function isBemChildKey(key: string): boolean;
+/**
+ * Resolve a token path to its origam CSS variable name (WITHOUT the leading
+ * `--`). `isComponent` is `true` when the token originates from a
+ * `tokens/component/*.json` source; `false` for primitive / semantic tokens.
+ */
+export declare function tokenPathToCssVarName(path: ReadonlyArray<string>, isComponent: boolean): string;
+/**
+ * Convenience wrapper that returns the full custom-property reference,
+ * `--origam-…`, ready to drop into a stylesheet declaration or `style`
+ * binding.
+ */
+export declare function tokenPathToCssVar(path: ReadonlyArray<string>, isComponent: boolean): string;

package/dist/src/utils/Theme/token-name.util.js

@@ -0,0 +1,55 @@
+export const TOKEN_INTENT_STATES = /* @__PURE__ */ new Set([
+  "primary",
+  "secondary",
+  "ghost",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "error",
+  "selected",
+  "outlined",
+  "elevated",
+  "filter",
+  "hover",
+  "active",
+  "disabled",
+  "focus"
+]);
+export function isBemChildKey(key) {
+  return /^[a-zA-Z]+$/.test(key) && !key.includes("-");
+}
+export function tokenPathToCssVarName(path, isComponent) {
+  if (isComponent) {
+    const [blockName, ...rest] = path;
+    if (rest.length === 0) {
+      return `origam-${blockName}`;
+    }
+    if (rest.length > 1 && TOKEN_INTENT_STATES.has(rest[0])) {
+      const [state, ...propParts] = rest;
+      return `origam-${blockName}--${state}---${propParts.join("-")}`;
+    }
+    if (rest.length > 1 && isBemChildKey(rest[0])) {
+      const [child, ...propParts] = rest;
+      if (propParts.length > 1 && TOKEN_INTENT_STATES.has(propParts[0])) {
+        const [state, ...innerProp] = propParts;
+        return `origam-${blockName}__${child}--${state}---${innerProp.join("-")}`;
+      }
+      return `origam-${blockName}__${child}---${propParts.join("-")}`;
+    }
+    return `origam-${blockName}---${rest.join("-")}`;
+  }
+  if (path.length === 2) {
+    return `origam-${path[0]}---${path[1]}`;
+  }
+  if (path.length === 3) {
+    return `origam-${path[0]}__${path[1]}---${path[2]}`;
+  }
+  if (path.length === 4) {
+    return `origam-${path[0]}__${path[1]}--${path[2]}---${path[3]}`;
+  }
+  return `origam-${path.join("-")}`;
+}
+export function tokenPathToCssVar(path, isComponent) {
+  return `--${tokenPathToCssVarName(path, isComponent)}`;
+}

package/dist/src/utils/index.cjs

@@ -695,4 +695,26 @@ Object.keys(_mercator).forEach(function (key) {
       return _mercator[key];
     }
   });
+});
+var _tokenName = require("./Theme/token-name.util.cjs");
+Object.keys(_tokenName).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokenName[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokenName[key];
+    }
+  });
+});
+var _applyTheme = require("./Theme/apply-theme.util.cjs");
+Object.keys(_applyTheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _applyTheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _applyTheme[key];
+    }
+  });
 });

package/dist/src/utils/index.d.ts

@@ -61,3 +61,5 @@ export * from './Mask/validate-pattern.util';
 export * from './QrCode/qr-code-adapters.util';
 export * from './Chart/path.util';
 export * from './Chart/mercator.util';
+export * from './Theme/token-name.util';
+export * from './Theme/apply-theme.util';

package/dist/src/utils/index.js

@@ -61,3 +61,5 @@ export * from "./Mask/validate-pattern.util.js";
 export * from "./QrCode/qr-code-adapters.util.js";
 export * from "./Chart/path.util.js";
 export * from "./Chart/mercator.util.js";
+export * from "./Theme/token-name.util.js";
+export * from "./Theme/apply-theme.util.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [
@@ -48,18 +48,23 @@
     },
     "./styles": {
       "scss": "./dist/src/assets/scss/main.scss",
-      "style": "./dist/src/assets/css/main.css"
+      "style": "./dist/src/assets/css/main.css",
+      "import": "./dist/src/assets/css/main.css",
+      "require": "./dist/src/assets/css/main.css",
+      "default": "./dist/src/assets/css/main.css"
     },
     "./tokens/css": "./dist/src/assets/css/tokens/primitive.css",
     "./tokens/css/primitive": "./dist/src/assets/css/tokens/primitive.css",
     "./tokens/css/light": "./dist/src/assets/css/tokens/light.css",
     "./tokens/css/dark": "./dist/src/assets/css/tokens/dark.css",
     "./tokens/css/utilities": "./dist/src/assets/css/tokens/origam-utilities.css",
+    "./tokens/css/themes-all": "./dist/src/assets/css/tokens/themes-all.css",
     "./tokens/scss": "./dist/src/assets/scss/tokens/_primitive.scss",
     "./tokens/scss/primitive": "./dist/src/assets/scss/tokens/_primitive.scss",
     "./tokens/scss/light": "./dist/src/assets/scss/tokens/_light.scss",
     "./tokens/scss/dark": "./dist/src/assets/scss/tokens/_dark.scss",
     "./tokens/scss/utilities": "./dist/src/assets/scss/tokens/_origam-utilities.scss",
+    "./tokens/scss/themes-all": "./dist/src/assets/scss/tokens/_themes-all.scss",
     "./tokens/types": "./dist/src/types/tokens.type.d.ts",
     "./origam": "./dist/src/origam.js",
     "./nuxt": {
@@ -87,38 +92,6 @@
     "README.md",
     "CHANGELOG.md"
   ],
-  "scripts": {
-    "dev": "npm run server:dev && npm run story:dev && npm run docs:dev",
-    "build": "npm run server:build && npm run story:build && npm run docs:build",
-    "preview": "npm run server:preview && npm run story:preview && npm run docs:preview",
-    "story:dev": "CHOKIDAR_USEPOLLING=1 CHOKIDAR_INTERVAL=600 histoire dev",
-    "story:dev:native": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview",
-    "server:dev": "npm run tokens:build && vite",
-    "server:build": "npm run tokens:build && unbuild",
-    "server:preview": "vite preview",
-    "tokens:build": "node scripts/build-tokens.mjs",
-    "tokens:watch": "node scripts/build-tokens.mjs --watch",
-    "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict",
-    "docs:dev": "CHOKIDAR_USEPOLLING=1 CHOKIDAR_INTERVAL=600 vitepress dev docs",
-    "docs:dev:native": "vitepress dev docs",
-    "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs",
-    "type:build": "vue-tsc --build --force",
-    "type:dev": "vue-tsc --watch --noEmit --skipLibCheck",
-    "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix",
-    "test:unit": "vitest",
-    "test:a11y": "playwright test --config=playwright.a11y.config.ts",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:debug": "playwright test --debug",
-    "test:e2e:report": "playwright show-report",
-    "test:e2e:cypress-legacy": "cypress",
-    "test:open": "cypress open",
-    "clean": "rm -rf dist node_modules package-lock.json",
-    "prepublishOnly": "npm run tokens:build && npm run server:build && npm run test:unit -- --run"
-  },
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "qrcode-generator": "^2.0.4",
@@ -138,43 +111,29 @@
     }
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.3",
-    "@histoire/plugin-vue": "^1.0.0-beta.1",
     "@nuxt/kit": "^4.4.5",
-    "@playwright/test": "^1.48.0",
+    "@types/node": "^24.0.14",
     "@tokens-studio/sd-transforms": "^1.2.9",
-    "@types/jest": "^30.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/test-utils": "^2.4.6",
-    "axe-core": "^4.11.4",
-    "eslint": "^9.31.0",
-    "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-vue": "^10.3.0",
-    "globals": "^16.3.0",
-    "happy-dom": "^15.11.7",
-    "histoire": "^1.0.0-beta.1",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.1.2",
-    "markdown-it-codetabs": "^1.2.0",
-    "markdown-it-deflist": "^3.0.0",
-    "markdown-it-footnote": "^4.0.0",
     "sass": "^1.89.2",
     "style-dictionary": "^4.4.0",
     "ts-transformer-keys": "^0.4.4",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.37.0",
     "unbuild": "^3.5.0",
     "unplugin-vue-components": "^28.8.0",
     "vite": "^7.0.5",
     "vite-plugin-commonjs": "^0.10.4",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitepress": "^1.6.3",
-    "vitest": "^3.2.4",
     "vue": "^3.5.17",
-    "vue-eslint-parser": "^10.4.0",
-    "vue-i18n": "^11.1.10",
-    "vue-router": "^4.5.1",
     "vue-sfc-transformer": "^0.1.16",
     "vue-tsc": "^3.0.2"
+  },
+  "scripts": {
+    "build": "pnpm run tokens:build && unbuild",
+    "lib:build": "pnpm run build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.json",
+    "tokens:build": "node scripts/build-tokens.mjs",
+    "tokens:watch": "node scripts/build-tokens.mjs --watch",
+    "tokens:lint": "node scripts/build-tokens.mjs --dry-run --strict"
   }
-}
+}