@morlay/dsh-client-ui-primitives 0.0.7 → 0.0.9

package/src/client/settings-form/fields.tsx

@@ -1,184 +0,0 @@
-// 搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/fields.tsx
-// （上游 `@deepseek-ai/dsh-client-ui-primitives`）：结构与行为同形，样式从 CSS Modules 换成包内 css-in-js。
-// 上游用的 Tag 与 IconInfoOutlineRegular 没有一起搬——本包不依赖上游 primitives，用等价的本地徽标与图标。
-
-import { useState, type ReactNode } from "react";
-import { styled } from "../styling/styled.tsx";
-import { styles } from "./fields.styles.ts";
-
-const Field = styled("div")(styles.field);
-const Head = styled("div")(styles.head);
-const LabelGroup = styled("div")(styles.labelGroup);
-const GroupLabel = styled("label")(styles.label, styles.groupLabel);
-const HeadLabel = styled("label")(styles.label);
-const HelpButton = styled("button")(styles.helpButton);
-const Help = styled("div")(styles.help);
-const Badges = styled("span")(styles.badges);
-const NeutralBadge = styled("span")(styles.badge, styles.badgeNeutral);
-const QuietBadge = styled("span")(styles.badge, styles.badgeQuiet);
-const Reset = styled("button")(styles.reset);
-const Input = styled("input")(styles.input);
-const Invalid = styled("p")(styles.invalid);
-const Hint = styled("p")(styles.hint);
-
-// 上游 icons 里的 IconInfoOutlineRegular（fill-only 几何，整份图标表不搬）。
-function InfoGlyph({ size }: { size: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 14 14"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-    >
-      <path
-        d="M12.5757 7.00012C12.5757 3.92085 10.0794 1.42463 7.00012 1.42456C3.9208 1.42456 1.42456 3.9208 1.42456 7.00012C1.42463 10.0794 3.92085 12.5757 7.00012 12.5757C10.0793 12.5756 12.5756 10.0793 12.5757 7.00012ZM13.8002 7.00012C13.8001 10.7559 10.7559 13.8001 7.00012 13.8002C3.2443 13.8002 0.199291 10.7559 0.199219 7.00012C0.199219 3.24426 3.24426 0.199219 7.00012 0.199219C10.7559 0.199291 13.8002 3.2443 13.8002 7.00012Z"
-        fill="currentColor"
-      />
-      <path d="M7.6127 3.18921V4.55986H6.38735V3.18921H7.6127Z" fill="currentColor" />
-      <path d="M7.6127 5.68921V10.8109H6.38735V5.68921H7.6127Z" fill="currentColor" />
-    </svg>
-  );
-}
-
-// What every settings field control needs regardless of its value type.
-export interface SettingsFieldProps {
-  // Stable id associating the label with its control.
-  id: string;
-  // Visible label.
-  label: string;
-  // One-line explanation rendered under the control.
-  hint: string;
-  // Draft text this control renders.
-  text: string;
-  // True when saving would leave a user-layer entry for this field.
-  overridden: boolean;
-  // True when the draft is not a value this field accepts.
-  invalid: boolean;
-  // Copy for the overridden badge.
-  overriddenLabel: string;
-  // Copy for the reset control.
-  resetLabel: string;
-  // Copy shown in place of the hint while the draft is invalid.
-  invalidLabel: string;
-  // Disables every control (read-only document, or an unavailable namespace).
-  disabled: boolean;
-  // Stage draft text.
-  onEdit: (text: string) => void;
-  // Stage a clear so the field re-inherits the composition layer.
-  onReset: () => void;
-}
-
-// A staged value field. `numeric` only hints the keypad: which drafts a field accepts is decided by its spec, so the
-// control never silently rewrites what the user typed.
-export function SettingsValueField(
-  props: Omit<SettingsFieldProps, "hint"> & {
-    // Optional explanation shown below the input.
-    hint?: string;
-    // Rules disclosed by the information button beside the label.
-    help?: { label: string; content: ReactNode };
-    // Hints a numeric keypad without narrowing what the control accepts.
-    numeric?: boolean;
-    // Placeholder shown while the draft is empty.
-    placeholder?: string;
-  },
-) {
-  const [helpOpen, setHelpOpen] = useState(false);
-  const helpId = `${props.id}-help`;
-  const messageId = `${props.id}-message`;
-  const hasMessage = props.invalid || Boolean(props.hint);
-  const description = [hasMessage ? messageId : "", helpOpen ? helpId : ""]
-    .filter(Boolean)
-    .join(" ");
-  return (
-    <Field>
-      <Head>
-        <LabelGroup>
-          <GroupLabel htmlFor={props.id}>{props.label}</GroupLabel>
-          {props.help !== undefined ? (
-            <HelpButton
-              type="button"
-              aria-label={props.help.label}
-              aria-expanded={helpOpen}
-              aria-controls={helpId}
-              onClick={() => {
-                setHelpOpen(!helpOpen);
-              }}
-            >
-              <InfoGlyph size={12} />
-            </HelpButton>
-          ) : null}
-        </LabelGroup>
-        {props.overridden ? (
-          <Badges>
-            <NeutralBadge>{props.overriddenLabel}</NeutralBadge>
-            <Reset type="button" disabled={props.disabled} onClick={props.onReset}>
-              {props.resetLabel}
-            </Reset>
-          </Badges>
-        ) : null}
-      </Head>
-      <Input
-        id={props.id}
-        type="text"
-        {...(props.numeric === true ? { inputMode: "numeric" as const } : {})}
-        {...(props.invalid ? { "aria-invalid": true } : {})}
-        aria-describedby={description || undefined}
-        value={props.text}
-        placeholder={props.placeholder ?? ""}
-        disabled={props.disabled}
-        onChange={(event) => {
-          props.onEdit(event.target.value);
-        }}
-      />
-      {hasMessage ? (
-        props.invalid ? (
-          <Invalid id={messageId}>{props.invalidLabel}</Invalid>
-        ) : (
-          <Hint id={messageId}>{props.hint}</Hint>
-        )
-      ) : null}
-      {props.help !== undefined && helpOpen ? (
-        <Help id={helpId} role="region" aria-label={props.help.label}>
-          {props.help.content}
-        </Help>
-      ) : null}
-    </Field>
-  );
-}
-
-// A write-only credential control. The value never rides a response, so the control reports only whether one is
-// configured and starts blank; a blank draft writes nothing, which keeps the stored key rather than clearing it.
-// 控件要求浏览器不要把已存的登录密码自动填进来（上游 11c0511271）。
-export function SettingsSecretField(
-  props: Pick<SettingsFieldProps, "id" | "label" | "hint" | "text" | "disabled" | "onEdit"> & {
-    // Whether the Host reports a configured credential for this reference.
-    configured: boolean;
-    // Copy describing the configured state.
-    stateLabel: string;
-  },
-) {
-  const Badge = props.configured ? NeutralBadge : QuietBadge;
-  return (
-    <Field>
-      <Head>
-        <HeadLabel htmlFor={props.id}>{props.label}</HeadLabel>
-        <Badges>
-          <Badge>{props.stateLabel}</Badge>
-        </Badges>
-      </Head>
-      <Input
-        id={props.id}
-        type="password"
-        autoComplete="new-password"
-        value={props.text}
-        disabled={props.disabled}
-        onChange={(event) => {
-          props.onEdit(event.target.value);
-        }}
-      />
-      <Hint>{props.hint}</Hint>
-    </Field>
-  );
-}

package/src/client/settings-form/form-model.ts

@@ -1,339 +0,0 @@
-// 与 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/form-model.ts 逐行对应；
-// 改这里之前先看上游是否也改了同一处（上游只读）。
-
-// The staged form model behind a plugin's settings page: a card stages what the user types and writes it only on
-// save, and a field is marked overridden by its user-layer presence rather than by a value comparison.
-
-import { createSnapshotStore, type SnapshotStore } from "@deepseek-ai/dsh-client-store";
-
-// What the model reads of one Host entry's form.
-export interface SettingsFormScopeSnapshot<T> {
-  // `ready` while the Host serves the entry to this client; the form renders nothing otherwise.
-  status: "loading" | "ready" | "unavailable";
-  // Last accepted schema-resolved section; undefined before the first acceptance.
-  value: T | undefined;
-  // Composition layer the value resolves over: what a field reverts to once cleared.
-  base: unknown;
-  // Raw user layer as stored; a field's PRESENCE here is what marks it overridden.
-  user: unknown;
-  // Whether the Host document accepts writes.
-  writable: boolean;
-  // Revision the snapshot was read at; a save fences its mutation with the revision its drafts started from.
-  revision: number | undefined;
-}
-
-// One path edit a save sends, as the shared configuration form's `mutate` accepts it.
-export type SettingsFormPathOp =
-  | { op: "set"; path: readonly string[]; value: unknown }
-  | { op: "unset"; path: readonly string[] };
-
-// The entry form the model stages over: the reads and the atomic write of the form `ui-settings` shares per Host entry.
-export interface SettingsFormScope<T> {
-  getSnapshot(): SettingsFormScopeSnapshot<T>;
-  // Observe snapshot replacements.
-  subscribe(listener: () => void): () => void;
-  // Apply ordered field edits in one revision-fenced write; resolves after any recovery read.
-  mutate(ops: readonly SettingsFormPathOp[], expectedRevision?: number): Promise<boolean>;
-}
-
-// The write one field's staged text performs when the card is saved.
-export type SettingsFieldWrite = { kind: "set"; value: unknown } | { kind: "clear" };
-
-// How one section field converts between its stored value and its draft text.
-export interface SettingsFieldSpec {
-  // Field name inside the namespace section.
-  field: string;
-  // Render a stored value as draft text; the empty string when the section carries none.
-  format: (value: unknown) => string;
-  // The write this draft text stages, or undefined when the text is not a value this field accepts (blocks the save).
-  parse: (text: string) => SettingsFieldWrite | undefined;
-}
-
-// A control whose value is written outside the settings section: a credential literal never rides a response, so its
-// draft is blank until typed and a blank draft writes nothing.
-export interface SettingsSecretSpec {
-  // Field name addressing this control inside the card's form.
-  field: string;
-  // Write the staged text; resolves to whether the Host accepted it.
-  write: (text: string) => Promise<boolean>;
-}
-
-// One field as a card's control renders it.
-export interface SettingsFieldState {
-  // Draft text the control renders.
-  text: string;
-  // Whether saving would leave a user-layer entry for this field; a staged edit answers for itself.
-  overridden: boolean;
-  // Whether the draft is not a value this field accepts, which blocks saving.
-  invalid: boolean;
-}
-
-// Form state every plugin card shares.
-export interface SettingsFormShell {
-  // False while the namespace is not served to this client; the card renders nothing.
-  available: boolean;
-  // Whether the Host document accepts writes.
-  writable: boolean;
-  // Whether the form holds edits that a save would write.
-  dirty: boolean;
-  // Whether any staged draft is invalid, which blocks the save.
-  invalid: boolean;
-  // Whether a save is crossing the wire.
-  saving: boolean;
-  // Whether the last save did not land as staged; cleared by the next edit or save.
-  failed: boolean;
-}
-
-// The write actions every plugin card's slot entry injects.
-export interface SettingsFormActions {
-  // Stage draft text for one field.
-  edit: (field: string, text: string) => void;
-  // Stage a clear, so saving lets the field re-inherit the composition layer.
-  resetField: (field: string) => void;
-  // Write every staged edit, then re-seed from what the Host accepted.
-  save: () => void;
-  // Drop every staged edit.
-  discard: () => void;
-}
-
-// One field's staged edit.
-interface StagedEdit {
-  // Draft text the control renders.
-  text: string;
-  // True when this edit clears the field whatever text it shows.
-  clear: boolean;
-}
-
-// One staged edit resolved into the write a save performs.
-interface PlannedWrite {
-  // Field this entry writes.
-  field: string;
-  // Perform the write and report whether the Host holds the staged value afterwards.
-  run?: () => Promise<boolean>;
-  op?: SettingsFormPathOp;
-}
-
-// A whole-number field: an empty draft clears the field, any other draft that is not a finite number blocks the save.
-export function settingsNumberField(field: string): SettingsFieldSpec {
-  return {
-    field,
-    // A section that carries no number for this field renders empty rather than as a value nobody chose.
-    format: (value) => (typeof value === "number" ? String(value) : ""),
-    parse: (text) => {
-      const trimmed = text.trim();
-      if (trimmed === "") return { kind: "clear" };
-      const parsed = Number(trimmed);
-      return Number.isFinite(parsed) ? { kind: "set", value: parsed } : undefined;
-    },
-  };
-}
-
-// A free-text field: an empty draft clears the field, so emptying the control and saving is the same as resetting it.
-export function settingsTextField(field: string): SettingsFieldSpec {
-  return {
-    field,
-    format: (value) => (typeof value === "string" ? value : ""),
-    parse: (text) => {
-      const trimmed = text.trim();
-      return trimmed === "" ? { kind: "clear" } : { kind: "set", value: trimmed };
-    },
-  };
-}
-
-// Stages one card's edits over one settings namespace and writes them on save. The form publishes through a snapshot
-// store because slot components read through a snapshot selector while both the scope and the drafts change underneath.
-export class SettingsFormModel<T> {
-  private readonly specs: Map<string, SettingsFieldSpec>;
-  private readonly secretSpecs: Map<string, SettingsSecretSpec>;
-  private readonly staged = new Map<string, StagedEdit>();
-  private readonly listeners = new Set<() => void>();
-  private baseline: SettingsFormScopeSnapshot<T> | undefined;
-  private readonly unsubscribe: () => void;
-  private saving = false;
-  private failed = false;
-
-  constructor(
-    private readonly scope: SettingsFormScope<T>,
-    specs: SettingsFieldSpec[],
-    secrets: SettingsSecretSpec[] = [],
-  ) {
-    this.specs = new Map(specs.map((spec) => [spec.field, spec]));
-    this.secretSpecs = new Map(secrets.map((spec) => [spec.field, spec]));
-    this.unsubscribe = scope.subscribe(() => {
-      this.publish();
-    });
-  }
-
-  // Publish a projection of this form, rebuilt whenever the scope or a draft changes.
-  bind<S>(project: () => S): SnapshotStore<S> {
-    const store = createSnapshotStore(project());
-    this.listeners.add(() => {
-      store.set(project());
-    });
-    return store;
-  }
-
-  // Read the card-level state: what the Host serves, and what a save would do.
-  shell(): SettingsFormShell {
-    const snapshot = this.scope.getSnapshot();
-    const plan = this.plan();
-    return {
-      available: snapshot.status === "ready",
-      writable: snapshot.writable,
-      dirty: plan.length > 0,
-      invalid: plan.some((item) => item.run === undefined && item.op === undefined),
-      saving: this.saving,
-      failed: this.failed,
-    };
-  }
-
-  // Read one control's state: draft text, whether a save would leave an override, and whether it is invalid.
-  field(field: string): SettingsFieldState {
-    const staged = this.staged.get(field);
-    if (this.secretSpecs.has(field)) {
-      return { text: staged?.text ?? "", overridden: false, invalid: false };
-    }
-    const spec = this.spec(field);
-    if (staged === undefined) {
-      return {
-        text: spec.format(this.sectionValue(field)),
-        overridden: this.stored(field),
-        invalid: false,
-      };
-    }
-    const write = staged.clear ? { kind: "clear" as const } : spec.parse(staged.text);
-    return {
-      text: staged.text,
-      overridden: write?.kind === "set",
-      invalid: write === undefined,
-    };
-  }
-
-  // Build the edit, reset, save, and discard actions bound to this form.
-  actions(): SettingsFormActions {
-    return {
-      edit: (field, text) => {
-        this.stage(field, { text, clear: false });
-      },
-      resetField: (field) => {
-        this.stage(field, { text: this.spec(field).format(this.baseValue(field)), clear: true });
-      },
-      save: () => {
-        void this.save();
-      },
-      discard: () => {
-        if (this.staged.size === 0 && !this.failed) return;
-        this.staged.clear();
-        this.baseline = undefined;
-        this.failed = false;
-        this.publish();
-      },
-    };
-  }
-
-  // Write every staged edit, then re-seed from what the Host accepted: the outcome is read back rather than predicted
-  // (the Host is the only authority), and a save that did not land keeps its drafts so the user can correct them.
-  async save(): Promise<void> {
-    const plan = this.plan();
-    if (
-      !plan.length ||
-      this.saving ||
-      !this.scope.getSnapshot().writable ||
-      plan.some((item) => item.run === undefined && item.op === undefined)
-    )
-      return;
-    this.saving = true;
-    this.failed = false;
-    this.publish();
-    try {
-      const ops = plan.flatMap((item) => (item.op === undefined ? [] : [item.op]));
-      let landed = !ops.length || (await this.scope.mutate(ops, this.baseline?.revision));
-      if (!landed) {
-        this.failed = true;
-        return;
-      }
-      for (const item of plan) if (item.run) landed = (await item.run()) && landed;
-      if (landed) {
-        this.staged.clear();
-        this.baseline = undefined;
-      }
-      this.failed = !landed;
-    } catch {
-      this.failed = true;
-    } finally {
-      this.saving = false;
-      this.publish();
-    }
-  }
-
-  // Release the form's accepted-value subscription.
-  dispose(): void {
-    this.unsubscribe();
-    this.listeners.clear();
-  }
-
-  // Every staged edit a save would write; an entry whose draft its field rejects carries no write (the form stays
-  // dirty, and the save refuses rather than dropping the edit).
-  private plan(): PlannedWrite[] {
-    const plan: PlannedWrite[] = [];
-    for (const [field, staged] of this.staged) {
-      const secret = this.secretSpecs.get(field);
-      if (secret !== undefined) {
-        const value = staged.text.trim();
-        if (value !== "") plan.push({ field, run: () => secret.write(value) });
-        continue;
-      }
-      const spec = this.spec(field);
-      if (staged.clear) {
-        if (this.stored(field)) plan.push({ field, op: { op: "unset", path: [field] } });
-        continue;
-      }
-      if (staged.text === spec.format(this.sectionValue(field))) continue;
-      const write = spec.parse(staged.text);
-      if (write === undefined) plan.push({ field });
-      else if (write.kind === "clear") plan.push({ field, op: { op: "unset", path: [field] } });
-      else plan.push({ field, op: { op: "set", path: [field], value: write.value } });
-    }
-    return plan;
-  }
-
-  private stage(field: string, edit: StagedEdit): void {
-    this.baseline ??= this.scope.getSnapshot();
-    this.staged.set(field, edit);
-    this.failed = false;
-    this.publish();
-  }
-
-  private spec(field: string): SettingsFieldSpec {
-    const spec = this.specs.get(field);
-    // Every call site names a field this card declared; a missing one is a wiring mistake that must not become a
-    // silently inert control.
-    if (spec === undefined) throw new Error(`plugin card has no field ${field}`);
-    return spec;
-  }
-
-  private snapshotOf(): SettingsFormScopeSnapshot<T> {
-    return this.scope.getSnapshot();
-  }
-
-  private sectionValue(field: string): unknown {
-    return (this.snapshotOf().value as Record<string, unknown> | undefined)?.[field];
-  }
-
-  private baseValue(field: string): unknown {
-    return (this.snapshotOf().base as Record<string, unknown> | undefined)?.[field];
-  }
-
-  private userLayer(): Record<string, unknown> | undefined {
-    return this.snapshotOf().user as Record<string, unknown> | undefined;
-  }
-
-  private stored(field: string): boolean {
-    const user = this.userLayer();
-    return user !== undefined && Object.hasOwn(user, field);
-  }
-
-  private publish(): void {
-    for (const listener of this.listeners) listener();
-  }
-}

package/src/client/styling/css.ts

@@ -1,27 +0,0 @@
-import type { StandardProperties, VendorProperties } from "csstype";
-
-type NonStandardProperties = {
-  cornerShape?: CSSValue<string>;
-  clip?: CSSValue<string>;
-  WebkitBoxOrient?: CSSValue<string>;
-};
-
-type Properties = Omit<StandardProperties & VendorProperties, keyof NonStandardProperties> &
-  NonStandardProperties;
-
-export type CSSVar = `--${string}`;
-export type CSSSelector = `&${string}` | `${string}&` | `@${string}`;
-
-export type CSSValue<Fallback = string | number> = Fallback | (() => Iterable<Fallback>);
-
-export type CSSObject<Props extends object, Fallback = string | number> = {
-  [K in keyof Props]?: Props[K] | CSSValue<Fallback>;
-} & {
-  [K in CSSVar]?: CSSValue<Fallback>;
-};
-
-type Nested<Props extends object> = CSSObject<Props> & {
-  [K in CSSSelector]?: Nested<Props>;
-};
-
-export type CSSProps = Nested<Properties>;

package/src/client/styling/focus.ts

@@ -1,9 +0,0 @@
-// 焦点环口径搬上游 ui-theme 的 `focus.css`：颜色读官方 `--dsw-focus-ring-color`
-// （主题把它按输入模态解析成蓝，指针模态下置 transparent 抑制环），变量缺失时回退业务蓝；
-// 宽度读官方的 `--dsw-focus-ring-width`。偏移与线宽的特例仍由各控件自己声明。
-import { dsw } from "../theme.ts";
-import { Token } from "./token.ts";
-
-export const focusRing = `${String(dsw.focus.ring.width)} solid ${Token.collect(
-  Token.fallbackVar(dsw.focus.ring.color, String(dsw.alias.state.business.primary)),
-)}`;

package/src/client/styling/index.ts

@@ -1,6 +0,0 @@
-export type * from "./css.ts";
-export { Styling, styling } from "./styling.ts";
-export { Token } from "./token.ts";
-export type { CSSVarRef, TokenVars, Tokens } from "./token.ts";
-export { styled, styleOf } from "./styled.tsx";
-export type { StyledComponent } from "./styled.tsx";

package/src/client/styling/styled.tsx

@@ -1,54 +0,0 @@
-// 轻量 styled：intrinsic / 组件 + ref，样式走 data-css 属性（不做 polymorphic，
-// 参考实现里的 asChild 由 ark-ui 提供，我们不需要）。
-
-import { createElement, forwardRef, useMemo } from "react";
-import type {
-  ComponentProps,
-  ComponentPropsWithRef,
-  ElementType,
-  ForwardRefExoticComponent,
-  Ref,
-  RefAttributes,
-} from "react";
-import type { CSSProps } from "./css.ts";
-import { styling } from "./styling.ts";
-import { toMerged } from "./toolkit.ts";
-
-type StyledProps<T extends ElementType> = Omit<ComponentProps<T>, "ref">;
-type StyledRef<T extends ElementType> =
-  ComponentPropsWithRef<T>["ref"] extends Ref<infer R> ? R : never;
-
-const sxSymbol: unique symbol = Symbol("styled.sx");
-
-export type StyledComponent<T extends ElementType> = ForwardRefExoticComponent<
-  StyledProps<T> & RefAttributes<StyledRef<T>>
-> & { readonly [sxSymbol]: CSSProps };
-
-// `styled('div')({ padding: '4px' }, { '&:hover': { … } })` → 带 `data-css-*` 的组件。
-// 多个样式对象按顺序深合并（后者覆盖前者），便于把变体叠在基样式上。
-export function styled<T extends ElementType>(
-  Component: T,
-  defaultProps: Partial<ComponentProps<T>> = {},
-) {
-  return (...styles: CSSProps[]): StyledComponent<T> => {
-    const sx = styles.reduce<CSSProps>((merged, style) => toMerged(merged, style), {});
-
-    const Styled = forwardRef<StyledRef<T>, StyledProps<T>>((props, ref) => {
-      const styleProps = useMemo(() => styling.props(sx), []);
-      return createElement(Component as ElementType, {
-        ...defaultProps,
-        ...props,
-        ...styleProps,
-        ref,
-      });
-    });
-    Styled.displayName = `styled(${typeof Component === "string" ? Component : (Component.displayName ?? Component.name ?? "Component")})`;
-
-    return Object.assign(Styled, { [sxSymbol]: sx }) as StyledComponent<T>;
-  };
-}
-
-// 取回 styled 组件携带的样式对象（需要在其之上继续组合时用）。
-export function styleOf(component: StyledComponent<ElementType>): CSSProps {
-  return component[sxSymbol];
-}