@contractspec/example.learning-journey-ui-onboarding 3.7.17 → 3.7.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/.turbo/turbo-build.log +48 -48
  2. package/CHANGELOG.md +18 -0
  3. package/dist/OnboardingMiniApp.js +1 -994
  4. package/dist/browser/OnboardingMiniApp.js +1 -994
  5. package/dist/browser/components/CodeSnippet.js +1 -65
  6. package/dist/browser/components/JourneyMap.js +1 -59
  7. package/dist/browser/components/StepChecklist.js +1 -97
  8. package/dist/browser/components/index.js +1 -219
  9. package/dist/browser/docs/index.js +2 -16
  10. package/dist/browser/docs/learning-journey-ui-onboarding.docblock.js +2 -16
  11. package/dist/browser/example.js +1 -32
  12. package/dist/browser/index.js +2 -1127
  13. package/dist/browser/learning-journey-ui-onboarding.feature.js +1 -18
  14. package/dist/browser/views/Overview.js +1 -240
  15. package/dist/browser/views/Progress.js +1 -275
  16. package/dist/browser/views/Steps.js +1 -192
  17. package/dist/browser/views/Timeline.js +1 -213
  18. package/dist/browser/views/index.js +1 -915
  19. package/dist/components/CodeSnippet.js +1 -65
  20. package/dist/components/JourneyMap.js +1 -59
  21. package/dist/components/StepChecklist.js +1 -97
  22. package/dist/components/index.js +1 -219
  23. package/dist/docs/index.js +2 -16
  24. package/dist/docs/learning-journey-ui-onboarding.docblock.js +2 -16
  25. package/dist/example.js +1 -32
  26. package/dist/index.js +2 -1127
  27. package/dist/learning-journey-ui-onboarding.feature.js +1 -18
  28. package/dist/node/OnboardingMiniApp.js +1 -994
  29. package/dist/node/components/CodeSnippet.js +1 -65
  30. package/dist/node/components/JourneyMap.js +1 -59
  31. package/dist/node/components/StepChecklist.js +1 -97
  32. package/dist/node/components/index.js +1 -219
  33. package/dist/node/docs/index.js +2 -16
  34. package/dist/node/docs/learning-journey-ui-onboarding.docblock.js +2 -16
  35. package/dist/node/example.js +1 -32
  36. package/dist/node/index.js +2 -1127
  37. package/dist/node/learning-journey-ui-onboarding.feature.js +1 -18
  38. package/dist/node/views/Overview.js +1 -240
  39. package/dist/node/views/Progress.js +1 -275
  40. package/dist/node/views/Steps.js +1 -192
  41. package/dist/node/views/Timeline.js +1 -213
  42. package/dist/node/views/index.js +1 -915
  43. package/dist/views/Overview.js +1 -240
  44. package/dist/views/Progress.js +1 -275
  45. package/dist/views/Steps.js +1 -192
  46. package/dist/views/Timeline.js +1 -213
  47. package/dist/views/index.js +1 -915
  48. package/package.json +11 -11
@@ -1,66 +1,2 @@
1
1
  // @bun
2
- // src/components/CodeSnippet.tsx
3
- import { Button } from "@contractspec/lib.design-system";
4
- import { useState } from "react";
5
- import { jsxDEV, Fragment } from "react/jsx-dev-runtime";
6
- "use client";
7
- function CodeSnippet({
8
- code,
9
- language = "typescript",
10
- title
11
- }) {
12
- const [copied, setCopied] = useState(false);
13
- const handleCopy = async () => {
14
- await navigator.clipboard.writeText(code);
15
- setCopied(true);
16
- setTimeout(() => setCopied(false), 2000);
17
- };
18
- return /* @__PURE__ */ jsxDEV("div", {
19
- className: "overflow-hidden rounded-lg border bg-muted/50",
20
- children: [
21
- /* @__PURE__ */ jsxDEV("div", {
22
- className: "flex items-center justify-between border-b bg-muted px-4 py-2",
23
- children: [
24
- /* @__PURE__ */ jsxDEV("div", {
25
- className: "flex items-center gap-2",
26
- children: [
27
- /* @__PURE__ */ jsxDEV("span", {
28
- className: "font-medium text-muted-foreground text-xs uppercase",
29
- children: language
30
- }, undefined, false, undefined, this),
31
- title && /* @__PURE__ */ jsxDEV(Fragment, {
32
- children: [
33
- /* @__PURE__ */ jsxDEV("span", {
34
- className: "text-muted-foreground",
35
- children: "\u2022"
36
- }, undefined, false, undefined, this),
37
- /* @__PURE__ */ jsxDEV("span", {
38
- className: "text-sm",
39
- children: title
40
- }, undefined, false, undefined, this)
41
- ]
42
- }, undefined, true, undefined, this)
43
- ]
44
- }, undefined, true, undefined, this),
45
- /* @__PURE__ */ jsxDEV(Button, {
46
- variant: "ghost",
47
- size: "sm",
48
- onClick: handleCopy,
49
- className: "h-7 text-xs",
50
- children: copied ? "\u2713 Copied" : "Copy"
51
- }, undefined, false, undefined, this)
52
- ]
53
- }, undefined, true, undefined, this),
54
- /* @__PURE__ */ jsxDEV("pre", {
55
- className: "overflow-x-auto p-4",
56
- children: /* @__PURE__ */ jsxDEV("code", {
57
- className: "text-sm",
58
- children: code
59
- }, undefined, false, undefined, this)
60
- }, undefined, false, undefined, this)
61
- ]
62
- }, undefined, true, undefined, this);
63
- }
64
- export {
65
- CodeSnippet
66
- };
2
+ import{Button as i}from"@contractspec/lib.design-system";import{useState as r}from"react";import{jsx as e,jsxs as t,Fragment as d}from"react/jsx-runtime";function u({code:a,language:n="typescript",title:o}){let[p,s]=r(!1);return t("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[t("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[t("div",{className:"flex items-center gap-2",children:[e("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:n}),o&&t(d,{children:[e("span",{className:"text-muted-foreground",children:"\u2022"}),e("span",{className:"text-sm",children:o})]})]}),e(i,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(a),s(!0),setTimeout(()=>s(!1),2000)},className:"h-7 text-xs",children:p?"\u2713 Copied":"Copy"})]}),e("pre",{className:"overflow-x-auto p-4",children:e("code",{className:"text-sm",children:a})})]})}export{u as CodeSnippet};
@@ -1,60 +1,2 @@
1
1
  // @bun
2
- // src/components/JourneyMap.tsx
3
- import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
4
- import { jsxDEV } from "react/jsx-dev-runtime";
5
- "use client";
6
- var SURFACE_ICONS = {
7
- templates: "\uD83D\uDCCB",
8
- "spec-editor": "\u270F\uFE0F",
9
- regenerator: "\uD83D\uDD04",
10
- playground: "\uD83C\uDFAE",
11
- evolution: "\uD83E\uDD16",
12
- dashboard: "\uD83D\uDCCA",
13
- settings: "\u2699\uFE0F",
14
- default: "\uD83D\uDCCD"
15
- };
16
- function JourneyMap({
17
- steps,
18
- completedStepIds,
19
- currentStepId
20
- }) {
21
- return /* @__PURE__ */ jsxDEV("div", {
22
- className: "relative overflow-x-auto pb-4",
23
- children: /* @__PURE__ */ jsxDEV("div", {
24
- className: "flex min-w-max items-center gap-2",
25
- children: steps.map((step, index) => {
26
- const isCompleted = completedStepIds.includes(step.id);
27
- const isCurrent = step.id === currentStepId;
28
- const surface = step.metadata?.surface ?? "default";
29
- const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
30
- return /* @__PURE__ */ jsxDEV("div", {
31
- className: "flex items-center",
32
- children: [
33
- /* @__PURE__ */ jsxDEV("div", {
34
- className: "flex flex-col items-center gap-2",
35
- children: [
36
- /* @__PURE__ */ jsxDEV("div", {
37
- className: cn("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
38
- children: isCompleted ? "\u2713" : icon
39
- }, undefined, false, undefined, this),
40
- /* @__PURE__ */ jsxDEV("div", {
41
- className: "text-center",
42
- children: /* @__PURE__ */ jsxDEV("p", {
43
- className: cn("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
44
- children: step.title
45
- }, undefined, false, undefined, this)
46
- }, undefined, false, undefined, this)
47
- ]
48
- }, undefined, true, undefined, this),
49
- index < steps.length - 1 && /* @__PURE__ */ jsxDEV("div", {
50
- className: cn("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted")
51
- }, undefined, false, undefined, this)
52
- ]
53
- }, step.id, true, undefined, this);
54
- })
55
- }, undefined, false, undefined, this)
56
- }, undefined, false, undefined, this);
57
- }
58
- export {
59
- JourneyMap
60
- };
2
+ import{cn as z}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as h,jsxs as H}from"react/jsx-runtime";var G={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function P({steps:y,completedStepIds:B,currentStepId:J}){return h("div",{className:"relative overflow-x-auto pb-4",children:h("div",{className:"flex min-w-max items-center gap-2",children:y.map((q,D)=>{let g=B.includes(q.id),v=q.id===J,K=q.metadata?.surface??"default",L=G[K]??G.default;return H("div",{className:"flex items-center",children:[H("div",{className:"flex flex-col items-center gap-2",children:[h("div",{className:z("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",g&&"border-green-500 bg-green-500/10",v&&!g&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!g&&!v&&"border-muted bg-muted/50"),children:g?"\u2713":L}),h("div",{className:"text-center",children:h("p",{className:z("max-w-[100px] truncate font-medium text-xs",g&&"text-green-500",v&&!g&&"text-violet-500",!g&&!v&&"text-muted-foreground"),children:q.title})})]}),D<y.length-1&&h("div",{className:z("mx-2 h-1 w-8 rounded-full transition-colors",B.includes(y[D+1]?.id??"")?"bg-green-500":g?"bg-green-500/50":"bg-muted")})]},q.id)})})})}export{P as JourneyMap};
@@ -1,98 +1,2 @@
1
1
  // @bun
2
- // src/components/StepChecklist.tsx
3
- import { Button } from "@contractspec/lib.design-system";
4
- import { cn } from "@contractspec/lib.ui-kit-core";
5
- import { jsxDEV } from "react/jsx-dev-runtime";
6
- "use client";
7
- function StepChecklist({
8
- step,
9
- stepNumber,
10
- isCompleted,
11
- isCurrent,
12
- isExpanded,
13
- onToggle,
14
- onComplete
15
- }) {
16
- return /* @__PURE__ */ jsxDEV("div", {
17
- className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
18
- children: [
19
- /* @__PURE__ */ jsxDEV("button", {
20
- type: "button",
21
- className: "flex w-full items-center gap-4 p-4 text-left",
22
- onClick: onToggle,
23
- children: [
24
- /* @__PURE__ */ jsxDEV("div", {
25
- className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
26
- children: isCompleted ? "\u2713" : stepNumber
27
- }, undefined, false, undefined, this),
28
- /* @__PURE__ */ jsxDEV("div", {
29
- className: "min-w-0 flex-1",
30
- children: [
31
- /* @__PURE__ */ jsxDEV("h4", {
32
- className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
33
- children: step.title
34
- }, undefined, false, undefined, this),
35
- !isExpanded && step.description && /* @__PURE__ */ jsxDEV("p", {
36
- className: "truncate text-muted-foreground text-sm",
37
- children: step.description
38
- }, undefined, false, undefined, this)
39
- ]
40
- }, undefined, true, undefined, this),
41
- step.xpReward && /* @__PURE__ */ jsxDEV("span", {
42
- className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
43
- children: [
44
- "+",
45
- step.xpReward,
46
- " XP"
47
- ]
48
- }, undefined, true, undefined, this),
49
- /* @__PURE__ */ jsxDEV("span", {
50
- className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
51
- children: "\u25BC"
52
- }, undefined, false, undefined, this)
53
- ]
54
- }, undefined, true, undefined, this),
55
- isExpanded && /* @__PURE__ */ jsxDEV("div", {
56
- className: "border-t px-4 py-4",
57
- children: [
58
- step.description && /* @__PURE__ */ jsxDEV("p", {
59
- className: "mb-4 text-muted-foreground",
60
- children: step.description
61
- }, undefined, false, undefined, this),
62
- step.instructions && /* @__PURE__ */ jsxDEV("div", {
63
- className: "mb-4 rounded-lg bg-muted p-4",
64
- children: [
65
- /* @__PURE__ */ jsxDEV("p", {
66
- className: "mb-2 font-medium text-sm",
67
- children: "Instructions:"
68
- }, undefined, false, undefined, this),
69
- /* @__PURE__ */ jsxDEV("p", {
70
- className: "text-muted-foreground text-sm",
71
- children: step.instructions
72
- }, undefined, false, undefined, this)
73
- ]
74
- }, undefined, true, undefined, this),
75
- /* @__PURE__ */ jsxDEV("div", {
76
- className: "flex flex-wrap gap-2",
77
- children: [
78
- step.actionUrl && /* @__PURE__ */ jsxDEV(Button, {
79
- variant: "outline",
80
- size: "sm",
81
- onClick: () => window.open(step.actionUrl, "_blank"),
82
- children: step.actionLabel ?? "Try it"
83
- }, undefined, false, undefined, this),
84
- !isCompleted && /* @__PURE__ */ jsxDEV(Button, {
85
- size: "sm",
86
- onClick: onComplete,
87
- children: "Mark as Complete"
88
- }, undefined, false, undefined, this)
89
- ]
90
- }, undefined, true, undefined, this)
91
- ]
92
- }, undefined, true, undefined, this)
93
- ]
94
- }, undefined, true, undefined, this);
95
- }
96
- export {
97
- StepChecklist
98
- };
2
+ import{Button as d}from"@contractspec/lib.design-system";import{cn as a}from"@contractspec/lib.ui-kit-core";import{jsx as o,jsxs as r}from"react/jsx-runtime";function g({step:e,stepNumber:l,isCompleted:t,isCurrent:n,isExpanded:i,onToggle:c,onComplete:m}){return r("div",{className:a("rounded-xl border transition-all",t&&"border-green-500/50 bg-green-500/5",n&&!t&&"border-violet-500 bg-violet-500/5",!t&&!n&&"border-border"),children:[r("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:c,children:[o("div",{className:a("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",t&&"border-green-500 bg-green-500 text-white",n&&!t&&"border-violet-500 text-violet-500",!t&&!n&&"border-muted-foreground text-muted-foreground"),children:t?"\u2713":l}),r("div",{className:"min-w-0 flex-1",children:[o("h4",{className:a("font-semibold",t&&"text-green-500",n&&!t&&"text-foreground",!t&&!n&&"text-muted-foreground"),children:e.title}),!i&&e.description&&o("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&r("span",{className:a("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",t?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),o("span",{className:a("shrink-0 transition-transform",i&&"rotate-180"),children:"\u25BC"})]}),i&&r("div",{className:"border-t px-4 py-4",children:[e.description&&o("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&r("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[o("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),o("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),r("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&o(d,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!t&&o(d,{size:"sm",onClick:m,children:"Mark as Complete"})]})]})]})}export{g as StepChecklist};
@@ -1,220 +1,2 @@
1
1
  // @bun
2
- // src/components/StepChecklist.tsx
3
- import { Button } from "@contractspec/lib.design-system";
4
- import { cn } from "@contractspec/lib.ui-kit-core";
5
- import { jsxDEV } from "react/jsx-dev-runtime";
6
- "use client";
7
- function StepChecklist({
8
- step,
9
- stepNumber,
10
- isCompleted,
11
- isCurrent,
12
- isExpanded,
13
- onToggle,
14
- onComplete
15
- }) {
16
- return /* @__PURE__ */ jsxDEV("div", {
17
- className: cn("rounded-xl border transition-all", isCompleted && "border-green-500/50 bg-green-500/5", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/5", !isCompleted && !isCurrent && "border-border"),
18
- children: [
19
- /* @__PURE__ */ jsxDEV("button", {
20
- type: "button",
21
- className: "flex w-full items-center gap-4 p-4 text-left",
22
- onClick: onToggle,
23
- children: [
24
- /* @__PURE__ */ jsxDEV("div", {
25
- className: cn("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors", isCompleted && "border-green-500 bg-green-500 text-white", isCurrent && !isCompleted && "border-violet-500 text-violet-500", !isCompleted && !isCurrent && "border-muted-foreground text-muted-foreground"),
26
- children: isCompleted ? "\u2713" : stepNumber
27
- }, undefined, false, undefined, this),
28
- /* @__PURE__ */ jsxDEV("div", {
29
- className: "min-w-0 flex-1",
30
- children: [
31
- /* @__PURE__ */ jsxDEV("h4", {
32
- className: cn("font-semibold", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-foreground", !isCompleted && !isCurrent && "text-muted-foreground"),
33
- children: step.title
34
- }, undefined, false, undefined, this),
35
- !isExpanded && step.description && /* @__PURE__ */ jsxDEV("p", {
36
- className: "truncate text-muted-foreground text-sm",
37
- children: step.description
38
- }, undefined, false, undefined, this)
39
- ]
40
- }, undefined, true, undefined, this),
41
- step.xpReward && /* @__PURE__ */ jsxDEV("span", {
42
- className: cn("shrink-0 rounded-full px-2 py-1 font-semibold text-xs", isCompleted ? "bg-green-500/10 text-green-500" : "bg-muted text-muted-foreground"),
43
- children: [
44
- "+",
45
- step.xpReward,
46
- " XP"
47
- ]
48
- }, undefined, true, undefined, this),
49
- /* @__PURE__ */ jsxDEV("span", {
50
- className: cn("shrink-0 transition-transform", isExpanded && "rotate-180"),
51
- children: "\u25BC"
52
- }, undefined, false, undefined, this)
53
- ]
54
- }, undefined, true, undefined, this),
55
- isExpanded && /* @__PURE__ */ jsxDEV("div", {
56
- className: "border-t px-4 py-4",
57
- children: [
58
- step.description && /* @__PURE__ */ jsxDEV("p", {
59
- className: "mb-4 text-muted-foreground",
60
- children: step.description
61
- }, undefined, false, undefined, this),
62
- step.instructions && /* @__PURE__ */ jsxDEV("div", {
63
- className: "mb-4 rounded-lg bg-muted p-4",
64
- children: [
65
- /* @__PURE__ */ jsxDEV("p", {
66
- className: "mb-2 font-medium text-sm",
67
- children: "Instructions:"
68
- }, undefined, false, undefined, this),
69
- /* @__PURE__ */ jsxDEV("p", {
70
- className: "text-muted-foreground text-sm",
71
- children: step.instructions
72
- }, undefined, false, undefined, this)
73
- ]
74
- }, undefined, true, undefined, this),
75
- /* @__PURE__ */ jsxDEV("div", {
76
- className: "flex flex-wrap gap-2",
77
- children: [
78
- step.actionUrl && /* @__PURE__ */ jsxDEV(Button, {
79
- variant: "outline",
80
- size: "sm",
81
- onClick: () => window.open(step.actionUrl, "_blank"),
82
- children: step.actionLabel ?? "Try it"
83
- }, undefined, false, undefined, this),
84
- !isCompleted && /* @__PURE__ */ jsxDEV(Button, {
85
- size: "sm",
86
- onClick: onComplete,
87
- children: "Mark as Complete"
88
- }, undefined, false, undefined, this)
89
- ]
90
- }, undefined, true, undefined, this)
91
- ]
92
- }, undefined, true, undefined, this)
93
- ]
94
- }, undefined, true, undefined, this);
95
- }
96
-
97
- // src/components/JourneyMap.tsx
98
- import { cn as cn2 } from "@contractspec/lib.ui-kit-web/ui/utils";
99
- import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
100
- "use client";
101
- var SURFACE_ICONS = {
102
- templates: "\uD83D\uDCCB",
103
- "spec-editor": "\u270F\uFE0F",
104
- regenerator: "\uD83D\uDD04",
105
- playground: "\uD83C\uDFAE",
106
- evolution: "\uD83E\uDD16",
107
- dashboard: "\uD83D\uDCCA",
108
- settings: "\u2699\uFE0F",
109
- default: "\uD83D\uDCCD"
110
- };
111
- function JourneyMap({
112
- steps,
113
- completedStepIds,
114
- currentStepId
115
- }) {
116
- return /* @__PURE__ */ jsxDEV2("div", {
117
- className: "relative overflow-x-auto pb-4",
118
- children: /* @__PURE__ */ jsxDEV2("div", {
119
- className: "flex min-w-max items-center gap-2",
120
- children: steps.map((step, index) => {
121
- const isCompleted = completedStepIds.includes(step.id);
122
- const isCurrent = step.id === currentStepId;
123
- const surface = step.metadata?.surface ?? "default";
124
- const icon = SURFACE_ICONS[surface] ?? SURFACE_ICONS.default;
125
- return /* @__PURE__ */ jsxDEV2("div", {
126
- className: "flex items-center",
127
- children: [
128
- /* @__PURE__ */ jsxDEV2("div", {
129
- className: "flex flex-col items-center gap-2",
130
- children: [
131
- /* @__PURE__ */ jsxDEV2("div", {
132
- className: cn2("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all", isCompleted && "border-green-500 bg-green-500/10", isCurrent && !isCompleted && "border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20", !isCompleted && !isCurrent && "border-muted bg-muted/50"),
133
- children: isCompleted ? "\u2713" : icon
134
- }, undefined, false, undefined, this),
135
- /* @__PURE__ */ jsxDEV2("div", {
136
- className: "text-center",
137
- children: /* @__PURE__ */ jsxDEV2("p", {
138
- className: cn2("max-w-[100px] truncate font-medium text-xs", isCompleted && "text-green-500", isCurrent && !isCompleted && "text-violet-500", !isCompleted && !isCurrent && "text-muted-foreground"),
139
- children: step.title
140
- }, undefined, false, undefined, this)
141
- }, undefined, false, undefined, this)
142
- ]
143
- }, undefined, true, undefined, this),
144
- index < steps.length - 1 && /* @__PURE__ */ jsxDEV2("div", {
145
- className: cn2("mx-2 h-1 w-8 rounded-full transition-colors", completedStepIds.includes(steps[index + 1]?.id ?? "") ? "bg-green-500" : isCompleted ? "bg-green-500/50" : "bg-muted")
146
- }, undefined, false, undefined, this)
147
- ]
148
- }, step.id, true, undefined, this);
149
- })
150
- }, undefined, false, undefined, this)
151
- }, undefined, false, undefined, this);
152
- }
153
-
154
- // src/components/CodeSnippet.tsx
155
- import { Button as Button2 } from "@contractspec/lib.design-system";
156
- import { useState } from "react";
157
- import { jsxDEV as jsxDEV3, Fragment } from "react/jsx-dev-runtime";
158
- "use client";
159
- function CodeSnippet({
160
- code,
161
- language = "typescript",
162
- title
163
- }) {
164
- const [copied, setCopied] = useState(false);
165
- const handleCopy = async () => {
166
- await navigator.clipboard.writeText(code);
167
- setCopied(true);
168
- setTimeout(() => setCopied(false), 2000);
169
- };
170
- return /* @__PURE__ */ jsxDEV3("div", {
171
- className: "overflow-hidden rounded-lg border bg-muted/50",
172
- children: [
173
- /* @__PURE__ */ jsxDEV3("div", {
174
- className: "flex items-center justify-between border-b bg-muted px-4 py-2",
175
- children: [
176
- /* @__PURE__ */ jsxDEV3("div", {
177
- className: "flex items-center gap-2",
178
- children: [
179
- /* @__PURE__ */ jsxDEV3("span", {
180
- className: "font-medium text-muted-foreground text-xs uppercase",
181
- children: language
182
- }, undefined, false, undefined, this),
183
- title && /* @__PURE__ */ jsxDEV3(Fragment, {
184
- children: [
185
- /* @__PURE__ */ jsxDEV3("span", {
186
- className: "text-muted-foreground",
187
- children: "\u2022"
188
- }, undefined, false, undefined, this),
189
- /* @__PURE__ */ jsxDEV3("span", {
190
- className: "text-sm",
191
- children: title
192
- }, undefined, false, undefined, this)
193
- ]
194
- }, undefined, true, undefined, this)
195
- ]
196
- }, undefined, true, undefined, this),
197
- /* @__PURE__ */ jsxDEV3(Button2, {
198
- variant: "ghost",
199
- size: "sm",
200
- onClick: handleCopy,
201
- className: "h-7 text-xs",
202
- children: copied ? "\u2713 Copied" : "Copy"
203
- }, undefined, false, undefined, this)
204
- ]
205
- }, undefined, true, undefined, this),
206
- /* @__PURE__ */ jsxDEV3("pre", {
207
- className: "overflow-x-auto p-4",
208
- children: /* @__PURE__ */ jsxDEV3("code", {
209
- className: "text-sm",
210
- children: code
211
- }, undefined, false, undefined, this)
212
- }, undefined, false, undefined, this)
213
- ]
214
- }, undefined, true, undefined, this);
215
- }
216
- export {
217
- StepChecklist,
218
- JourneyMap,
219
- CodeSnippet
220
- };
2
+ import{Button as b}from"@contractspec/lib.design-system";import{cn as u}from"@contractspec/lib.ui-kit-core";import{jsx as a,jsxs as i}from"react/jsx-runtime";function h({step:e,stepNumber:d,isCompleted:o,isCurrent:t,isExpanded:n,onToggle:r,onComplete:l}){return i("div",{className:u("rounded-xl border transition-all",o&&"border-green-500/50 bg-green-500/5",t&&!o&&"border-violet-500 bg-violet-500/5",!o&&!t&&"border-border"),children:[i("button",{type:"button",className:"flex w-full items-center gap-4 p-4 text-left",onClick:r,children:[a("div",{className:u("flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 font-semibold text-sm transition-colors",o&&"border-green-500 bg-green-500 text-white",t&&!o&&"border-violet-500 text-violet-500",!o&&!t&&"border-muted-foreground text-muted-foreground"),children:o?"\u2713":d}),i("div",{className:"min-w-0 flex-1",children:[a("h4",{className:u("font-semibold",o&&"text-green-500",t&&!o&&"text-foreground",!o&&!t&&"text-muted-foreground"),children:e.title}),!n&&e.description&&a("p",{className:"truncate text-muted-foreground text-sm",children:e.description})]}),e.xpReward&&i("span",{className:u("shrink-0 rounded-full px-2 py-1 font-semibold text-xs",o?"bg-green-500/10 text-green-500":"bg-muted text-muted-foreground"),children:["+",e.xpReward," XP"]}),a("span",{className:u("shrink-0 transition-transform",n&&"rotate-180"),children:"\u25BC"})]}),n&&i("div",{className:"border-t px-4 py-4",children:[e.description&&a("p",{className:"mb-4 text-muted-foreground",children:e.description}),e.instructions&&i("div",{className:"mb-4 rounded-lg bg-muted p-4",children:[a("p",{className:"mb-2 font-medium text-sm",children:"Instructions:"}),a("p",{className:"text-muted-foreground text-sm",children:e.instructions})]}),i("div",{className:"flex flex-wrap gap-2",children:[e.actionUrl&&a(b,{variant:"outline",size:"sm",onClick:()=>window.open(e.actionUrl,"_blank"),children:e.actionLabel??"Try it"}),!o&&a(b,{size:"sm",onClick:l,children:"Mark as Complete"})]})]})]})}import{cn as g}from"@contractspec/lib.ui-kit-web/ui/utils";import{jsx as c,jsxs as v}from"react/jsx-runtime";var p={templates:"\uD83D\uDCCB","spec-editor":"\u270F\uFE0F",regenerator:"\uD83D\uDD04",playground:"\uD83C\uDFAE",evolution:"\uD83E\uDD16",dashboard:"\uD83D\uDCCA",settings:"\u2699\uFE0F",default:"\uD83D\uDCCD"};function k({steps:e,completedStepIds:d,currentStepId:o}){return c("div",{className:"relative overflow-x-auto pb-4",children:c("div",{className:"flex min-w-max items-center gap-2",children:e.map((t,n)=>{let r=d.includes(t.id),l=t.id===o,N=t.metadata?.surface??"default",y=p[N]??p.default;return v("div",{className:"flex items-center",children:[v("div",{className:"flex flex-col items-center gap-2",children:[c("div",{className:g("flex h-14 w-14 items-center justify-center rounded-2xl border-2 text-2xl transition-all",r&&"border-green-500 bg-green-500/10",l&&!r&&"border-violet-500 bg-violet-500/10 ring-4 ring-violet-500/20",!r&&!l&&"border-muted bg-muted/50"),children:r?"\u2713":y}),c("div",{className:"text-center",children:c("p",{className:g("max-w-[100px] truncate font-medium text-xs",r&&"text-green-500",l&&!r&&"text-violet-500",!r&&!l&&"text-muted-foreground"),children:t.title})})]}),n<e.length-1&&c("div",{className:g("mx-2 h-1 w-8 rounded-full transition-colors",d.includes(e[n+1]?.id??"")?"bg-green-500":r?"bg-green-500/50":"bg-muted")})]},t.id)})})})}import{Button as w}from"@contractspec/lib.design-system";import{useState as s}from"react";import{jsx as m,jsxs as f,Fragment as P}from"react/jsx-runtime";function B({code:e,language:d="typescript",title:o}){let[t,n]=s(!1);return f("div",{className:"overflow-hidden rounded-lg border bg-muted/50",children:[f("div",{className:"flex items-center justify-between border-b bg-muted px-4 py-2",children:[f("div",{className:"flex items-center gap-2",children:[m("span",{className:"font-medium text-muted-foreground text-xs uppercase",children:d}),o&&f(P,{children:[m("span",{className:"text-muted-foreground",children:"\u2022"}),m("span",{className:"text-sm",children:o})]})]}),m(w,{variant:"ghost",size:"sm",onClick:async()=>{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),2000)},className:"h-7 text-xs",children:t?"\u2713 Copied":"Copy"})]}),m("pre",{className:"overflow-x-auto p-4",children:m("code",{className:"text-sm",children:e})})]})}export{h as StepChecklist,k as JourneyMap,B as CodeSnippet};
@@ -1,23 +1,9 @@
1
1
  // @bun
2
- // src/docs/learning-journey-ui-onboarding.docblock.ts
3
- import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
4
- var blocks = [
5
- {
6
- id: "docs.examples.learning-journey-ui-onboarding",
7
- title: "Learning Journey UI \u2014 Onboarding",
8
- summary: "UI mini-app components for onboarding: checklists, snippets, and journey mapping.",
9
- kind: "reference",
10
- visibility: "public",
11
- route: "/docs/examples/learning-journey-ui-onboarding",
12
- tags: ["learning", "ui", "onboarding"],
13
- body: `## Includes
2
+ import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
14
3
  - Onboarding mini-app shell
15
4
  - Views: overview, steps, progress, timeline
16
5
  - Components: step checklist, code snippet, journey map
17
6
 
18
7
  ## Notes
19
8
  - Compose with design system components.
20
- - Ensure accessible labels and keyboard navigation.`
21
- }
22
- ];
23
- registerDocBlocks(blocks);
9
+ - Ensure accessible labels and keyboard navigation.`}];f(h);
@@ -1,23 +1,9 @@
1
1
  // @bun
2
- // src/docs/learning-journey-ui-onboarding.docblock.ts
3
- import { registerDocBlocks } from "@contractspec/lib.contracts-spec/docs";
4
- var blocks = [
5
- {
6
- id: "docs.examples.learning-journey-ui-onboarding",
7
- title: "Learning Journey UI \u2014 Onboarding",
8
- summary: "UI mini-app components for onboarding: checklists, snippets, and journey mapping.",
9
- kind: "reference",
10
- visibility: "public",
11
- route: "/docs/examples/learning-journey-ui-onboarding",
12
- tags: ["learning", "ui", "onboarding"],
13
- body: `## Includes
2
+ import{registerDocBlocks as f}from"@contractspec/lib.contracts-spec/docs";var h=[{id:"docs.examples.learning-journey-ui-onboarding",title:"Learning Journey UI \u2014 Onboarding",summary:"UI mini-app components for onboarding: checklists, snippets, and journey mapping.",kind:"reference",visibility:"public",route:"/docs/examples/learning-journey-ui-onboarding",tags:["learning","ui","onboarding"],body:`## Includes
14
3
  - Onboarding mini-app shell
15
4
  - Views: overview, steps, progress, timeline
16
5
  - Components: step checklist, code snippet, journey map
17
6
 
18
7
  ## Notes
19
8
  - Compose with design system components.
20
- - Ensure accessible labels and keyboard navigation.`
21
- }
22
- ];
23
- registerDocBlocks(blocks);
9
+ - Ensure accessible labels and keyboard navigation.`}];f(h);
package/dist/example.js CHANGED
@@ -1,33 +1,2 @@
1
1
  // @bun
2
- // src/example.ts
3
- import { defineExample } from "@contractspec/lib.contracts-spec";
4
- var example = defineExample({
5
- meta: {
6
- key: "learning-journey-ui-onboarding",
7
- version: "1.0.0",
8
- title: "Learning Journey UI \u2014 Onboarding",
9
- description: "UI mini-app for onboarding patterns: checklists, code snippets, journey map.",
10
- kind: "ui",
11
- visibility: "public",
12
- stability: "experimental",
13
- owners: ["@platform.core"],
14
- tags: ["learning", "ui", "onboarding"]
15
- },
16
- docs: {
17
- rootDocId: "docs.examples.learning-journey-ui-onboarding"
18
- },
19
- entrypoints: {
20
- packageName: "@contractspec/example.learning-journey-ui-onboarding",
21
- docs: "./docs"
22
- },
23
- surfaces: {
24
- templates: true,
25
- sandbox: { enabled: true, modes: ["playground", "markdown"] },
26
- studio: { enabled: true, installable: true },
27
- mcp: { enabled: true }
28
- }
29
- });
30
- var example_default = example;
31
- export {
32
- example_default as default
33
- };
2
+ import{defineExample as g}from"@contractspec/lib.contracts-spec";var h=g({meta:{key:"learning-journey-ui-onboarding",version:"1.0.0",title:"Learning Journey UI \u2014 Onboarding",description:"UI mini-app for onboarding patterns: checklists, code snippets, journey map.",kind:"ui",visibility:"public",stability:"experimental",owners:["@platform.core"],tags:["learning","ui","onboarding"]},docs:{rootDocId:"docs.examples.learning-journey-ui-onboarding"},entrypoints:{packageName:"@contractspec/example.learning-journey-ui-onboarding",docs:"./docs"},surfaces:{templates:!0,sandbox:{enabled:!0,modes:["playground","markdown"]},studio:{enabled:!0,installable:!0},mcp:{enabled:!0}}}),q=h;export{q as default};