@dsh-workbench/shared 0.1.2 → 0.1.4

package/dist/api/host-write.d.ts

@@ -8,5 +8,6 @@ export type WriteOutcome<T> = {
     readonly ok: false;
     readonly message: string;
     readonly detail?: string;
+    readonly helpUrl?: string;
 };
 export declare function writeOutcomeOf<T>(response: ApiResponse<T> | null, networkText: string): WriteOutcome<T>;

package/dist/api/host-write.js

@@ -11,7 +11,13 @@ export function writeOutcomeOf(response, networkText) {
         const own = typeof box.error?.message === 'string' && box.error.message !== '' ? box.error.message : undefined;
         const fallback = typeof box.text === 'string' && box.text !== '' ? box.text : networkText;
         const detail = typeof box.error?.detail === 'string' ? box.error.detail : undefined;
-        return { ok: false, message: own ?? fallback, ...(detail === undefined ? {} : { detail }) };
+        const helpUrl = typeof box.error?.helpUrl === 'string' && box.error.helpUrl !== '' ? box.error.helpUrl : undefined;
+        return {
+            ok: false,
+            message: own ?? fallback,
+            ...(detail === undefined ? {} : { detail }),
+            ...(helpUrl === undefined ? {} : { helpUrl }),
+        };
     }
     return { ok: true, value: response };
 }

package/dist/api/workbench-contract.d.ts

@@ -1,5 +1,5 @@
 import type { PluginRelease } from '../api/unit.js';
-export type ProvisionAction = 'install' | 'update' | 'uninstall' | 'update-dependency';
+export type ProvisionAction = 'install' | 'update' | 'uninstall' | 'update-dependency' | 'install-bundle' | 'update-bundle' | 'remove-bundle' | 'cancel-install';
 export interface PluginStatePayload {
     readonly name: string;
     readonly status: 'ok' | 'outdated' | 'missing';

package/dist/components/ApprovalDetail.css

@@ -0,0 +1,4 @@
+
+.wb-approvalCommand {
+  max-width: 100%;
+}

package/dist/components/ApprovalDetail.d.ts

@@ -1,5 +1,6 @@
 import type { Translate } from '../api/dsh-client.js';
 import type { UnitClientFace } from '../components/board-module.js';
+import './ApprovalDetail.css';
 interface ToolCallRoot {
     readonly callId?: string;
     readonly name?: string;

package/dist/components/ApprovalDetail.js

@@ -1,4 +1,6 @@
 import { h } from '../lib/react.js';
+import { CodeBlock } from '@deepseek-ai/dsh-client-ui-primitives';
+import './ApprovalDetail.css';
 function callOf(snapshot, callId) {
     if (callId === undefined)
         return undefined;
@@ -29,5 +31,7 @@ export function ApprovalDetail(props) {
     const owner = (props.units ?? []).find((face) => face.approval?.tools.includes(input.tool) === true);
     if (owner?.approval !== undefined)
         return h(owner.approval.render, { input: input, t: t });
-    return command === '' ? null : h("code", { className: "wb-approvalCommand" }, command);
+    if (command === '')
+        return null;
+    return (h(CodeBlock, { code: command, className: "wb-approvalCommand", copyLabel: t('blocker.copy'), copiedLabel: t('env.copied') }));
 }

package/dist/components/CardHead.css

@@ -0,0 +1,92 @@
+
+.wb-cardHead {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  flex: none;
+  padding: var(--wb-len-8) var(--wb-len-10) var(--wb-len-8) var(--wb-len-20);
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+.wb-cardTitle {
+  margin: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  font-weight: 600;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wb-cardMeta {
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-label-tertiary);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-cardMeta::before {
+  content: '\00b7';
+  margin-right: var(--wb-len-6);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-cardOpen {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  margin-left: auto;
+  flex: none;
+  width: var(--wb-len-22);
+  height: var(--wb-len-22);
+  padding: var(--wb-len-4);
+  border-radius: var(--wb-radius-6);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-cardOpen ~ .wb-cardRefresh {
+  margin-left: 0;
+}
+
+.wb-cardOpen:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-cardRefresh {
+  margin-left: auto;
+  flex: none;
+  width: var(--wb-len-22);
+  height: var(--wb-len-22);
+  padding: var(--wb-len-4);
+  border-radius: var(--wb-radius-6);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-cardRefresh:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-cardRefresh:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
+.wb-cardGear {
+  flex: none;
+  width: var(--wb-len-22);
+  height: var(--wb-len-22);
+  padding: var(--wb-len-3);
+  border-radius: var(--wb-radius-6);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-cardGear:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-cardRefresh.wb-spinning svg {
+  animation: wb-spin var(--wb-dur-0-9) linear infinite;
+}

package/dist/components/CardHead.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from '../lib/react.js';
 import type { Translate } from '../api/dsh-client.js';
+import './CardHead.css';
 export interface CardHeadProps {
     readonly t: Translate;
     readonly title: string;

package/dist/components/CardHead.js

@@ -1,14 +1,16 @@
-import { IconRefresh, IconRightUp, IconSettings } from '../components/icons.js';
+import { Button, IconRefreshOutlineRegular, IconRightUpOutlineRegular, IconSettingsOutlineRegular, Tooltip, } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h } from '../lib/react.js';
+import './CardHead.css';
 export function CardHead({ t, title, meta, refreshing, onRefresh, gear, gearOpen, onToggleGear, platformHref, platform, platformTitle, }) {
     const refreshLabel = refreshing ? t('rightbar.refreshing') : t('rightbar.refresh');
     return (h("header", { className: "wb-cardHead" },
         h("h2", { className: "wb-cardTitle" }, title),
         meta === undefined ? null : h("span", { className: "wb-cardMeta" }, meta),
-        platformHref === undefined || platform === undefined ? null : (h("a", { className: "wb-iconButton wb-cardOpen", href: platformHref, target: "_blank", rel: "noreferrer noopener", title: platformTitle ?? platform, "aria-label": platform },
-            h(IconRightUp, { size: 14 }))),
-        h("button", { type: "button", className: `wb-iconButton wb-cardRefresh${refreshing ? ' wb-spinning' : ''}`, "aria-label": refreshLabel, title: refreshLabel, disabled: refreshing, onClick: onRefresh },
-            h(IconRefresh, { size: 14 })),
-        gear === undefined || onToggleGear === undefined ? null : (h("button", { type: "button", className: `wb-iconButton wb-cardGear${gearOpen === true ? ' wb-iconButtonActive' : ''}`, "aria-label": gear, "aria-expanded": gearOpen === true, title: gear, onClick: onToggleGear },
-            h(IconSettings, { size: 15 })))));
+        platformHref === undefined || platform === undefined ? null : (h(Tooltip, { label: platformTitle ?? platform },
+            h("a", { className: "wb-iconButton wb-cardOpen", href: platformHref, target: "_blank", rel: "noreferrer noopener", "aria-label": platform },
+                h(IconRightUpOutlineRegular, { size: 14 })))),
+        h(Tooltip, { label: refreshLabel },
+            h(Button, { type: "button", size: "sm", variant: "ghost", className: `wb-cardRefresh${refreshing ? ' wb-spinning' : ''}`, "aria-label": refreshLabel, disabled: refreshing, icon: h(IconRefreshOutlineRegular, { size: 14 }), onClick: onRefresh })),
+        gear === undefined || onToggleGear === undefined ? null : (h(Tooltip, { label: gear },
+            h(Button, { type: "button", size: "sm", variant: "ghost", className: `wb-cardGear${gearOpen === true ? ' wb-iconButtonActive' : ''}`, "aria-label": gear, "aria-expanded": gearOpen === true, icon: h(IconSettingsOutlineRegular, { size: 15 }), onClick: onToggleGear })))));
 }

package/dist/components/ChoiceGroup.css

@@ -0,0 +1,75 @@
+
+.wb-choiceMenu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-2);
+  padding: var(--wb-len-4);
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-md);
+  background: transparent;
+}
+
+.wb-choiceOption {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  min-height: var(--wb-len-30);
+  padding: var(--wb-len-6) var(--wb-len-8);
+  border-radius: var(--dsw-radius-md);
+  cursor: pointer;
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-20);
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-choiceOption:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.wb-choiceLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-radio {
+  appearance: none;
+  -webkit-appearance: none;
+  flex: none;
+  box-sizing: border-box;
+  width: var(--wb-len-12);
+  height: var(--wb-len-12);
+  margin: 0;
+  border: 1px solid var(--dsw-alias-border-l3);
+  border-radius: 50%;
+  corner-shape: round;
+  background-color: transparent;
+  cursor: pointer;
+  transition:
+    background-color var(--wb-dur-0-12) ease, border-color var(--wb-dur-0-12) ease;
+}
+
+.wb-radio:not(:checked):hover {
+  border-color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-radio:checked {
+  border-color: var(--dsw-alias-brand-primary);
+  background-image: radial-gradient(
+    circle at center,
+    var(--dsw-alias-brand-primary) 0 3px,
+    transparent 3px
+  );
+}
+
+.wb-radio:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.wb-radio:focus-visible {
+  outline: var(--dsw-focus-ring-width, var(--wb-len-2)) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary));
+  outline-offset: 2px;
+}

package/dist/components/ChoiceGroup.d.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from '../lib/react.js';
+import './ChoiceGroup.css';
 export interface ChoiceGroupOption {
     readonly value: string;
     readonly label: ReactNode;

package/dist/components/ChoiceGroup.js

@@ -1,4 +1,5 @@
 import { Fragment, h } from '../lib/react.js';
+import './ChoiceGroup.css';
 export function ChoiceGroup({ label, name, value, options, disabled, onChange }) {
     return (h("div", { className: "wb-choiceMenu", role: "radiogroup", "aria-label": label }, options.map((option) => (h(Fragment, { key: option.value },
         h("label", { className: "wb-choiceOption" },

package/dist/components/LongTaskRow.css

@@ -0,0 +1,53 @@
+
+.wb-longTask {
+  padding-top: var(--wb-len-12);
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-2);
+}
+
+.wb-longTaskHead {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  margin: 0;
+}
+
+.wb-longTaskLink {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wb-len-2);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.wb-longTaskHeadline {
+  margin: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wb-longTaskProblem {
+  margin: 0;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-state-error-primary);
+  overflow-wrap: anywhere;
+}
+
+.wb-longTaskDump {
+  margin: var(--wb-len-2) 0 0;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-longTaskDump pre {
+  margin: var(--wb-len-4) 0 0;
+  max-height: var(--wb-len-220);
+  overflow: auto;
+}

package/dist/components/LongTaskRow.d.ts

@@ -1,4 +1,5 @@
 import { type LongTaskStatus } from '../api/long-task.js';
+import './LongTaskRow.css';
 export interface LongTaskRowLink {
     readonly href: string;
     readonly text: string;
@@ -12,5 +13,7 @@ export interface LongTaskRowProps {
     readonly raw?: string | undefined;
     readonly stepsTitle?: string | undefined;
     readonly rawTitle?: string | undefined;
+    readonly copyLabel?: string | undefined;
+    readonly copiedLabel?: string | undefined;
 }
 export declare function LongTaskRow(props: LongTaskRowProps): JSX.Element;

package/dist/components/LongTaskRow.js

@@ -1,13 +1,15 @@
 import { longTaskDot } from '../api/long-task.js';
-import { Fragment, h } from '../lib/react.js';
-import { IconRightUp } from './icons.js';
-import { StateDot } from './StateDot.js';
+import { Fragment, h, useState } from '../lib/react.js';
+import { CodeBlock, DisclosureRow, IconCodeOutlineRegular, IconFlatListOutlineRegular, IconRightUpOutlineRegular, StateDot, } from '@deepseek-ai/dsh-client-ui-primitives';
+import './LongTaskRow.css';
 function RowLink({ href, text }) {
-    return (h("a", { className: "wb-linkButton wb-longTaskLink", href: href, target: "_blank", rel: "noreferrer noopener" },
+    return (h("a", { className: "wb-longTaskLink", href: href, target: "_blank", rel: "noreferrer noopener" },
         text,
-        h(IconRightUp, { size: 12 })));
+        h(IconRightUpOutlineRegular, { size: 12 })));
 }
 export function LongTaskRow(props) {
+    const [stepsOpen, setStepsOpen] = useState(false);
+    const [rawOpen, setRawOpen] = useState(false);
     const failed = props.status === 'failed';
     const problem = props.problem ?? '';
     const raw = (props.raw ?? '').trim();
@@ -19,10 +21,8 @@ export function LongTaskRow(props) {
             (props.links ?? []).map((link) => (h(RowLink, { href: link.href, key: `${link.text}@${link.href}`, text: link.text })))),
         problem === '' ? null : h("p", { className: "wb-longTaskProblem" }, problem),
         !failed ? null : (h(Fragment, null,
-            steps.length === 0 || props.stepsTitle === undefined ? null : (h("details", { className: "wb-longTaskDump" },
-                h("summary", null, props.stepsTitle),
-                h("pre", null, steps.join('\n')))),
-            raw === '' || props.rawTitle === undefined ? null : (h("details", { className: "wb-longTaskDump" },
-                h("summary", null, props.rawTitle),
-                h("pre", null, raw)))))));
+            steps.length === 0 || props.stepsTitle === undefined ? null : (h(DisclosureRow, { className: "wb-longTaskDump", icon: h(IconFlatListOutlineRegular, { size: 14 }), title: props.stepsTitle, open: stepsOpen, expandable: true, expandOnRowClick: true, previewChevron: true, onToggle: () => setStepsOpen(!stepsOpen) },
+                h(CodeBlock, { code: steps.join('\n'), className: "wb-longTaskDump", showHeader: props.copyLabel !== undefined, copyLabel: props.copyLabel ?? '', copiedLabel: props.copiedLabel ?? '' }))),
+            raw === '' || props.rawTitle === undefined ? null : (h(DisclosureRow, { className: "wb-longTaskDump", icon: h(IconCodeOutlineRegular, { size: 14 }), title: props.rawTitle, open: rawOpen, expandable: true, expandOnRowClick: true, previewChevron: true, onToggle: () => setRawOpen(!rawOpen) },
+                h(CodeBlock, { code: raw, className: "wb-longTaskDump", showHeader: props.copyLabel !== undefined, copyLabel: props.copyLabel ?? '', copiedLabel: props.copiedLabel ?? '' })))))));
 }

package/dist/components/MockStrip.css

@@ -0,0 +1,39 @@
+
+.wb-mockStrip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wb-len-4);
+  padding: var(--wb-len-8) var(--wb-len-12);
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+  flex: none;
+}
+
+.wb-mockNote {
+  flex: 1 0 100%;
+  font-size: var(--wb-font-10);
+  line-height: var(--wb-line-14);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-mockChip {
+  flex: none;
+  padding: var(--wb-len-2) var(--wb-len-7);
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--wb-radius-pill);
+  corner-shape: round;
+  background: transparent;
+  font-size: var(--wb-font-10);
+  line-height: var(--wb-line-14);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.wb-mockChip:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-mockChipOn {
+  border-color: transparent;
+  background: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-label-primary-foreground);
+}

package/dist/components/MockStrip.d.ts

@@ -1,3 +1,4 @@
+import './MockStrip.css';
 export declare function MockStrip({ mocks, index, onPick, note, real, }: {
     readonly mocks: readonly {
         readonly id: string;

package/dist/components/MockStrip.js

@@ -1,4 +1,5 @@
 import { h } from '../lib/react.js';
+import './MockStrip.css';
 export function MockStrip({ mocks, index, onPick, note, real, }) {
     return (h("div", { className: "wb-mockStrip" },
         h("span", { className: "wb-mockNote" }, note ?? '夹具：只切状态，不发请求'),

package/dist/components/ResourceStates.css

@@ -0,0 +1,111 @@
+
+.wb-centered.wb-centeredCompact {
+  flex: none;
+  min-height: 0;
+  gap: var(--wb-len-8);
+  padding: var(--wb-len-20) var(--wb-len-16);
+}
+
+.wb-centered.wb-centeredCompact .wb-centeredHero {
+  margin-bottom: var(--wb-len-4);
+}
+
+.wb-skeleton {
+  display: flex;
+  flex-direction: column;
+}
+
+.wb-skeletonRow {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-8);
+  padding: var(--wb-len-8);
+  border-radius: var(--dsw-radius-md);
+}
+
+.wb-skeletonRow + .wb-skeletonRow::before {
+  content: '';
+  align-self: stretch;
+  height: var(--wb-len-0-5);
+  margin: 0 var(--wb-len-8) var(--wb-len-neg-0-5);
+  background: var(--dsw-alias-border-l2);
+}
+
+.wb-skeletonBar {
+  display: block;
+  height: var(--wb-len-13);
+  border-radius: var(--dsw-radius-xs);
+  background: var(--dsw-alias-bg-skeleton);
+  animation: wb-skeleton-pulse var(--wb-dur-1-4) var(--ds-ease-in-out) infinite;
+}
+
+.wb-skeletonBarTitle {
+  width: 62%;
+}
+
+.wb-skeletonBarMeta {
+  width: 32%;
+  height: var(--wb-len-10);
+}
+
+.wb-skeletonRow:nth-child(2n) .wb-skeletonBarTitle {
+  width: 74%;
+}
+
+.wb-skeletonRow:nth-child(3n) .wb-skeletonBarTitle {
+  width: 52%;
+}
+
+@keyframes wb-skeleton-pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+.wb-centered {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--wb-len-14);
+  flex: 1;
+  min-height: var(--wb-len-240);
+  padding: 0 var(--wb-len-24) var(--wb-len-24);
+  text-align: center;
+}
+
+.wb-centeredHero {
+  display: flex;
+  margin-bottom: var(--wb-len-16);
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.wb-centeredTitle {
+  font-size: var(--dsw-font-s-14-font-size);
+  line-height: var(--wb-line-22);
+  color: var(--dsw-alias-label-primary);
+}
+
+.wb-centeredHint {
+  max-width: var(--wb-len-300);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-centeredDetail {
+  max-width: var(--wb-len-320);
+  font-family: var(--ds-font-family-code, monospace);
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-label-dimmed);
+  word-break: break-all;
+}
+
+.wb-centeredAction {
+  display: flex;
+  justify-content: center;
+  gap: var(--wb-len-8);
+  margin-top: var(--wb-len-2);
+}

package/dist/components/ResourceStates.d.ts

@@ -1,10 +1,11 @@
 import type { ReactNode } from 'react';
+import './ResourceStates.css';
 export declare function SkeletonRows({ rows }: {
     rows?: number;
 }): JSX.Element;
 export interface CenteredStateProps {
     icon: ReactNode;
-    title: string;
+    title: ReactNode;
     hint?: string;
     detail?: string;
     action?: ReactNode;

package/dist/components/ResourceStates.js

@@ -1,4 +1,5 @@
 import { h } from '../lib/react.js';
+import './ResourceStates.css';
 export function SkeletonRows({ rows = 4 }) {
     return (h("div", { className: "wb-skeleton", "aria-hidden": "true" }, Array.from({ length: rows }, (_, index) => (h("span", { key: index, className: "wb-skeletonRow" },
         h("span", { className: "wb-skeletonBar wb-skeletonBarTitle" }),

package/dist/components/SaveBar.css

@@ -0,0 +1,7 @@
+
+.wb-formActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--wb-len-8);
+}

package/dist/components/SaveBar.d.ts

@@ -1,3 +1,4 @@
+import './SaveBar.css';
 export interface SaveBarProps {
     readonly busy: boolean;
     readonly disabled?: boolean | undefined;

package/dist/components/SaveBar.js

@@ -1,6 +1,8 @@
+import { Button } from '@deepseek-ai/dsh-client-ui-primitives';
 import { h } from '../lib/react.js';
+import './SaveBar.css';
 export function SaveBar({ busy, disabled, labels, onCancel, onSave }) {
     return (h("div", { className: "wb-formActions" },
-        h("button", { type: "button", className: "wb-linkButton", onClick: onCancel, disabled: busy }, labels.cancel),
-        h("button", { type: "button", className: "wb-primaryButton", onClick: onSave, disabled: busy || disabled === true }, busy ? labels.saving : labels.save)));
+        h(Button, { type: "button", size: "sm", variant: "ghost", onClick: onCancel, disabled: busy }, labels.cancel),
+        h(Button, { type: "button", size: "sm", variant: "primary", onClick: onSave, disabled: busy || disabled === true }, busy ? labels.saving : labels.save)));
 }

package/dist/components/TextField.css

@@ -0,0 +1,22 @@
+.wb-textField {
+  box-sizing: border-box;
+  border: 0.5px solid var(--dsw-alias-border-l4);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-3);
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-primary);
+  outline: none;
+}
+
+.wb-textField:focus {
+  border-color: var(--dsw-alias-state-business-primary);
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-business-primary);
+}
+
+.wb-textField[aria-invalid='true'] {
+  border-color: var(--dsw-alias-state-error-primary);
+}
+
+.wb-textField[aria-invalid='true']:focus {
+  box-shadow: inset 0 0 0 0.5px var(--dsw-alias-state-error-primary);
+}

package/dist/components/TextField.d.ts

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes } from 'react';
+import './TextField.css';
+export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+    readonly invalid?: boolean;
+}
+export declare function TextField({ invalid, className, ...rest }: TextFieldProps): JSX.Element;

package/dist/components/TextField.js

@@ -0,0 +1,5 @@
+import './TextField.css';
+import { h } from '../lib/react.js';
+export function TextField({ invalid = false, className, ...rest }) {
+    return (h("input", { ...rest, className: className === undefined ? 'wb-textField' : `wb-textField ${className}`, "aria-invalid": invalid || undefined }));
+}

package/dist/components/icons.d.ts

@@ -1,18 +1,6 @@
 export interface IconProps {
     size?: number;
 }
-export declare function IconPanelLeft({ size }: IconProps): JSX.Element;
-export declare function IconFolder({ size }: IconProps): JSX.Element;
-export declare function IconFolderOpen({ size }: IconProps): JSX.Element;
-export declare function IconChevronDown({ size }: IconProps): JSX.Element;
-export declare function IconPlus({ size }: IconProps): JSX.Element;
-export declare function IconEllipsis({ size }: IconProps): JSX.Element;
-export declare function IconSettings({ size }: IconProps): JSX.Element;
-export declare function IconPin({ size }: IconProps): JSX.Element;
-export declare function IconCheck({ size }: IconProps): JSX.Element;
-export declare function IconNewChat({ size }: IconProps): JSX.Element;
-export declare function IconRefresh({ size }: IconProps): JSX.Element;
-export declare function IconRightUp({ size }: IconProps): JSX.Element;
 export declare function IconConversation({ size }: IconProps): JSX.Element;
 export declare function IconBrandMark({ size }: IconProps): JSX.Element;
 export declare function IconModules({ size }: IconProps): JSX.Element;