@cosmicdrift/kumiko-bundled-features 0.174.1 → 0.176.0

package/src/{text-content → template-resolver}/web/__tests__/editor-read-only.test.tsx

@@ -1,7 +1,7 @@
 import { describe, expect, mock, test } from "bun:test";
-// mock.module eretzt imports für alle Konsumenten — statische imports
-// vor mock.module sehen die gemockte Version weil Bun am Loader-Level
-// intercepted. useShellUser ist hier ein Mock-Objekt.
+// mock.module replaces imports for all consumers — static imports
+// before mock.module still see the mocked version because Bun
+// intercepts at the loader level. useShellUser is a mock object here.
 import { useShellUser } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/web";
 import {
   createStaticLocaleResolver,
@@ -11,7 +11,7 @@ import {
 import { defaultPrimitives } from "@cosmicdrift/kumiko-renderer-web";
 import { act, fireEvent, render, screen } from "@testing-library/react";
 import type { ReactNode } from "react";
-import { textContentClient } from "../client-plugin";
+import { textBlocksClient } from "../client-plugin";
 
 mock.module("@cosmicdrift/kumiko-bundled-features/auth-email-password/web", () => ({
   useShellUser: mock(),
@@ -24,9 +24,9 @@ mock.module("@cosmicdrift/kumiko-renderer", () => ({
   useQuery: mock(() => ({
     data: {
       slug: "imprint",
-      lang: "de",
+      locale: "de",
       title: "Impressum",
-      body: "Inhalt",
+      content: "Inhalt",
       folder: "legal",
     },
     loading: false,
@@ -38,14 +38,14 @@ mock.module("@cosmicdrift/kumiko-renderer", () => ({
 const { useDispatcher } = await import("@cosmicdrift/kumiko-renderer");
 
 const TARGET = {
-  featureId: "text-content",
+  featureId: "template-resolver",
   action: "edit",
-  args: { slug: "imprint", lang: "de" },
+  args: { slug: "imprint", locale: "de" },
 } as const;
 
 function getEditor() {
-  const def = textContentClient();
-  const Editor = def.resolvers?.["text-content:edit"];
+  const def = textBlocksClient();
+  const Editor = def.resolvers?.["template-resolver:edit"];
   if (!Editor) throw new Error("Editor not registered");
   return Editor;
 }

package/src/{text-content → template-resolver}/web/__tests__/group-blocks.test.ts

@@ -2,16 +2,16 @@ import { describe, expect, test } from "bun:test";
 import type { TreeNode } from "@cosmicdrift/kumiko-framework/engine";
 import { type BlockSummary, groupBlocksByFolder } from "../client-plugin";
 
-// TreeNode.children ist `readonly TreeNode[] | TreeChildrenSubscribe` —
-// im Provider-Output ist die Subscribe-Form nur für deferred-children
-// gedacht, groupBlocksByFolder produziert ausschließlich statische
-// Array-Children. TypeGuard statt as-Cast (Memory `[Type Assertions]`).
+// TreeNode.children is `readonly TreeNode[] | TreeChildrenSubscribe` —
+// in the provider output, the subscribe form is only meant for
+// deferred children; groupBlocksByFolder produces exclusively static
+// array children. TypeGuard instead of an as-cast (memory `[Type Assertions]`).
 function childrenArray(children: TreeNode["children"] | undefined): readonly TreeNode[] {
   if (!Array.isArray(children)) throw new Error("expected static children-array");
   return children;
 }
-// V.1.5d-Helper: groupBlocksByFolder gibt jetzt einen "Content"-Wrapper-
-// Folder zurück. Tests wollen den Inhalt UNTER dem Wrapper prüfen.
+// V.1.5d helper: groupBlocksByFolder now returns a single "Content" wrapper
+// folder. Tests want to check the content UNDER the wrapper.
 function inside(result: readonly TreeNode[]): readonly TreeNode[] {
   expect(result).toHaveLength(1);
   const wrapper = result[0];
@@ -19,19 +19,19 @@ function inside(result: readonly TreeNode[]): readonly TreeNode[] {
   expect(wrapper?.icon).toBe("folder");
   return childrenArray(wrapper?.children);
 }
-// Helper: BlockSummary mit defaults für die nicht-test-relevanten Felder.
+// Helper: BlockSummary with defaults for the fields not relevant to the test.
 function block(opts: {
   slug: string;
   folder?: string | null;
-  body?: string | null;
+  content?: string | null;
   title?: string;
 }): BlockSummary {
   return {
     slug: opts.slug,
-    lang: "de",
+    locale: "de",
     title: opts.title ?? opts.slug,
-    // Nicht ?? — null soll durchgereicht werden (state="stub"-Test).
-    body: opts.body === undefined ? "irgendwas" : opts.body,
+    // Not ?? — null should be passed through (state="stub" test).
+    content: opts.content === undefined ? "irgendwas" : opts.content,
     folder: opts.folder === undefined ? null : opts.folder,
     updatedAt: "2026-05-19T00:00:00Z",
   };
@@ -48,9 +48,9 @@ describe("groupBlocksByFolder", () => {
     if (!root) return;
     expect(root.label).toBe("imprint");
     expect(root.target).toEqual({
-      featureId: "text-content",
+      featureId: "template-resolver",
       action: "edit",
-      args: { slug: "imprint", lang: "de" },
+      args: { slug: "imprint", locale: "de" },
     });
     expect(root.children).toBeUndefined();
     expect(root.icon).toBe("file");
@@ -71,7 +71,7 @@ describe("groupBlocksByFolder", () => {
     expect(child).toBeDefined();
     if (!child) return;
     expect(child.label).toBe("Hero");
-    expect(child.target?.args).toEqual({ slug: "hero", lang: "de" });
+    expect(child.target?.args).toEqual({ slug: "hero", locale: "de" });
   });
   test("mehrere Slugs gleicher Folder → ein Folder mit mehreren children", () => {
     const nodes = inside(
@@ -116,12 +116,12 @@ describe("groupBlocksByFolder", () => {
     const folderLabels = nodes.map((n) => n.label);
     expect(folderLabels).toEqual(["apple", "mango", "zebra"]);
   });
-  test('body=null → state="stub" (Designer-Hinweis dass Slug existiert aber leer)', () => {
-    const nodes = inside(groupBlocksByFolder([block({ slug: "draft", body: null })]));
+  test('content=null → state="stub" (Designer-Hinweis dass Slug existiert aber leer)', () => {
+    const nodes = inside(groupBlocksByFolder([block({ slug: "draft", content: null })]));
     expect(nodes[0]?.state).toBe("stub");
   });
-  test('body=string → state="filled"', () => {
-    const nodes = inside(groupBlocksByFolder([block({ slug: "imprint", body: "content" })]));
+  test('content=string → state="filled"', () => {
+    const nodes = inside(groupBlocksByFolder([block({ slug: "imprint", content: "content" })]));
     expect(nodes[0]?.state).toBe("filled");
   });
   test("title leer → fallback auf slug als label", () => {
@@ -144,11 +144,11 @@ describe("groupBlocksByFolder", () => {
     const marketingChildren = childrenArray(marketingFolder?.children);
     expect(marketingChildren).toHaveLength(1);
     expect(marketingChildren[0]?.label).toBe("Hero");
-    expect(marketingChildren[0]?.target?.args).toEqual({ slug: "hero", lang: "de" });
+    expect(marketingChildren[0]?.target?.args).toEqual({ slug: "hero", locale: "de" });
   });
   test("V.1.6a shared folder-prefix → ein gemeinsamer parent", () => {
-    // Zwei blocks mit verschachteltem Pfad teilen die ersten Segmente.
-    // page/hero + page/cta + page/marketing/banner → 1× page-folder mit
+    // Two blocks with a nested path share the first segments.
+    // page/hero + page/cta + page/marketing/banner → 1× page folder with
     // 3 children (2 leaves + 1 sub-folder).
     const nodes = inside(
       groupBlocksByFolder([
@@ -161,7 +161,7 @@ describe("groupBlocksByFolder", () => {
     const pageFolder = nodes[0];
     expect(pageFolder?.label).toBe("page");
     const pageChildren = childrenArray(pageFolder?.children);
-    // Leaves first (Hero, CTA), dann sub-folder (marketing alphabetisch).
+    // Leaves first (Hero, CTA), then sub-folder (marketing alphabetically).
     expect(pageChildren.map((c) => c.label)).toEqual(["Hero", "CTA", "marketing"]);
     expect(pageChildren[2]?.icon).toBe("folder");
     const marketingChildren = childrenArray(pageChildren[2]?.children);
@@ -169,11 +169,11 @@ describe("groupBlocksByFolder", () => {
     expect(marketingChildren[0]?.label).toBe("Banner");
   });
   test("V.1.6a folder/leaf-collision: gleicher Name auf gleicher Ebene", () => {
-    // Edge-Case (advisor-flagged): block mit folder=null, slug="page"
-    // + block mit folder="page" → "page" existiert als Leaf-Root UND
-    // als Folder. Beide bleiben sichtbar; Folder hat Chevron + Folder-
-    // Icon, Leaf hat target + ist klickbar. Renderer-Pattern macht
-    // visuell klar dass es zwei verschiedene Dinge sind.
+    // Edge case (advisor-flagged): block with folder=null, slug="page"
+    // + block with folder="page" → "page" exists both as a leaf-root AND
+    // as a folder. Both stay visible; the folder has a chevron + folder
+    // icon, the leaf has a target and is clickable. The renderer pattern
+    // makes it visually clear that these are two different things.
     const nodes = inside(
       groupBlocksByFolder([
         block({ slug: "page", folder: null, title: "Page-Root" }),
@@ -197,27 +197,27 @@ describe("groupBlocksByFolder", () => {
         "00000000-0000-4000-8000-000000000000",
       ),
     );
-    // Root-Leaf trägt den Override.
+    // Root-leaf carries the override.
     expect(nodes[0]?.target?.args).toEqual({
       slug: "imprint",
-      lang: "de",
+      locale: "de",
       tenantIdOverride: "00000000-0000-4000-8000-000000000000",
     });
-    // Auch der Leaf im Folder (rekursiv durchgereicht).
+    // The leaf inside the folder too (passed through recursively).
     const folderChild = childrenArray(nodes[1]?.children)[0];
     expect(folderChild?.target?.args).toEqual({
       slug: "hero",
-      lang: "de",
+      locale: "de",
       tenantIdOverride: "00000000-0000-4000-8000-000000000000",
     });
   });
   test("ohne tenantIdOverride bleiben die Args frei davon (Default: Session-Tenant)", () => {
     const nodes = inside(groupBlocksByFolder([block({ slug: "imprint", folder: null })]));
-    expect(nodes[0]?.target?.args).toEqual({ slug: "imprint", lang: "de" });
+    expect(nodes[0]?.target?.args).toEqual({ slug: "imprint", locale: "de" });
   });
   test("Wrapper-Folder 'Content' umschließt alle blocks", () => {
-    // V.1.5d Wrapper-Convention: groupBlocksByFolder gibt EINEN Knoten
-    // zurück (den Wrapper), Inhalt liegt eine Ebene tiefer.
+    // V.1.5d wrapper convention: groupBlocksByFolder returns ONE node
+    // (the wrapper), content sits one level deeper.
     const result = groupBlocksByFolder([block({ slug: "imprint" })]);
     expect(result).toHaveLength(1);
     const wrapper = result[0];

package/src/template-resolver/web/client-plugin.tsx

@@ -0,0 +1,352 @@
+// @runtime client
+// Client feature factory for the text-block content tree. Apps mount it via
+// createKumikoApp({ clientFeatures: [textBlocksClient()] }); it loads the
+// blocks from the by-tenant query, groups them by their `folder` field and
+// emits them as TreeNode[], plus the editor behind the edit action.
+//
+// **Folder grouping**: block.folder !== null puts the node under a container
+// node labelled with the folder; folder === null keeps it at the root.
+//
+// **State**: TreeNode.state = "filled" when content is set, otherwise "stub"
+// (a hint that the slug exists but is empty).
+
+import { useShellUser } from "@cosmicdrift/kumiko-bundled-features/auth-email-password/web";
+import { CSRF_HEADER_NAME, readCsrfToken } from "@cosmicdrift/kumiko-dispatcher-live";
+import type {
+  TargetRef,
+  TreeChildrenSubscribe,
+  TreeNode,
+} from "@cosmicdrift/kumiko-framework/engine";
+import { useDispatcher, usePrimitives, useQuery } from "@cosmicdrift/kumiko-renderer";
+import type { ClientFeatureDefinition } from "@cosmicdrift/kumiko-renderer-web";
+import { type FormEvent, type ReactNode, useEffect, useState } from "react";
+import { TemplateResolverHandlers, TemplateResolverQueries } from "../qualified-names";
+
+// Exported for the unit test — groupBlocksByFolder is a pure function.
+export type BlockSummary = {
+  readonly slug: string;
+  readonly locale: string;
+  readonly title: string | null;
+  readonly content: string | null;
+  readonly folder: string | null;
+  readonly updatedAt: string;
+};
+
+type ByTenantResponse = {
+  readonly data: { readonly blocks: readonly BlockSummary[] };
+};
+
+// Multi-level folder splitting: `folder` is a `/`-separated path, the tree
+// splits per segment and creates nested folder nodes:
+//   block.folder = null              → root leaf
+//   block.folder = "page"            → folder page > leaf
+//   block.folder = "page/marketing"  → folder page > folder marketing > leaf
+//
+// **Folder/leaf collision**: a block with `folder=null, slug="page"` and
+// another with `folder="page"` both live on the same level — the folder with
+// children plus a clickable leaf. Visually distinct (chevron + folder icon),
+// no crash, no surprise.
+
+type FolderNode = {
+  readonly leaves: TreeNode[];
+  readonly subFolders: Map<string, FolderNode>;
+};
+
+function newFolderNode(): FolderNode {
+  return { leaves: [], subFolders: new Map() };
+}
+
+function attachBlock(root: FolderNode, block: BlockSummary, tenantIdOverride?: string): void {
+  const leaf: TreeNode = {
+    label: block.title || block.slug,
+    icon: "file",
+    target: {
+      featureId: "template-resolver",
+      action: "edit",
+      // tenantIdOverride travels with the node → the editor's by-slug read +
+      // set write target the same tenant the tree was loaded from (SystemAdmin
+      // editing SYSTEM-tenant content). Omitted → session tenant.
+      args: {
+        slug: block.slug,
+        locale: block.locale,
+        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
+      },
+    },
+    state: block.content ? "filled" : "stub",
+  };
+  if (block.folder === null) {
+    root.leaves.push(leaf);
+    return;
+  }
+  let cur = root;
+  for (const segment of block.folder.split("/")) {
+    let next = cur.subFolders.get(segment);
+    if (next === undefined) {
+      next = newFolderNode();
+      cur.subFolders.set(segment, next);
+    }
+    cur = next;
+  }
+  cur.leaves.push(leaf);
+}
+
+function renderFolderNode(node: FolderNode): TreeNode[] {
+  // Leaves first (root items), then folders alphabetically.
+  const result: TreeNode[] = [...node.leaves];
+  for (const folderName of [...node.subFolders.keys()].sort()) {
+    const subNode = node.subFolders.get(folderName);
+    if (subNode === undefined) continue;
+    result.push({
+      label: folderName,
+      icon: "folder",
+      state: "filled",
+      children: renderFolderNode(subNode),
+    });
+  }
+  return result;
+}
+
+export function groupBlocksByFolder(
+  blocks: readonly BlockSummary[],
+  tenantIdOverride?: string,
+): readonly TreeNode[] {
+  const root = newFolderNode();
+  for (const block of blocks) {
+    attachBlock(root, block, tenantIdOverride);
+  }
+  const rendered = renderFolderNode(root);
+  if (rendered.length === 0) return [];
+  return [
+    {
+      label: "Content",
+      icon: "folder",
+      state: "filled",
+      children: rendered,
+    },
+  ];
+}
+
+// tenantIdOverride (SystemAdmin-only) lets an app point the content tree at a
+// tenant other than the session's — publicstatus seeds marketing/legal blocks
+// on SYSTEM_TENANT_ID, so its SystemAdmin must read that tenant, not their own.
+function makeTreeProvider(tenantIdOverride?: string): TreeChildrenSubscribe {
+  return () => (emit, emitError) => {
+    // CSRF header is mandatory on authenticated requests (auth-middleware
+    // double-submit pattern). Anonymous/pre-login has no token → header
+    // omitted → the server takes the anonymous path.
+    const headers: Record<string, string> = { "content-type": "application/json" };
+    const csrf = readCsrfToken();
+    if (csrf !== undefined) headers[CSRF_HEADER_NAME] = csrf;
+    fetch("/api/query", {
+      method: "POST",
+      headers,
+      body: JSON.stringify({
+        type: TemplateResolverQueries.byTenant,
+        payload: tenantIdOverride !== undefined ? { tenantIdOverride } : {},
+      }),
+    })
+      .then(async (r) => {
+        if (!r.ok) {
+          // 403 (CSRF/auth) or 5xx — explicit error instead of silent empty.
+          const text = await r.text().catch(() => r.statusText);
+          throw new Error(`text-block load failed: ${r.status} ${text}`);
+        }
+        return r.json();
+      })
+      .then((data: ByTenantResponse) => {
+        // The app-side r.nav node IS the "Content" container → the provider's
+        // children are the folders/leaves below it, not the wrapper.
+        const content = groupBlocksByFolder(data.data.blocks, tenantIdOverride)[0];
+        emit(content !== undefined && Array.isArray(content.children) ? content.children : []);
+      })
+      .catch((e) => {
+        // Explicit error signal via emitError; ProviderBranch shows a banner
+        // plus retry. Falls back to emit([]) for consumers without emitError.
+        if (emitError) {
+          emitError(e instanceof Error ? e : new Error(String(e)));
+        } else {
+          emit([]);
+        }
+      });
+    return () => {};
+  };
+}
+
+// Edit form: loads the current values via by-slug, lets TenantAdmin and
+// SystemAdmin edit title + content, dispatches set on submit. Other users see
+// the form read-only with a hint banner — write permission stays opinionated
+// TenantAdmin-only, apps widen it via dual-role mapping if they want to.
+
+type TextBlock = {
+  readonly slug: string;
+  readonly locale: string;
+  readonly title: string | null;
+  readonly content: string | null;
+  readonly folder: string | null;
+  readonly updatedAt: string;
+};
+
+type SetResponse = { readonly slug: string; readonly locale: string; readonly isNew: boolean };
+
+function TextBlockEditor({
+  target,
+}: {
+  readonly target: TargetRef;
+  // onClose stays part of the resolver contract (the visual panel passes it)
+  // but is unused: tree selection navigates, there is no close button.
+  readonly onClose: () => void;
+}): ReactNode {
+  // @cast-boundary visual-tree-args — TargetRef.args is erased to
+  // Record<string, unknown>; the resolver knows the action shape (see the
+  // treeActions.edit definition in feature.ts) and de-erases per action, the
+  // same way event payloads do. Optional chaining absorbs missing fields so a
+  // hand-edited URL cannot crash the editor.
+  const args = target.args as
+    | { slug?: string; locale?: string; tenantIdOverride?: string }
+    | undefined;
+  const slug = args?.slug ?? "";
+  const locale = args?.locale ?? "";
+  const tenantIdOverride = args?.tenantIdOverride;
+
+  const { Form, Field, Input, Button, Banner } = usePrimitives();
+  const dispatcher = useDispatcher();
+  const user = useShellUser();
+  const canWrite =
+    user?.roles.includes("TenantAdmin") === true || user?.roles.includes("SystemAdmin") === true;
+
+  const {
+    data: loaded,
+    loading,
+    error: loadError,
+  } = useQuery<TextBlock | null>(
+    TemplateResolverQueries.bySlug,
+    { slug, locale, ...(tenantIdOverride !== undefined && { tenantIdOverride }) },
+    { enabled: slug !== "" && locale !== "" },
+  );
+
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [savedMsg, setSavedMsg] = useState<string | null>(null);
+
+  // Sync loaded data into the form state. loaded === null means the block does
+  // not exist yet — empty form for the create flow.
+  useEffect(() => {
+    if (loading) return;
+    setTitle(loaded?.title ?? "");
+    setContent(loaded?.content ?? "");
+    setSaveError(null);
+    setSavedMsg(null);
+  }, [loading, loaded]);
+
+  const handleSave = async (): Promise<void> => {
+    setSubmitting(true);
+    setSaveError(null);
+    setSavedMsg(null);
+    try {
+      const result = await dispatcher.write<SetResponse>(TemplateResolverHandlers.set, {
+        slug,
+        locale,
+        title,
+        content: content.length > 0 ? content : null,
+        folder: loaded?.folder ?? null,
+        ...(tenantIdOverride !== undefined && { tenantIdOverride }),
+      });
+      if (result.isSuccess) {
+        setSavedMsg(result.data.isNew ? "Neu angelegt." : "Gespeichert.");
+        return;
+      }
+      setSaveError(result.error.message ?? result.error.code ?? "Speichern fehlgeschlagen.");
+    } catch (e) {
+      // Network blip / dispatcher throw — otherwise submitting stays true and
+      // the save button is locked forever with no feedback.
+      setSaveError(e instanceof Error ? e.message : "Netzwerkfehler beim Speichern.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const onSubmit = (e?: FormEvent): void => {
+    e?.preventDefault();
+    void handleSave();
+  };
+
+  const disabled = submitting || loading || !canWrite;
+
+  return (
+    <Form
+      onSubmit={onSubmit}
+      testId="text-block-editor"
+      title={title || slug || "—"}
+      subtitle={locale !== "" ? `${slug} · (${locale})` : slug}
+      actions={
+        canWrite ? (
+          <Button type="submit" loading={submitting} disabled={disabled}>
+            {submitting ? "Speichern…" : "Speichern"}
+          </Button>
+        ) : undefined
+      }
+    >
+      {loading && <Banner variant="loading">Lädt aktuellen Stand…</Banner>}
+      {loadError !== null && (
+        <Banner variant="error">Konnte Block nicht laden: {loadError.code}</Banner>
+      )}
+      {!canWrite && !loading && (
+        <Banner variant="info">
+          Read-only — TenantAdmin- oder SystemAdmin-Rolle f&uuml;r &Auml;nderungen erforderlich.
+        </Banner>
+      )}
+      <Field id="text-block-title" label="Titel" required>
+        <Input
+          kind="text"
+          id="text-block-title"
+          name="text-block-title"
+          value={title}
+          onChange={setTitle}
+          disabled={disabled}
+          required
+        />
+      </Field>
+      <Field id="text-block-content" label="Inhalt">
+        <Input
+          kind="textarea"
+          id="text-block-content"
+          name="text-block-content"
+          value={content}
+          onChange={setContent}
+          disabled={disabled}
+          rows={14}
+        />
+      </Field>
+      {saveError !== null && <Banner variant="error">{saveError}</Banner>}
+      {savedMsg !== null && <Banner variant="info">{savedMsg}</Banner>}
+    </Form>
+  );
+}
+
+// `navId` = the QN of the r.nav({ provider: true }) node the app registers for
+// the content tree (e.g. "publicstatus:nav:content"). The app owns the node's
+// label/icon/access, the feature only supplies children plus the editor.
+// Without navId: resolver only, no sidebar node (server-only consumers such as
+// money-horse leak nothing).
+// `tenantId` (SystemAdmin-only): which tenant the tree and editor serve —
+// SYSTEM_TENANT_ID for apps that seed marketing/legal there. Omit for the
+// session tenant (default, no cross-tenant access).
+export function textBlocksClient(opts?: {
+  readonly navId?: string;
+  readonly tenantId?: string;
+}): ClientFeatureDefinition {
+  const navId = opts?.navId;
+  return {
+    name: "template-resolver",
+    ...(navId !== undefined && {
+      navProviders: { [navId]: makeTreeProvider(opts?.tenantId) },
+      // SSE refresh: every template-resource event re-fires the provider.
+      navEntities: { [navId]: ["template-resource"] },
+    }),
+    resolvers: {
+      "template-resolver:edit": TextBlockEditor,
+    },
+  };
+}

package/src/template-resolver/web/index.ts

@@ -0,0 +1,8 @@
+// @runtime client
+// Public exports for the browser side of template-resolver. Consumed through
+// the sub-path export `@cosmicdrift/kumiko-bundled-features/template-resolver/web`
+// — the server side (defineFeature) lives in
+// `@cosmicdrift/kumiko-bundled-features/template-resolver` and has no React or
+// DOM deps.
+
+export { textBlocksClient } from "./client-plugin";