@labpane/ui 0.0.0-stage → 1.2.0

package/dist/ui/time-series-chart.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { type ChartOptions, type SeriesPoint } from "./time-series-model.js";
+export { DAY, DEFAULT_OPTIONS, type ChartOptions, type SeriesPoint, } from "./time-series-model.js";
+export type TimeSeriesChartProps = {
+    points: SeriesPoint[];
+    series: {
+        key: string;
+        color: string;
+    }[];
+    start: number;
+    options: ChartOptions;
+    onOptionsChange: (options: ChartOptions) => void;
+    title?: string;
+    subtitle?: string;
+    unit?: string;
+    label: string;
+};
+declare const TimeSeriesChart: React.ForwardRefExoticComponent<TimeSeriesChartProps & React.RefAttributes<HTMLDivElement>>;
+export { TimeSeriesChart };

package/dist/ui/time-series-model.d.ts

@@ -0,0 +1,90 @@
+/** Pure chart geometry: no DOM, React, clock or storage. */
+export declare const DAY = 86400000;
+export type Range = [number, number];
+export type SeriesPoint = {
+    time: number;
+    total: number;
+    values: Record<string, number>;
+    annotation?: string;
+    carried?: boolean;
+};
+export type ChartOptions = {
+    logarithmic: boolean;
+    logBase: number;
+    sma: boolean;
+    ema: boolean;
+    bollinger: boolean;
+    forecast: boolean;
+};
+export declare const DEFAULT_OPTIONS: ChartOptions;
+export declare const FORECAST_DAYS = 90;
+export declare const INDICATOR_PERIOD = 20;
+export declare function nearestPoint(points: SeriesPoint[], time: number): number;
+export declare function clampRange(range: Range, bounds: Range, minimum?: number): Range;
+export declare function zoomRange(range: Range, factor: number, anchor: number, bounds: Range): Range;
+export declare function indicators(points: SeriesPoint[], period?: number): {
+    time: number;
+    ema: number;
+    sma: number | null;
+    upper: number | null;
+    lower: number | null;
+}[];
+/** Fits the last 90 daily values, then anchors the projection to the latest actual value. */
+export declare function regression(points: SeriesPoint[]): {
+    slope: number;
+    r2: number;
+    points: {
+        time: number;
+        value: number;
+    }[];
+} | null;
+export declare function niceTicks(maximum: number, count?: number): number[];
+export declare function chartModel(points: SeriesPoint[], keys: string[], range: Range, width: number, height: number, options: ChartOptions, lockedDomain?: Range): {
+    plot: {
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+    };
+    domain: Range;
+    x: (time: number) => number;
+    y: (value: number) => number;
+    timeAt: (pixel: number) => number;
+    bands: {
+        key: string;
+        path: string;
+    }[];
+    totalPath: string;
+    xTicks: {
+        value: number;
+        pixel: number;
+    }[];
+    yTicks: {
+        value: number;
+        pixel: number;
+    }[];
+    positions: {
+        x: number;
+        y: number;
+    }[];
+    computed: {
+        time: number;
+        ema: number;
+        sma: number | null;
+        upper: number | null;
+        lower: number | null;
+    }[];
+    smaPath: string;
+    emaPath: string;
+    upperPath: string;
+    lowerPath: string;
+    forecast: {
+        slope: number;
+        r2: number;
+        points: {
+            time: number;
+            value: number;
+        }[];
+    } | null;
+    forecastPath: string;
+};

package/dist/ui/timing-tracks.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+export type TimingSpan = {
+    id: string;
+    start: number;
+    end: number;
+    label: string;
+    detail?: string;
+    color?: string;
+    /** A bound or observation window, not a measured execution interval. */
+    uncertain?: boolean;
+};
+export type TimingTrack = {
+    id: string;
+    label: string;
+    spans: TimingSpan[];
+};
+export type TimingTracksProps = {
+    tracks: TimingTrack[];
+    from: number;
+    to: number;
+    label?: string;
+    unit?: string;
+    onSelect?: (span: TimingSpan) => void;
+};
+/** Shared-clock tracks supplied by the caller. Deliberately no clock conversion. */
+declare const TimingTracks: React.ForwardRefExoticComponent<TimingTracksProps & React.RefAttributes<HTMLDivElement>>;
+export { TimingTracks };

package/dist/ui/toggle.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+declare const toggleVariants: {
+    default: string;
+    outline: string;
+};
+declare const toggleSizes: {
+    default: string;
+    sm: string;
+    lg: string;
+};
+type ToggleStyle = {
+    variant?: keyof typeof toggleVariants;
+    size?: keyof typeof toggleSizes;
+};
+declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleStyle & React.RefAttributes<HTMLButtonElement>>;
+declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref">) & ToggleStyle & {
+    spacing?: number;
+}) & React.RefAttributes<HTMLDivElement>>;
+declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & ToggleStyle & React.RefAttributes<HTMLButtonElement>>;
+export { Toggle, ToggleGroup, ToggleGroupItem };

package/dist/ui/tooltip.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+declare function Tooltip({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
+declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/ui/topbar.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const Topbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const TopbarActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Topbar, TopbarActions };

package/dist/ui/use-chart-width.d.ts

@@ -0,0 +1,5 @@
+/** Measures a chart container with a ResizeObserver. Zero widths (hidden tabs, display none) keep the last size. */
+export declare function useChartWidth(): {
+    container: import("react").RefObject<HTMLDivElement | null>;
+    width: number;
+};

package/dist/ui/use-mobile.d.ts

@@ -0,0 +1 @@
+export declare function useIsMobile(): boolean;

package/package.json

@@ -1,6 +1,118 @@
 {
   "name": "@labpane/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.0",
+  "description": "Page layouts, forms, dialogs, menus, tables, and an optional terminal for React",
+  "license": "MIT",
+  "homepage": "https://labpane.com",
+  "bugs": "https://github.com/labpane/labpane/issues",
+  "keywords": [
+    "react",
+    "radix",
+    "components",
+    "ui",
+    "tailwind",
+    "terminal"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./tailwind.css": {
+      "types": "./dist/styles.d.ts",
+      "style": "./styles.css",
+      "default": "./styles.css"
+    },
+    "./terminal": {
+      "types": "./dist/ui/terminal.d.ts",
+      "default": "./dist/terminal.js"
+    }
+  },
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/labpane/labpane.git",
+    "directory": "packages/ui"
+  },
+  "scripts": {
+    "build": "node -e \"require('node:fs').rmSync('dist', { recursive: true, force: true })\" && tsc -p tsconfig.json && esbuild index.ts terminal.tsx --bundle --sourcemap --splitting --chunk-names=[name]-[hash] --format=esm --packages=external --outdir=dist && tailwindcss -i styles.css -o dist/styles.css --minify && node ../unlayer.mjs dist/styles.css && node ../package-assets.mjs",
+    "test": "bun test",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^1.55.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.2.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.3.8",
+    "@radix-ui/react-tabs": "^1.1.22",
+    "@radix-ui/react-toggle": "^1.1.19",
+    "@radix-ui/react-toggle-group": "^1.1.20",
+    "@radix-ui/react-tooltip": "^1.3.0",
+    "@wterm/dom": "^0.5.4",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@wterm/dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.14.5",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.2.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.3.8",
+    "@radix-ui/react-tabs": "^1.1.22",
+    "@radix-ui/react-toggle": "^1.1.19",
+    "@radix-ui/react-toggle-group": "^1.1.20",
+    "@radix-ui/react-tooltip": "^1.3.0",
+    "@tailwindcss/cli": "^4.3.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/bun": "^1.4.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@wterm/dom": "^0.5.4",
+    "esbuild": "^0.28.2",
+    "postcss": "^8.5.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.3.3",
+    "tailwindcss3": "npm:tailwindcss@^3.4.17",
+    "typescript": "^7.0.2"
+  }
+}

package/styles.css

@@ -0,0 +1,358 @@
+@layer theme, base, components, utilities;
+@import "tailwindcss/theme.css" layer(theme) prefix(labui);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(labui) source(none);
+@source "./";
+@custom-variant dark (&:is(.dark *));
+
+:where(:root) {
+  --labui-font-sans:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --labui-font-mono:
+    ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+  --labui-font-display:
+    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --labui-radius: 0.75rem;
+  --labui-radius-dialog: 1.25rem;
+  --labui-control-height: 2.5rem;
+  --labui-control-height-sm: 2.25rem;
+  --labui-control-px: 0.75rem;
+  --labui-row-py: 0.625rem;
+  --labui-background: #eeeeee;
+  --labui-foreground: #242424;
+  --labui-card: #ffffff;
+  --labui-card-foreground: #242424;
+  --labui-popover: #fcfcfc;
+  --labui-popover-foreground: #242424;
+  --labui-primary: #05697a;
+  --labui-primary-foreground: #ffffff;
+  --labui-link: #05697a;
+  --labui-secondary: #e6e6e6;
+  --labui-secondary-foreground: #626262;
+  --labui-muted: #eeeeee;
+  --labui-muted-foreground: #626262;
+  --labui-accent: #e6e6e6;
+  --labui-accent-foreground: #242424;
+  --labui-destructive: #b12637;
+  --labui-destructive-foreground: #ffffff;
+  --labui-destructive-muted: #fff0f1;
+  --labui-success: #116d3b;
+  --labui-success-foreground: #ffffff;
+  --labui-warning: oklch(47.3% 0.137 46.201);
+  --labui-warning-foreground: #ffffff;
+  --labui-border: #d6d6d6;
+  --labui-input: #858585;
+  --labui-input-background: #eeeeee;
+  --labui-ring: #1d9db4;
+  --labui-overlay: color-mix(in srgb, #242424 18%, transparent);
+  --labui-info: #1e5aa8;
+  --labui-info-foreground: #ffffff;
+  --labui-chart-1: #05697a;
+  --labui-chart-2: #1d9db4;
+  --labui-chart-3: #116d3b;
+  --labui-chart-4: #b8741a;
+  --labui-chart-5: #7a4ea0;
+  --labui-sidebar: #f6f6f6;
+  --labui-sidebar-foreground: #242424;
+  --labui-sidebar-primary: #05697a;
+  --labui-sidebar-primary-foreground: #ffffff;
+  --labui-sidebar-accent: #e6e6e6;
+  --labui-sidebar-accent-foreground: #242424;
+  --labui-sidebar-border: #d6d6d6;
+  --labui-sidebar-ring: #1d9db4;
+  --labui-card-gap: 1.5rem;
+  --labui-card-px: 1.5rem;
+  --labui-card-py: 1.5rem;
+  --labui-topbar-height: 3rem;
+}
+
+:where(.dark) {
+  --labui-background: #1c1c1c;
+  --labui-foreground: #e8e8e8;
+  --labui-card: #242424;
+  --labui-card-foreground: #e8e8e8;
+  --labui-popover: #2d2d2d;
+  --labui-popover-foreground: #f3f3f3;
+  --labui-primary: #68bccf;
+  --labui-primary-foreground: #1c1c1c;
+  --labui-link: #68bccf;
+  --labui-secondary: #363636;
+  --labui-secondary-foreground: #e8e8e8;
+  --labui-muted: #2d2d2d;
+  --labui-muted-foreground: #a3a3a3;
+  --labui-accent: #363636;
+  --labui-accent-foreground: #f3f3f3;
+  --labui-destructive: #f0808c;
+  --labui-destructive-foreground: #ffffff;
+  --labui-destructive-muted: color-mix(in srgb, #f0808c 12%, #242424);
+  --labui-success: #3ddc84;
+  --labui-success-foreground: #06271a;
+  --labui-warning: oklch(87.9% 0.169 91.605);
+  --labui-warning-foreground: oklch(27.9% 0.077 45.635);
+  --labui-border: #363636;
+  --labui-input: #858585;
+  --labui-input-background: #242424;
+  --labui-ring: #68bccf;
+  --labui-overlay: color-mix(in srgb, #000000 50%, transparent);
+  --labui-info: #7fb4f0;
+  --labui-info-foreground: #0c2340;
+  --labui-chart-1: #68bccf;
+  --labui-chart-2: #1d9db4;
+  --labui-chart-3: #3ddc84;
+  --labui-chart-4: #e0a84a;
+  --labui-chart-5: #b58ce0;
+  --labui-sidebar: #202020;
+  --labui-sidebar-foreground: #e8e8e8;
+  --labui-sidebar-primary: #68bccf;
+  --labui-sidebar-primary-foreground: #1c1c1c;
+  --labui-sidebar-accent: #363636;
+  --labui-sidebar-accent-foreground: #f3f3f3;
+  --labui-sidebar-border: #363636;
+  --labui-sidebar-ring: #68bccf;
+}
+
+@media (forced-colors: active) {
+  :root,
+  .dark {
+    --labui-background: Canvas !important;
+    --labui-card: Canvas !important;
+    --labui-border: CanvasText !important;
+    --labui-foreground: CanvasText !important;
+  }
+}
+
+@theme inline {
+  --radius-sm: calc(var(--labui-radius) - 4px);
+  --radius-md: calc(var(--labui-radius) - 2px);
+  --radius-lg: var(--labui-radius);
+  --radius-xl: calc(var(--labui-radius) + 4px);
+  --color-background: var(--labui-background);
+  --color-foreground: var(--labui-foreground);
+  --color-card: var(--labui-card);
+  --color-card-foreground: var(--labui-card-foreground);
+  --color-popover: var(--labui-popover);
+  --color-popover-foreground: var(--labui-popover-foreground);
+  --color-primary: var(--labui-primary);
+  --color-primary-foreground: var(--labui-primary-foreground);
+  --color-link: var(--labui-link);
+  --color-secondary: var(--labui-secondary);
+  --color-secondary-foreground: var(--labui-secondary-foreground);
+  --color-muted: var(--labui-muted);
+  --color-muted-foreground: var(--labui-muted-foreground);
+  --color-accent: var(--labui-accent);
+  --color-accent-foreground: var(--labui-accent-foreground);
+  --color-destructive: var(--labui-destructive);
+  --color-destructive-foreground: var(--labui-destructive-foreground);
+  --color-destructive-muted: var(--labui-destructive-muted);
+  --color-success: var(--labui-success);
+  --color-success-foreground: var(--labui-success-foreground);
+  --color-warning: var(--labui-warning);
+  --color-warning-foreground: var(--labui-warning-foreground);
+  --color-border: var(--labui-border);
+  --color-input: var(--labui-input);
+  --color-input-background: var(--labui-input-background);
+  --color-ring: var(--labui-ring);
+  --color-overlay: var(--labui-overlay);
+  --color-info: var(--labui-info);
+  --color-info-foreground: var(--labui-info-foreground);
+  --color-chart-1: var(--labui-chart-1);
+  --color-chart-2: var(--labui-chart-2);
+  --color-chart-3: var(--labui-chart-3);
+  --color-chart-4: var(--labui-chart-4);
+  --color-chart-5: var(--labui-chart-5);
+  --color-sidebar: var(--labui-sidebar);
+  --color-sidebar-foreground: var(--labui-sidebar-foreground);
+  --color-sidebar-primary: var(--labui-sidebar-primary);
+  --color-sidebar-primary-foreground: var(--labui-sidebar-primary-foreground);
+  --color-sidebar-accent: var(--labui-sidebar-accent);
+  --color-sidebar-accent-foreground: var(--labui-sidebar-accent-foreground);
+  --color-sidebar-border: var(--labui-sidebar-border);
+  --color-sidebar-ring: var(--labui-sidebar-ring);
+}
+
+@theme {
+  --animate-spin: labui-spin 1s linear infinite;
+  --animate-pulse: labui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-pop: labui-pop 160ms ease-out;
+  --animate-fade-in: labui-fade-in 150ms ease-out;
+  --animate-fade-out: labui-fade-out 150ms ease-in;
+  --animate-zoom-in: labui-zoom-in 150ms ease-out;
+  --animate-zoom-out: labui-zoom-out 150ms ease-in;
+  --animate-slide-in-right: labui-slide-in-right 200ms ease-out;
+  --animate-slide-out-right: labui-slide-out-right 200ms ease-in;
+  --animate-slide-in-left: labui-slide-in-left 200ms ease-out;
+  --animate-slide-out-left: labui-slide-out-left 200ms ease-in;
+  --animate-slide-in-top: labui-slide-in-top 200ms ease-out;
+  --animate-slide-out-top: labui-slide-out-top 200ms ease-in;
+  --animate-slide-in-bottom: labui-slide-in-bottom 200ms ease-out;
+  --animate-slide-out-bottom: labui-slide-out-bottom 200ms ease-in;
+  @keyframes labui-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+  @keyframes labui-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+  @keyframes labui-zoom-in {
+    from {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+  }
+  @keyframes labui-zoom-out {
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.95);
+    }
+  }
+  @keyframes labui-slide-in-right {
+    from {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes labui-slide-out-right {
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes labui-slide-in-left {
+    from {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes labui-slide-out-left {
+    to {
+      transform: translateX(-100%);
+    }
+  }
+  @keyframes labui-slide-in-top {
+    from {
+      transform: translateY(-100%);
+    }
+  }
+  @keyframes labui-slide-out-top {
+    to {
+      transform: translateY(-100%);
+    }
+  }
+  @keyframes labui-slide-in-bottom {
+    from {
+      transform: translateY(100%);
+    }
+  }
+  @keyframes labui-slide-out-bottom {
+    to {
+      transform: translateY(100%);
+    }
+  }
+  @keyframes labui-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes labui-pulse {
+    50% {
+      opacity: 0.5;
+    }
+  }
+  @keyframes labui-pop {
+    from {
+      opacity: 0;
+      transform: scale(0.92);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+}
+
+@utility range-overlay {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  cursor: ns-resize;
+  appearance: none;
+  opacity: 0;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: 100%;
+    height: 0;
+  }
+  &::-moz-range-thumb {
+    width: 100%;
+    height: 0;
+    border: 0;
+  }
+  @media (forced-colors: active) {
+    appearance: auto;
+    opacity: 1;
+    &::-webkit-slider-thumb {
+      appearance: auto;
+      width: auto;
+      height: auto;
+    }
+    &::-moz-range-thumb {
+      width: 1rem;
+      height: 1rem;
+      border: 1px solid ButtonText;
+    }
+  }
+}
+
+@theme inline reference {
+  --font-sans: var(--labui-font-sans);
+  --font-mono: var(--labui-font-mono);
+  --font-display: var(--labui-font-display);
+}
+
+@layer base {
+  :where([class*="labui:"]) {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid var(--labui-border);
+    outline-color: color-mix(in oklab, var(--labui-ring) 50%, transparent);
+  }
+  :where(button, input, select, textarea, a)[class*="labui:"] {
+    font: inherit;
+    font-feature-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    text-decoration: inherit;
+  }
+  :where(input, textarea)[class*="labui:"]::placeholder {
+    opacity: 1;
+    color: color-mix(in srgb, currentcolor 50%, transparent);
+  }
+  :where(table[class*="labui:"]) {
+    border-collapse: collapse;
+    text-indent: 0;
+  }
+  :where(h1, h2, h3, h4, h5, h6)[class*="labui:"] {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  :where(svg[class*="labui:"]) {
+    display: block;
+    vertical-align: middle;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :where([class*="labui:"]) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}