@dsh-workbench/shared 0.1.2 → 0.1.4

package/src/components/CardHead.tsx

@@ -1,7 +1,14 @@
 import type { ReactNode } from '../lib/react.js';
 import type { Translate } from '../api/dsh-client.js';
-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 interface CardHeadProps {
   readonly t: Translate;
@@ -36,38 +43,43 @@ export function CardHead({
       <h2 className="wb-cardTitle">{title}</h2>
       {meta === undefined ? null : <span className="wb-cardMeta">{meta}</span>}
       {platformHref === undefined || platform === undefined ? null : (
-        <a
-          className="wb-iconButton wb-cardOpen"
-          href={platformHref}
-          target="_blank"
-          rel="noreferrer noopener"
-          title={platformTitle ?? platform}
-          aria-label={platform}
-        >
-          <IconRightUp size={14} />
-        </a>
+        <Tooltip label={platformTitle ?? platform}>
+          <a
+            className="wb-iconButton wb-cardOpen"
+            href={platformHref}
+            target="_blank"
+            rel="noreferrer noopener"
+            aria-label={platform}
+          >
+            <IconRightUpOutlineRegular size={14} />
+          </a>
+        </Tooltip>
       )}
-      <button
-        type="button"
-        className={`wb-iconButton wb-cardRefresh${refreshing ? ' wb-spinning' : ''}`}
-        aria-label={refreshLabel}
-        title={refreshLabel}
-        disabled={refreshing}
-        onClick={onRefresh}
-      >
-        <IconRefresh size={14} />
-      </button>
-      {gear === undefined || onToggleGear === undefined ? null : (
-        <button
+      <Tooltip label={refreshLabel}>
+        <Button
           type="button"
-          className={`wb-iconButton wb-cardGear${gearOpen === true ? ' wb-iconButtonActive' : ''}`}
-          aria-label={gear}
-          aria-expanded={gearOpen === true}
-          title={gear}
-          onClick={onToggleGear}
-        >
-          <IconSettings size={15} />
-        </button>
+          size="sm"
+          variant="ghost"
+          className={`wb-cardRefresh${refreshing ? ' wb-spinning' : ''}`}
+          aria-label={refreshLabel}
+          disabled={refreshing}
+          icon={<IconRefreshOutlineRegular size={14} />}
+          onClick={onRefresh}
+        />
+      </Tooltip>
+      {gear === undefined || onToggleGear === undefined ? null : (
+        <Tooltip label={gear}>
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className={`wb-cardGear${gearOpen === true ? ' wb-iconButtonActive' : ''}`}
+            aria-label={gear}
+            aria-expanded={gearOpen === true}
+            icon={<IconSettingsOutlineRegular size={15} />}
+            onClick={onToggleGear}
+          />
+        </Tooltip>
       )}
     </header>
   );

package/src/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/src/components/ChoiceGroup.tsx

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

package/src/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/src/components/LongTaskRow.tsx

@@ -1,7 +1,14 @@
 import { longTaskDot, type LongTaskStatus } 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';
 
 export interface LongTaskRowLink {
   readonly href: string;
@@ -17,18 +24,22 @@ export interface LongTaskRowProps {
   readonly raw?: string | undefined;
   readonly stepsTitle?: string | undefined;
   readonly rawTitle?: string | undefined;
+  readonly copyLabel?: string | undefined;
+  readonly copiedLabel?: string | undefined;
 }
 
 function RowLink({ href, text }: LongTaskRowLink) {
   return (
-    <a className="wb-linkButton wb-longTaskLink" href={href} target="_blank" rel="noreferrer noopener">
+    <a className="wb-longTaskLink" href={href} target="_blank" rel="noreferrer noopener">
       {text}
-      <IconRightUp size={12} />
+      <IconRightUpOutlineRegular size={12} />
     </a>
   );
 }
 
 export function LongTaskRow(props: LongTaskRowProps) {
+  const [stepsOpen, setStepsOpen] = useState(false);
+  const [rawOpen, setRawOpen] = useState(false);
   const failed = props.status === 'failed';
   const problem = props.problem ?? '';
   const raw = (props.raw ?? '').trim();
@@ -47,16 +58,44 @@ export function LongTaskRow(props: LongTaskRowProps) {
       {!failed ? null : (
         <Fragment>
           {steps.length === 0 || props.stepsTitle === undefined ? null : (
-            <details className="wb-longTaskDump">
-              <summary>{props.stepsTitle}</summary>
-              <pre>{steps.join('\n')}</pre>
-            </details>
+            <DisclosureRow
+              className="wb-longTaskDump"
+              icon={<IconFlatListOutlineRegular size={14} />}
+              title={props.stepsTitle}
+              open={stepsOpen}
+              expandable
+              expandOnRowClick
+              previewChevron
+              onToggle={() => setStepsOpen(!stepsOpen)}
+            >
+              <CodeBlock
+                code={steps.join('\n')}
+                className="wb-longTaskDump"
+                showHeader={props.copyLabel !== undefined}
+                copyLabel={props.copyLabel ?? ''}
+                copiedLabel={props.copiedLabel ?? ''}
+              />
+            </DisclosureRow>
           )}
           {raw === '' || props.rawTitle === undefined ? null : (
-            <details className="wb-longTaskDump">
-              <summary>{props.rawTitle}</summary>
-              <pre>{raw}</pre>
-            </details>
+            <DisclosureRow
+              className="wb-longTaskDump"
+              icon={<IconCodeOutlineRegular size={14} />}
+              title={props.rawTitle}
+              open={rawOpen}
+              expandable
+              expandOnRowClick
+              previewChevron
+              onToggle={() => setRawOpen(!rawOpen)}
+            >
+              <CodeBlock
+                code={raw}
+                className="wb-longTaskDump"
+                showHeader={props.copyLabel !== undefined}
+                copyLabel={props.copyLabel ?? ''}
+                copiedLabel={props.copiedLabel ?? ''}
+              />
+            </DisclosureRow>
           )}
         </Fragment>
       )}

package/src/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/src/components/MockStrip.tsx

@@ -1,4 +1,5 @@
 import { h } from '../lib/react.js';
+import './MockStrip.css';
 
 export function MockStrip({
   mocks,

package/src/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/src/components/ResourceStates.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react';
 import { h } from '../lib/react.js';
+import './ResourceStates.css';
 
 export function SkeletonRows({ rows = 4 }: { rows?: number }) {
   return (
@@ -16,7 +17,7 @@ export function SkeletonRows({ rows = 4 }: { rows?: number }) {
 
 export interface CenteredStateProps {
   icon: ReactNode;
-  title: string;
+  title: ReactNode;
   hint?: string;
   detail?: string;
   action?: ReactNode;

package/src/components/SaveBar.css

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

package/src/components/SaveBar.tsx

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

package/src/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/src/components/TextField.tsx

@@ -0,0 +1,17 @@
+import type { InputHTMLAttributes } from 'react';
+import './TextField.css';
+import { h } from '../lib/react.js';
+
+export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
+  readonly invalid?: boolean;
+}
+
+export function TextField({ invalid = false, className, ...rest }: TextFieldProps) {
+  return (
+    <input
+      {...rest}
+      className={className === undefined ? 'wb-textField' : `wb-textField ${className}`}
+      aria-invalid={invalid || undefined}
+    />
+  );
+}