@milesroxas/design-hub 0.1.1 → 0.1.3

package/dist/scripts/bootstrap.d.ts

@@ -29,6 +29,10 @@ export declare const spec: {
             readonly type: 'string';
             readonly description: 'Link this Vercel project and set the password gate env on it.';
         };
+        readonly team: {
+            readonly type: 'string';
+            readonly description: 'The Vercel team (its slug) the project lives in or is created in. Absent, the CLI’s current team.';
+        };
         readonly 'gate-password': {
             readonly type: 'string';
             readonly description: 'The share password (8+ characters). Given again, it rotates.';

package/dist/scripts/bootstrap.js

@@ -12,7 +12,7 @@ import { readEnv, writeEnv } from '../server/env.js';
 import { ROOT, TEMPLATES } from '../server/paths.js';
 import { CliError } from './lib/cli.js';
 import { holderOf, pickPort, readClaims, writeClaim } from './lib/ports.js';
-import { ENVIRONMENTS, envNames, linkedProject, STORE_ENV, setEnv, vercel, } from './lib/vercel.js';
+import { ENVIRONMENTS, envNames, linkedOrg, linkedProject, STORE_ENV, setEnv, vercel, } from './lib/vercel.js';
 export const spec = {
     name: 'bootstrap',
     summary: 'Set the project up on this machine, and optionally on Vercel. Safe to run again.',
@@ -26,6 +26,10 @@ export const spec = {
         conductor: { type: 'boolean', description: 'Write .conductor/settings.toml for Conductor workspaces.' },
         branch: { type: 'string', default: 'main', description: 'The branch Conductor workspaces land on.' },
         vercel: { type: 'string', description: 'Link this Vercel project and set the password gate env on it.' },
+        team: {
+            type: 'string',
+            description: 'The Vercel team (its slug) the project lives in or is created in. Absent, the CLI’s current team.',
+        },
         'gate-password': {
             type: 'string',
             description: 'The share password (8+ characters). Given again, it rotates.',
@@ -120,13 +124,15 @@ function cli(args, input) {
         });
     return out.stdout;
 }
-function link(project, warnings) {
+function link(project, team, warnings) {
     const current = linkedProject(ROOT);
     if (current === project)
         return 'kept';
     if (current)
         warnings.push(`.vercel/project.json pointed at ${current}; relinked to ${project}.`);
-    cli(['link', '--yes', '--project', project]);
+    // A new project is created in the scope given; without one the CLI's current team wins, which
+    // is whichever team the user last switched to, not necessarily where this project belongs.
+    cli(['link', '--yes', '--project', project, ...(team ? ['--scope', team] : [])]);
     return 'ran';
 }
 /** Sets each value where it is missing; `rotate` names the ones given again, which replace what is there. */
@@ -169,7 +175,21 @@ function pullValues(target, names) {
         rmSync(dir, { recursive: true, force: true });
     }
 }
-function provisionReview(project, warnings) {
+/** `--scope` for the commands that name the project instead of reading the link. */
+const scopeArgs = (team) => {
+    const scope = team ?? linkedOrg(ROOT);
+    return scope ? ['--scope', scope] : [];
+};
+/**
+ * Vercel Authentication is on for every new project on a team, and it sends each
+ * visitor to a Vercel login before the gate. The gate is the protection, so it goes
+ * off. Idempotent: disabling twice is fine.
+ */
+function protection(project, team) {
+    cli(['project', 'protection', 'disable', project, '--sso', ...scopeArgs(team)]);
+    return 'off';
+}
+function provisionReview(project, team, warnings) {
     const names = envNames(ROOT, 'production');
     let store = 'kept';
     if (!names || !STORE_ENV.every((n) => names.has(n))) {
@@ -186,6 +206,8 @@ function provisionReview(project, warnings) {
             '-e',
             'development',
             '--no-env-pull',
+            // Unlike env and deploy, this command ignores the project link and takes the CLI's current team.
+            ...scopeArgs(team),
         ]);
         if (out?.status !== 0)
             throw new CliError('Could not add the Upstash for Redis store.', {
@@ -226,7 +248,7 @@ export function gateValues(given, env) {
     return { password, secret, rotated: given !== undefined && given !== env.GATE_PASSWORD };
 }
 function setUpVercel(project, flags, env, typesafeKey, warnings) {
-    const linked = link(project, warnings);
+    const linked = link(project, flags.team, warnings);
     const { password, secret, rotated } = gateValues(flags['gate-password'], env);
     writeEnv(ROOT, { GATE_PASSWORD: password, GATE_SECRET: secret });
     const values = { GATE_PASSWORD: password, GATE_SECRET: secret };
@@ -236,13 +258,18 @@ function setUpVercel(project, flags, env, typesafeKey, warnings) {
     if (rotated)
         warnings.push('The password changed: every visitor signs in again.');
     const result = {
-        vercel: { project, linked, env: ensureEnv(values, new Set(rotated ? ['GATE_PASSWORD'] : [])) },
+        vercel: {
+            project,
+            linked,
+            protection: protection(project, flags.team),
+            env: ensureEnv(values, new Set(rotated ? ['GATE_PASSWORD'] : [])),
+        },
         share: { password },
     };
     if (!flags.review)
         return result;
     warnings.push('Redeploy so the new env reaches the site; then design-hub people invite --name "<you>" --role editor.');
-    return { ...result, review: provisionReview(project, warnings) };
+    return { ...result, review: provisionReview(project, flags.team, warnings) };
 }
 function envIgnored(warnings) {
     try {

package/dist/scripts/lib/vercel.d.ts

@@ -8,7 +8,9 @@ export type Run = {
     stderr: string;
 };
 export declare function vercel(cwd: string, args: string[], input?: string): Run | null;
-export declare function linkedProject(cwd: string): string | null;
+export declare const linkedProject: (cwd: string) => string | null;
+/** The team the linked project belongs to. The commands that take a project name instead of the link need it as `--scope`. */
+export declare const linkedOrg: (cwd: string) => string | null;
 /** The variable names set for a target, read from `vercel env ls`'s table. */
 export declare function envNames(cwd: string, target: Target): Set<string> | null;
 /** Sets one variable for one target; `force` replaces a value that is already there. */

package/dist/scripts/lib/vercel.js

@@ -15,17 +15,20 @@ export function vercel(cwd, args, input) {
         return null;
     return { status: out.status ?? 1, stdout: out.stdout ?? '', stderr: out.stderr ?? '' };
 }
-export function linkedProject(cwd) {
+function readLink(cwd) {
     const file = join(cwd, '.vercel', 'project.json');
     if (!existsSync(file))
         return null;
     try {
-        return JSON.parse(readFileSync(file, 'utf8')).projectName ?? null;
+        return JSON.parse(readFileSync(file, 'utf8'));
     }
     catch {
         return null;
     }
 }
+export const linkedProject = (cwd) => readLink(cwd)?.projectName ?? null;
+/** The team the linked project belongs to. The commands that take a project name instead of the link need it as `--scope`. */
+export const linkedOrg = (cwd) => readLink(cwd)?.orgId ?? null;
 /** The variable names set for a target, read from `vercel env ls`'s table. */
 export function envNames(cwd, target) {
     const out = vercel(cwd, ['env', 'ls', target]);

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.1",
+  "version": "0.1.3",
   "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-deploy/SKILL.md

@@ -34,11 +34,12 @@ Never send the link with a failed step, and never skip one with `--skip` without
 1. The user signs in once, in their own terminal: `vercel login`. It is interactive; never run it for them.
 2. From the project root:
    ```bash
-   pnpm bootstrap --vercel <project-name>
+   pnpm bootstrap --vercel <project-name> --team <team-slug>
    ```
-   It links the project, writes `GATE_PASSWORD` (12 readable characters, or `--gate-password <word>`) and a fresh `GATE_SECRET` to `.env` and to Production and Preview, and prints the password in `share.password`. A second run keeps what is set.
+   `--team` is the Vercel team the project is created in (`vercel teams ls` lists them); without it the CLI's current team wins, which is often not the one the user means. It links the project, writes `GATE_PASSWORD` (12 readable characters, or `--gate-password <word>`) and a fresh `GATE_SECRET` to `.env` and to Production and Preview, and prints the password in `share.password`. A second run keeps what is set.
 3. `pnpm preflight`, then push `main` (or `vercel --prod` from the project root).
-4. The handover message, in one message: the URL, the password, which prototype to open (the sprint's slug), the walkthrough at `/guide/<feature>/`, and that Controls is the round button at the top of the page. A reviewer who is not told about Controls reviews one state. Never send `GATE_SECRET`.
+4. On a Pro team Vercel turns Vercel Authentication on for every new project, which sends each visitor to a Vercel login before the gate. Turn it off for Production once: Project Settings, Deployment Protection, Vercel Authentication, set to Only Preview Deployments or Disabled. The hub's gate is the protection. Test by opening the production URL in a private window: the password page must appear, not vercel.com.
+5. The handover message, in one message: the URL, the password, which prototype to open (the sprint's slug), the walkthrough at `/guide/<feature>/`, and that Controls is the round button at the top of the page. A reviewer who is not told about Controls reviews one state. Never send `GATE_SECRET`.
 
 ## Comments
 

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.