@leavepulse/ui 0.12.0

package/dist/layout/registry.d.ts

@@ -0,0 +1,26 @@
+import { Component } from 'vue';
+export interface BlockDef {
+    /**
+     * Content component for this block. Optional: when the consumer renders block
+     * content via the canvas's #block slot (keyed by id), the registry is used
+     * only for tab chrome (title/icon) and no component is needed here.
+     */
+    component?: Component;
+    /** Human label shown on the tab / cell header. Defaults to the id. */
+    title?: string;
+    /** Optional iconify name (e.g. "lucide:activity") for the tab. */
+    icon?: string;
+    /** Whether the user may close this block. Defaults to true. */
+    closable?: boolean;
+    /** Props passed to the component. */
+    props?: Record<string, unknown>;
+}
+export type BlockRegistry = Record<string, BlockDef>;
+/**
+ * Identity helper that pins the key type so callers get autocomplete on block
+ * ids elsewhere (e.g. when seeding a layout). Purely for inference — it returns
+ * the object unchanged.
+ */
+export declare function defineBlocks<const T extends BlockRegistry>(blocks: T): T;
+/** Resolve a block's display title, falling back to its id. */
+export declare function blockTitle(registry: BlockRegistry, id: string): string;

package/dist/layout/tree.d.ts

@@ -0,0 +1,75 @@
+export type Dir = "row" | "col";
+export type Side = "left" | "right" | "top" | "bottom" | "center";
+export interface Leaf {
+    kind: "leaf";
+    id: string;
+    /**
+     * Block ids stacked as tabs in this cell. A plain cell is a single-element
+     * stack; dropping onto a cell's center adds another tab. The consumer maps
+     * each id to content via the canvas slot.
+     */
+    blocks: string[];
+    /** Index into `blocks` of the visible tab. */
+    active: number;
+    /** Flex fraction among siblings. */
+    size: number;
+}
+export interface Split {
+    kind: "split";
+    id: string;
+    dir: Dir;
+    size: number;
+    children: LayoutNode[];
+}
+export type LayoutNode = Leaf | Split;
+/** Build a single-row layout from a flat list of block ids (one cell each). */
+export declare function makeLayout(blocks: string[]): Split;
+export declare function findParent(node: Split, childId: string): Split | null;
+export declare function findLeaf(node: LayoutNode, id: string): Leaf | null;
+export declare function countLeaves(node: LayoutNode): number;
+/** Total blocks across all cells (a tabbed cell counts each of its tabs). */
+export declare function countBlocks(node: LayoutNode): number;
+/** Remove an entire cell (with all its tabs). */
+export declare function removeLeaf(root: Split, id: string): void;
+/**
+ * Remove one tab from a cell. Removing the last tab removes the cell itself
+ * (unless it's the only block left in the whole layout, which is kept).
+ */
+export declare function removeBlock(root: Split, leafId: string, index: number): void;
+export declare function addLeaf(root: Split, block: string, side?: Side): void;
+/** Append a block as a new tab in the target cell and focus it. */
+export declare function addTab(root: Split, leafId: string, block: string): void;
+/** Switch the visible tab of a cell. */
+export declare function setActiveTab(root: Split, leafId: string, index: number): void;
+/**
+ * Reorder a tab within its cell, moving the block at `from` to `to`. The same
+ * block stays visible afterwards (active follows the moved block by identity,
+ * not by index). Always available — not gated by edit mode.
+ */
+export declare function reorderTab(root: Split, leafId: string, from: number, to: number): void;
+/**
+ * Move an existing cell to a target. An edge side splits beside the target;
+ * `center` merges the moving cell's tabs into the target cell (and focuses
+ * the first moved tab).
+ */
+export declare function moveLeaf(root: Split, movingId: string, targetId: string, side: Side): void;
+/** Splitter drag: redistribute size between two adjacent siblings. */
+export declare function resizeAt(parent: Split, index: number, deltaFraction: number): void;
+interface SerializedLeaf {
+    kind: "leaf";
+    blocks: string[];
+    active: number;
+    size: number;
+    /** Legacy single-block form (pre-tabs); hydrated into `blocks`. */
+    block?: string;
+}
+interface SerializedSplit {
+    kind: "split";
+    dir: Dir;
+    size: number;
+    children: SerializedNode[];
+}
+type SerializedNode = SerializedLeaf | SerializedSplit;
+export declare function serializeLayout(root: Split): SerializedNode;
+export declare function deserializeLayout(data: SerializedNode): Split;
+export {};

package/dist/layout/useLayout.d.ts

@@ -0,0 +1,39 @@
+import { Ref } from 'vue';
+import { Side, Split } from './tree';
+export interface UseLayoutOptions {
+    /** Initial block ids, left-to-right, when no saved layout is loaded. */
+    initial: string[];
+    /** Max undo depth. */
+    historyLimit?: number;
+}
+export interface UseLayout {
+    /** The live reactive tree to hand to <LayoutCanvas v-model>. */
+    layout: Ref<Split>;
+    /** Block count across all tabs, handy for "N blocks" labels and guards. */
+    count: Ref<number>;
+    canUndo: Ref<boolean>;
+    canRedo: Ref<boolean>;
+    /** Add a block: a new cell on an edge, or a tab on the last cell (center). */
+    add: (block: string, side?: Side) => void;
+    /** Add a block as a tab in a specific cell. */
+    addTab: (leafId: string, block: string) => void;
+    /** Switch the visible tab of a cell. */
+    setActive: (leafId: string, index: number) => void;
+    /** Reorder a tab within its cell (always available, not edit-gated). */
+    reorderTab: (leafId: string, from: number, to: number) => void;
+    /** Remove one tab (drops the cell when it was the last tab). */
+    removeBlock: (leafId: string, index: number) => void;
+    /** Remove an entire cell with all its tabs. */
+    remove: (leafId: string) => void;
+    move: (movingId: string, targetId: string, side: Side) => void;
+    resize: (parent: Split, index: number, deltaFraction: number) => void;
+    undo: () => void;
+    redo: () => void;
+    /** Replace the whole layout from a flat block list. */
+    reset: (blocks?: string[]) => void;
+    /** Serialize to JSON-safe data for persistence. */
+    serialize: () => unknown;
+    /** Replace the layout from previously serialized data. */
+    hydrate: (data: unknown) => void;
+}
+export declare function useLayout(options: UseLayoutOptions): UseLayout;

package/dist/theme/config.d.ts

@@ -0,0 +1,16 @@
+import { Split } from '../layout/tree';
+import { TokenSet } from './tokens';
+export declare const UI_CONFIG_VERSION = 1;
+export interface UiConfig {
+    version: number;
+    theme: TokenSet;
+    /** Optional — apps without a composable layout omit it. */
+    layout?: Split;
+}
+export interface SerializedUiConfig {
+    version: number;
+    theme: TokenSet;
+    layout?: unknown;
+}
+export declare function serializeConfig(config: UiConfig): string;
+export declare function parseConfig(json: string): UiConfig;

package/dist/theme/define.d.ts

@@ -0,0 +1,12 @@
+import { presets } from './presets';
+import { ColorTokens, DensityTokens, FontTokens, ShapeTokens, SurfaceTokens, TokenSet } from './tokens';
+export interface ThemeOverrides {
+    name?: string;
+    mode?: "dark" | "light";
+    colors?: Partial<ColorTokens>;
+    shape?: Partial<ShapeTokens>;
+    density?: Partial<DensityTokens>;
+    font?: Partial<FontTokens>;
+    surface?: Partial<SurfaceTokens>;
+}
+export declare function defineTheme(base: TokenSet | keyof typeof presets, overrides?: ThemeOverrides): TokenSet;

package/dist/theme/presets.d.ts

@@ -0,0 +1,20 @@
+import { TokenSet } from './tokens';
+export declare const dark: TokenSet;
+export declare const light: TokenSet;
+export declare const lime: TokenSet;
+export declare const leavepulse: TokenSet;
+export declare const rose: TokenSet;
+export declare const amber: TokenSet;
+export declare const violet: TokenSet;
+export declare const nord: TokenSet;
+export declare const presets: {
+    readonly dark: TokenSet;
+    readonly light: TokenSet;
+    readonly lime: TokenSet;
+    readonly leavepulse: TokenSet;
+    readonly rose: TokenSet;
+    readonly amber: TokenSet;
+    readonly violet: TokenSet;
+    readonly nord: TokenSet;
+};
+export type PresetName = keyof typeof presets;

package/dist/theme/tokens.d.ts

@@ -0,0 +1,72 @@
+export interface ColorTokens {
+    surface: string;
+    surfaceRaised: string;
+    surfaceSoft: string;
+    ink: string;
+    inkInverse: string;
+    muted: string;
+    mutedStrong: string;
+    brand: string;
+    brandHover: string;
+    brandSoft: string;
+    action: string;
+    actionHover: string;
+    accent: string;
+    danger: string;
+    dangerHover: string;
+    dangerSoft: string;
+    line: string;
+    lineStrong: string;
+    ring: string;
+}
+export interface ShapeTokens {
+    radiusControl: number;
+    radiusCard: number;
+    radiusPill: number;
+}
+export interface DensityTokens {
+    /** base spacing unit in px */
+    spacingUnit: number;
+    controlSm: number;
+    controlMd: number;
+    controlLg: number;
+}
+export interface FontTokens {
+    /** CSS font-family stack for UI text */
+    sans: string;
+    /** CSS font-family stack for numerals / code */
+    mono: string;
+}
+export interface SurfaceTokens {
+    /** Border width for panels/cards/controls (CSS length, e.g. "1px"). */
+    borderWidth: string;
+    /** backdrop-filter blur radius (CSS length; "0" disables glass blur). */
+    panelBlur: string;
+    /** backdrop-filter saturate (unitless or %, e.g. "100%" / "180%"). */
+    panelSaturate: string;
+    /** Overlay painted over a panel's base color ("none" or a gradient). */
+    panelOverlay: string;
+    /** Box-shadow for a raised panel (may be multi-layer for glass). */
+    panelShadow: string;
+    /** Inset highlight line for a panel ("none" or an inset box-shadow). */
+    panelInset: string;
+}
+export interface TokenSet {
+    /** human label, e.g. "Lime" */
+    name: string;
+    /** "dark" | "light" — drives `color-scheme` and the data-theme-mode hint */
+    mode: "dark" | "light";
+    colors: ColorTokens;
+    shape: ShapeTokens;
+    density: DensityTokens;
+    font: FontTokens;
+    /** Optional skin axis; older themes without it fall back to a flat default. */
+    surface?: SurfaceTokens;
+}
+/** camelCase token key → CSS custom property name. */
+export declare const COLOR_VARS: Record<keyof ColorTokens, string>;
+export declare const SHAPE_VARS: Record<keyof ShapeTokens, string>;
+export declare const DENSITY_VARS: Record<keyof DensityTokens, string>;
+export declare const FONT_VARS: Record<keyof FontTokens, string>;
+export declare const SURFACE_VARS: Record<keyof SurfaceTokens, string>;
+export declare const DEFAULT_SURFACE: SurfaceTokens;

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,36 @@
+import { ComputedRef, DeepReadonly, Ref } from 'vue';
+import { TokenSet } from './tokens';
+export declare function applyTheme(theme: TokenSet, root?: HTMLElement): void;
+/** Point a circular theme reveal expands from (viewport px). */
+export interface RevealOrigin {
+    x: number;
+    y: number;
+}
+export declare function applyThemeWithTransition(theme: TokenSet, origin?: RevealOrigin, root?: HTMLElement, durationMs?: number): void;
+export declare function serializeTheme(theme: TokenSet): string;
+export declare function themeToCssVars(theme: TokenSet): string;
+/** Render a theme as a complete CSS rule (default selector `:root`). */
+export declare function themeToCssRule(theme: TokenSet, selector?: string): string;
+/** Parse + shallow-validate a theme JSON; throws on a malformed shape. */
+export declare function parseTheme(json: string): TokenSet;
+export declare function bootstrapTheme(fallback: TokenSet): TokenSet;
+export declare function cacheTheme(theme: TokenSet): void;
+export interface UseTheme {
+    /** The active theme, kept in sync by the kit. Null until hydrated (SSR/first
+     *  paint) — reactive, so a switcher binds straight to it. */
+    current: DeepReadonly<Ref<TokenSet | null>>;
+    /** The active theme's name (""="not yet hydrated"). */
+    currentName: ComputedRef<string>;
+    /** Set + persist a theme (with the circular reveal if `origin`/transition).
+     *  This is the one call a switcher needs — it updates `current` too. */
+    setTheme: (theme: TokenSet, origin?: RevealOrigin) => void;
+    /** Seed the fallback (used when nothing is cached) and hydrate now. Call once
+     *  at app start (client) — optional; the first useTheme() hydrates anyway. */
+    init: (fallback: TokenSet) => TokenSet;
+    apply: (theme: TokenSet) => void;
+    applyWithTransition: (theme: TokenSet, origin?: RevealOrigin) => void;
+    serialize: typeof serializeTheme;
+    parse: typeof parseTheme;
+    bootstrap: typeof bootstrapTheme;
+}
+export declare function useTheme(): UseTheme;

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@leavepulse/ui",
+  "version": "0.12.0",
+  "type": "module",
+  "description": "LeavePulse token-driven Vue component kit.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LeavePulse/leavepulse-ui.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./src/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "style": "./src/index.css",
+      "import": "./dist/index.js"
+    },
+    "./nuxt": "./src/nuxt.ts",
+    "./css": "./src/index.css",
+    "./tokens.css": "./src/tokens/tokens.css",
+    "./scrollbar.css": "./src/tokens/scrollbar.css",
+    "./canvas.css": "./src/canvas.css"
+  },
+  "publishConfig": {
+    "registry": "https://npm.pkg.github.com"
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/icons.ts",
+    "**/icons.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "gen:names": "node scripts/gen-component-names.mjs",
+    "build": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
+    "dev:dist": "vite build --watch --config vite.lib.config.ts",
+    "prepublishOnly": "node scripts/gen-component-names.mjs && vue-tsc --noEmit -p tsconfig.build.json && vite build --config vite.lib.config.ts",
+    "typecheck": "vue-tsc --noEmit",
+    "release": "npm version patch -m \"chore: release v%s\" && git push --follow-tags",
+    "release:minor": "npm version minor -m \"chore: release v%s\" && git push --follow-tags",
+    "release:major": "npm version major -m \"chore: release v%s\" && git push --follow-tags"
+  },
+  "peerDependencies": {
+    "@iconify-json/lucide": "^1.2.0",
+    "@iconify/vue": "^5.0.0",
+    "@internationalized/date": "^3.5.0",
+    "@nuxt/kit": "^3.0.0 || ^4.0.0",
+    "@vueuse/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
+    "motion-v": "^2.2.0",
+    "reka-ui": "^2.9.0",
+    "tailwind-merge": "^3.0.0",
+    "tailwind-variants": "^3.0.0",
+    "tailwindcss": "^4.0.0",
+    "vaul-vue": "^0.4.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/kit": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.112",
+    "@iconify/vue": "^5.0.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "motion-v": "^2.2.1",
+    "reka-ui": "^2.9.10",
+    "shiki": "^4.2.0",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5.6.3",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^5.0.2",
+    "vue": "3.5.31",
+    "vue-tsc": "^3.0.0"
+  },
+  "dependencies": {
+    "@vue-flow/background": "^1.3.2",
+    "@vue-flow/controls": "^1.1.3",
+    "@vue-flow/core": "^1.48.2",
+    "@vue-flow/minimap": "^1.5.4",
+    "vaul-vue": "^0.4.1"
+  }
+}

package/src/canvas.css

@@ -0,0 +1,67 @@
+/*
+ * LpTopologyCanvas styles — Vue Flow base CSS + kit-token chrome theming.
+ *
+ * Shipped as a standalone CSS file (the "@leavepulse/ui/canvas.css" export) so
+ * consuming apps get the Vue Flow base styles + canvas chrome with ONE import.
+ * Component-local CSS imports (`import "@vue-flow/core/dist/style.css"` inside a
+ * .vue) don't reach apps through the built dist, and scoped component styles
+ * aren't emitted by the consumer's Tailwind @source either — so canvas styling
+ * lives here. App usage:  @import "@leavepulse/ui/canvas.css";
+ */
+
+@import "@vue-flow/core/dist/style.css";
+@import "@vue-flow/core/dist/theme-default.css";
+@import "@vue-flow/controls/dist/style.css";
+@import "@vue-flow/minimap/dist/style.css";
+
+.lp-topology {
+  background: var(--color-surface);
+}
+
+.lp-topology .vue-flow__controls {
+  box-shadow: var(--shadow-panel);
+  border-radius: var(--radius-control);
+  overflow: hidden;
+}
+.lp-topology .vue-flow__controls-button {
+  background: var(--color-surface-raised);
+  border-bottom: 1px solid var(--color-line);
+  fill: var(--color-muted-strong);
+}
+.lp-topology .vue-flow__controls-button:hover {
+  background: var(--color-surface-soft);
+}
+.lp-topology .vue-flow__minimap {
+  border-radius: var(--radius-card);
+  border: 1px solid var(--color-line);
+  overflow: hidden;
+  /* Vue Flow defaults the minimap to a white background; theme it. */
+  background-color: var(--color-surface-raised);
+}
+.lp-topology .vue-flow__minimap svg {
+  background-color: var(--color-surface-raised);
+}
+/* The dimmed area outside the current viewport. */
+.lp-topology .vue-flow__minimap-mask {
+  fill: color-mix(in srgb, var(--color-surface) 70%, transparent);
+}
+.lp-topology .vue-flow__edge-text {
+  fill: var(--color-muted-strong);
+}
+.lp-topology .vue-flow__edge-textbg {
+  fill: var(--color-surface);
+}
+
+/* Host-frame (group node) title. Vue Flow's default group label is a dim,
+   centered grey that's nearly invisible on the dark surface — pin it to the
+   top-left of the frame and use the ink token so host names (proxy-vps,
+   app-vps-1, …) read clearly. */
+.lp-topology .vue-flow__node-group {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-ink);
+}

package/src/component-names.ts

@@ -0,0 +1,65 @@
+/* AUTO-GENERATED by scripts/gen-component-names.mjs — do not edit.
+ * The full list of kit component names, kept in sync with the component files
+ * so the Nuxt module (./nuxt) auto-registers every component including new ones. */
+export const COMPONENT_NAMES = [
+  "LayoutCanvas",
+  "LayoutNode",
+  "LpAlert",
+  "LpAppShell",
+  "LpAutocomplete",
+  "LpAvatar",
+  "LpBadge",
+  "LpBreadcrumbs",
+  "LpButton",
+  "LpCalendar",
+  "LpCard",
+  "LpCheckbox",
+  "LpCodeBlock",
+  "LpCommandPalette",
+  "LpConfirmDialog",
+  "LpContextMenu",
+  "LpDatePicker",
+  "LpDisclosure",
+  "LpDivider",
+  "LpDrawer",
+  "LpDropdownMenu",
+  "LpEmptyState",
+  "LpFormField",
+  "LpIcon",
+  "LpInfraNode",
+  "LpInput",
+  "LpLaneNode",
+  "LpLink",
+  "LpLogViewer",
+  "LpModal",
+  "LpNotificationBell",
+  "LpNumberField",
+  "LpOtpInput",
+  "LpPagination",
+  "LpPasswordInput",
+  "LpPhoneInput",
+  "LpPopover",
+  "LpProgress",
+  "LpRadio",
+  "LpRadioGroup",
+  "LpScrollArea",
+  "LpSegmented",
+  "LpSelect",
+  "LpServiceNode",
+  "LpSidebar",
+  "LpSidebarNav",
+  "LpSkeleton",
+  "LpSlider",
+  "LpStat",
+  "LpStepper",
+  "LpSwitch",
+  "LpTable",
+  "LpTableOfContents",
+  "LpTabs",
+  "LpTextarea",
+  "LpThemeSwitcher",
+  "LpToaster",
+  "LpTooltip",
+  "LpTopologyCanvas",
+  "LpUptimeBar"
+] as const

package/src/components/LayoutCanvas.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/*
+ * LayoutCanvas — a user-composable block layout.
+ *
+ * Renders a layout tree (v-model) of cells. Each cell is a tab stack of blocks.
+ * In `edit` mode the user can drag a cell onto another cell's edge to split,
+ * drop on the center to merge as tabs, drag dividers to resize, switch tabs,
+ * and close tabs. Block content is supplied through the `#block` scoped slot,
+ * keyed by the block id stored in the tree — the canvas owns geometry + chrome,
+ * the consumer owns content. Pass a `registry` for tab titles/icons.
+ *
+ * The tree is plain serializable data (see layout/tree.ts).
+ */
+import LayoutNode from "./LayoutNode.vue"
+import {
+  moveLeaf,
+  removeBlock,
+  reorderTab,
+  resizeAt,
+  setActiveTab,
+  type Side,
+  type Split,
+} from "../layout/tree"
+import type { BlockRegistry } from "../layout/registry"
+import { ref } from "vue"
+
+const props = defineProps<{
+  modelValue: Split
+  edit?: boolean
+  /** Catalogue mapping block ids to titles/icons for the tab bars. */
+  registry?: BlockRegistry
+}>()
+
+// modelValue is a reactive tree we mutate in place; no emit needed for
+// structural changes, but we keep the v-model contract for replacement
+// (e.g. load-from-disk swaps the whole tree).
+defineEmits<{ (e: "update:modelValue", value: Split): void }>()
+
+defineSlots<{
+  block(props: { block: string; leafId: string; edit: boolean }): unknown
+}>()
+
+const dragId = ref<string | null>(null)
+
+function onDrop(targetId: string, side: Side) {
+  if (dragId.value) moveLeaf(props.modelValue, dragId.value, targetId, side)
+  dragId.value = null
+}
+
+function onResize(parent: Split, index: number, delta: number) {
+  resizeAt(parent, index, delta)
+}
+</script>
+
+<template>
+  <div class="flex min-h-0 min-w-0 flex-1">
+    <LayoutNode
+      :node="modelValue"
+      :drag-id="dragId"
+      :edit="!!edit"
+      :registry="registry"
+      class="flex-1"
+      @dragstart="(id) => (dragId = id)"
+      @dragend="dragId = null"
+      @drop="onDrop"
+      @set-active="(leafId, i) => setActiveTab(modelValue, leafId, i)"
+      @remove-block="(leafId, i) => removeBlock(modelValue, leafId, i)"
+      @reorder-tab="(leafId, from, to) => reorderTab(modelValue, leafId, from, to)"
+      @resize="onResize"
+    >
+      <template #block="slotProps">
+        <slot name="block" v-bind="slotProps" />
+      </template>
+    </LayoutNode>
+  </div>
+</template>