@zvk/composite 0.1.1 → 0.1.2

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 (40) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/README.md +410 -0
  3. package/dist/activity/activity-feed.d.ts +27 -0
  4. package/dist/activity/activity-feed.js +30 -0
  5. package/dist/ai/conversation-directory.d.ts +31 -0
  6. package/dist/ai/conversation-directory.js +44 -0
  7. package/dist/ai/provider-model-selector.d.ts +31 -0
  8. package/dist/ai/provider-model-selector.js +41 -0
  9. package/dist/ai/sticky-composer.d.ts +14 -0
  10. package/dist/ai/sticky-composer.js +13 -0
  11. package/dist/data/data-table-control-bar.d.ts +13 -0
  12. package/dist/data/data-table-control-bar.js +11 -0
  13. package/dist/detail/detail-inspector-panel.d.ts +21 -0
  14. package/dist/detail/detail-inspector-panel.js +18 -0
  15. package/dist/index.d.ts +32 -0
  16. package/dist/index.js +16 -0
  17. package/dist/integrations/integration-status-card.d.ts +20 -0
  18. package/dist/integrations/integration-status-card.js +15 -0
  19. package/dist/layout/feature-shell.d.ts +13 -0
  20. package/dist/layout/feature-shell.js +7 -0
  21. package/dist/navigation/command-palette-shell.d.ts +31 -0
  22. package/dist/navigation/command-palette-shell.js +45 -0
  23. package/dist/navigation/entity-switcher-menu.d.ts +38 -0
  24. package/dist/navigation/entity-switcher-menu.js +56 -0
  25. package/dist/navigation/link-action.d.ts +11 -0
  26. package/dist/navigation/link-action.js +41 -0
  27. package/dist/navigation/sectioned-workspace-shell.d.ts +2 -1
  28. package/dist/navigation/sectioned-workspace-shell.js +2 -2
  29. package/dist/settings/parameter-editor.d.ts +27 -0
  30. package/dist/settings/parameter-editor.js +12 -0
  31. package/dist/settings/settings-section-stack.d.ts +20 -0
  32. package/dist/settings/settings-section-stack.js +10 -0
  33. package/dist/state/route-state-frame.d.ts +10 -0
  34. package/dist/state/route-state-frame.js +31 -0
  35. package/dist/styles.css +2138 -99
  36. package/dist/workflows/process-list-panel.d.ts +26 -0
  37. package/dist/workflows/process-list-panel.js +24 -0
  38. package/dist/workflows/workflow-status-card.d.ts +20 -0
  39. package/dist/workflows/workflow-status-card.js +46 -0
  40. package/package.json +112 -17
@@ -0,0 +1,26 @@
1
+ import * as React from "react";
2
+ import { type WorkflowStatusTone } from "./workflow-status-card.js";
3
+ export interface ProcessListPanelItem {
4
+ readonly id: string;
5
+ readonly title: React.ReactNode;
6
+ readonly description?: React.ReactNode;
7
+ readonly status: React.ReactNode;
8
+ readonly tone?: WorkflowStatusTone;
9
+ readonly progressValue?: number;
10
+ readonly progressLabel?: React.ReactNode;
11
+ readonly metadata?: React.ReactNode;
12
+ readonly details?: React.ReactNode;
13
+ readonly actions?: React.ReactNode;
14
+ }
15
+ export interface ProcessListPanelProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title" | "children"> {
16
+ readonly title: React.ReactNode;
17
+ readonly description?: React.ReactNode;
18
+ readonly items: readonly ProcessListPanelItem[];
19
+ readonly empty?: React.ReactNode;
20
+ readonly loading?: boolean;
21
+ readonly actions?: React.ReactNode;
22
+ readonly footer?: React.ReactNode;
23
+ readonly renderItem?: (item: ProcessListPanelItem) => React.ReactNode;
24
+ readonly ref?: React.Ref<HTMLElement>;
25
+ }
26
+ export declare function ProcessListPanel({ actions, className, description, empty, footer, items, loading, ref, renderItem, title, ...props }: ProcessListPanelProps): React.JSX.Element;
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Spinner } from "@zvk/ui/spinner";
4
+ import { cn } from "../utils/cn.js";
5
+ import { WorkflowStatusCard } from "./workflow-status-card.js";
6
+ function hasValue(value) {
7
+ return value !== null && value !== undefined && value !== false;
8
+ }
9
+ function renderDefaultItem(item) {
10
+ const cardProps = {
11
+ ...(item.description !== undefined ? { description: item.description } : {}),
12
+ ...(item.tone !== undefined ? { tone: item.tone } : {}),
13
+ ...(item.progressValue !== undefined ? { progressValue: item.progressValue } : {}),
14
+ ...(item.progressLabel !== undefined ? { progressLabel: item.progressLabel } : {}),
15
+ ...(item.metadata !== undefined ? { metadata: item.metadata } : {}),
16
+ ...(item.details !== undefined ? { details: item.details } : {}),
17
+ ...(item.actions !== undefined ? { actions: item.actions } : {})
18
+ };
19
+ return (_jsx(WorkflowStatusCard, { ...cardProps, status: item.status, title: item.title }));
20
+ }
21
+ export function ProcessListPanel({ actions, className, description, empty = "No work items.", footer, items, loading = false, ref, renderItem, title, ...props }) {
22
+ const hasItems = items.length > 0;
23
+ return (_jsxs("section", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], className: cn("zvk-composite-process-list-panel", className), "data-loading": loading ? "" : undefined, children: [_jsxs("div", { className: "zvk-composite-process-list-panel__header", children: [_jsxs("div", { className: "zvk-composite-process-list-panel__copy", children: [_jsx("h3", { className: "zvk-composite-process-list-panel__title", children: title }), hasValue(description) ? (_jsx("p", { className: "zvk-composite-process-list-panel__description", children: description })) : null] }), hasValue(actions) ? _jsx("div", { className: "zvk-composite-process-list-panel__actions", children: actions }) : null] }), _jsxs("div", { className: "zvk-composite-process-list-panel__body", children: [loading ? (_jsxs("div", { className: "zvk-composite-process-list-panel__state", "data-state": "loading", children: [_jsx(Spinner, { label: "Loading work items", size: "sm", tone: "muted" }), _jsx("span", { children: "Loading work items..." })] })) : null, !loading && !hasItems ? (_jsx("div", { className: "zvk-composite-process-list-panel__state", "data-state": "empty", children: empty })) : null, !loading && hasItems ? (_jsx("ul", { className: "zvk-composite-process-list-panel__list", children: items.map((item) => (_jsx("li", { className: "zvk-composite-process-list-panel__item", children: renderItem ? renderItem(item) : renderDefaultItem(item) }, item.id))) })) : null] }), hasValue(footer) ? _jsx("div", { className: "zvk-composite-process-list-panel__footer", children: footer }) : null] }));
24
+ }
@@ -0,0 +1,20 @@
1
+ import * as React from "react";
2
+ export type WorkflowStatusTone = "queued" | "running" | "success" | "warning" | "danger" | "neutral";
3
+ export interface WorkflowStatusCardProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
4
+ title: React.ReactNode;
5
+ description?: React.ReactNode;
6
+ status: React.ReactNode;
7
+ tone?: WorkflowStatusTone;
8
+ progressValue?: number;
9
+ progressMax?: number;
10
+ progressLabel?: React.ReactNode;
11
+ currentStep?: React.ReactNode;
12
+ metadata?: React.ReactNode;
13
+ details?: React.ReactNode;
14
+ error?: React.ReactNode;
15
+ actions?: React.ReactNode;
16
+ footer?: React.ReactNode;
17
+ loading?: boolean;
18
+ ref?: React.Ref<HTMLElement>;
19
+ }
20
+ export declare function WorkflowStatusCard({ actions, className, currentStep, description, details, error, footer, loading, metadata, progressLabel, progressMax, progressValue, ref, status, title, tone, ...props }: WorkflowStatusCardProps): React.JSX.Element;
@@ -0,0 +1,46 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { Badge } from "@zvk/ui/badge";
4
+ import { Spinner } from "@zvk/ui/spinner";
5
+ import { cn } from "../utils/cn.js";
6
+ function hasValue(value) {
7
+ return value !== null && value !== undefined && value !== false;
8
+ }
9
+ function getBadgeTone(tone) {
10
+ if (tone === "danger") {
11
+ return "destructive";
12
+ }
13
+ if (tone === "running") {
14
+ return "primary";
15
+ }
16
+ if (tone === "queued") {
17
+ return "info";
18
+ }
19
+ return tone;
20
+ }
21
+ function getProgressState(value, max) {
22
+ const normalizedMax = Number.isFinite(max) && max !== undefined && max > 0 ? max : 100;
23
+ if (value === undefined || !Number.isFinite(value)) {
24
+ return {
25
+ indeterminate: true,
26
+ max: normalizedMax,
27
+ percentage: undefined,
28
+ value: undefined
29
+ };
30
+ }
31
+ const normalizedValue = Math.min(Math.max(value, 0), normalizedMax);
32
+ return {
33
+ indeterminate: false,
34
+ max: normalizedMax,
35
+ percentage: (normalizedValue / normalizedMax) * 100,
36
+ value: normalizedValue
37
+ };
38
+ }
39
+ export function WorkflowStatusCard({ actions, className, currentStep, description, details, error, footer, loading = false, metadata, progressLabel, progressMax, progressValue, ref, status, title, tone = "neutral", ...props }) {
40
+ const progress = getProgressState(progressValue, progressMax);
41
+ const showProgress = progressValue !== undefined || progressLabel !== undefined || currentStep !== undefined;
42
+ const showAside = loading || hasValue(status) || hasValue(actions);
43
+ return (_jsxs("article", { ...props, ref: ref, "aria-busy": loading ? true : props["aria-busy"], className: cn("zvk-composite-workflow-status-card", className), "data-loading": loading ? "" : undefined, "data-tone": tone, children: [_jsxs("div", { className: "zvk-composite-workflow-status-card__header", children: [_jsxs("div", { className: "zvk-composite-workflow-status-card__copy", children: [_jsx("h3", { className: "zvk-composite-workflow-status-card__title", children: title }), hasValue(description) ? _jsx("p", { className: "zvk-composite-workflow-status-card__description", children: description }) : null] }), showAside ? (_jsxs("div", { className: "zvk-composite-workflow-status-card__aside", children: [loading ? _jsx(Spinner, { label: "Loading workflow status", size: "sm", tone: "muted" }) : null, hasValue(status) ? (_jsx(Badge, { tone: getBadgeTone(tone), variant: "soft", children: status })) : null, hasValue(actions) ? _jsx("div", { className: "zvk-composite-workflow-status-card__actions", children: actions }) : null] })) : null] }), hasValue(metadata) ? _jsx("div", { className: "zvk-composite-workflow-status-card__metadata", children: metadata }) : null, showProgress ? (_jsxs("div", { className: "zvk-composite-workflow-status-card__progress-group", children: [_jsxs("div", { className: "zvk-composite-workflow-status-card__progress-header", children: [hasValue(currentStep) ? _jsx("span", { className: "zvk-composite-workflow-status-card__step", children: currentStep }) : null, hasValue(progressLabel) ? _jsx("span", { className: "zvk-composite-workflow-status-card__progress-label", children: progressLabel }) : null] }), _jsx("div", { "aria-label": typeof progressLabel === "string" ? progressLabel : "Workflow progress", "aria-valuemax": progress.indeterminate ? undefined : progress.max, "aria-valuemin": progress.indeterminate ? undefined : 0, "aria-valuenow": progress.value, className: "zvk-composite-workflow-status-card__progress", "data-indeterminate": progress.indeterminate ? "" : undefined, role: "progressbar", style: {
44
+ "--zvk-composite-workflow-status-card-progress": progress.percentage === undefined ? undefined : `${progress.percentage}%`
45
+ }, children: _jsx("span", { className: "zvk-composite-workflow-status-card__progress-track", children: _jsx("span", { className: "zvk-composite-workflow-status-card__progress-indicator" }) }) })] })) : null, hasValue(details) ? _jsx("div", { className: "zvk-composite-workflow-status-card__details", children: details }) : null, hasValue(error) ? (_jsx("div", { className: "zvk-composite-workflow-status-card__error", role: "alert", children: error })) : null, hasValue(footer) ? _jsx("div", { className: "zvk-composite-workflow-status-card__footer", children: footer }) : null] }));
46
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zvk/composite",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "Drop-in composite React components built from @zvk/ui primitives for product workspaces.",
5
5
  "private": false,
6
6
  "type": "module",
@@ -25,60 +25,154 @@
25
25
  "exports": {
26
26
  ".": {
27
27
  "types": "./dist/index.d.ts",
28
- "import": "./dist/index.js"
28
+ "import": "./dist/index.js",
29
+ "default": "./dist/index.js"
29
30
  },
30
31
  "./styles.css": "./dist/styles.css",
32
+ "./activity-feed": {
33
+ "types": "./dist/activity/activity-feed.d.ts",
34
+ "import": "./dist/activity/activity-feed.js",
35
+ "default": "./dist/activity/activity-feed.js"
36
+ },
31
37
  "./app-workspace-shell": {
32
38
  "types": "./dist/navigation/app-workspace-shell.d.ts",
33
- "import": "./dist/navigation/app-workspace-shell.js"
39
+ "import": "./dist/navigation/app-workspace-shell.js",
40
+ "default": "./dist/navigation/app-workspace-shell.js"
41
+ },
42
+ "./entity-switcher-menu": {
43
+ "types": "./dist/navigation/entity-switcher-menu.d.ts",
44
+ "import": "./dist/navigation/entity-switcher-menu.js",
45
+ "default": "./dist/navigation/entity-switcher-menu.js"
46
+ },
47
+ "./command-palette-shell": {
48
+ "types": "./dist/navigation/command-palette-shell.d.ts",
49
+ "import": "./dist/navigation/command-palette-shell.js",
50
+ "default": "./dist/navigation/command-palette-shell.js"
34
51
  },
35
52
  "./sectioned-workspace-shell": {
36
53
  "types": "./dist/navigation/sectioned-workspace-shell.d.ts",
37
- "import": "./dist/navigation/sectioned-workspace-shell.js"
54
+ "import": "./dist/navigation/sectioned-workspace-shell.js",
55
+ "default": "./dist/navigation/sectioned-workspace-shell.js"
38
56
  },
39
57
  "./workspace-header": {
40
58
  "types": "./dist/navigation/workspace-header.d.ts",
41
- "import": "./dist/navigation/workspace-header.js"
59
+ "import": "./dist/navigation/workspace-header.js",
60
+ "default": "./dist/navigation/workspace-header.js"
42
61
  },
43
62
  "./breadcrumb-page-header": {
44
63
  "types": "./dist/navigation/workspace-header.d.ts",
45
- "import": "./dist/navigation/workspace-header.js"
64
+ "import": "./dist/navigation/workspace-header.js",
65
+ "default": "./dist/navigation/workspace-header.js"
46
66
  },
47
67
  "./page-scaffold": {
48
68
  "types": "./dist/layout/page-scaffold.d.ts",
49
- "import": "./dist/layout/page-scaffold.js"
69
+ "import": "./dist/layout/page-scaffold.js",
70
+ "default": "./dist/layout/page-scaffold.js"
71
+ },
72
+ "./feature-shell": {
73
+ "types": "./dist/layout/feature-shell.d.ts",
74
+ "import": "./dist/layout/feature-shell.js",
75
+ "default": "./dist/layout/feature-shell.js"
50
76
  },
51
77
  "./state-surface": {
52
78
  "types": "./dist/state/state-surface.d.ts",
53
- "import": "./dist/state/state-surface.js"
79
+ "import": "./dist/state/state-surface.js",
80
+ "default": "./dist/state/state-surface.js"
81
+ },
82
+ "./route-state-frame": {
83
+ "types": "./dist/state/route-state-frame.d.ts",
84
+ "import": "./dist/state/route-state-frame.js",
85
+ "default": "./dist/state/route-state-frame.js"
54
86
  },
55
87
  "./entity-card": {
56
88
  "types": "./dist/lists/entity-card.d.ts",
57
- "import": "./dist/lists/entity-card.js"
89
+ "import": "./dist/lists/entity-card.js",
90
+ "default": "./dist/lists/entity-card.js"
58
91
  },
59
92
  "./entity-list-section": {
60
93
  "types": "./dist/lists/entity-list-section.d.ts",
61
- "import": "./dist/lists/entity-list-section.js"
94
+ "import": "./dist/lists/entity-list-section.js",
95
+ "default": "./dist/lists/entity-list-section.js"
62
96
  },
63
97
  "./summary-metric-grid": {
64
98
  "types": "./dist/lists/summary-metric-grid.d.ts",
65
- "import": "./dist/lists/summary-metric-grid.js"
99
+ "import": "./dist/lists/summary-metric-grid.js",
100
+ "default": "./dist/lists/summary-metric-grid.js"
66
101
  },
67
102
  "./settings-hub-list": {
68
103
  "types": "./dist/lists/settings-hub-list.d.ts",
69
- "import": "./dist/lists/settings-hub-list.js"
104
+ "import": "./dist/lists/settings-hub-list.js",
105
+ "default": "./dist/lists/settings-hub-list.js"
70
106
  },
71
107
  "./form-surface": {
72
108
  "types": "./dist/forms/form-surface.d.ts",
73
- "import": "./dist/forms/form-surface.js"
109
+ "import": "./dist/forms/form-surface.js",
110
+ "default": "./dist/forms/form-surface.js"
74
111
  },
75
112
  "./confirm-action-dialog": {
76
113
  "types": "./dist/forms/confirm-action-dialog.d.ts",
77
- "import": "./dist/forms/confirm-action-dialog.js"
114
+ "import": "./dist/forms/confirm-action-dialog.js",
115
+ "default": "./dist/forms/confirm-action-dialog.js"
116
+ },
117
+ "./integration-status-card": {
118
+ "types": "./dist/integrations/integration-status-card.d.ts",
119
+ "import": "./dist/integrations/integration-status-card.js",
120
+ "default": "./dist/integrations/integration-status-card.js"
121
+ },
122
+ "./workflow-status-card": {
123
+ "types": "./dist/workflows/workflow-status-card.d.ts",
124
+ "import": "./dist/workflows/workflow-status-card.js",
125
+ "default": "./dist/workflows/workflow-status-card.js"
126
+ },
127
+ "./process-list-panel": {
128
+ "types": "./dist/workflows/process-list-panel.d.ts",
129
+ "import": "./dist/workflows/process-list-panel.js",
130
+ "default": "./dist/workflows/process-list-panel.js"
131
+ },
132
+ "./parameter-editor": {
133
+ "types": "./dist/settings/parameter-editor.d.ts",
134
+ "import": "./dist/settings/parameter-editor.js",
135
+ "default": "./dist/settings/parameter-editor.js"
136
+ },
137
+ "./settings-section-stack": {
138
+ "types": "./dist/settings/settings-section-stack.d.ts",
139
+ "import": "./dist/settings/settings-section-stack.js",
140
+ "default": "./dist/settings/settings-section-stack.js"
141
+ },
142
+ "./provider-model-selector": {
143
+ "types": "./dist/ai/provider-model-selector.d.ts",
144
+ "import": "./dist/ai/provider-model-selector.js",
145
+ "default": "./dist/ai/provider-model-selector.js"
146
+ },
147
+ "./conversation-directory": {
148
+ "types": "./dist/ai/conversation-directory.d.ts",
149
+ "import": "./dist/ai/conversation-directory.js",
150
+ "default": "./dist/ai/conversation-directory.js"
151
+ },
152
+ "./sticky-composer": {
153
+ "types": "./dist/ai/sticky-composer.d.ts",
154
+ "import": "./dist/ai/sticky-composer.js",
155
+ "default": "./dist/ai/sticky-composer.js"
156
+ },
157
+ "./detail-inspector-panel": {
158
+ "types": "./dist/detail/detail-inspector-panel.d.ts",
159
+ "import": "./dist/detail/detail-inspector-panel.js",
160
+ "default": "./dist/detail/detail-inspector-panel.js"
161
+ },
162
+ "./data-table-control-bar": {
163
+ "types": "./dist/data/data-table-control-bar.d.ts",
164
+ "import": "./dist/data/data-table-control-bar.js",
165
+ "default": "./dist/data/data-table-control-bar.js"
78
166
  },
79
167
  "./data-table-page-frame": {
80
168
  "types": "./dist/data/data-table-page-frame.d.ts",
81
- "import": "./dist/data/data-table-page-frame.js"
169
+ "import": "./dist/data/data-table-page-frame.js",
170
+ "default": "./dist/data/data-table-page-frame.js"
171
+ },
172
+ "./link-action": {
173
+ "types": "./dist/navigation/link-action.d.ts",
174
+ "import": "./dist/navigation/link-action.js",
175
+ "default": "./dist/navigation/link-action.js"
82
176
  },
83
177
  "./package.json": "./package.json"
84
178
  },
@@ -95,14 +189,15 @@
95
189
  "validate:exports": "bun run scripts/validate-exports.mjs",
96
190
  "tarball:inspect": "bun run scripts/check-tarball.mjs",
97
191
  "pack:dry": "bun pm pack --dry-run",
98
- "preflight": "bun run typecheck && bun run build && bun run test:ssr && bun run test:types && bun run test:exports && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
192
+ "preflight": "bun run build && bun run typecheck && bun run test:ssr && bun run test:types && bun run test:exports && bun run validate:exports && bun run tarball:inspect && bun run pack:dry",
193
+ "preflight:ci": "bun run build && bun run typecheck && bun run test:ssr && bun run test:types && bun run test:exports && bun run validate:exports && bun run tarball:inspect && bun run pack:dry"
99
194
  },
100
195
  "peerDependencies": {
101
196
  "react": "^19.0.0",
102
197
  "react-dom": "^19.0.0"
103
198
  },
104
199
  "dependencies": {
105
- "@zvk/ui": "^0.1.8"
200
+ "@zvk/ui": "^0.1.9"
106
201
  },
107
202
  "tsd": {
108
203
  "directory": "tests/types"