@leavepulse/ui 0.77.3 → 0.78.1

package/dist/layout/tree.js

@@ -1,3 +1,4 @@
+import { clamp } from "../composables/clamp.js";
 import { reactive } from "vue";
 let uid = 0;
 const nid = () => `lp-n${uid++}`;
@@ -133,10 +134,9 @@ function insertBeside(root, moving, targetId, side) {
 function moveLeaf(root, movingId, targetId, side) {
   if (movingId === targetId) return;
   const moving = findLeaf(root, movingId);
-  if (!moving) return;
+  const target = findLeaf(root, targetId);
+  if (!moving || !target) return;
   if (side === "center") {
-    const target = findLeaf(root, targetId);
-    if (!target) return;
     const merged = moving.blocks;
     detach(root, movingId);
     target.active = target.blocks.length;
@@ -161,22 +161,26 @@ function serializeLayout(root) {
   const strip = (n) => n.kind === "leaf" ? { kind: "leaf", blocks: [...n.blocks], active: n.active, size: n.size } : { kind: "split", dir: n.dir, size: n.size, children: n.children.map(strip) };
   return strip(root);
 }
+const validSize = (size) => typeof size === "number" && Number.isFinite(size) && size > 0 ? size : 1;
 function deserializeLayout(data) {
   const hydrate = (n) => {
-    if (n.kind === "leaf") {
-      const blocks = n.blocks ?? (n.block != null ? [n.block] : []);
-      const active = Math.min(Math.max(n.active ?? 0, 0), Math.max(blocks.length - 1, 0));
-      return { kind: "leaf", id: nid(), blocks, active, size: n.size ?? 1 };
+    if (n?.kind === "leaf") {
+      const listed = Array.isArray(n.blocks) ? n.blocks : n.block != null ? [n.block] : [];
+      const blocks = listed.filter((block) => typeof block === "string");
+      if (!blocks.length) return null;
+      const wanted = Number.isInteger(n.active) ? n.active : 0;
+      const active = clamp(wanted, 0, blocks.length - 1);
+      return { kind: "leaf", id: nid(), blocks, active, size: validSize(n.size) };
     }
-    return {
-      kind: "split",
-      id: nid(),
-      dir: n.dir,
-      size: n.size ?? 1,
-      children: n.children.map(hydrate)
-    };
+    if (n?.kind !== "split" || !Array.isArray(n.children)) return null;
+    const children = n.children.map(hydrate).filter((child) => child !== null);
+    if (!children.length) return null;
+    return { kind: "split", id: nid(), dir: n.dir === "col" ? "col" : "row", size: validSize(n.size), children };
   };
-  return reactive(hydrate(data));
+  if (data?.kind !== "leaf" && data?.kind !== "split") throw new Error("Invalid layout");
+  const root = hydrate(data);
+  if (root?.kind === "split") return reactive(root);
+  return reactive({ kind: "split", id: nid(), dir: "row", size: 1, children: root ? [root] : [] });
 }
 function snapshotLayout(root) {
   const strip = (n) => n.kind === "leaf" ? { kind: "leaf", id: n.id, blocks: [...n.blocks], active: n.active, size: n.size } : { kind: "split", id: n.id, dir: n.dir, size: n.size, children: n.children.map(strip) };

package/dist/layout/useLayout.d.ts

@@ -50,5 +50,7 @@ export interface UseLayout {
     serialize: () => unknown;
     /** Replace the layout from previously serialized data. */
     hydrate: (data: unknown) => void;
+    /** Forget undo and redo, for a layout that replaces this one rather than edits it. */
+    clearHistory: () => void;
 }
 export declare function useLayout(options: UseLayoutOptions): UseLayout;

package/dist/layout/useLayout.js

@@ -79,7 +79,11 @@ function useLayout(options) {
     serialize: () => serializeLayout(layout.value),
     hydrate: (data) => record(() => {
       layout.value = deserializeLayout(data);
-    })
+    }),
+    clearHistory: () => {
+      past.value = [];
+      future.value = [];
+    }
   };
 }
 export {

package/dist/layout/useWorkspaces.d.ts

@@ -0,0 +1,52 @@
+import { type ComputedRef } from "vue";
+import { type UseLayout } from "./useLayout";
+export interface WorkspaceSeed {
+    id?: string;
+    name: string;
+    blocks: string[];
+}
+export interface WorkspaceEntry {
+    id: string;
+    name: string;
+    layout: unknown;
+}
+export interface WorkspaceSummary {
+    id: string;
+    name: string;
+}
+/** One workspace as a file: what export gives and import takes. */
+export interface WorkspaceExport {
+    name: string;
+    layout: unknown;
+}
+export interface UseWorkspacesOptions {
+    /** Block ids of a new or unreadable workspace. */
+    initial: string[];
+    /** The workspaces a first visit starts with. One from `initial` when unset. */
+    defaults?: WorkspaceSeed[];
+    /** Keep them across visits under this key (see `usePersisted`). In memory without one. */
+    persist?: string;
+    historyLimit?: number;
+}
+export interface UseWorkspaces {
+    /** The live layout of the active workspace, for <LayoutCanvas v-model>. */
+    controller: UseLayout;
+    workspaces: ComputedRef<WorkspaceSummary[]>;
+    activeId: ComputedRef<string>;
+    switchTo: (id: string) => void;
+    /** Add one and show it. From `blocks`, else from `initial`. Returns its id. */
+    create: (name: string, blocks?: string[]) => string;
+    /** Copy a workspace (the active one by default) and show the copy. */
+    duplicate: (id?: string, name?: string) => string | null;
+    rename: (id: string, name: string) => void;
+    /** The last workspace stays: there is always one to show. */
+    remove: (id: string) => void;
+    /** Back to `initial`, for the active workspace. */
+    resetActive: () => void;
+    exportWorkspace: (id?: string) => WorkspaceExport | null;
+    /** Add a workspace from an export. Null, and nothing added, when it does not read as a layout. */
+    importWorkspace: (data: unknown) => string | null;
+    /** Write pending edits now instead of after the debounce. */
+    save: () => void;
+}
+export declare function useWorkspaces(options: UseWorkspacesOptions): UseWorkspaces;

package/dist/layout/useWorkspaces.js

@@ -0,0 +1,140 @@
+import { computed, watch, getCurrentScope, onScopeDispose } from "vue";
+import { usePersisted, useKitStorage } from "../composables/usePersisted.js";
+import { serializeLayout, makeLayout, deserializeLayout } from "./tree.js";
+import { useLayout } from "./useLayout.js";
+const STORE_VERSION = 1;
+const SAVE_DELAY_MS = 300;
+const DEFAULT_NAME = "Workspace";
+function isStore(value) {
+  const store = value;
+  if (!store || store.version !== STORE_VERSION || typeof store.active !== "string") return false;
+  if (!Array.isArray(store.items) || store.items.length === 0) return false;
+  const ids = /* @__PURE__ */ new Set();
+  for (const item of store.items) {
+    if (!item || typeof item.id !== "string" || typeof item.name !== "string" || ids.has(item.id)) return false;
+    ids.add(item.id);
+  }
+  return true;
+}
+let idCount = 0;
+const newId = () => `ws-${Date.now().toString(36)}-${(idCount++).toString(36)}`;
+function useWorkspaces(options) {
+  const seed = (blocks) => serializeLayout(makeLayout(blocks));
+  const seeds = options.defaults?.length ? options.defaults : [{ name: DEFAULT_NAME, blocks: options.initial }];
+  const items = seeds.map((s, i) => ({ id: s.id ?? `ws-default-${i}`, name: s.name, layout: seed(s.blocks) }));
+  const store = usePersisted(
+    () => options.persist && `lp-workspaces:${options.persist}`,
+    { version: STORE_VERSION, active: items[0].id, items },
+    { validate: isStore }
+  );
+  const controller = useLayout({ initial: options.initial, historyLimit: options.historyLimit });
+  const entry = (id) => store.value.items.find((item) => item.id === id);
+  const activeId = computed(() => entry(store.value.active) ? store.value.active : store.value.items[0].id);
+  const workspaces = computed(() => store.value.items.map(({ id, name }) => ({ id, name })));
+  let timer;
+  function save() {
+    clearTimeout(timer);
+    timer = void 0;
+    const current = entry(activeId.value);
+    if (!current) return;
+    const layout = controller.serialize();
+    if (JSON.stringify(layout) !== JSON.stringify(current.layout)) current.layout = layout;
+  }
+  function show(id) {
+    const target = entry(id);
+    if (!target) return;
+    try {
+      controller.hydrate(target.layout);
+    } catch {
+      controller.reset();
+    }
+    controller.clearHistory();
+  }
+  function switchTo(id) {
+    if (!entry(id) || id === activeId.value) return;
+    save();
+    store.value.active = id;
+    show(id);
+  }
+  function add(name, layout) {
+    save();
+    const id = newId();
+    store.value.items.push({ id, name: name.trim() || DEFAULT_NAME, layout });
+    store.value.active = id;
+    show(id);
+    return id;
+  }
+  function duplicate(id = activeId.value, name) {
+    save();
+    const source = entry(id);
+    if (!source) return null;
+    return add(name ?? source.name, JSON.parse(JSON.stringify(source.layout)));
+  }
+  function rename(id, name) {
+    const target = entry(id);
+    const trimmed = name.trim();
+    if (target && trimmed) target.name = trimmed;
+  }
+  function remove(id) {
+    if (store.value.items.length <= 1) return;
+    const at = store.value.items.findIndex((item) => item.id === id);
+    if (at === -1) return;
+    const wasActive = id === activeId.value;
+    if (!wasActive) save();
+    store.value.items.splice(at, 1);
+    if (!wasActive) return;
+    clearTimeout(timer);
+    const next = store.value.items[Math.min(at, store.value.items.length - 1)];
+    store.value.active = next.id;
+    show(next.id);
+  }
+  function exportWorkspace(id = activeId.value) {
+    save();
+    const source = entry(id);
+    return source ? JSON.parse(JSON.stringify({ name: source.name, layout: source.layout })) : null;
+  }
+  function importWorkspace(data) {
+    const candidate = data;
+    if (!candidate || typeof candidate.name !== "string") return null;
+    try {
+      return add(candidate.name, serializeLayout(deserializeLayout(candidate.layout)));
+    } catch {
+      return null;
+    }
+  }
+  show(activeId.value);
+  watch(
+    () => JSON.stringify(controller.serialize()),
+    () => {
+      clearTimeout(timer);
+      timer = setTimeout(save, SAVE_DELAY_MS);
+    }
+  );
+  const storage = useKitStorage();
+  if (getCurrentScope()) {
+    onScopeDispose(() => {
+      save();
+      if (options.persist) storage.set(`lp-workspaces:${options.persist}`, JSON.stringify(store.value));
+    });
+  }
+  return {
+    controller,
+    workspaces,
+    activeId,
+    switchTo,
+    create: (name, blocks) => add(name, seed(blocks ?? options.initial)),
+    duplicate,
+    rename,
+    remove,
+    resetActive: () => {
+      controller.reset();
+      save();
+    },
+    exportWorkspace,
+    importWorkspace,
+    save
+  };
+}
+export {
+  useWorkspaces
+};

package/dist/{chunks/backdrop-Dkf2vM81.js → theme/backdrop.js}

@@ -51,9 +51,9 @@ function setGlassBackdrop(background, options = {}) {
   startTracking();
 }
 export {
-  GLASS_BACKDROP_ATTR as G,
-  NO_BACKDROP_ATTR as N,
-  detectBackdropFilter as d,
-  isBrokenBackdropEngine as i,
-  setGlassBackdrop as s
+  GLASS_BACKDROP_ATTR,
+  NO_BACKDROP_ATTR,
+  detectBackdropFilter,
+  isBrokenBackdropEngine,
+  setGlassBackdrop
 };

package/dist/theme/config.js

@@ -0,0 +1,25 @@
+import { deserializeLayout, serializeLayout } from "../layout/tree.js";
+import { parseTheme, serializeTheme } from "./useTheme.js";
+const UI_CONFIG_VERSION = 1;
+function serializeConfig(config) {
+  const out = {
+    version: UI_CONFIG_VERSION,
+    theme: JSON.parse(serializeTheme(config.theme)),
+    layout: config.layout ? serializeLayout(config.layout) : void 0
+  };
+  return JSON.stringify(out);
+}
+function parseConfig(json) {
+  const raw = JSON.parse(json);
+  if (!raw || typeof raw !== "object") throw new Error("Invalid UiConfig");
+  return {
+    version: raw.version ?? UI_CONFIG_VERSION,
+    theme: parseTheme(JSON.stringify(raw.theme)),
+    layout: raw.layout ? deserializeLayout(raw.layout) : void 0
+  };
+}
+export {
+  UI_CONFIG_VERSION,
+  parseConfig,
+  serializeConfig
+};

package/dist/theme/define.js

@@ -0,0 +1,61 @@
+import { parseColor, rgbToHex } from "../components/color.js";
+import { presets } from "./presets.js";
+function defineTheme(base, overrides = {}) {
+  const src = typeof base === "string" ? presets[base] : base;
+  return {
+    name: overrides.name ?? src.name,
+    mode: overrides.mode ?? src.mode,
+    colors: { ...src.colors, ...overrides.colors },
+    shape: { ...src.shape, ...overrides.shape },
+    density: { ...src.density, ...overrides.density },
+    font: { ...src.font, ...overrides.font },
+    surface: src.surface || overrides.surface ? { ...src.surface, ...overrides.surface } : void 0
+  };
+}
+function luminance({ r, g, b }) {
+  const lin = (n) => {
+    const x = n / 255;
+    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+const READABLE = 4.5;
+const mixRgb = (a, b, t) => ({
+  r: Math.round(a.r + (b.r - a.r) * t),
+  g: Math.round(a.g + (b.g - a.g) * t),
+  b: Math.round(a.b + (b.b - a.b) * t),
+  a: 1
+});
+function textOn(fill, current) {
+  const now = parseColor(current);
+  if (now && contrast(fill, now) >= READABLE) return current;
+  const dark = { r: 11, g: 15, b: 18 };
+  const light = { r: 255, g: 255, b: 255 };
+  return contrast(fill, dark) >= contrast(fill, light) ? "#0b0f12" : "#ffffff";
+}
+function withBrand(base, color) {
+  const src = typeof base === "string" ? presets[base] : base;
+  const rgb = parseColor(color);
+  if (!rgb) return src;
+  const solid = { ...rgb, a: 1 };
+  const dark = src.mode === "dark";
+  const hover = mixRgb(solid, dark ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 }, dark ? 0.12 : 0.1);
+  const tint = (alpha) => `rgba(${solid.r}, ${solid.g}, ${solid.b}, ${alpha})`;
+  return defineTheme(src, {
+    colors: {
+      brand: rgbToHex(solid),
+      brandHover: rgbToHex(hover),
+      brandSoft: tint(dark ? 0.16 : 0.12),
+      ring: tint(0.45),
+      inkInverse: textOn(solid, src.colors.inkInverse)
+    }
+  });
+}
+export {
+  defineTheme,
+  withBrand
+};

package/dist/{chunks/palette-Co8tSASo.js → theme/palette.js}

@@ -1,4 +1,4 @@
-import { defineComponent, h, toValue, defineAsyncComponent } from "vue";
+import { defineAsyncComponent, defineComponent, h, toValue } from "vue";
 import { usePaletteScope, usePaletteCommands } from "../composables/usePaletteCommands.js";
 import { useLabels } from "../composables/useLpConfig.js";
 const Editor = defineAsyncComponent(() => import("../components/LpPaletteTheme.vue.js"));
@@ -25,5 +25,5 @@ function usePaletteTheme(studio, options = {}) {
   }, { scope: options.scope });
 }
 export {
-  usePaletteTheme as u
+  usePaletteTheme
 };

package/dist/theme/presets.js

@@ -0,0 +1,239 @@
+const sharedShape = { radiusControl: 8, radiusCard: 14, radiusPill: 9999 };
+const sharedDensity = { spacingUnit: 4, controlSm: 32, controlMd: 38, controlLg: 44 };
+const interFont = {
+  sans: '"Inter", "Segoe UI", system-ui, sans-serif',
+  mono: '"JetBrains Mono", "SF Mono", ui-monospace, monospace'
+};
+const dark = {
+  name: "Dark",
+  mode: "dark",
+  colors: {
+    surface: "#080b0d",
+    surfaceRaised: "#12171d",
+    surfaceSoft: "#172027",
+    ink: "#eef5f1",
+    inkInverse: "#06100b",
+    muted: "#9aa8a2",
+    mutedStrong: "#c7d2cc",
+    brand: "#00bcff",
+    brandHover: "#19c6ff",
+    brandSoft: "rgba(0, 188, 255, 0.16)",
+    action: "#39e58c",
+    actionHover: "#4dffa1",
+    actionSoft: "rgba(57, 229, 140, 0.14)",
+    accent: "#f0b35a",
+    accentHover: "#f2bf74",
+    accentSoft: "rgba(240, 179, 90, 0.14)",
+    danger: "#ff6f6f",
+    dangerHover: "#ff8585",
+    dangerSoft: "rgba(255, 111, 111, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(255, 255, 255, 0.18)",
+    ring: "rgba(0, 188, 255, 0.45)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const light = {
+  name: "Light",
+  mode: "light",
+  colors: {
+    surface: "#f6f8f7",
+    surfaceRaised: "#ffffff",
+    surfaceSoft: "#eceff0",
+    ink: "#0d1714",
+    inkInverse: "#f8fff9",
+    muted: "#5d6b65",
+    mutedStrong: "#34433d",
+    brand: "#0086c7",
+    brandHover: "#0095db",
+    brandSoft: "rgba(0, 134, 199, 0.12)",
+    action: "#1f9d5f",
+    actionHover: "#23b06b",
+    actionSoft: "rgba(31, 157, 95, 0.12)",
+    accent: "#aa6f1d",
+    accentHover: "#b88641",
+    accentSoft: "rgba(170, 111, 29, 0.12)",
+    danger: "#c2333b",
+    dangerHover: "#d23b44",
+    dangerSoft: "rgba(194, 51, 59, 0.12)",
+    line: "rgba(13, 23, 20, 0.12)",
+    lineStrong: "rgba(13, 23, 20, 0.22)",
+    ring: "rgba(0, 134, 199, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const lime = {
+  name: "Lime",
+  mode: "dark",
+  colors: {
+    surface: "#050505",
+    surfaceRaised: "#0c0d0a",
+    surfaceSoft: "#14160f",
+    ink: "#f4f7ee",
+    inkInverse: "#0a0c05",
+    muted: "#8b8f80",
+    mutedStrong: "#c3c8b6",
+    brand: "#c4f042",
+    brandHover: "#d2ff5c",
+    brandSoft: "rgba(196, 240, 66, 0.14)",
+    action: "#5fd97a",
+    actionHover: "#74e88d",
+    actionSoft: "rgba(95, 217, 122, 0.14)",
+    accent: "#ffb84d",
+    accentHover: "#ffc369",
+    accentSoft: "rgba(255, 184, 77, 0.14)",
+    danger: "#ff6f6f",
+    dangerHover: "#ff8585",
+    dangerSoft: "rgba(255, 111, 111, 0.14)",
+    line: "rgba(255, 255, 255, 0.08)",
+    lineStrong: "rgba(196, 240, 66, 0.3)",
+    ring: "rgba(196, 240, 66, 0.4)"
+  },
+  // a sharper theme — overrides the shape axis too
+  shape: { radiusControl: 4, radiusCard: 6, radiusPill: 4 },
+  density: { ...sharedDensity },
+  // a distinct typeface so the theme has its own voice (not just colour)
+  font: {
+    sans: '"Space Grotesk", "Inter", system-ui, sans-serif',
+    mono: '"IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace'
+  }
+};
+const rose = {
+  name: "Rose",
+  mode: "dark",
+  colors: {
+    surface: "#120a0d",
+    surfaceRaised: "#1c1014",
+    surfaceSoft: "#26161b",
+    ink: "#fdeef1",
+    inkInverse: "#1a0d11",
+    muted: "#a98a92",
+    mutedStrong: "#d8c0c6",
+    brand: "#fb7185",
+    brandHover: "#fd8a9b",
+    brandSoft: "rgba(251, 113, 133, 0.14)",
+    action: "#34d399",
+    actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
+    accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
+    danger: "#ef4444",
+    dangerHover: "#f56565",
+    dangerSoft: "rgba(239, 68, 68, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(251, 113, 133, 0.3)",
+    ring: "rgba(251, 113, 133, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const amber = {
+  name: "Amber",
+  mode: "dark",
+  colors: {
+    surface: "#0f0b06",
+    surfaceRaised: "#1a130a",
+    surfaceSoft: "#241a0e",
+    ink: "#fdf3e6",
+    inkInverse: "#1a1206",
+    muted: "#a3927a",
+    mutedStrong: "#d6c6ad",
+    brand: "#f59e0b",
+    brandHover: "#fbb024",
+    brandSoft: "rgba(245, 158, 11, 0.14)",
+    action: "#4ade80",
+    actionHover: "#5cea90",
+    actionSoft: "rgba(74, 222, 128, 0.14)",
+    accent: "#38bdf8",
+    accentHover: "#58c8f9",
+    accentSoft: "rgba(56, 189, 248, 0.14)",
+    danger: "#f87171",
+    dangerHover: "#fa8a8a",
+    dangerSoft: "rgba(248, 113, 113, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(245, 158, 11, 0.3)",
+    ring: "rgba(245, 158, 11, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const violet = {
+  name: "Violet",
+  mode: "dark",
+  colors: {
+    surface: "#0c0a14",
+    surfaceRaised: "#15111f",
+    surfaceSoft: "#1d1729",
+    ink: "#f1eefb",
+    inkInverse: "#100b1a",
+    muted: "#948aa9",
+    mutedStrong: "#c6bedb",
+    brand: "#a78bfa",
+    brandHover: "#b69dfc",
+    brandSoft: "rgba(167, 139, 250, 0.14)",
+    action: "#34d399",
+    actionHover: "#4adeaa",
+    actionSoft: "rgba(52, 211, 153, 0.14)",
+    accent: "#fbbf24",
+    accentHover: "#fcc947",
+    accentSoft: "rgba(251, 191, 36, 0.14)",
+    danger: "#f87171",
+    dangerHover: "#fa8a8a",
+    dangerSoft: "rgba(248, 113, 113, 0.14)",
+    line: "rgba(255, 255, 255, 0.1)",
+    lineStrong: "rgba(167, 139, 250, 0.3)",
+    ring: "rgba(167, 139, 250, 0.4)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const nord = {
+  name: "Nord",
+  mode: "dark",
+  colors: {
+    surface: "#2e3440",
+    surfaceRaised: "#3b4252",
+    surfaceSoft: "#434c5e",
+    ink: "#eceff4",
+    inkInverse: "#2e3440",
+    muted: "#9aa4b8",
+    mutedStrong: "#d8dee9",
+    brand: "#88c0d0",
+    brandHover: "#9bccd9",
+    brandSoft: "rgba(136, 192, 208, 0.16)",
+    action: "#a3be8c",
+    actionHover: "#b3cb9f",
+    actionSoft: "rgba(163, 190, 140, 0.16)",
+    accent: "#ebcb8b",
+    accentHover: "#eed39e",
+    accentSoft: "rgba(235, 203, 139, 0.16)",
+    danger: "#bf616a",
+    dangerHover: "#cb727b",
+    dangerSoft: "rgba(191, 97, 106, 0.16)",
+    line: "rgba(236, 239, 244, 0.1)",
+    lineStrong: "rgba(136, 192, 208, 0.35)",
+    ring: "rgba(136, 192, 208, 0.45)"
+  },
+  shape: { ...sharedShape },
+  density: { ...sharedDensity },
+  font: { ...interFont }
+};
+const presets = { dark, light, lime, rose, amber, violet, nord };
+export {
+  amber,
+  dark,
+  light,
+  lime,
+  nord,
+  presets,
+  rose,
+  violet
+};