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

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

@@ -1,68 +0,0 @@
-// 搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/SettingsForm.tsx
-// （上游 `@deepseek-ai/dsh-client-ui-primitives`）：行为同形，样式从 CSS Modules 换成包内 css-in-js。
-
-import { useEffect, useRef, type ReactNode } from "react";
-import { styled } from "../styling/styled.tsx";
-import type { SettingsFormShell } from "./form-model.ts";
-import { styles } from "./SettingsForm.styles.ts";
-
-const Form = styled("div")(styles.form);
-const Notice = styled("p")(styles.notice);
-const Footer = styled("div")(styles.footer);
-const Failed = styled("p")(styles.failed);
-const Save = styled("button")(styles.save);
-
-// The copy the form frame renders, from the owning plugin's dictionary.
-export interface SettingsFormLabels {
-  // Shown in place of the controls while the namespace is not served.
-  unavailable: string;
-  // Shown over the controls while the document is read-only.
-  readOnly: string;
-  // Shown beside the save after a save the Host did not accept.
-  saveFailed: string;
-  // The save control.
-  save: string;
-  // The save control while a save is crossing the wire.
-  saving: string;
-}
-
-// Form chrome shared by every settings page.
-export interface SettingsFormProps {
-  // The frame's copy.
-  labels: SettingsFormLabels;
-  // The form state: availability, writability, and what a save would do.
-  state: SettingsFormShell;
-  // Write every staged edit.
-  onSave: () => void;
-  // Drop every staged edit; the form calls it when it leaves the page.
-  onDiscard: () => void;
-  // The plugin's controls.
-  children: ReactNode;
-}
-
-// Render one plugin's settings form.
-export function SettingsForm(props: SettingsFormProps) {
-  const { state, labels } = props;
-  const discard = useRef(props.onDiscard);
-  discard.current = props.onDiscard;
-  useEffect(
-    () => () => {
-      discard.current();
-    },
-    [],
-  );
-  if (!state.available) return <Notice role="status">{labels.unavailable}</Notice>;
-  const blocked = !state.dirty || state.invalid || state.saving;
-  return (
-    <Form>
-      {!state.writable ? <Notice role="status">{labels.readOnly}</Notice> : null}
-      {props.children}
-      <Footer>
-        {state.failed ? <Failed role="status">{labels.saveFailed}</Failed> : null}
-        <Save type="button" disabled={blocked} onClick={props.onSave}>
-          {state.saving ? labels.saving : labels.save}
-        </Save>
-      </Footer>
-    </Form>
-  );
-}

package/src/client/settings-form/fields.styles.ts

@@ -1,158 +0,0 @@
-// 样式搬自 vendor/deepseek-harness/packages/client/ui-primitives/src/settings-form/fields.module.css，
-// 换成包内 css-in-js（CSSProps + dsw）；上游那份是 CSS Modules，本包不做预编译。
-
-import type { CSSProps } from "../styling/css.ts";
-import { focusRing } from "../styling/focus.ts";
-import { dsw } from "../theme.ts";
-
-// 上游引用的 --dsw-alias-bg-layer-4 不在官方主题定义集内（token 树里没有这个变量），
-// 照抄引用而不是换一个近义 token——官方主题哪天定义它，这里自动跟着生效。
-const helpButtonHoverBackground = "var(--dsw-alias-bg-layer-4)";
-
-export const styles = {
-  field: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "6px",
-    padding: "12px 0",
-    "& + &": {
-      borderTop: `0.5px solid ${String(dsw.alias.border.l2)}`,
-    },
-  },
-  head: {
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-  },
-  label: {
-    flex: 1,
-    minWidth: 0,
-    fontSize: "13px",
-    fontWeight: 500,
-    lineHeight: 1.5,
-    color: dsw.alias.label.primary,
-  },
-  // 标签进 labelGroup 后由外层承担伸缩，自己不再抢空间（上游的 `.labelGroup > .label`）。
-  groupLabel: {
-    flex: "0 1 auto",
-  },
-  labelGroup: {
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    flex: 1,
-    minWidth: 0,
-  },
-  helpButton: {
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    flex: "none",
-    width: "24px",
-    height: "24px",
-    padding: 0,
-    border: 0,
-    borderRadius: "6px",
-    background: "none",
-    color: dsw.alias.label.tertiary,
-    cursor: "pointer",
-    "&:hover": {
-      background: helpButtonHoverBackground,
-      color: dsw.alias.label.secondary,
-    },
-    "&[aria-expanded='true']": {
-      background: helpButtonHoverBackground,
-      color: dsw.alias.label.secondary,
-    },
-    "&:focus-visible": {
-      outline: focusRing,
-      outlineOffset: "1px",
-    },
-  },
-  help: {
-    padding: "10px 0 0",
-    fontSize: "12px",
-    lineHeight: 1.6,
-    color: dsw.alias.label.secondary,
-    "& > p": {
-      margin: 0,
-    },
-    "& > p + p": {
-      marginTop: "8px",
-    },
-  },
-  badges: {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: "8px",
-  },
-  // 上游用 Tag（tone="neutral" | "quiet"）：这里按变体拆两个 styled，形态与颜色照抄 Tag.module.css。
-  badge: {
-    display: "inline-flex",
-    alignItems: "center",
-    borderRadius: "999px",
-    cornerShape: "round",
-    padding: "1px 8px",
-    fontSize: "11px",
-    lineHeight: "17px",
-    fontWeight: 500,
-    whiteSpace: "nowrap",
-  },
-  badgeNeutral: {
-    background: dsw.alias.bg.module.platform,
-    color: dsw.alias.label.secondary,
-  },
-  badgeQuiet: {
-    color: dsw.alias.label.tertiary,
-  },
-  reset: {
-    border: "none",
-    background: "none",
-    padding: 0,
-    font: "inherit",
-    fontSize: "12px",
-    lineHeight: 1.5,
-    color: dsw.alias.label.secondary,
-    cursor: "pointer",
-    "&:hover:not(:disabled)": {
-      color: dsw.alias.label.primary,
-    },
-    "&:disabled": {
-      cursor: "default",
-    },
-  },
-  input: {
-    height: "34px",
-    padding: "0 12px",
-    border: `0.5px solid ${String(dsw.alias.border.l4)}`,
-    borderRadius: "8px",
-    background: dsw.alias.bg.layer["3"],
-    font: "inherit",
-    fontSize: "13px",
-    lineHeight: 1.5,
-    color: dsw.alias.label.primary,
-    "&:focus-visible": {
-      outline: "none",
-      borderColor: dsw.alias.state.business.primary,
-    },
-    "&:disabled": {
-      color: dsw.alias.label.tertiary,
-      cursor: "default",
-    },
-    "&[aria-invalid='true']": {
-      borderColor: dsw.alias.state.error.primary,
-    },
-  },
-  invalid: {
-    margin: 0,
-    fontSize: "12px",
-    lineHeight: 1.5,
-    color: dsw.alias.state.error.primary,
-  },
-  hint: {
-    margin: 0,
-    fontSize: "12px",
-    lineHeight: 1.5,
-    color: dsw.alias.label.tertiary,
-  },
-} satisfies Record<string, CSSProps>;

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