@milesroxas/design-hub 0.1.0 → 0.1.2

package/configs/biome/biome.json

@@ -11,7 +11,8 @@
       "!**/.impeccable",
       "!**/.claude",
       "!**/*.md",
-      "!**/pnpm-lock.yaml"
+      "!**/pnpm-lock.yaml",
+      "!**/pnpm-workspace.yaml"
     ]
   },
   "formatter": {

package/dist/vite/lapse.d.ts

@@ -0,0 +1,6 @@
+import type { Plugin } from 'vite';
+/** Whether the project (never the hub) has Lapse installed. */
+export declare const hasLapse: (root: string) => boolean;
+/** The module's source: a re-export of the resolved panel, or a null mount. */
+export declare function lapseSource(panel: string | null): string;
+export declare function lapse(root: string): Plugin;

package/dist/vite/lapse.js

@@ -0,0 +1,42 @@
+/// <reference types="node" />
+// `virtual:design-hub/lapse`: the Lapse panel when the project has installed
+// @aiforui/lapse, else nothing. Lapse lives on a private registry, so the hub
+// never depends on it: a project opts in with `pnpm add -D @aiforui/lapse`
+// and ?lapse loads it from the project's node_modules. The build always gets
+// the empty module, since Lapse is a dev tool and Rollup must not resolve it
+// on Vercel.
+import { existsSync } from 'node:fs';
+import { join } from 'node:path';
+const LAPSE_ID = 'virtual:design-hub/lapse';
+const RESOLVED = `\0${LAPSE_ID}`;
+const LAPSE_PACKAGE = '@aiforui/lapse';
+const LAPSE_PANEL = `${LAPSE_PACKAGE}/panel`;
+/** Whether the project (never the hub) has Lapse installed. */
+export const hasLapse = (root) => existsSync(join(root, 'node_modules', ...LAPSE_PACKAGE.split('/'), 'package.json'));
+/** The module's source: a re-export of the resolved panel, or a null mount. */
+export function lapseSource(panel) {
+    return panel
+        ? `export { mountLapse } from ${JSON.stringify(panel)};\n`
+        : 'export const mountLapse = null;\n';
+}
+export function lapse(root) {
+    let serve = false;
+    return {
+        name: 'design-hub-lapse',
+        configResolved(config) {
+            serve = config.command === 'serve';
+        },
+        resolveId(id) {
+            return id === LAPSE_ID ? RESOLVED : null;
+        },
+        async load(id) {
+            if (id !== RESOLVED)
+                return null;
+            if (!serve || !hasLapse(root))
+                return lapseSource(null);
+            // Resolved from the project, so the package's exports map and pnpm's layout both apply.
+            const panel = await this.resolve(LAPSE_PANEL, join(root, 'index.html'));
+            return lapseSource(panel?.id ?? null);
+        },
+    };
+}

package/dist/vite/plugin.js

@@ -14,6 +14,7 @@ import { devPort, readEnv } from '../server/env.js';
 import { PACKAGE, PACKAGE_KIT, SHELL } from '../server/paths.js';
 import { GATE_FONT, gatePreview } from '../vercel/proxy.js';
 import { kitResolver } from './kit.js';
+import { lapse } from './lapse.js';
 import { markdownDocs } from './markdown.js';
 import { registry } from './registry.js';
 const require = createRequire(import.meta.url);
@@ -52,6 +53,7 @@ export function designHub({ root }) {
         react(),
         kitResolver(join(root, 'kit'), PACKAGE_KIT),
         registry(root),
+        lapse(root),
         markdownDocs(),
         devReview(),
         gateFont(),

package/kit/prefs.ts

@@ -5,7 +5,8 @@ import { useSyncExternalStore } from 'react';
 
 export type Appearance = 'system' | 'light' | 'dark';
 
-type LapseHandle = { engine: { setSpeed(x: number): void; getSpeed(): number } };
+/** What the Lapse panel hands back when a project has it installed: its clock engine. */
+export type LapseHandle = { engine: { setSpeed(x: number): void; getSpeed(): number } };
 
 const root = document.documentElement;
 const darkQuery = matchMedia('(prefers-color-scheme: dark)');
@@ -77,6 +78,7 @@ export const useAppearance = () => useSyncExternalStore(subscribe, () => appeara
 export const useDark = () => useSyncExternalStore(subscribe, isDark);
 export const useReducedMotion = () => useSyncExternalStore(subscribe, prefersReducedMotion);
 
+/** Lapse owns the clocks once attached; the speed dial drives it instead of retiming animations itself. */
 export function attachLapse(handle: LapseHandle) {
   lapse = handle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@milesroxas/design-hub",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "The Design Hub product: the hub that lists and serves prototypes, the review panel and its API, the password gate, the kit, and the design-hub CLI. A project installs it and keeps only its prototypes, kit materials and docs.",
   "license": "MIT",
   "repository": {
@@ -77,9 +77,6 @@
     "react": "^19.3.1",
     "react-dom": "^19.3.1"
   },
-  "optionalDependencies": {
-    "@aiforui/lapse": "^0.19.0"
-  },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "check": "tsc --noEmit && biome check .",

package/shell/main.tsx

@@ -13,11 +13,11 @@ import { findEntry, guides } from './registry';
 const params = new URLSearchParams(location.search);
 
 // Lapse patches the clocks, so it lands before any prototype (and Motion) loads.
+// The module is empty unless the project installed @aiforui/lapse (vite/lapse.ts).
 if (import.meta.env.DEV && params.has('lapse')) {
-  // Opaque specifier: the package is optional and absent on Vercel, so Rollup must not resolve it.
-  const panel = '@aiforui/lapse/panel';
-  const { mountLapse } = await import(/* @vite-ignore */ panel);
-  attachLapse(mountLapse({ position: 'bottom-left' }));
+  const { mountLapse } = await import('virtual:design-hub/lapse');
+  if (mountLapse) attachLapse(mountLapse({ position: 'bottom-left' }));
+  else console.warn('[design-hub] ?lapse needs Lapse in the project: pnpm add -D @aiforui/lapse');
 }
 
 if (import.meta.env.DEV && params.get('a11y') !== '0') {

package/shell/registry.virtual.d.ts

@@ -8,3 +8,12 @@ declare module 'virtual:design-hub/registry' {
   /** Each feature's compiled walkthrough loader, by feature. */
   export const guideDocs: Record<string, () => Promise<Doc>>;
 }
+
+declare module 'virtual:design-hub/lapse' {
+  /** The Lapse panel's mount, or null when the project has not installed @aiforui/lapse (vite/lapse.ts). */
+  export const mountLapse:
+    | ((options: { position: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' }) => {
+        engine: { setSpeed(x: number): void; getSpeed(): number };
+      })
+    | null;
+}

package/skills/miles-prototype/references/motion.md

@@ -55,5 +55,5 @@ In JS, `useReducedMotion()` from `@kit/prefs`. Keep fades and color changes, dro
 ## Tuning and review
 
 - Every number you are unsure of goes on a dial (`DialVars` for CSS, `useDials` for JS). The decision is the number the user settles on; copy it from DialKit into the README.
-- Watch at 0.25x: the Space speed dial, or `?lapse` for frame-by-frame takes, scrubbing and a jank report.
+- Watch at 0.25x with the Space speed dial, or `?lapse` for frame-by-frame takes, scrubbing and a jank report when the project has `@aiforui/lapse` installed.
 - Test the interruption: open, then close mid-open. It should reverse from where it is.

package/skills/miles-prototype/references/performance.md

@@ -5,7 +5,7 @@ A prototype that stutters gets judged on the stutter. The floor below keeps the
 ## Already handled by the shell
 
 - Each prototype is its own lazy chunk; the index loads none of them.
-- Dev-only tools (axe, Lapse) never ship in a build and load only when used.
+- Dev-only tools (axe, and Lapse when a project installs it) never ship in a build and load only when used.
 - `motion` and DialKit load only in prototypes that import them.
 
 ## Rendering
@@ -41,5 +41,5 @@ A prototype that stutters gets judged on the stutter. The floor below keeps the
 ## How to check
 
 1. Chrome Performance panel with 4x CPU throttling on the main interaction: no long tasks over 50ms during an animation.
-2. `?lapse`, record a take of the interaction: its report lists dropped frames, layout shifts and which properties animated on layout or paint.
+2. With `@aiforui/lapse` installed, `?lapse` and record a take of the interaction: its report lists dropped frames, layout shifts and which properties animated on layout or paint.
 3. React DevTools Profiler, "Highlight updates": a slider or a tick should light up only what it changes.