@dsh-workbench/shared 0.1.7 → 0.1.9

package/dist/i18n/zh.d.ts

@@ -79,7 +79,7 @@ export declare const zh: {
     readonly 'panels.market.empty': "暂无可用模块";
     readonly 'panels.market.installedSection': "已装";
     readonly 'panels.market.moduleOutdated': "有新版";
-    readonly 'panels.market.moduleRestartHint': "安装完成后可能需要重启才生效";
+    readonly 'panels.market.moduleRestartHint': "装好了但还没生效 —— 重启一次 dsh 就会出来";
     readonly 'panels.market.restartNeeded': "新版装好了，重启一次才生效。";
     readonly 'panels.market.foot': "装好后到那个项目的面板页勾选它，模块才会出现。";
     readonly 'panels.market.recheck': "重新检查更新";
@@ -275,13 +275,16 @@ export declare const zh: {
     readonly 'rightbar.label': "数据面板";
     readonly 'rightbar.expand': "展开数据面板";
     readonly 'rightbar.collapse': "收起数据面板";
+    readonly 'rightbar.column.label': "右侧栏";
+    readonly 'rightbar.column.workbench': "工作台面板";
+    readonly 'rightbar.column.dsh': "dsh 面板";
     readonly 'rightbar.refresh': "刷新";
     readonly 'rightbar.refreshing': "刷新中…";
     readonly 'rightbar.updatedAt': "更新于 {time}";
     readonly 'rightbar.noProject': "当前会话没有所属项目";
     readonly 'coding.notARepo.title': "这个项目不是 Coding 仓库";
     readonly 'error.unknown': "出错了";
-    readonly 'board.title': "看板";
+    readonly 'board.title': "工作台面板";
     readonly 'panel.conversation': "对话";
     readonly 'panels.label': "全局面板";
 };

package/dist/i18n/zh.js

@@ -79,7 +79,7 @@ export const zh = {
     'panels.market.empty': '暂无可用模块',
     'panels.market.installedSection': '已装',
     'panels.market.moduleOutdated': '有新版',
-    'panels.market.moduleRestartHint': '安装完成后可能需要重启才生效',
+    'panels.market.moduleRestartHint': '装好了但还没生效 —— 重启一次 dsh 就会出来',
     'panels.market.restartNeeded': '新版装好了，重启一次才生效。',
     'panels.market.foot': '装好后到那个项目的面板页勾选它，模块才会出现。',
     'panels.market.recheck': '重新检查更新',
@@ -275,13 +275,16 @@ 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}',
     'rightbar.noProject': '当前会话没有所属项目',
     'coding.notARepo.title': '这个项目不是 Coding 仓库',
     'error.unknown': '出错了',
-    'board.title': '看板',
+    'board.title': '工作台面板',
     'panel.conversation': '对话',
     'panels.label': '全局面板',
 };

package/dist/index.d.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/dist/index.js

@@ -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/dist/lib/react.d.ts

@@ -3,6 +3,7 @@ export declare const h: typeof ReactTypes.createElement;
 export declare const Fragment: ReactTypes.ExoticComponent<ReactTypes.FragmentProps>;
 export declare const useState: typeof ReactTypes.useState;
 export declare const useEffect: typeof ReactTypes.useEffect;
+export declare const useLayoutEffect: typeof ReactTypes.useLayoutEffect;
 export declare const useMemo: typeof ReactTypes.useMemo;
 export declare const useCallback: typeof ReactTypes.useCallback;
 export declare const useRef: typeof ReactTypes.useRef;

package/dist/lib/react.js

@@ -3,6 +3,7 @@ export const h = react.createElement;
 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dsh-workbench/shared",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "工作台与模块共享的纯代码与契约类型：类型、纯逻辑、哑组件、平台解析。宿主侧的东西从 /host 进（不影响浏览器产物）。",
   "license": "MIT",
   "type": "module",

package/src/api/dsh-client.ts

@@ -163,6 +163,19 @@ export interface DshSessionsService {
   scope(sessionId: string): unknown | undefined;
 }
 
+export interface DshObservable<T> {
+  getSnapshot(): T;
+  subscribe(listener: () => void): () => void;
+}
+
+export interface DshSidebarRight {
+  readonly mounted: DshObservable<string | undefined>;
+  isExpanded(): boolean;
+  toggleExpanded(): void;
+  openResource(address: string, options?: unknown): void;
+  openTab(kind: string, options?: unknown): void;
+}
+
 export interface DshClientContext {
   get<T = unknown>(name: string): T | undefined;
   provide(name: string, value: unknown): void;

package/src/components/Activity.css

@@ -0,0 +1,69 @@
+
+.wb-activityBlock {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-6);
+  padding-top: var(--wb-len-10);
+  border-top: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.wb-activityBlock:first-child {
+  border-top: none;
+}
+
+.wb-activityBlockHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--wb-len-8);
+}
+
+.wb-activityLine {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+  margin: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.wb-activityLineText {
+  flex: none;
+  min-width: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  max-height: var(--wb-len-72);
+  overflow-y: auto;
+}
+
+.wb-activityLineAt {
+  flex: none;
+  margin-left: auto;
+  font-size: var(--wb-font-10);
+  line-height: var(--wb-line-16);
+  font-variant-numeric: tabular-nums;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.wb-activityLine > .wb-activityLineAt,
+.wb-activityLine > .wb-activityLineActions {
+  margin-left: auto;
+}
+
+.wb-activityLine > .wb-activityLineAt + .wb-activityLineActions {
+  margin-left: 0;
+}
+
+.wb-activityLineActions {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--wb-len-6);
+}
+
+.wb-activityActionFailed {
+  color: var(--dsw-alias-state-error-primary);
+}

package/src/components/Activity.tsx

@@ -0,0 +1,76 @@
+import type { ReactNode } from '../lib/react.js';
+import { Button, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives';
+import { h } from '../lib/react.js';
+import './Activity.css';
+
+export interface ActivityBlockProps {
+  readonly head?: ReactNode | undefined;
+  readonly children?: ReactNode | undefined;
+}
+
+export function ActivityBlock({ head, children }: ActivityBlockProps) {
+  return (
+    <div className="wb-activityBlock">
+      {head === undefined ? null : <div className="wb-activityBlockHead">{head}</div>}
+      {children}
+    </div>
+  );
+}
+
+export interface ActivityLineProps {
+  readonly dot?: ReactNode | undefined;
+  readonly text: ReactNode;
+  readonly at?: ReactNode | undefined;
+  readonly actions?: ReactNode | undefined;
+}
+
+export function ActivityLine({ dot, text, at, actions }: ActivityLineProps) {
+  return (
+    <div className="wb-activityLine">
+      {dot}
+      <span className="wb-activityLineText">{text}</span>
+      {at === undefined ? null : <span className="wb-activityLineAt">{at}</span>}
+      {actions === undefined ? null : <span className="wb-activityLineActions">{actions}</span>}
+    </div>
+  );
+}
+
+export interface ActivityActionProps {
+  readonly label: string;
+  readonly hint?: string | undefined;
+  readonly icon: ReactNode;
+  readonly href?: string | undefined;
+  readonly onClick?: (() => void) | undefined;
+  readonly failed?: boolean | undefined;
+}
+
+export function ActivityAction({ label, hint, icon, href, onClick, failed }: ActivityActionProps) {
+  const tip = hint ?? label;
+  if (href !== undefined) {
+    return (
+      <a
+        className="wb-iconButton"
+        href={href}
+        target="_blank"
+        rel="noreferrer noopener"
+        title={tip}
+        aria-label={label}
+      >
+        {icon}
+      </a>
+    );
+  }
+  return (
+    <Tooltip side="bottom" align="end" gap={6} portal label={tip}>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className={failed === true ? 'wb-iconButton wb-activityActionFailed' : 'wb-iconButton'}
+        aria-label={label}
+        icon={icon}
+        onClick={onClick}
+      />
+    </Tooltip>
+  );
+}

package/src/components/ApprovalPlan.css

@@ -0,0 +1,41 @@
+
+.wb-approvalPlan {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-6);
+}
+.wb-approvalHint {
+  margin: 0;
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-secondary);
+}
+.wb-approvalRows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wb-len-2);
+  margin: 0;
+}
+.wb-approvalRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--wb-len-8);
+}
+.wb-approvalLabel {
+  flex: none;
+  width: var(--wb-len-56);
+  font-size: var(--dsw-font-xxs-12-font-size);
+  line-height: var(--wb-line-18);
+  color: var(--dsw-alias-label-tertiary);
+}
+.wb-approvalValue {
+  margin: 0;
+  font-size: var(--dsw-font-xs-13-font-size);
+  line-height: var(--wb-line-18);
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+  overflow-wrap: anywhere;
+}
+.wb-approvalWarn {
+  color: var(--dsw-alias-label-secondary);
+}

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>
+  );
+}