@dsh-workbench/shared 0.2.11 → 0.2.13

package/src/host.ts

@@ -8,17 +8,17 @@ export * from './lib/text.js';
 export * from './lib/ui.js';
 export * from './lib/panel-state.js';
 export * from './api/blocker-table.js';
+export * from './host/browser-find.js';
+export * from './host/browser-read.js';
 export * from './host/cli-error.js';
 export * from './host/data-root.js';
-export * from './host/browser-read.js';
-export * from './host/browser-find.js';
 export * from './host/facts.js';
 export * from './host/git.js';
 export * from './host/http.js';
 export * from './host/long-task.js';
 export * from './host/opencli-runtime.js';
-export * from './host/opencli.js';
 export * from './host/opencli-window.js';
+export * from './host/opencli.js';
 export * from './host/plugin-ledger.js';
 export * from './host/plugin-source.js';
 export * from './host/provision.js';

package/src/index.ts

@@ -7,8 +7,8 @@ export * from './api/facts.js';
 export * from './api/host-write.js';
 export * from './api/long-task.js';
 export * from './api/unit-board.js';
-export * from './api/unit.js';
 export * from './api/unit-declaration.js';
+export * from './api/unit.js';
 export * from './api/workbench-client.js';
 export * from './api/workbench-contract.js';
 export * from './components/Activity.js';
@@ -19,19 +19,20 @@ export * from './components/CardAnchor.js';
 export * from './components/CardBoundary.js';
 export * from './components/CardHead.js';
 export * from './components/ChoiceGroup.js';
+export * from './components/Field.js';
+export * from './components/FormRows.js';
+export * from './components/Link.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/SelectField.js';
+export * from './components/SettingsSection.js';
+export * from './components/Spinner.js';
 export * from './components/Stack.js';
 export * from './components/StateBlock.js';
 export * from './components/TextField.js';
-export * from './components/Field.js';
-export * from './components/Link.js';
 export * from './components/board-module.js';
 export * from './components/icons.js';
 export * from './config/constants.js';
@@ -42,6 +43,7 @@ export * from './i18n/merge.js';
 export * from './i18n/zh.js';
 export * from './lib/blocker-action.js';
 export * from './lib/busy.js';
+export * from './lib/form-problem.js';
 export * from './lib/panel-state.js';
 export * from './lib/react.js';
 export * from './lib/text.js';

package/src/lib/form-problem.test.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it, vi } from 'vitest';
+import { firstProblemOf, revealFirstProblem } from './form-problem.js';
+
+function rootWith(problem: unknown): { readonly root: ParentNode; readonly queries: string[] } {
+  const queries: string[] = [];
+  const root = {
+    querySelector: (selector: string) => {
+      queries.push(selector);
+      return selector === '[data-wb-problem]' ? problem : null;
+    },
+  } as unknown as ParentNode;
+  return { root, queries };
+}
+
+interface ProblemStub {
+  readonly element: Element;
+  readonly queries: string[];
+  readonly scrollIntoView: ReturnType<typeof vi.fn>;
+  readonly focus: ReturnType<typeof vi.fn>;
+}
+
+function problemStub(options: { readonly scroll: boolean }): ProblemStub {
+  const queries: string[] = [];
+  const scrollIntoView = vi.fn();
+  const focus = vi.fn();
+  const element = {
+    scrollIntoView,
+    querySelector: (selector: string) => {
+      queries.push(selector);
+      return { focus };
+    },
+  } as unknown as Element;
+  if (!options.scroll) {
+    delete (element as { scrollIntoView?: unknown }).scrollIntoView;
+  }
+  return { element, queries, scrollIntoView, focus };
+}
+
+describe('firstProblemOf / revealFirstProblem', () => {
+  it('没有错误行就返回 null / false，什么也不碰', () => {
+    const empty = rootWith(null);
+    const missing = problemStub({ scroll: true });
+
+    expect(firstProblemOf(empty.root)).toBeNull();
+    expect(revealFirstProblem(rootWith(null).root)).toBe(false);
+    expect(missing.focus).not.toHaveBeenCalled();
+    expect(missing.scrollIntoView).not.toHaveBeenCalled();
+  });
+
+  it('第一处 [data-wb-problem] 就是它', () => {
+    const problem = problemStub({ scroll: true });
+    const found = rootWith(problem.element);
+
+    expect(firstProblemOf(found.root)).toBe(problem.element);
+    expect(found.queries).toEqual(['[data-wb-problem]']);
+  });
+
+  it('带进视口 + 聚焦里面第一个可聚焦控件，返回 true', () => {
+    const problem = problemStub({ scroll: true });
+
+    expect(revealFirstProblem(rootWith(problem.element).root)).toBe(true);
+    expect(problem.scrollIntoView).toHaveBeenCalledTimes(1);
+    expect(problem.scrollIntoView).toHaveBeenCalledWith({ block: 'nearest' });
+    expect(problem.queries).toHaveLength(1);
+    expect(problem.queries[0]).toContain('input:not([disabled])');
+    expect(problem.focus).toHaveBeenCalledTimes(1);
+  });
+
+  it('没有 scrollIntoView 也不炸（jsdom 缺它）：照样聚焦、照样返回 true', () => {
+    const problem = problemStub({ scroll: false });
+
+    expect(() => revealFirstProblem(rootWith(problem.element).root)).not.toThrow();
+    expect(revealFirstProblem(rootWith(problem.element).root)).toBe(true);
+    expect(problem.focus).toHaveBeenCalledTimes(2);
+  });
+});

package/src/lib/form-problem.ts

@@ -0,0 +1,22 @@
+const PROBLEM_SELECTOR = '[data-wb-problem]';
+
+const FOCUSABLE_SELECTOR = [
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'a[href]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ');
+
+export function firstProblemOf(root: ParentNode): Element | null {
+  return root.querySelector(PROBLEM_SELECTOR);
+}
+
+export function revealFirstProblem(root: ParentNode): boolean {
+  const problem = firstProblemOf(root);
+  if (problem === null) return false;
+  problem.scrollIntoView?.({ block: 'nearest' });
+  problem.querySelector<HTMLElement>(FOCUSABLE_SELECTOR)?.focus?.();
+  return true;
+}

package/src/components/MockStrip.css

@@ -1,45 +0,0 @@
-
-.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);
-}
-
-.wb-mockChipOn:hover {
-  border-color: transparent;
-  background: var(--dsw-alias-brand-primary);
-  color: var(--dsw-alias-label-primary-foreground);
-}

package/src/components/MockStrip.tsx

@@ -1,41 +0,0 @@
-import { h } from '../lib/react.js';
-import './MockStrip.css';
-
-export function MockStrip({
-  mocks,
-  index,
-  onPick,
-  note,
-  real,
-}: {
-  readonly mocks: readonly { readonly id: string; readonly label: string }[];
-  readonly index: number;
-  readonly onPick: (next: number) => void;
-  readonly note?: string;
-  readonly real?: { readonly label: string; readonly active: boolean; readonly onPick: () => void } | undefined;
-}) {
-  return (
-    <div className="wb-mockStrip">
-      <span className="wb-mockNote">{note ?? '夹具：只切状态，不发请求'}</span>
-      {real === undefined ? null : (
-        <button
-          type="button"
-          className={`wb-mockChip${real.active ? ' wb-mockChipOn' : ''}`}
-          onClick={real.onPick}
-        >
-          {real.label}
-        </button>
-      )}
-      {mocks.map((mock, at) => (
-        <button
-          key={mock.id}
-          type="button"
-          className={`wb-mockChip${at === index ? ' wb-mockChipOn' : ''}`}
-          onClick={() => onPick(at)}
-        >
-          {mock.label}
-        </button>
-      ))}
-    </div>
-  );
-}