@dsh-workbench/shared 0.1.7 → 0.1.8

package/src/components/ApprovalPlan.tsx

@@ -0,0 +1,33 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './ApprovalPlan.css';
+
+export interface ApprovalPlanRow {
+  readonly label: ReactNode;
+  readonly value: ReactNode;
+}
+
+export interface ApprovalPlanProps {
+  readonly rows: readonly ApprovalPlanRow[];
+  readonly hint?: ReactNode | undefined;
+  readonly warn?: ReactNode | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function ApprovalPlan({ rows, hint, warn, children }: ApprovalPlanProps) {
+  return (
+    <div className="wb-approvalPlan">
+      {hint === undefined ? null : <p className="wb-approvalHint">{hint}</p>}
+      <dl className="wb-approvalRows">
+        {rows.map((row, index) => (
+          <div className="wb-approvalRow" key={String(index)}>
+            <dt className="wb-approvalLabel">{row.label}</dt>
+            <dd className="wb-approvalValue">{row.value}</dd>
+          </div>
+        ))}
+      </dl>
+      {children}
+      {warn === undefined ? null : <p className="wb-approvalWarn">{warn}</p>}
+    </div>
+  );
+}

package/src/components/Card.css

@@ -0,0 +1,20 @@
+
+.wb-card {
+  border: 0.5px solid var(--dsw-alias-border-l3);
+  border-radius: var(--dsw-radius-xl);
+  background: var(--dsw-alias-bg-layer-1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex: none;
+}
+.wb-cardBody {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-12);
+  padding: var(--wb-len-12);
+}
+.wb-cardBody > :not([data-wb-bleed]) {
+  padding-left: var(--wb-len-8);
+  padding-right: var(--wb-len-8);
+}

package/src/components/Card.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from '../lib/react.js';
+import type { Translate } from '../api/dsh-client.js';
+import { h } from '../lib/react.js';
+import { CardHead } from './CardHead.js';
+import './Card.css';
+
+export interface CardProps {
+  readonly t: Translate;
+  readonly title: string;
+  readonly refreshing: boolean;
+  readonly onRefresh: () => void;
+  readonly meta?: ReactNode | undefined;
+  readonly head?: ReactNode | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function Card({ t, title, refreshing, onRefresh, meta, head, children }: CardProps) {
+  return (
+    <section className="wb-card">
+      {head === undefined ? (
+        <CardHead t={t} title={title} refreshing={refreshing} onRefresh={onRefresh} meta={meta} />
+      ) : (
+        head
+      )}
+      <div className="wb-cardBody">{children}</div>
+    </section>
+  );
+}

package/src/components/Note.css

@@ -0,0 +1,14 @@
+
+.wb-note {
+  margin: 0;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-label-tertiary);
+}
+.wb-problem {
+  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;
+}

package/src/components/Note.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './Note.css';
+
+export interface NoteProps {
+  readonly tone?: 'muted' | 'problem';
+  readonly as?: 'p' | 'span';
+  readonly children?: ReactNode | undefined;
+}
+
+export function Note({ tone = 'muted', as, children }: NoteProps) {
+  const className = tone === 'problem' ? 'wb-problem' : 'wb-note';
+  return as === 'span' ? <span className={className}>{children}</span> : <p className={className}>{children}</p>;
+}

package/src/components/ResourceStates.css

@@ -108,4 +108,8 @@
   justify-content: center;
   gap: var(--wb-len-8);
   margin-top: var(--wb-len-2);
-}
+}
+@media (prefers-reduced-motion: reduce) {
+  .wb-skeletonBar {
+    animation: none;
+  }}

package/src/components/Rows.css

@@ -0,0 +1,30 @@
+
+.wb-row:has(> [data-wb-dot]) {
+  grid-template-columns: 84px minmax(0, 1fr);
+}
+.wb-rows {
+  display: flex;
+  flex-direction: column;
+}
+.wb-row {
+  display: grid;
+  grid-template-columns: 56px minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--wb-len-8);
+  padding: var(--wb-len-4) 0;
+}
+.wb-row + .wb-row {
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+.wb-rowKey {
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-label-tertiary);
+}
+.wb-rowValue {
+  min-width: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-primary);
+  overflow-wrap: anywhere;
+}

package/src/components/Rows.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './Rows.css';
+
+export interface RowsProps {
+  readonly children?: ReactNode | undefined;
+}
+
+export function Rows({ children }: RowsProps) {
+  return <div className="wb-rows">{children}</div>;
+}
+
+export interface RowProps {
+  readonly label: ReactNode;
+  readonly value: ReactNode;
+}
+
+export function Row({ label, value }: RowProps) {
+  return (
+    <div className="wb-row">
+      <span className="wb-rowKey">{label}</span>
+      <span className="wb-rowValue">{value}</span>
+    </div>
+  );
+}

package/src/components/SettingsSection.css

@@ -0,0 +1,26 @@
+
+.wb-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-8);
+  padding: var(--wb-len-10);
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-md);
+  background: var(--dsw-alias-bg-layer-1);
+}
+.wb-settingsHead {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-8);
+}
+.wb-settingsTitle {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}

package/src/components/SettingsSection.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './SettingsSection.css';
+
+export interface SettingsSectionProps {
+  readonly label: string;
+  readonly title: ReactNode;
+  readonly action?: ReactNode | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function SettingsSection({ label, title, action, children }: SettingsSectionProps) {
+  return (
+    <section className="wb-settings" role="group" aria-label={label}>
+      <header className="wb-settingsHead">
+        <span className="wb-settingsTitle">{title}</span>
+        {action}
+      </header>
+      {children}
+    </section>
+  );
+}

package/src/components/Stack.css

@@ -0,0 +1,7 @@
+
+.wb-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-10);
+  min-height: 0;
+}

package/src/components/Stack.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './Stack.css';
+
+export interface StackProps {
+  readonly children?: ReactNode | undefined;
+}
+
+export function Stack({ children }: StackProps) {
+  return <div className="wb-stack">{children}</div>;
+}

package/src/components/StateBlock.css

@@ -0,0 +1,36 @@
+
+.wb-stateBlock {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-6);
+}
+.wb-stateBlockTitle {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-primary);
+}
+.wb-stateBlockHint {
+  margin: 0;
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--wb-line-16);
+  color: var(--dsw-alias-label-tertiary);
+}
+.wb-stateBlockActions {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-8);
+  margin-top: var(--wb-len-2);
+}
+.wb-stateBlockResolving {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-8);
+  margin: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-secondary);
+}

package/src/components/StateBlock.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from '../lib/react.js';
+import { h } from '../lib/react.js';
+import './StateBlock.css';
+
+export interface StateBlockProps {
+  readonly title?: ReactNode | undefined;
+  readonly dot?: ReactNode | undefined;
+  readonly hint?: ReactNode | undefined;
+  readonly actions?: ReactNode | undefined;
+  readonly resolving?: ReactNode | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function StateBlock({ title, dot, hint, actions, resolving, children }: StateBlockProps) {
+  return (
+    <div className="wb-stateBlock">
+      {title === undefined && dot === undefined ? null : (
+        <p className="wb-stateBlockTitle">
+          {dot}
+          {title}
+        </p>
+      )}
+      {resolving === undefined ? null : <p className="wb-stateBlockResolving">{resolving}</p>}
+      {hint === undefined ? null : <p className="wb-stateBlockHint">{hint}</p>}
+      {children}
+      {actions === undefined ? null : <div className="wb-stateBlockActions">{actions}</div>}
+    </div>
+  );
+}

package/src/components/icons.tsx

@@ -66,3 +66,19 @@ export function IconModules({ size = 16 }: IconProps) {
     </svg>
   );
 }
+
+export function IconPanelScreen({ size = 16 }: IconProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 1024 1024"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      style={{ display: 'block', overflow: 'hidden' }}
+    >
+      <path d="M939 112c17.673 0 32 14.327 32 32v554.667c0 17.673-14.327 32-32 32l-394.5-0.001v96c0 3.74-0.642 7.331-1.82 10.668H768.4c17.673 0 32 14.326 32 32 0 17.496-14.042 31.712-31.47 31.995l-0.53 0.004H256.6c-17.673 0-32-14.327-32-32 0-17.496 14.042-31.713 31.47-31.995l0.53-0.005h225.721a31.923 31.923 0 0 1-1.817-10.137l-0.004-0.53v-96H86c-17.496 0-31.713-14.041-31.996-31.47l-0.004-0.53V144c0-17.673 14.327-32 32-32z m-32 64H118v490.666h789V176zM341.9 432c17.496 0 31.713 14.042 31.996 31.47l0.004 0.53v85.333c0 17.673-14.327 32-32 32-17.496 0-31.713-14.041-31.996-31.47l-0.004-0.53V464c0-17.673 14.327-32 32-32z m170.6-85.333c17.496 0 31.713 14.041 31.996 31.47l0.004 0.53v170.666c0 17.673-14.327 32-32 32-17.496 0-31.713-14.041-31.996-31.47l-0.004-0.53V378.667c0-17.673 14.327-32 32-32z m170.6-85.334c17.496 0 31.713 14.042 31.996 31.471l0.004 0.53v256c0 17.672-14.327 32-32 32-17.496 0-31.713-14.042-31.996-31.471l-0.004-0.53v-256c0-17.673 14.327-32 32-32z" />
+    </svg>
+  );
+}

package/src/config/constants.ts

@@ -47,6 +47,10 @@ export const STORAGE_KEY_PROJECT = "dsh-workbench.project";
 
 export const STORAGE_KEY_RIGHTBAR = "dsh-workbench.rightbar.expanded";
 
+export const STORAGE_KEY_RIGHTBAR_COLUMN = "dsh-workbench.rightbar.column";
+
+export const RIGHTBAR_FULLSCREEN_WIDTH = 768;
+
 export const LOCALE_NS = "workbench";
 
 export const LOCALES = ["zh", "en"] as const;

package/src/i18n/en.ts

@@ -282,6 +282,9 @@ export const en: Record<keyof WorkbenchMessages, string> = {
   'rightbar.label': 'Data panels',
   'rightbar.expand': 'Expand the data panel',
   'rightbar.collapse': 'Collapse the data panel',
+  'rightbar.column.label': 'Right column',
+  'rightbar.column.workbench': 'Workbench panel',
+  'rightbar.column.dsh': 'dsh panel',
   'rightbar.refresh': 'Refresh',
   'rightbar.refreshing': 'Refreshing…',
   'rightbar.updatedAt': 'updated {time}',
@@ -289,7 +292,7 @@ export const en: Record<keyof WorkbenchMessages, string> = {
   'coding.notARepo.title': 'This workspace is not a Coding repository',
   'error.unknown': 'Something went wrong',
 
-  'board.title': 'Board',
+  'board.title': 'Workbench panel',
 
   'panel.conversation': 'Conversation',
   'panels.label': 'Global panels',

package/src/i18n/zh.ts

@@ -278,6 +278,9 @@ export const zh = {
   'rightbar.label': '数据面板',
   'rightbar.expand': '展开数据面板',
   'rightbar.collapse': '收起数据面板',
+  'rightbar.column.label': '右侧栏',
+  'rightbar.column.workbench': '工作台面板',
+  'rightbar.column.dsh': 'dsh 面板',
   'rightbar.refresh': '刷新',
   'rightbar.refreshing': '刷新中…',
   'rightbar.updatedAt': '更新于 {time}',
@@ -285,7 +288,7 @@ export const zh = {
   'coding.notARepo.title': '这个项目不是 Coding 仓库',
   'error.unknown': '出错了',
 
-  'board.title': '看板',
+  'board.title': '工作台面板',
 
   'panel.conversation': '对话',
   'panels.label': '全局面板',

package/src/index.ts

@@ -10,13 +10,21 @@ export * from './api/unit-board.js';
 export * from './api/unit.js';
 export * from './api/workbench-client.js';
 export * from './api/workbench-contract.js';
+export * from './components/Activity.js';
 export * from './components/ApprovalDetail.js';
+export * from './components/ApprovalPlan.js';
+export * from './components/Card.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
 export * from './components/LongTaskRow.js';
 export * from './components/MockStrip.js';
+export * from './components/Note.js';
 export * from './components/ResourceStates.js';
+export * from './components/Rows.js';
 export * from './components/SaveBar.js';
+export * from './components/SettingsSection.js';
+export * from './components/Stack.js';
+export * from './components/StateBlock.js';
 export * from './components/TextField.js';
 export * from './components/board-module.js';
 export * from './components/icons.js';

package/src/lib/react.test.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { describe, expect, it } from 'vitest';
-import { Fragment, h, useCallback, useEffect, useMemo, useRef, useState } from './react.js';
+import { Fragment, h, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from './react.js';
 
 describe('react 入口', () => {
   it('h 就是 React.createElement（同一个引用，不是包装）', () => {
@@ -19,6 +19,7 @@ describe('react 入口', () => {
     expect(Fragment).toBe(React.Fragment);
     expect(useState).toBe(React.useState);
     expect(useEffect).toBe(React.useEffect);
+    expect(useLayoutEffect).toBe(React.useLayoutEffect);
     expect(useMemo).toBe(React.useMemo);
     expect(useCallback).toBe(React.useCallback);
     expect(useRef).toBe(React.useRef);

package/src/lib/react.ts

@@ -8,6 +8,7 @@ export const Fragment = react.Fragment;
 
 export const useState = react.useState;
 export const useEffect = react.useEffect;
+export const useLayoutEffect = react.useLayoutEffect;
 export const useMemo = react.useMemo;
 export const useCallback = react.useCallback;
 export const useRef = react.useRef;