@morlay/dsh-client-ui-primitives 0.0.2-alpha.7 → 0.0.2-alpha.9

package/src/client/schema-form/slot-contract.ts

@@ -0,0 +1,156 @@
+/**
+ * 槽契约：字段级自定义输入与文案的注入点，以及承载它的 Factory 契约。
+ *
+ * 字段槽是 **chain**：注册项在 `select` 里按 `node.meta.role` 或 `ns + path` 决定认领哪个字段，命中即渲染自己的
+ * 组件（收到 `matched`），未命中落到本包的默认控件。链式槽的注册项还可以只声明 `label`/`hint`（不改控件）——
+ * 默认控件仍会渲染，文案以它为准。
+ *
+ * 字段槽声明在 Factory 上（`children`），而不是每个行注册项上：slots 的 children 声明 per key 只能一次，而本包
+ * 会给每个可渲染的行各注册一个 `plugins.row.config` 项——那些项经 `renderFactorySlot` 渲染同一个 Factory，
+ * 于是字段槽只需声明一次，所有行共用。
+ */
+
+import type {} from "@deepseek-ai/dsh-client-ui-slots";
+import type {
+  FactoryComponentPropsOf,
+  PropsRuntime,
+  TranslateNS,
+} from "@deepseek-ai/dsh-client-ui-slots";
+import type { SchemaFormActions, SchemaFormFace, SchemaFormState } from "./controller.ts";
+import type { TextParse } from "./draft.ts";
+import type { SelectOption } from "./hints.ts";
+import type { ResolveText } from "./labels.ts";
+import type { SchemaFormLocaleKey } from "./locales.ts";
+import type { FieldNode } from "./schema-node.ts";
+
+/** `plugins.row.config` 的 key：`<bundle 包名>#<行 id>`（与页面 `rowConfigKey` 同拼法）。 */
+export type RowConfigKey = string;
+
+/** 字段槽的 owner props：路由输入 + 显示状态 + 受控动作（默认控件要的一切都在这里）。 */
+export interface SchemaFieldOwnerProps {
+  /** settings 命名空间（行 id）。 */
+  ns: string;
+  /** 字段的具体路径（动态段已按真实键或索引替换）。 */
+  path: readonly string[];
+  /** 字段节点（类型、`role`、`extra`、界限、只读原因）。 */
+  node: FieldNode;
+  /** 显示标签：默认是字段名拆词，业务方经槽给时会覆盖。 */
+  label: string;
+  /** 显示说明（`description` 本地化 + `comment`）。 */
+  hint: string | undefined;
+  /** 当前生效值（草稿优先）。 */
+  value: unknown;
+  /**
+   * 这个字段的可选项：给了就是选择器（点值不再进文本编辑）。来源是字面量集合的 union，或业务经提示面注册的
+   * 候选——候选依赖的兄弟字段一变，这里就换一批。
+   */
+  options: readonly SelectOption[] | undefined;
+  /** 文本草稿：文本控件显示它，而不是重新格式化生效值。 */
+  text: string | undefined;
+  /** secret 槽是否已配置（值本身不回传）。 */
+  secretConfigured: boolean;
+  /** 嵌套深度：默认控件按它缩进。 */
+  depth: number;
+  /** 保存后这一字段是否会留下用户层条目。 */
+  overridden: boolean;
+  /** 草稿不合法时的消息。 */
+  invalid: string | undefined;
+  /** 只读部署或不可用命名空间时为 true。 */
+  disabled: boolean;
+  /** 本包字典（复刻或包装默认控件时用）。 */
+  t: SchemaFormTranslate;
+  /** 容器动作（增删数组项、字典键、丢弃、保存）。 */
+  actions: SchemaFormActions;
+  /**
+   * 分组节点的折叠交互（object / dict / array / tuple）；叶子节点是 `undefined`。
+   * 默认折叠与否由 schema 的 `collapse()` 决定，用户点一下就是反转。
+   */
+  group: { collapsed: boolean; toggle: () => void } | undefined;
+  /**
+   * 这一行是动态容器的成员本身（dict 的键 / array 的项）时的身份：容器路径、键、数组项的位置。容器成员把它画进
+   * 标题行（名字 + 移除），叶子成员由渲染层另起一行——所以「哪个字段属于哪个键/哪一项」在页面上一眼可见。
+   */
+  member:
+    | { parent: readonly string[]; key: string; index: number | undefined; pending?: boolean }
+    | undefined;
+  /** 暂存一个合法值。 */
+  onChange: (value: unknown) => void;
+  /**
+   * 暂存一段文本：按字段类型的默认规则解析；给了 `parse` 就用它（例如 secret 留空＝不写）。
+   * @param text - 用户输入。
+   * @param parse - 覆盖默认解析规则。
+   */
+  onEditText: (text: string, parse?: TextParse) => void;
+  /** 暂存「恢复默认」。 */
+  onReset: () => void;
+}
+
+/**
+ * 字段槽注册项的完整 props：框架注入的 owner props（{@link SchemaFieldOwnerProps}）＋它的 `select` 结果。
+ *
+ * 注册方的组件按这个类型声明参数（**不要**自己重写 owner props 的类型：注册时框架会把它读成 inject 面）。
+ */
+export type SchemaFieldComponentProps<M extends SchemaFieldMatch = SchemaFieldMatch> =
+  PropsRuntime<"settings.schema-form.field"> & { matched: M };
+
+/**
+ * 字段槽注册项的 `select`：返回认领结果，或 `null` 表示不认领（chain 槽的约定是 `null` 放行给下一项，
+ * `undefined` 不会被当成"不认领"）。
+ */
+export type SchemaFieldSelect = (field: SchemaFieldOwnerProps) => SchemaFieldMatch | null;
+
+/** 字段槽 `select` 可以只给文案：控件仍由注册方渲染（拿本包的默认控件包一层即可）。 */
+export interface SchemaFieldMatch {
+  /** 覆盖显示标签。 */
+  label?: string;
+  /** 覆盖显示说明。 */
+  hint?: string;
+}
+
+/** Factory 的输入 props：一行的配置页。 */
+export interface SchemaFormProps {
+  /** settings 命名空间（行 id）。 */
+  ns: string;
+  /** 该行的控制器动作与状态。 */
+  face: SchemaFormFace;
+  /** schema 里的本地化文本（`description`）按当前语言解析。 */
+  resolveText: ResolveText;
+}
+
+/** Factory 组件收到的完整 props。 */
+export type SchemaFormComponentProps = FactoryComponentPropsOf<"settings.schema-form.form">;
+
+/** 本包字典的翻译函数（默认控件与表单壳使用）。 */
+export type SchemaFormTranslate = TranslateNS<"settings.schema-form">;
+
+/** 渲染层读一行状态的便捷别名。 */
+export type { SchemaFormState };
+
+declare module "@deepseek-ai/dsh-client-ui-slots" {
+  interface LocaleNamespaceMap {
+    /** 表单壳、字段控件与只读呈现的文案。 */
+    "settings.schema-form": SchemaFormLocaleKey;
+  }
+
+  interface SlotMap {
+    /**
+     * 字段级自定义输入与文案：按 `role` 或 `ns + path` 认领一个字段，命中即渲染注册方的组件（未命中落到默认
+     * 控件）。注册项由业务插件用 `ctx.slots.inject('settings.schema-form.field', …)` 注册，声明由本包的
+     * Factory 给出。
+     */
+    "settings.schema-form.field": { kind: "chain"; scope: "root"; owner: SchemaFieldOwnerProps };
+  }
+
+  interface SlotFactoryMap {
+    /**
+     * 一行配置页的渲染体：每个可渲染的行注册项经 `renderFactorySlot` 渲染同一个 Factory，字段槽因此只需声明
+     * 一次（slots 的 children 声明 per key 唯一）。
+     */
+    "settings.schema-form.form": {
+      scope: "root";
+      props: SchemaFormProps;
+      locale: "settings.schema-form";
+      children: { "settings.schema-form.field": { kind: "chain"; scope: "root" } };
+    };
+  }
+}

package/src/client/schema-form/styles.ts

@@ -0,0 +1,310 @@
+/**
+ * 行式编辑器的样式：等宽、行号、语法色、悬停行为——全部消费官方 `--dsw-*` token。
+ *
+ * 几何只有一套：行高、行内间距、动作按钮尺寸都由下面几个常量给，行与行之间不各自决定。
+ */
+
+import { styled } from "../styling/index.ts";
+import { dsw } from "../theme.ts";
+
+/** 等宽字体栈：配置值的观感与代码一致。 */
+const MONO = 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';
+
+/** 行高：行内容、行内输入、折叠箭头、按钮排都在这一档上对齐。 */
+const ROW = "22px";
+
+/** 行内元素之间的间距。 */
+const GAP = "6px";
+
+/** 动作按钮：方形图标键，尺寸与行高同一档的紧凑版。 */
+const ACTION = "20px";
+
+/** 动作按钮之间的间距（比行内间距紧一档）。 */
+const ACTION_GAP = "4px";
+
+/** 图标边长（行内图标与动作键同一档）。 */
+export const ICON_SIZE = 14;
+
+/** 折叠列（chevron 与它的占位）宽度。 */
+const FOLD = "14px";
+
+/** 行号列宽度。 */
+const NUMBER = "32px";
+
+/** 行尾留白。 */
+const PAD = "8px";
+
+/** 细线：theme 给的 0.5px 描边（`0 0 0 0.5px var(--dsw-elevation-stroke-color)`）。 */
+const HAIRLINE = dsw.elevation.stroke;
+
+/** 描边色：theme 里给描边用的那一档（与官方 `Menu` 面板同源）。 */
+const LINE = dsw.elevation.stroke.color;
+
+/** 行左侧那道「改过」的标记宽度。 */
+const EDGE = "2px";
+
+/** 出错那一行的底色：theme 的红掺进透明里（半透明红），比整行实红轻、又比只有一道条明显。 */
+const ERROR_WASH = `color-mix(in srgb, ${String(dsw.alias.state.error.secondary)} 12%, transparent)`;
+
+/** 编辑器的根：纵向排列的行。 */
+export const EditorRoot = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  width: "100%",
+  fontFamily: MONO,
+  fontSize: "14px",
+  lineHeight: ROW,
+  color: dsw.alias.label.primary,
+});
+
+/** 一行：行号 + 折进 + 行内容。悬停给一层浅底。 */
+export const LineRow = styled("div")({
+  display: "flex",
+  // 顶部对齐：行里出现输入框或多行值时，内容不跟着上下跳。
+  alignItems: "flex-start",
+  gap: GAP,
+  minHeight: ROW,
+  paddingRight: PAD,
+  whiteSpace: "nowrap",
+  "&:hover": { background: dsw.alias.bg.layer["2"] },
+  // 选中一行（点行号）：整行留一层底色，便于对着行号找内容。
+  "&[data-selected='true']": { background: dsw.alias.bg.layer["3"] },
+  // 本页改过还没保存：左边一道强调色，和「已经存进用户层」的浅灰区分开。
+  "&[data-dirty='true']": { boxShadow: `inset ${EDGE} 0 0 ${String(dsw.alias.brand.primary)}` },
+  "&[data-overridden='true']": { boxShadow: `inset ${EDGE} 0 0 ${String(LINE)}` },
+  // 改过的字段名用强调色（存没存看左边那道条）；出错时红优先。
+  "&[data-dirty='true'] [data-role='key']": { color: dsw.alias.brand.primary },
+  "&[data-overridden='true'] [data-role='key']": { color: dsw.alias.brand.primary },
+  // 有问题的行：半透明红底 + 左侧一道实红条，字段名与注释位那句都是红字。
+  "&[data-invalid='true']": {
+    background: ERROR_WASH,
+    boxShadow: `inset ${EDGE} 0 0 ${String(dsw.alias.state.error.primary)}`,
+  },
+  "&[data-invalid='true'] [data-role='key']": { color: dsw.alias.state.error.primary },
+  // 行内的行为按钮（撤回 / 恢复默认 / 复制 / 移除）：平时透明，悬停这一行才显形。
+  "&:hover [data-role='actions']": { opacity: 1 },
+});
+
+/** 一行的内容区：**缩进只作用在这里**——行号列固定在左边，缩进不推它。 */
+export const LineBody = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  gap: GAP,
+  flex: 1,
+  minWidth: 0,
+  minHeight: ROW,
+});
+
+/** 行号列：右对齐、不可选、淡色。 */
+export const LineNumber = styled("span")({
+  flex: "none",
+  width: NUMBER,
+  lineHeight: ROW,
+  textAlign: "right",
+  color: dsw.alias.label.caption,
+  userSelect: "none",
+  cursor: "pointer",
+});
+
+/** 折叠 chevron（官方箭头图标，尺寸与别的行内图标同源）。 */
+export const LineFold = styled("button")({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: "none",
+  width: FOLD,
+  height: ROW,
+  padding: 0,
+  border: 0,
+  background: "none",
+  color: dsw.alias.label.caption,
+  cursor: "pointer",
+  "&:hover": { color: dsw.alias.label.secondary },
+});
+
+/** 叶子行的折叠占位（保持列对齐）。 */
+export const LineFoldSpacer = styled("span")({
+  flex: "none",
+  width: FOLD,
+});
+
+/** 键名（配置键原样；数组下标淡一些）。 */
+export const LineKey = styled("span")({
+  flex: "none",
+  color: dsw.alias.label.primary,
+  "&[data-index='true']": { color: dsw.alias.label.caption },
+});
+
+/** 结构符与标点（`{` `}` `[` `]` `:`）。 */
+export const LineToken = styled("span")({
+  flex: "none",
+  color: dsw.alias.label.caption,
+});
+
+/** 值（token）：字符串 / 数字 / 布尔各有语法色。 */
+export const LineValue = styled("span")({
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  cursor: "text",
+  color: dsw.alias.state.business.primary,
+  "&[data-tone='number']": { color: dsw.alias.state.warn.primary },
+  "&[data-tone='boolean']": { color: dsw.alias.state.success.primary },
+  "&[data-tone='empty']": { color: dsw.alias.label.caption },
+});
+
+/**
+ * 值上的下拉触发：**它自己就是值的呈现**（不再是「值 + 一个下拉」两遍），点开才出菜单。
+ */
+export const ValueTrigger = styled("button")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "2px",
+  minWidth: 0,
+  padding: 0,
+  border: 0,
+  background: "none",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  color: dsw.alias.label.caption,
+  "&:disabled": { cursor: "default" },
+  "&:focus-visible": { outline: "none" },
+});
+
+/**
+ * 行内输入的外壳：官方 `Input` 压到与值同一行高，并**吃掉剩下的宽度**。
+ *
+ * 行内编辑与容器闭合行的添加输入共用它——两处的输入框因此长得一模一样。
+ */
+export const CompactInput = styled("span")({
+  display: "inline-flex",
+  flex: "1 1 auto",
+  minWidth: 0,
+  "& > span": {
+    width: "100%",
+    height: ROW,
+    padding: "0 6px",
+    borderRadius: "4px",
+  },
+  "& input": {
+    fontSize: "14px",
+    lineHeight: ROW,
+  },
+});
+
+/**
+ * 多行值的行内输入：官方没有多行原子，所以这里用同一套观感的字段壳（同边框、同圆角、同焦点色），
+ * 高度跟着内容长、宽度同样撑满剩下的位置。
+ */
+export const CompactTextField = styled("span")({
+  display: "inline-flex",
+  flex: "1 1 auto",
+  minWidth: 0,
+  padding: "0 6px",
+  borderRadius: "4px",
+  background: dsw.alias.bg.layer["1"],
+  // 细线走 theme 的描边（0.5px 与颜色都由 token 给）。
+  border: 0,
+  boxShadow: HAIRLINE,
+  "&:focus-within": { "--dsw-elevation-stroke-color": dsw.alias.brand.primary },
+  "& > textarea": {
+    flex: 1,
+    width: "100%",
+    minHeight: ACTION,
+    maxHeight: "240px",
+    padding: 0,
+    border: 0,
+    outline: "none",
+    background: "transparent",
+    resize: "none",
+    fieldSizing: "content",
+    fontFamily: "inherit",
+    fontSize: "14px",
+    lineHeight: ROW,
+    color: dsw.alias.label.primary,
+  },
+});
+
+/** 行内注释（schema 说明与业务文案）：比配置值小一档，占满这一行剩下的宽度，长了就截断（hover 看全文）。 */
+export const LineComment = styled("span")({
+  flex: "1 1 auto",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  color: dsw.alias.label.tertiary,
+  fontFamily: "inherit",
+  fontSize: "12px",
+});
+
+/** 行内的校验消息（与注释放同一档字号）。 */
+export const LineInvalid = styled("span")({
+  flex: "none",
+  color: dsw.alias.state.error.primary,
+  fontFamily: "inherit",
+  fontSize: "12px",
+});
+
+/** 行尾的动作组：方形图标键（默认透明，悬停时显形）。 */
+export const LineActions = styled("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: ACTION_GAP,
+  flex: "none",
+  opacity: 0,
+  "& > button": {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: ACTION,
+    height: ACTION,
+    padding: 0,
+    border: 0,
+    borderRadius: "4px",
+    background: "none",
+    color: dsw.alias.label.secondary,
+    cursor: "pointer",
+    "&:hover": { background: dsw.alias.bg.layer["3"], color: dsw.alias.label.primary },
+    "&:disabled": { cursor: "not-allowed", color: dsw.alias.label.dimmed },
+  },
+});
+
+/**
+ * 悬停行时才显示这一行的动作按钮：显形规则写在行上（`[data-role='actions']`），组件只需要带这个属性。
+ */
+export const HoverActions = styled(LineActions)({
+  /**
+   * 编辑态的两个按钮常显，而且**要有底色与描边**：行底色上只有淡色图标是看不见的，
+   * 所以这里给实体按钮（theme 的描边 + 一层底），确认用成功档、取消用中性档。
+   */
+  "&[data-editing='true']": {
+    opacity: 1,
+    gap: GAP,
+    "& > button": {
+      boxShadow: HAIRLINE,
+      background: dsw.alias.bg.layer["1"],
+      color: dsw.alias.label.primary,
+      "&:first-of-type": { color: dsw.alias.state.success.primary },
+    },
+  },
+});
+
+/** 添加输入：**跟在容器的闭合括号同一行**（菜单锚在它上面），宽度吃掉剩下的位置。 */
+export const AddWrap = styled("span")({
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: GAP,
+  flex: "1 1 auto",
+  minWidth: 0,
+  marginLeft: GAP,
+  "&[data-invalid='true'] input": { borderColor: dsw.alias.state.error.primary },
+});
+
+/** 一行说明（不可用 / 没有可生成项时用）。 */
+export const Hint = styled("p")({
+  margin: 0,
+  fontSize: "12px",
+  lineHeight: 1.5,
+  color: dsw.alias.label.tertiary,
+});

package/src/client/schema-form/testing/fake-describe.ts

@@ -0,0 +1,45 @@
+/**
+ * 测试用的 describe 读面替身：可推动命名空间清单变化，形状与上游 mirror 的读面一致。
+ */
+
+import type { SettingsNamespaceView } from "@deepseek-ai/dsh-api-remotes/client";
+import type { SettingsDescribeFace } from "@deepseek-ai/dsh-client-ui-settings/client";
+
+/** 一个可以推动变更的 describe 读面。 */
+export interface FakeDescribe extends SettingsDescribeFace {
+  /** 换掉命名空间清单并通知订阅者。 */
+  publish(namespaces: readonly SettingsNamespaceView[]): void;
+}
+
+/**
+ * @param initial - 初始命名空间清单。
+ * @returns 可读可推的 describe 替身。
+ */
+export function fakeDescribe(initial: readonly SettingsNamespaceView[] = []): FakeDescribe {
+  const listeners = new Set<() => void>();
+  let namespaces = initial;
+  return {
+    getSnapshot: () => ({
+      status: "ready" as const,
+      view: { namespaces, writable: true, hasDocument: false },
+      error: null,
+    }),
+    subscribe: (listener: () => void) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    ensure: () => Promise.resolve(),
+    // 写回答折进读数：同一命名空间替换，未出现过的追加（与上游 mirror 同一语义）。
+    acceptView: (view) => {
+      namespaces = namespaces.some((row) => row.ns === view.ns)
+        ? namespaces.map((row) => (row.ns === view.ns ? view : row))
+        : [...namespaces, view];
+    },
+    publish: (next: readonly SettingsNamespaceView[]) => {
+      namespaces = next;
+      for (const listener of listeners) listener();
+    },
+  };
+}

package/src/client/schema-form/testing/fake-scope.ts

@@ -0,0 +1,97 @@
+/**
+ * 测试用的共享配置表单：内存里模拟 host 的读写两层（快照 / 订阅 / 一次带 revision 栅栏的写）。
+ *
+ * 它让控制器与草稿模型的用例不碰远程面、不碰装配，只盯「草稿怎么变成写」与「状态怎么投影」。
+ */
+
+import type { SettingsPathOpView } from "@deepseek-ai/dsh-api-remotes/client";
+import type { ConfigForm, ConfigFormSnapshot } from "@deepseek-ai/dsh-client-ui-settings/client";
+
+/** 命名空间段的值。 */
+export type Section = Record<string, unknown>;
+
+export class FakeScope implements ConfigForm<Section> {
+  /** 每次保存发出的 path op（按保存顺序）。 */
+  readonly writes: (readonly SettingsPathOpView[])[] = [];
+  /** 每次保存带的 revision 栅栏。 */
+  readonly fences: (number | undefined)[] = [];
+  /** 让 host 拒绝下一次写。 */
+  accepted = true;
+
+  #snapshot: ConfigFormSnapshot<Section>;
+  readonly #listeners = new Set<() => void>();
+
+  constructor(overrides: Partial<ConfigFormSnapshot<Section>> = {}) {
+    this.#snapshot = {
+      status: "ready",
+      value: {},
+      base: {},
+      user: undefined,
+      writable: true,
+      revision: 7,
+      mode: "host",
+      ...overrides,
+    };
+  }
+
+  getSnapshot(): ConfigFormSnapshot<Section> {
+    return this.#snapshot;
+  }
+
+  subscribe(listener: () => void): () => void {
+    this.#listeners.add(listener);
+    return () => {
+      this.#listeners.delete(listener);
+    };
+  }
+
+  set(field: string, value: unknown): Promise<boolean> {
+    return this.mutate([{ op: "set", path: [field], value: value as never }]);
+  }
+
+  unset(field: string): Promise<boolean> {
+    return this.mutate([{ op: "unset", path: [field] }]);
+  }
+
+  mutate(ops: readonly SettingsPathOpView[], expectedRevision?: number): Promise<boolean> {
+    this.writes.push(ops);
+    this.fences.push(expectedRevision);
+    if (!this.accepted) return Promise.resolve(false);
+    const value = structuredClone(this.#snapshot.value ?? {});
+    for (const op of ops) {
+      const parent = op.path
+        .slice(0, -1)
+        .reduce<unknown>(
+          (node, key) => (node as Record<string, unknown> | undefined)?.[key],
+          value,
+        );
+      const leaf = op.path[op.path.length - 1] ?? "";
+      if (Array.isArray(parent)) {
+        if (op.op === "set") parent[Number(leaf)] = op.value;
+        else parent.splice(Number(leaf), 1);
+      } else if (op.op === "set") {
+        (parent as Section)[leaf] = op.value;
+      } else {
+        Reflect.deleteProperty(parent as Section, leaf);
+      }
+    }
+    this.#snapshot = {
+      ...this.#snapshot,
+      value,
+      user: value,
+      revision: (this.#snapshot.revision ?? 0) + 1,
+    };
+    this.#publish();
+    return Promise.resolve(true);
+  }
+
+  /** 从外部改一次读数（模拟另一个界面或 host 的改动）。 */
+  publish(overrides: Partial<ConfigFormSnapshot<Section>> = {}): void {
+    this.#snapshot = { ...this.#snapshot, ...overrides };
+    this.#publish();
+  }
+
+  #publish(): void {
+    for (const listener of this.#listeners) listener();
+  }
+}