@shipfox/client-onboarding 23.0.0 → 25.0.0

package/.turbo/turbo-build.log

@@ -1,2 +1,2 @@
 $ shipfox-swc
-Successfully compiled: 4 files with swc (436.14ms)
+Successfully compiled: 18 files with swc (604.09ms)

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @shipfox/client-onboarding
 
+## 25.0.0
+
+### Minor Changes
+
+- f57bcc3: Adds the workspace setup checklist panel and top-bar indicator.
+
+### Patch Changes
+
+- de25460: Makes the onboarding completion burst deterministic in reduced-motion environments.
+- Updated dependencies [af27652]
+- Updated dependencies [f57bcc3]
+  - @shipfox/client-shell@25.0.0
+  - @shipfox/client-integrations@25.0.0
+  - @shipfox/client-projects@25.0.0
+  - @shipfox/client-agent@25.0.0
+  - @shipfox/client-runners@25.0.0
+  - @shipfox/client-workspace-settings@25.0.0
+
+## 24.0.0
+
+### Patch Changes
+
+- Updated dependencies [989eb11]
+  - @shipfox/client-agent@24.0.0
+  - @shipfox/client-projects@24.0.0
+  - @shipfox/client-integrations@24.0.0
+  - @shipfox/client-shell@24.0.0
+
 ## 23.0.0
 
 ### Minor Changes

package/README.md

@@ -1,7 +1,7 @@
 # Shipfox Client Onboarding
 
-Client onboarding for Shipfox workspaces: the pre-project setup gate and the
-pure derivations behind the post-activation Get-started checklist.
+Client onboarding for Shipfox workspaces: the pre-project setup gate, the
+post-activation Get-started checklist, and its panel and top-bar hosts.
 
 ## What it does
 
@@ -20,10 +20,13 @@ pure derivations behind the post-activation Get-started checklist.
   `complete`. Rows follow the spec order; the runner and model-provider rows
   exist only when the installation does not already provide the capability;
   the first-workflow and teammates rows are pointers that never count.
+- **`WorkspaceSetupChecklist`** and **`WorkspaceSetupIndicator`**: slot-ready
+  hosts that load the five checklist query families, render the checklist in a
+  panel or a non-modal popover, and persist per-device dismissal.
 
-Both derivations are pure functions. They test without React and decide what
-the checklist shows, so the component work in this package renders their
-output without re-deriving anything.
+The derivations are pure functions. They test without React and decide what
+the checklist shows, while the hosts own query freshness, loading and failure
+gating, analytics, completion transitions, and the completion burst.
 
 ## Installation and setup
 
@@ -32,7 +35,8 @@ pnpm add @shipfox/client-onboarding
 ```
 
 The package is part of the `libs/client` workspace. Its runtime dependencies
-are `client-agent`, `client-integrations`, `client-projects`, and `client-shell`.
+are `client-agent`, `client-integrations`, `client-projects`, `client-runners`,
+`client-shell`, and `client-workspace-settings`.
 
 ## Usage
 
@@ -65,6 +69,16 @@ checklist.openCount; // 3
 checklist.complete; // false
 ```
 
+The rendered hosts can be exported through the package feature entry point for
+shell slot composition:
+
+```ts
+import {
+  WorkspaceSetupChecklist,
+  WorkspaceSetupIndicator,
+} from '@shipfox/client-onboarding/feature';
+```
+
 The caller maps its own query results to the derivation inputs:
 
 - `providers` and `connections` use the plain values from
@@ -92,6 +106,11 @@ The caller maps its own query results to the derivation inputs:
   false.
 - The teammates row renders done at `memberCount >= 2` or
   `pendingInvitationCount >= 1`, but stays a pointer.
+- The panel and indicator render nothing for an initially complete checklist;
+  the mounted host that observes the final tracked row transition renders the
+  completion state and owns its one-shot burst.
+- Dismissal is scoped to the workspace and device. A dismissed host does not
+  subscribe to checklist queries until the flag is cleared.
 
 ## Development
 
@@ -103,7 +122,7 @@ turbo build --filter=@shipfox/client-onboarding
 ```
 
 The package runs Storybook per the per-package recipe (`pnpm storybook` on
-port 6015). The Storybook test project activates when checklist stories land.
+port 6015) with stories covering both hosts and each checklist state.
 
 ## License
 

package/dist/components/setup-checklist-body.d.ts

@@ -0,0 +1,3 @@
+import type { SetupChecklistBodyProps } from './setup-checklist-types.js';
+export declare function SetupChecklistBody({ checklist, workspaceSlug, completion, showBurst, onBurstComplete, onAction, onDone, }: SetupChecklistBodyProps): import("react").JSX.Element;
+//# sourceMappingURL=setup-checklist-body.d.ts.map

package/dist/components/setup-checklist-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-checklist-body.d.ts","sourceRoot":"","sources":["../../src/components/setup-checklist-body.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,uBAAuB,EAAC,MAAM,4BAA4B,CAAC;AAExE,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,aAAa,EACb,UAAkB,EAClB,SAAiB,EACjB,eAAe,EACf,QAAQ,EACR,MAAM,GACP,EAAE,uBAAuB,+BAsBzB"}

package/dist/components/setup-checklist-body.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SetupChecklistCompletion } from './setup-checklist-completion.js';
+import { ChecklistRow } from './setup-checklist-row.js';
+export function SetupChecklistBody({ checklist, workspaceSlug, completion = false, showBurst = false, onBurstComplete, onAction, onDone }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            completion ? /*#__PURE__*/ _jsx(SetupChecklistCompletion, {
+                showBurst: showBurst,
+                onBurstComplete: onBurstComplete,
+                onDone: onDone
+            }) : null,
+            /*#__PURE__*/ _jsx("ol", {
+                "aria-label": "Setup steps",
+                className: "m-0 list-none p-0",
+                children: checklist.items.map((item)=>/*#__PURE__*/ _jsx(ChecklistRow, {
+                        item: item,
+                        workspaceSlug: workspaceSlug,
+                        onAction: onAction
+                    }, item.id))
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=setup-checklist-body.js.map

package/dist/components/setup-checklist-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/setup-checklist-body.tsx"],"sourcesContent":["import {SetupChecklistCompletion} from './setup-checklist-completion.js';\nimport {ChecklistRow} from './setup-checklist-row.js';\nimport type {SetupChecklistBodyProps} from './setup-checklist-types.js';\n\nexport function SetupChecklistBody({\n  checklist,\n  workspaceSlug,\n  completion = false,\n  showBurst = false,\n  onBurstComplete,\n  onAction,\n  onDone,\n}: SetupChecklistBodyProps) {\n  return (\n    <div>\n      {completion ? (\n        <SetupChecklistCompletion\n          showBurst={showBurst}\n          onBurstComplete={onBurstComplete}\n          onDone={onDone}\n        />\n      ) : null}\n      <ol aria-label=\"Setup steps\" className=\"m-0 list-none p-0\">\n        {checklist.items.map((item) => (\n          <ChecklistRow\n            key={item.id}\n            item={item}\n            workspaceSlug={workspaceSlug}\n            onAction={onAction}\n          />\n        ))}\n      </ol>\n    </div>\n  );\n}\n"],"names":["SetupChecklistCompletion","ChecklistRow","SetupChecklistBody","checklist","workspaceSlug","completion","showBurst","onBurstComplete","onAction","onDone","div","ol","aria-label","className","items","map","item","id"],"mappings":";AAAA,SAAQA,wBAAwB,QAAO,kCAAkC;AACzE,SAAQC,YAAY,QAAO,2BAA2B;AAGtD,OAAO,SAASC,mBAAmB,EACjCC,SAAS,EACTC,aAAa,EACbC,aAAa,KAAK,EAClBC,YAAY,KAAK,EACjBC,eAAe,EACfC,QAAQ,EACRC,MAAM,EACkB;IACxB,qBACE,MAACC;;YACEL,2BACC,KAACL;gBACCM,WAAWA;gBACXC,iBAAiBA;gBACjBE,QAAQA;iBAER;0BACJ,KAACE;gBAAGC,cAAW;gBAAcC,WAAU;0BACpCV,UAAUW,KAAK,CAACC,GAAG,CAAC,CAACC,qBACpB,KAACf;wBAECe,MAAMA;wBACNZ,eAAeA;wBACfI,UAAUA;uBAHLQ,KAAKC,EAAE;;;;AASxB"}

package/dist/components/setup-checklist-completion.d.ts

@@ -0,0 +1,6 @@
+export declare function SetupChecklistCompletion({ showBurst, onBurstComplete, onDone, }: {
+    showBurst: boolean;
+    onBurstComplete?: (() => void) | undefined;
+    onDone?: (() => void) | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=setup-checklist-completion.d.ts.map

package/dist/components/setup-checklist-completion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-checklist-completion.d.ts","sourceRoot":"","sources":["../../src/components/setup-checklist-completion.tsx"],"names":[],"mappings":"AAUA,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,eAAe,EACf,MAAM,GACP,EAAE;IACD,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACnC,+BAwBA"}

package/dist/components/setup-checklist-completion.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '@shipfox/react-ui/button';
+import { Icon } from '@shipfox/react-ui/icon';
+import { Text } from '@shipfox/react-ui/typography';
+import { useEffect, useRef } from 'react';
+import { createConfettiParticles } from './setup-checklist-confetti.js';
+const JSDOM_USER_AGENT_RE = /jsdom/u;
+const CONFETTI_DURATION_MS = 2000;
+const CONFETTI_RANDOM_SEED = 0x5f3759df;
+export function SetupChecklistCompletion({ showBurst, onBurstComplete, onDone }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "relative overflow-hidden border-b border-tag-success-border bg-tag-success-bg p-panel",
+        children: [
+            /*#__PURE__*/ _jsx(ConfettiBurst, {
+                active: showBurst,
+                onComplete: onBurstComplete
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "relative flex items-center gap-group",
+                children: [
+                    /*#__PURE__*/ _jsx(Icon, {
+                        name: "checkCircleSolid",
+                        className: "size-20 shrink-0 text-tag-success-icon",
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "min-w-0 flex-1",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                bold: true,
+                                className: "text-tag-success-text",
+                                children: "You're set up"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "xs",
+                                className: "text-tag-success-text",
+                                children: "Your workspace is ready for its first workflow."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        type: "button",
+                        size: "sm",
+                        variant: "primary",
+                        onClick: onDone,
+                        children: "Done"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function ConfettiBurst({ active, onComplete }) {
+    const canvasRef = useRef(null);
+    useEffect(()=>{
+        if (!active || typeof window === 'undefined') return;
+        let completed = false;
+        const finish = ()=>{
+            if (completed) return;
+            completed = true;
+            onComplete?.();
+        };
+        const prefersReducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false;
+        if (typeof navigator !== 'undefined' && JSDOM_USER_AGENT_RE.test(navigator.userAgent)) {
+            finish();
+            return;
+        }
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            finish();
+            return;
+        }
+        const bounds = canvas.getBoundingClientRect();
+        if (bounds.width === 0 && bounds.height === 0) {
+            finish();
+            return;
+        }
+        const context = canvas.getContext('2d');
+        if (!context) {
+            finish();
+            return;
+        }
+        const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
+        const width = Math.max(bounds.width, 1);
+        const height = Math.max(bounds.height, 1);
+        canvas.width = Math.floor(width * pixelRatio);
+        canvas.height = Math.floor(height * pixelRatio);
+        context.scale(pixelRatio, pixelRatio);
+        const styles = getComputedStyle(canvas);
+        const colors = [
+            styles.getPropertyValue('--color-background-accent-blue-base').trim(),
+            styles.getPropertyValue('--color-background-accent-purple-base').trim(),
+            styles.getPropertyValue('--color-background-accent-success-base').trim(),
+            styles.getPropertyValue('--color-background-accent-warning-base').trim()
+        ].filter(Boolean);
+        if (colors.length === 0) {
+            finish();
+            return;
+        }
+        const particles = createConfettiParticles(width, height, colors, prefersReducedMotion ? CONFETTI_RANDOM_SEED : undefined);
+        let frame = 0;
+        const startedAt = performance.now();
+        const draw = (now, advance = true)=>{
+            const elapsed = now - startedAt;
+            context.clearRect(0, 0, width, height);
+            context.globalAlpha = Math.max(0, 1 - elapsed / CONFETTI_DURATION_MS);
+            for (const particle of particles){
+                if (advance) {
+                    particle.vy += 0.025;
+                    particle.vx *= 0.985;
+                    particle.x += particle.vx;
+                    particle.y += particle.vy;
+                    particle.rotation += 0.1;
+                }
+                context.save();
+                context.translate(particle.x, particle.y);
+                context.rotate(particle.rotation);
+                context.fillStyle = particle.color;
+                context.fillRect(-particle.size / 2, -particle.size / 2, particle.size, particle.size * 0.6);
+                context.restore();
+            }
+            context.globalAlpha = 1;
+            if (!advance) return;
+            if (elapsed < CONFETTI_DURATION_MS) {
+                frame = requestAnimationFrame(draw);
+            } else {
+                finish();
+            }
+        };
+        if (prefersReducedMotion) {
+            draw(startedAt, false);
+            finish();
+            // Keep the static frame after hosts consume the burst immediately.
+            return;
+        }
+        frame = requestAnimationFrame(draw);
+        return ()=>{
+            cancelAnimationFrame(frame);
+            context.clearRect(0, 0, width, height);
+        };
+    }, [
+        active,
+        onComplete
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute inset-0 size-full",
+        children: /*#__PURE__*/ _jsx("canvas", {
+            ref: canvasRef,
+            className: "size-full"
+        })
+    });
+}
+
+//# sourceMappingURL=setup-checklist-completion.js.map

package/dist/components/setup-checklist-completion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/setup-checklist-completion.tsx"],"sourcesContent":["import {Button} from '@shipfox/react-ui/button';\nimport {Icon} from '@shipfox/react-ui/icon';\nimport {Text} from '@shipfox/react-ui/typography';\nimport {useEffect, useRef} from 'react';\nimport {createConfettiParticles} from './setup-checklist-confetti.js';\n\nconst JSDOM_USER_AGENT_RE = /jsdom/u;\nconst CONFETTI_DURATION_MS = 2000;\nconst CONFETTI_RANDOM_SEED = 0x5f3759df;\n\nexport function SetupChecklistCompletion({\n  showBurst,\n  onBurstComplete,\n  onDone,\n}: {\n  showBurst: boolean;\n  onBurstComplete?: (() => void) | undefined;\n  onDone?: (() => void) | undefined;\n}) {\n  return (\n    <div className=\"relative overflow-hidden border-b border-tag-success-border bg-tag-success-bg p-panel\">\n      <ConfettiBurst active={showBurst} onComplete={onBurstComplete} />\n      <div className=\"relative flex items-center gap-group\">\n        <Icon\n          name=\"checkCircleSolid\"\n          className=\"size-20 shrink-0 text-tag-success-icon\"\n          aria-hidden=\"true\"\n        />\n        <div className=\"min-w-0 flex-1\">\n          <Text size=\"sm\" bold className=\"text-tag-success-text\">\n            You're set up\n          </Text>\n          <Text size=\"xs\" className=\"text-tag-success-text\">\n            Your workspace is ready for its first workflow.\n          </Text>\n        </div>\n        <Button type=\"button\" size=\"sm\" variant=\"primary\" onClick={onDone}>\n          Done\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction ConfettiBurst({\n  active,\n  onComplete,\n}: {\n  active: boolean;\n  onComplete?: (() => void) | undefined;\n}) {\n  const canvasRef = useRef<HTMLCanvasElement>(null);\n\n  useEffect(() => {\n    if (!active || typeof window === 'undefined') return;\n    let completed = false;\n    const finish = () => {\n      if (completed) return;\n      completed = true;\n      onComplete?.();\n    };\n\n    const prefersReducedMotion =\n      window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false;\n    if (typeof navigator !== 'undefined' && JSDOM_USER_AGENT_RE.test(navigator.userAgent)) {\n      finish();\n      return;\n    }\n\n    const canvas = canvasRef.current;\n    if (!canvas) {\n      finish();\n      return;\n    }\n    const bounds = canvas.getBoundingClientRect();\n    if (bounds.width === 0 && bounds.height === 0) {\n      finish();\n      return;\n    }\n    const context = canvas.getContext('2d');\n    if (!context) {\n      finish();\n      return;\n    }\n\n    const pixelRatio = Math.min(window.devicePixelRatio || 1, 2);\n    const width = Math.max(bounds.width, 1);\n    const height = Math.max(bounds.height, 1);\n    canvas.width = Math.floor(width * pixelRatio);\n    canvas.height = Math.floor(height * pixelRatio);\n    context.scale(pixelRatio, pixelRatio);\n\n    const styles = getComputedStyle(canvas);\n    const colors = [\n      styles.getPropertyValue('--color-background-accent-blue-base').trim(),\n      styles.getPropertyValue('--color-background-accent-purple-base').trim(),\n      styles.getPropertyValue('--color-background-accent-success-base').trim(),\n      styles.getPropertyValue('--color-background-accent-warning-base').trim(),\n    ].filter(Boolean);\n    if (colors.length === 0) {\n      finish();\n      return;\n    }\n    const particles = createConfettiParticles(\n      width,\n      height,\n      colors,\n      prefersReducedMotion ? CONFETTI_RANDOM_SEED : undefined,\n    );\n    let frame = 0;\n    const startedAt = performance.now();\n\n    const draw = (now: number, advance = true) => {\n      const elapsed = now - startedAt;\n      context.clearRect(0, 0, width, height);\n      context.globalAlpha = Math.max(0, 1 - elapsed / CONFETTI_DURATION_MS);\n      for (const particle of particles) {\n        if (advance) {\n          particle.vy += 0.025;\n          particle.vx *= 0.985;\n          particle.x += particle.vx;\n          particle.y += particle.vy;\n          particle.rotation += 0.1;\n        }\n        context.save();\n        context.translate(particle.x, particle.y);\n        context.rotate(particle.rotation);\n        context.fillStyle = particle.color;\n        context.fillRect(\n          -particle.size / 2,\n          -particle.size / 2,\n          particle.size,\n          particle.size * 0.6,\n        );\n        context.restore();\n      }\n      context.globalAlpha = 1;\n      if (!advance) return;\n      if (elapsed < CONFETTI_DURATION_MS) {\n        frame = requestAnimationFrame(draw);\n      } else {\n        finish();\n      }\n    };\n\n    if (prefersReducedMotion) {\n      draw(startedAt, false);\n      finish();\n      // Keep the static frame after hosts consume the burst immediately.\n      return;\n    }\n\n    frame = requestAnimationFrame(draw);\n    return () => {\n      cancelAnimationFrame(frame);\n      context.clearRect(0, 0, width, height);\n    };\n  }, [active, onComplete]);\n\n  return (\n    <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0 size-full\">\n      <canvas ref={canvasRef} className=\"size-full\" />\n    </div>\n  );\n}\n"],"names":["Button","Icon","Text","useEffect","useRef","createConfettiParticles","JSDOM_USER_AGENT_RE","CONFETTI_DURATION_MS","CONFETTI_RANDOM_SEED","SetupChecklistCompletion","showBurst","onBurstComplete","onDone","div","className","ConfettiBurst","active","onComplete","name","aria-hidden","size","bold","type","variant","onClick","canvasRef","window","completed","finish","prefersReducedMotion","matchMedia","matches","navigator","test","userAgent","canvas","current","bounds","getBoundingClientRect","width","height","context","getContext","pixelRatio","Math","min","devicePixelRatio","max","floor","scale","styles","getComputedStyle","colors","getPropertyValue","trim","filter","Boolean","length","particles","undefined","frame","startedAt","performance","now","draw","advance","elapsed","clearRect","globalAlpha","particle","vy","vx","x","y","rotation","save","translate","rotate","fillStyle","color","fillRect","restore","requestAnimationFrame","cancelAnimationFrame","ref"],"mappings":";AAAA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,IAAI,QAAO,yBAAyB;AAC5C,SAAQC,IAAI,QAAO,+BAA+B;AAClD,SAAQC,SAAS,EAAEC,MAAM,QAAO,QAAQ;AACxC,SAAQC,uBAAuB,QAAO,gCAAgC;AAEtE,MAAMC,sBAAsB;AAC5B,MAAMC,uBAAuB;AAC7B,MAAMC,uBAAuB;AAE7B,OAAO,SAASC,yBAAyB,EACvCC,SAAS,EACTC,eAAe,EACfC,MAAM,EAKP;IACC,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACC;gBAAcC,QAAQN;gBAAWO,YAAYN;;0BAC9C,MAACE;gBAAIC,WAAU;;kCACb,KAACb;wBACCiB,MAAK;wBACLJ,WAAU;wBACVK,eAAY;;kCAEd,MAACN;wBAAIC,WAAU;;0CACb,KAACZ;gCAAKkB,MAAK;gCAAKC,IAAI;gCAACP,WAAU;0CAAwB;;0CAGvD,KAACZ;gCAAKkB,MAAK;gCAAKN,WAAU;0CAAwB;;;;kCAIpD,KAACd;wBAAOsB,MAAK;wBAASF,MAAK;wBAAKG,SAAQ;wBAAUC,SAASZ;kCAAQ;;;;;;AAM3E;AAEA,SAASG,cAAc,EACrBC,MAAM,EACNC,UAAU,EAIX;IACC,MAAMQ,YAAYrB,OAA0B;IAE5CD,UAAU;QACR,IAAI,CAACa,UAAU,OAAOU,WAAW,aAAa;QAC9C,IAAIC,YAAY;QAChB,MAAMC,SAAS;YACb,IAAID,WAAW;YACfA,YAAY;YACZV;QACF;QAEA,MAAMY,uBACJH,OAAOI,UAAU,GAAG,qCAAqCC,WAAW;QACtE,IAAI,OAAOC,cAAc,eAAe1B,oBAAoB2B,IAAI,CAACD,UAAUE,SAAS,GAAG;YACrFN;YACA;QACF;QAEA,MAAMO,SAASV,UAAUW,OAAO;QAChC,IAAI,CAACD,QAAQ;YACXP;YACA;QACF;QACA,MAAMS,SAASF,OAAOG,qBAAqB;QAC3C,IAAID,OAAOE,KAAK,KAAK,KAAKF,OAAOG,MAAM,KAAK,GAAG;YAC7CZ;YACA;QACF;QACA,MAAMa,UAAUN,OAAOO,UAAU,CAAC;QAClC,IAAI,CAACD,SAAS;YACZb;YACA;QACF;QAEA,MAAMe,aAAaC,KAAKC,GAAG,CAACnB,OAAOoB,gBAAgB,IAAI,GAAG;QAC1D,MAAMP,QAAQK,KAAKG,GAAG,CAACV,OAAOE,KAAK,EAAE;QACrC,MAAMC,SAASI,KAAKG,GAAG,CAACV,OAAOG,MAAM,EAAE;QACvCL,OAAOI,KAAK,GAAGK,KAAKI,KAAK,CAACT,QAAQI;QAClCR,OAAOK,MAAM,GAAGI,KAAKI,KAAK,CAACR,SAASG;QACpCF,QAAQQ,KAAK,CAACN,YAAYA;QAE1B,MAAMO,SAASC,iBAAiBhB;QAChC,MAAMiB,SAAS;YACbF,OAAOG,gBAAgB,CAAC,uCAAuCC,IAAI;YACnEJ,OAAOG,gBAAgB,CAAC,yCAAyCC,IAAI;YACrEJ,OAAOG,gBAAgB,CAAC,0CAA0CC,IAAI;YACtEJ,OAAOG,gBAAgB,CAAC,0CAA0CC,IAAI;SACvE,CAACC,MAAM,CAACC;QACT,IAAIJ,OAAOK,MAAM,KAAK,GAAG;YACvB7B;YACA;QACF;QACA,MAAM8B,YAAYrD,wBAChBkC,OACAC,QACAY,QACAvB,uBAAuBrB,uBAAuBmD;QAEhD,IAAIC,QAAQ;QACZ,MAAMC,YAAYC,YAAYC,GAAG;QAEjC,MAAMC,OAAO,CAACD,KAAaE,UAAU,IAAI;YACvC,MAAMC,UAAUH,MAAMF;YACtBpB,QAAQ0B,SAAS,CAAC,GAAG,GAAG5B,OAAOC;YAC/BC,QAAQ2B,WAAW,GAAGxB,KAAKG,GAAG,CAAC,GAAG,IAAImB,UAAU3D;YAChD,KAAK,MAAM8D,YAAYX,UAAW;gBAChC,IAAIO,SAAS;oBACXI,SAASC,EAAE,IAAI;oBACfD,SAASE,EAAE,IAAI;oBACfF,SAASG,CAAC,IAAIH,SAASE,EAAE;oBACzBF,SAASI,CAAC,IAAIJ,SAASC,EAAE;oBACzBD,SAASK,QAAQ,IAAI;gBACvB;gBACAjC,QAAQkC,IAAI;gBACZlC,QAAQmC,SAAS,CAACP,SAASG,CAAC,EAAEH,SAASI,CAAC;gBACxChC,QAAQoC,MAAM,CAACR,SAASK,QAAQ;gBAChCjC,QAAQqC,SAAS,GAAGT,SAASU,KAAK;gBAClCtC,QAAQuC,QAAQ,CACd,CAACX,SAASjD,IAAI,GAAG,GACjB,CAACiD,SAASjD,IAAI,GAAG,GACjBiD,SAASjD,IAAI,EACbiD,SAASjD,IAAI,GAAG;gBAElBqB,QAAQwC,OAAO;YACjB;YACAxC,QAAQ2B,WAAW,GAAG;YACtB,IAAI,CAACH,SAAS;YACd,IAAIC,UAAU3D,sBAAsB;gBAClCqD,QAAQsB,sBAAsBlB;YAChC,OAAO;gBACLpC;YACF;QACF;QAEA,IAAIC,sBAAsB;YACxBmC,KAAKH,WAAW;YAChBjC;YACA,mEAAmE;YACnE;QACF;QAEAgC,QAAQsB,sBAAsBlB;QAC9B,OAAO;YACLmB,qBAAqBvB;YACrBnB,QAAQ0B,SAAS,CAAC,GAAG,GAAG5B,OAAOC;QACjC;IACF,GAAG;QAACxB;QAAQC;KAAW;IAEvB,qBACE,KAACJ;QAAIM,eAAY;QAAOL,WAAU;kBAChC,cAAA,KAACqB;YAAOiD,KAAK3D;YAAWX,WAAU;;;AAGxC"}

package/dist/components/setup-checklist-confetti.d.ts

@@ -0,0 +1,13 @@
+export declare const CONFETTI_PARTICLE_COUNT = 48;
+interface ConfettiParticle {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    rotation: number;
+    size: number;
+    color: string;
+}
+export declare function createConfettiParticles(width: number, height: number, palette: readonly string[], seed?: number): ConfettiParticle[];
+export {};
+//# sourceMappingURL=setup-checklist-confetti.d.ts.map

package/dist/components/setup-checklist-confetti.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-checklist-confetti.d.ts","sourceRoot":"","sources":["../../src/components/setup-checklist-confetti.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,uBAAuB,KAAK,CAAC;AAE1C,UAAU,gBAAgB;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,uBAAuB,CACrC,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,SAAS,MAAM,EAAE,EAC1B,IAAI,CAAC,EAAE,MAAM,GACZ,gBAAgB,EAAE,CAYpB"}

package/dist/components/setup-checklist-confetti.js

@@ -0,0 +1,24 @@
+export const CONFETTI_PARTICLE_COUNT = 48;
+export function createConfettiParticles(width, height, palette, seed) {
+    const random = seed === undefined ? Math.random : createSeededRandom(seed);
+    return Array.from({
+        length: CONFETTI_PARTICLE_COUNT
+    }, (_, index)=>({
+            x: width / 2 + (random() - 0.5) * width * 0.55,
+            y: height * (0.4 + random() * 0.15),
+            vx: (random() - 0.5) * 2.5,
+            vy: -(random() * 0.7 + 0.4),
+            rotation: random() * Math.PI,
+            size: random() * 5 + 5,
+            color: palette[index % palette.length] ?? palette[0] ?? ''
+        }));
+}
+function createSeededRandom(seed) {
+    let state = seed >>> 0;
+    return ()=>{
+        state = Math.imul(state, 1_664_525) + 1_013_904_223 >>> 0;
+        return state / 2 ** 32;
+    };
+}
+
+//# sourceMappingURL=setup-checklist-confetti.js.map

package/dist/components/setup-checklist-confetti.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/setup-checklist-confetti.ts"],"sourcesContent":["export const CONFETTI_PARTICLE_COUNT = 48;\n\ninterface ConfettiParticle {\n  x: number;\n  y: number;\n  vx: number;\n  vy: number;\n  rotation: number;\n  size: number;\n  color: string;\n}\n\nexport function createConfettiParticles(\n  width: number,\n  height: number,\n  palette: readonly string[],\n  seed?: number,\n): ConfettiParticle[] {\n  const random = seed === undefined ? Math.random : createSeededRandom(seed);\n\n  return Array.from({length: CONFETTI_PARTICLE_COUNT}, (_, index) => ({\n    x: width / 2 + (random() - 0.5) * width * 0.55,\n    y: height * (0.4 + random() * 0.15),\n    vx: (random() - 0.5) * 2.5,\n    vy: -(random() * 0.7 + 0.4),\n    rotation: random() * Math.PI,\n    size: random() * 5 + 5,\n    color: palette[index % palette.length] ?? palette[0] ?? '',\n  }));\n}\n\nfunction createSeededRandom(seed: number): () => number {\n  let state = seed >>> 0;\n\n  return () => {\n    state = (Math.imul(state, 1_664_525) + 1_013_904_223) >>> 0;\n    return state / 2 ** 32;\n  };\n}\n"],"names":["CONFETTI_PARTICLE_COUNT","createConfettiParticles","width","height","palette","seed","random","undefined","Math","createSeededRandom","Array","from","length","_","index","x","y","vx","vy","rotation","PI","size","color","state","imul"],"mappings":"AAAA,OAAO,MAAMA,0BAA0B,GAAG;AAY1C,OAAO,SAASC,wBACdC,KAAa,EACbC,MAAc,EACdC,OAA0B,EAC1BC,IAAa;IAEb,MAAMC,SAASD,SAASE,YAAYC,KAAKF,MAAM,GAAGG,mBAAmBJ;IAErE,OAAOK,MAAMC,IAAI,CAAC;QAACC,QAAQZ;IAAuB,GAAG,CAACa,GAAGC,QAAW,CAAA;YAClEC,GAAGb,QAAQ,IAAI,AAACI,CAAAA,WAAW,GAAE,IAAKJ,QAAQ;YAC1Cc,GAAGb,SAAU,CAAA,MAAMG,WAAW,IAAG;YACjCW,IAAI,AAACX,CAAAA,WAAW,GAAE,IAAK;YACvBY,IAAI,CAAEZ,CAAAA,WAAW,MAAM,GAAE;YACzBa,UAAUb,WAAWE,KAAKY,EAAE;YAC5BC,MAAMf,WAAW,IAAI;YACrBgB,OAAOlB,OAAO,CAACU,QAAQV,QAAQQ,MAAM,CAAC,IAAIR,OAAO,CAAC,EAAE,IAAI;QAC1D,CAAA;AACF;AAEA,SAASK,mBAAmBJ,IAAY;IACtC,IAAIkB,QAAQlB,SAAS;IAErB,OAAO;QACLkB,QAAQ,AAACf,KAAKgB,IAAI,CAACD,OAAO,aAAa,kBAAmB;QAC1D,OAAOA,QAAQ,KAAK;IACtB;AACF"}

package/dist/components/setup-checklist-host-primitives.d.ts

@@ -0,0 +1,11 @@
+import type { SetupChecklist } from '#core/setup-checklist.js';
+export declare function ChecklistDismissAction({ onDismiss }: {
+    onDismiss: () => void;
+}): import("react").JSX.Element;
+export declare function ChecklistHeader({ count, onDismiss, }: {
+    count?: string | undefined;
+    onDismiss: () => void;
+}): import("react").JSX.Element;
+export declare function ChecklistSkeleton(): import("react").JSX.Element;
+export declare function checklistCountLabel(checklist: SetupChecklist): string;
+//# sourceMappingURL=setup-checklist-host-primitives.d.ts.map

package/dist/components/setup-checklist-host-primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-checklist-host-primitives.d.ts","sourceRoot":"","sources":["../../src/components/setup-checklist-host-primitives.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAE7D,wBAAgB,sBAAsB,CAAC,EAAC,SAAS,EAAC,EAAE;IAAC,SAAS,EAAE,MAAM,IAAI,CAAA;CAAC,+BAQ1E;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB,+BAwBA;AAED,wBAAgB,iBAAiB,gCAYhC;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,cAAc,UAE5D"}

package/dist/components/setup-checklist-host-primitives.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconButton } from '@shipfox/react-ui/button';
+import { PanelActions, PanelHeader, PanelTitle } from '@shipfox/react-ui/panel';
+import { Skeleton } from '@shipfox/react-ui/skeleton';
+import { Text } from '@shipfox/react-ui/typography';
+export function ChecklistDismissAction({ onDismiss }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex justify-end border-t border-border-neutral-base px-row py-row",
+        children: /*#__PURE__*/ _jsx(Button, {
+            type: "button",
+            size: "sm",
+            variant: "transparentMuted",
+            onClick: onDismiss,
+            children: "Hide setup guide"
+        })
+    });
+}
+export function ChecklistHeader({ count, onDismiss }) {
+    return /*#__PURE__*/ _jsxs(PanelHeader, {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex min-w-0 items-center gap-group",
+                children: [
+                    /*#__PURE__*/ _jsx(PanelTitle, {
+                        children: "Get started"
+                    }),
+                    count ? /*#__PURE__*/ _jsx(Text, {
+                        as: "span",
+                        size: "sm",
+                        className: "shrink-0 text-foreground-neutral-muted",
+                        children: count
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsx(PanelActions, {
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    type: "button",
+                    variant: "transparent",
+                    size: "sm",
+                    muted: true,
+                    icon: "close",
+                    "aria-label": "Hide setup guide",
+                    onClick: onDismiss
+                })
+            })
+        ]
+    });
+}
+export function ChecklistSkeleton() {
+    return /*#__PURE__*/ _jsxs("div", {
+        role: "status",
+        "aria-label": "Loading setup guide",
+        className: "flex flex-col gap-inline p-panel",
+        children: [
+            /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-16 w-3/4"
+            }),
+            /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-16 w-5/6"
+            }),
+            /*#__PURE__*/ _jsx(Skeleton, {
+                className: "h-16 w-2/3"
+            })
+        ]
+    });
+}
+export function checklistCountLabel(checklist) {
+    return `${checklist.trackedCount - checklist.openCount} of ${checklist.trackedCount} done`;
+}
+
+//# sourceMappingURL=setup-checklist-host-primitives.js.map

package/dist/components/setup-checklist-host-primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/setup-checklist-host-primitives.tsx"],"sourcesContent":["import {Button, IconButton} from '@shipfox/react-ui/button';\nimport {PanelActions, PanelHeader, PanelTitle} from '@shipfox/react-ui/panel';\nimport {Skeleton} from '@shipfox/react-ui/skeleton';\nimport {Text} from '@shipfox/react-ui/typography';\nimport type {SetupChecklist} from '#core/setup-checklist.js';\n\nexport function ChecklistDismissAction({onDismiss}: {onDismiss: () => void}) {\n  return (\n    <div className=\"flex justify-end border-t border-border-neutral-base px-row py-row\">\n      <Button type=\"button\" size=\"sm\" variant=\"transparentMuted\" onClick={onDismiss}>\n        Hide setup guide\n      </Button>\n    </div>\n  );\n}\n\nexport function ChecklistHeader({\n  count,\n  onDismiss,\n}: {\n  count?: string | undefined;\n  onDismiss: () => void;\n}) {\n  return (\n    <PanelHeader>\n      <div className=\"flex min-w-0 items-center gap-group\">\n        <PanelTitle>Get started</PanelTitle>\n        {count ? (\n          <Text as=\"span\" size=\"sm\" className=\"shrink-0 text-foreground-neutral-muted\">\n            {count}\n          </Text>\n        ) : null}\n      </div>\n      <PanelActions>\n        <IconButton\n          type=\"button\"\n          variant=\"transparent\"\n          size=\"sm\"\n          muted\n          icon=\"close\"\n          aria-label=\"Hide setup guide\"\n          onClick={onDismiss}\n        />\n      </PanelActions>\n    </PanelHeader>\n  );\n}\n\nexport function ChecklistSkeleton() {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading setup guide\"\n      className=\"flex flex-col gap-inline p-panel\"\n    >\n      <Skeleton className=\"h-16 w-3/4\" />\n      <Skeleton className=\"h-16 w-5/6\" />\n      <Skeleton className=\"h-16 w-2/3\" />\n    </div>\n  );\n}\n\nexport function checklistCountLabel(checklist: SetupChecklist) {\n  return `${checklist.trackedCount - checklist.openCount} of ${checklist.trackedCount} done`;\n}\n"],"names":["Button","IconButton","PanelActions","PanelHeader","PanelTitle","Skeleton","Text","ChecklistDismissAction","onDismiss","div","className","type","size","variant","onClick","ChecklistHeader","count","as","muted","icon","aria-label","ChecklistSkeleton","role","checklistCountLabel","checklist","trackedCount","openCount"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,UAAU,QAAO,2BAA2B;AAC5D,SAAQC,YAAY,EAAEC,WAAW,EAAEC,UAAU,QAAO,0BAA0B;AAC9E,SAAQC,QAAQ,QAAO,6BAA6B;AACpD,SAAQC,IAAI,QAAO,+BAA+B;AAGlD,OAAO,SAASC,uBAAuB,EAACC,SAAS,EAA0B;IACzE,qBACE,KAACC;QAAIC,WAAU;kBACb,cAAA,KAACV;YAAOW,MAAK;YAASC,MAAK;YAAKC,SAAQ;YAAmBC,SAASN;sBAAW;;;AAKrF;AAEA,OAAO,SAASO,gBAAgB,EAC9BC,KAAK,EACLR,SAAS,EAIV;IACC,qBACE,MAACL;;0BACC,MAACM;gBAAIC,WAAU;;kCACb,KAACN;kCAAW;;oBACXY,sBACC,KAACV;wBAAKW,IAAG;wBAAOL,MAAK;wBAAKF,WAAU;kCACjCM;yBAED;;;0BAEN,KAACd;0BACC,cAAA,KAACD;oBACCU,MAAK;oBACLE,SAAQ;oBACRD,MAAK;oBACLM,KAAK;oBACLC,MAAK;oBACLC,cAAW;oBACXN,SAASN;;;;;AAKnB;AAEA,OAAO,SAASa;IACd,qBACE,MAACZ;QACCa,MAAK;QACLF,cAAW;QACXV,WAAU;;0BAEV,KAACL;gBAASK,WAAU;;0BACpB,KAACL;gBAASK,WAAU;;0BACpB,KAACL;gBAASK,WAAU;;;;AAG1B;AAEA,OAAO,SAASa,oBAAoBC,SAAyB;IAC3D,OAAO,GAAGA,UAAUC,YAAY,GAAGD,UAAUE,SAAS,CAAC,IAAI,EAAEF,UAAUC,YAAY,CAAC,KAAK,CAAC;AAC5F"}

package/dist/components/setup-checklist-row.d.ts

@@ -0,0 +1,7 @@
+import type { SetupChecklistItem } from '#core/setup-checklist.js';
+export declare function ChecklistRow({ item, workspaceSlug, onAction, }: {
+    item: SetupChecklistItem;
+    workspaceSlug: string;
+    onAction?: ((item: SetupChecklistItem) => void) | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=setup-checklist-row.d.ts.map

package/dist/components/setup-checklist-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup-checklist-row.d.ts","sourceRoot":"","sources":["../../src/components/setup-checklist-row.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,0BAA0B,CAAC;AAIjE,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,aAAa,EACb,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,kBAAkB,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D,+BA+CA"}