@signal9/era-ui 1.1.2

package/dist/ui/video-player/video-player.svelte.d.ts

@@ -0,0 +1,107 @@
+import type { Snippet } from 'svelte';
+type MediaEventWithDetail<T> = CustomEvent<T> & {
+    detail: T;
+};
+type ChapterTrack = {
+    src: string;
+    label?: string;
+    srclang?: string;
+    default?: boolean;
+};
+type $$ComponentProps = {
+    ref?: HTMLElement | null;
+    src: string;
+    poster?: string;
+    /** Optional WebVTT chapters track. Pass a URL or full track descriptor. */
+    chapters?: string | ChapterTrack;
+    preload?: 'none' | 'metadata' | 'auto';
+    load?: 'eager' | 'idle' | 'visible' | 'custom';
+    muted?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    playsinline?: boolean;
+    crossorigin?: 'anonymous' | 'use-credentials';
+    /** Initial volume (0–1). */
+    initialVolume?: number;
+    /** Initial playback rate (e.g. 1, 1.5, 2). */
+    initialPlaybackRate?: number;
+    /** Force a fixed aspect ratio as width/height, e.g. 16/9. */
+    aspectRatio?: number;
+    viewType?: 'unknown' | 'audio' | 'video';
+    streamType?: 'unknown' | 'on-demand' | 'live' | 'live:dvr' | 'll-live' | 'll-live:dvr';
+    fullscreenOrientation?: 'any' | 'natural' | 'landscape' | 'portrait' | 'portrait-primary' | 'portrait-secondary' | 'landscape-primary' | 'landscape-secondary';
+    /** Fall back to the provider's native controls instead of the custom chrome. */
+    controls?: boolean;
+    /** Show the play / pause button in the custom chrome. */
+    play?: boolean;
+    /** Show the elapsed and duration time badges. */
+    time?: boolean;
+    /** Show ±N-second skip buttons. `true` defaults to 10s; pass a number to override. */
+    skip?: boolean | number;
+    /** Show the mute toggle and volume slider. */
+    volume?: boolean;
+    /** Layout direction for the volume slider. */
+    volumeOrientation?: 'horizontal' | 'vertical';
+    /** Show the playback-speed dropdown. */
+    speed?: boolean;
+    /** Show the quality dropdown. Auto-hidden when the source exposes no quality options (e.g. plain MP4). */
+    quality?: boolean;
+    /** Show the picture-in-picture toggle. */
+    pip?: boolean;
+    /** Show the fullscreen toggle. */
+    fullscreen?: boolean;
+    /** Show a hover preview above the seek bar with the cursor's time and (if available) the chapter at that point. */
+    seekPreview?: boolean;
+    /** Enable a right-click context menu mirroring the enabled chrome plus a download shortcut. */
+    contextMenu?: boolean;
+    /** Whether the controls bar fades when the user is idle during playback. Set `false` to keep it visible. */
+    autoHide?: boolean;
+    /**
+     * Delay (ms) of inactivity during playback before vidstack flips `userIdle` to true.
+     * Maps to the player's `user-idle-delay` attribute. Defaults to 500 ms (vidstack's
+     * own default is 2000 ms).
+     */
+    idleDelay?: number;
+    /**
+     * Vidstack only fades the bar while playing (deliberately — its `MediaUserController`
+     * bails out of idle tracking on `pause`). Set this to `true` to also hide the bar
+     * while paused after `idleDelay` ms of pointer/keyboard inactivity.
+     */
+    idleWhilePaused?: boolean;
+    /**
+     * On narrow viewports / coarse-pointer devices, auto-collapse to a "timeline-only"
+     * layout — every chrome control suppresses regardless of its individual prop, leaving
+     * just the seek bar. Set `false` to honor the chrome props as-is on mobile too.
+     */
+    mobileTimelineOnly?: boolean;
+    keyDisabled?: boolean;
+    keyTarget?: 'document' | 'player';
+    keyShortcuts?: Record<string, string>;
+    onplay?: (e: Event) => void;
+    onpause?: (e: Event) => void;
+    onended?: (e: Event) => void;
+    onplaying?: (e: Event) => void;
+    onseeked?: (e: MediaEventWithDetail<number>) => void;
+    onseeking?: (e: MediaEventWithDetail<number>) => void;
+    oncanplay?: (e: Event) => void;
+    ontimeupdate?: (e: MediaEventWithDetail<{
+        currentTime: number;
+        played: TimeRanges;
+    }>) => void;
+    onvolumechange?: (e: MediaEventWithDetail<{
+        volume: number;
+        muted: boolean;
+    }>) => void;
+    onratechange?: (e: MediaEventWithDetail<number>) => void;
+    ondurationchange?: (e: MediaEventWithDetail<number>) => void;
+    onloadedmetadata?: (e: Event) => void;
+    onfullscreenchange?: (e: MediaEventWithDetail<boolean>) => void;
+    onpipchange?: (e: MediaEventWithDetail<boolean>) => void;
+    onerror?: (e: Event) => void;
+    /** Optional override for the entire controls layer — replaces the default chrome. */
+    children?: Snippet;
+    class?: string;
+};
+declare const VideoPlayer: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;

package/dist/utils/index.d.ts

@@ -0,0 +1,15 @@
+import { type ClassValue } from 'clsx';
+import type { Snippet } from 'svelte';
+import type { WithoutChildrenOrChild } from 'bits-ui';
+/**
+ * Merges class lists with Tailwind conflict resolution (last wins).
+ * Accepts Svelte's full `ClassValue` shape (strings, arrays, objects).
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/** `tv` preconfigured with this library's tailwind-merge settings. */
+export declare const tv: import("tailwind-variants").TV;
+export type { VariantProps } from 'tailwind-variants';
+/** Props for a bits-ui part wrapper that renders its own `children`. */
+export type PartProps<T> = WithoutChildrenOrChild<T> & {
+    children?: Snippet;
+};

package/dist/utils/index.js

@@ -0,0 +1,24 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { createTV } from 'tailwind-variants';
+// glass-blur is a custom @utility (styles/surfaces/glass.css) that sets backdrop-filter,
+// so it must conflict-resolve against the backdrop-blur group. text-body is
+// a registered font-size token — without this it would be misread as a color.
+const twMergeConfig = {
+    extend: {
+        classGroups: {
+            'backdrop-blur': ['glass-blur'],
+            'font-size': [{ text: ['body'] }]
+        }
+    }
+};
+const twMerge = extendTailwindMerge(twMergeConfig);
+/**
+ * Merges class lists with Tailwind conflict resolution (last wins).
+ * Accepts Svelte's full `ClassValue` shape (strings, arrays, objects).
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}
+/** `tv` preconfigured with this library's tailwind-merge settings. */
+export const tv = createTV({ twMergeConfig });

package/package.json

@@ -0,0 +1,115 @@
+{
+	"name": "@signal9/era-ui",
+	"version": "1.1.2",
+	"scripts": {
+		"dev": "vite dev --host",
+		"build": "vite build && npm run prepack",
+		"test:visual": "playwright test",
+		"deploy": "npm run build && npx --yes wrangler@latest deploy",
+		"preview": "wrangler dev .svelte-kit/cloudflare/_worker.js --port 4173",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && node scripts/build-styles.js && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:mode-verbatim": "npm run prepack && svelte-check --tsconfig tests/smoke/mode-verbatim/tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "eslint .",
+		"format": "prettier --write .",
+		"format:check": "prettier --check .",
+		"gen": "wrangler types",
+		"check:surfaces": "node --experimental-strip-types scripts/check-surfaces.ts",
+		"check:tokens": "node --experimental-strip-types scripts/check-tokens.ts",
+		"check:routes": "node --experimental-strip-types scripts/check-routes.ts",
+		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes",
+		"test": "npm run test:visual"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"style": "./dist/styles/index.css",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./provider": {
+			"types": "./dist/ui/provider/index.d.ts",
+			"svelte": "./dist/ui/provider/index.js",
+			"default": "./dist/ui/provider/index.js"
+		},
+		"./css": "./dist/era-ui.css",
+		"./styles/raw": "./dist/styles/index.css",
+		"./styles/themes": "./dist/styles/themes.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.1.0",
+		"@eslint/js": "^9.39.2",
+		"@playwright/test": "^1.61.1",
+		"@semantic-release/changelog": "^6.0.3",
+		"@semantic-release/exec": "^7.1.0",
+		"@semantic-release/git": "^10.0.1",
+		"@sveltejs/adapter-cloudflare": "^7.2.9",
+		"@sveltejs/kit": "^2.69.1",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/cli": "^4.3.2",
+		"@tailwindcss/vite": "^4.3.2",
+		"@threlte/core": "^8.5.16",
+		"@threlte/extras": "^9.21.0",
+		"@types/node": "^24.13.2",
+		"@types/three": "^0.184.1",
+		"eslint": "^9.39.4",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-better-tailwindcss": "^4.6.1",
+		"eslint-plugin-svelte": "^3.20.0",
+		"globals": "^17.7.0",
+		"prettier": "^3.9.4",
+		"prettier-plugin-svelte": "^3.5.2",
+		"prettier-plugin-tailwindcss": "^0.7.4",
+		"publint": "^0.3.21",
+		"semantic-release": "^25.0.5",
+		"svelte": "^5.56.4",
+		"svelte-check": "^4.7.1",
+		"tailwindcss": "^4.1.18",
+		"three": "^0.184.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.62.1",
+		"vite": "^7.3.6",
+		"vite-plugin-devtools-json": "^1.0.0",
+		"wrangler": "^4.107.0"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/sig-nine/era-ui.git"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.12.2",
+		"@lucide/svelte": "^0.577.0",
+		"@neodrag/svelte": "^3.0.0-next.8",
+		"bits-ui": "^2.18.1",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^3.6.0",
+		"tailwind-variants": "^3.2.2",
+		"vidstack": "^0.6.15"
+	}
+}

package/readme

@@ -0,0 +1,127 @@
+# era-ui
+
+A UI library for every era. Three density modes, two surface styles, one component set.
+
+## Density Sizing Diagrams
+
+All values in px. sp = base spacing unit. Every gap is derived from sp.
+The core rule: (container - child) / 2 = sp on all sides.
+
+### Dense (sp = 4)
+
+    Bar (36h)
+    ┌────────────────────────────────────────────────┐
+    │ 4  ┌──────────┐ 4 ┌──────────┐ 4 ┌──────────┐ 4│
+    │ px │  Button  │gap│  Button  │gap│  Button  │px│
+    │ 4  │  (28h)   │ 4 │  (28h)   │ 4 │  (28h)   │ 4│
+    │    │ px:4     │   │ px:4     │   │ px:4     │  │
+    │    └──────────┘   └──────────┘   └──────────┘  │
+    └────────────────────────────────────────────────┘
+
+    (36 - 28) / 2 = 4 = sp ✓
+
+    Trigger (32h)          Select/Input (28h)
+    ┌────────────────┐     ┌────────────────────────┐
+    │ px:8   text  ▾ │     │ px:8   text            │
+    └────────────────┘     └────────────────────────┘
+
+    Switch (20h)
+    ┌───────────────────┐
+    │ 3 ┌────────┐ gap  │   thumb: 14px (20 - 6)
+    │gap│ thumb  │      │   track: 35w (20 × 1.75)
+    │ 3 │ (14px) │      │   gap: 3px each side
+    │   └────────┘      │
+    └───────────────────┘
+
+    text: 14px    icon: 14px    radius: 0    transitions: off
+
+### Balanced (sp = 8)
+
+    Bar (44h)
+    ┌──────────────────────────────────────────────────────────┐
+    │ 8  ┌──────────┐  8  ┌──────────┐  8  ┌──────────┐  8  │
+    │ px │  Button   │ gap │  Button   │ gap │  Button   │ px │
+    │ 8  │  (28h)   │  8  │  (28h)   │  8  │  (28h)   │  8  │
+    │    │ px:8     │     │ px:8     │     │ px:8     │     │
+    │    └──────────┘     └──────────┘     └──────────┘     │
+    └──────────────────────────────────────────────────────────┘
+
+    (44 - 28) / 2 = 8 = sp ✓
+
+    Trigger (44h)          Select/Input (28h)
+    ┌────────────────┐     ┌────────────────────────┐
+    │ px:12  text  ▾ │     │ px:8   text             │
+    └────────────────┘     └────────────────────────┘
+
+    Switch (24h)
+    ┌───────────────────────┐
+    │ 4 ┌──────────┐  gap  │   thumb: 18px (24 - 6)
+    │gap│  thumb   │       │   track: 42w (24 × 1.75)
+    │ 4 │  (18px)  │       │   gap: 4px each side
+    │   └──────────┘       │
+    └───────────────────────┘
+
+    text: 14px    icon: 16px    radius: 0    transitions: off
+
+### Spacious (sp = 12)
+
+    Bar (60h)                                              radius: 20
+    ╭──────────────────────────────────────────────────────────────────╮
+    │ 12  ╭──────────╮  12  ╭──────────╮  12  ╭──────────╮  12      │
+    │ px  │  Button   │ gap │  Button   │ gap │  Button   │ px      │
+    │ 12  │  (36h)   │  12  │  (36h)   │  12  │  (36h)   │  12     │
+    │     │ px:12    │      │ px:12    │      │ px:12    │          │
+    │     │ rad:7    │      │ rad:7    │      │ rad:7    │          │
+    │     ╰──────────╯      ╰──────────╯      ╰──────────╯          │
+    ╰──────────────────────────────────────────────────────────────────╯
+
+    (60 - 36) / 2 = 12 = sp ✓
+    bar-radius = roundness(7) + bar-px(12) = 19  (concentric)
+
+    Trigger (56h)          Select/Input (36h)
+    ╭────────────────╮     ╭────────────────────────╮
+    │ px:16  text  ▾ │     │ px:12  text             │
+    ╰────────────────╯     ╰────────────────────────╯
+
+    Switch (28h)                                   radius: 12
+    ╭───────────────────────────╮
+    │ 5 ╭──────────╮     gap   │   thumb: 22px (28 - 6)
+    │gap│  thumb   │           │   track: 49w (28 × 1.75)
+    │ 5 │  (22px)  │           │   gap: 5px each side
+    │   │  rad:7   │           │   switch-radius = 7 + 5 = 12
+    │   ╰──────────╯           │
+    ╰───────────────────────────╯
+
+    text: 14px    icon: 18px    radius: 7    transitions: 150ms
+
+## Token Summary
+
+    Token          Dense    Balanced   Spacious
+    ─────────────  ───────  ─────────  ─────────
+    --era-sp           4px      8px       12px
+    --era-btn-h       28px     28px       36px
+    --era-bar-h       36px     44px       60px
+    --era-trigger-h   32px     44px       56px
+    --era-select-h    28px     28px       36px
+    --era-switch-h    20px     24px       28px
+    --era-switch-gap   3px      4px        5px
+    --era-btn-px       4px      8px       12px
+    --era-bar-px       4px      8px       12px
+    --era-trigger-px   8px     12px       16px
+    --era-select-px    8px      8px       12px
+    --era-content-p   16px     24px       32px
+    --era-gap          4px      8px       12px
+    --era-radius       0px      0px        7px
+    --era-text        14px     14px       14px
+    --era-icon        14px     16px       18px
+    --era-duration      0s       0s      150ms
+
+## Even Gap Verification
+
+    dense:    (bar 36 - btn 28) / 2 = 4  = sp ✓
+    balanced: (bar 44 - btn 28) / 2 = 8  = sp ✓
+    spacious:     (bar 60 - btn 36) / 2 = 12 = sp ✓
+
+    Concentric radius (spacious only):
+    bar-radius    = roundness(7) + bar-px(12)     = 19px
+    switch-radius = roundness(7) + switch-gap(5)  = 12px