@elabs-ai/components-editor 4.0.0

package/src/markdown-iteration/iteration.tsx

@@ -0,0 +1,333 @@
+"use client";
+
+/**
+ * IterationBlock — a `:::iterate` / `:::pivot` repeater.
+ *
+ * Renders a per-cell markdown TEMPLATE once per data row (iterate) or per
+ * row×column cross-tab cell (pivot). Both domain concerns stay in the consumer
+ * (the calc/citation precedent — *the library renders, the app computes*):
+ *   - `evaluate(spec) => IterationData` resolves the data source (the app's DB /
+ *     query / binding lives there);
+ *   - `interpolate(template, context) => string` fills the template (the app's
+ *     templating engine; a minimal `{{path}}` default is provided).
+ * The library owns only layout + rendering. `render` turns a resolved cell's
+ * markdown into a node (a nested `MarkdownPreview` when wired through the preview).
+ *
+ * `grid` / `matrix` reuse the shared `@elabs-ai/components-ui` `Table` primitive (the same base
+ * `@elabs-ai/components-data`'s DataTable builds on — `@elabs-ai/components-editor` can't import the sibling
+ * `@elabs-ai/components-data`, so we compose the shared primitive rather than fork it). `bento`
+ * lays the cells out as varied-size `@elabs-ai/components-ui` `BentoGrid` tiles.
+ */
+import {
+  BentoGrid,
+  BentoGridItem,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  type BentoGridSize,
+} from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { Repeat2 } from "lucide-react";
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+
+export type IterationLayout = "stacked" | "grid" | "matrix" | "bento";
+
+/** The parsed `:::iterate` / `:::pivot` specification handed to `evaluate`. */
+export interface IterationSpec {
+  /** `iterate` (1D repeat) or `pivot` (2D cross-tab). */
+  kind: "iterate" | "pivot";
+  /** How the cells are laid out. */
+  layout: IterationLayout;
+  /** The per-cell markdown template (the directive body). */
+  template: string;
+  /** Loop-variable name exposed to `interpolate` (default `"item"`). */
+  as: string;
+  /** Opaque data-source reference; resolved by the consumer's `evaluate`. */
+  source?: string;
+  /** Pivot row / column dimension field names (`pivot`). */
+  rows?: string;
+  cols?: string;
+  /** Explicit grid column count (`grid`). */
+  columns?: number;
+  /** All raw directive attributes (escape hatch for `evaluate`). */
+  attributes: Record<string, string>;
+}
+
+/** One resolved cell. */
+export interface IterationCell {
+  /** Interpolation context (the row record / pivot-cell scope). */
+  context: Record<string, unknown>;
+  /** Stable key (defaults to the index). */
+  key?: string;
+  /** `matrix`: the row / column header this cell sits at. */
+  row?: string;
+  col?: string;
+  /** `bento`: tile size preset. Defaults to a deterministic per-index rhythm. */
+  size?: BentoGridSize;
+  /** Pre-rendered markdown — skips `interpolate` when the app already templated. */
+  markdown?: string;
+}
+
+/** What the consumer's `evaluate` returns. */
+export interface IterationData {
+  /** Cells in render order. */
+  cells: IterationCell[];
+  /** `matrix`: ordered row + column header labels. */
+  rowHeaders?: string[];
+  colHeaders?: string[];
+  /** `grid`: column header labels (also sets the column count). */
+  columns?: string[];
+}
+
+/** Consumer hook: resolve a spec to its data, or `null` when unavailable. */
+export type EvaluateIteration = (spec: IterationSpec) => IterationData | null;
+
+/** Consumer hook: fill a template with a cell context. */
+export type InterpolateTemplate = (template: string, context: Record<string, unknown>) => string;
+
+/* ------------------------------------------------------------------ */
+/* Default templating (minimal; the app should bring its own engine)    */
+/* ------------------------------------------------------------------ */
+
+const TOKEN_RE = /\{\{\s*([\w.$]+)\s*\}\}/g;
+
+/**
+ * Minimal `{{ path.to.value }}` substitution over the cell context (dot paths).
+ * Safe (no eval). An UNRESOLVED token is left **literal** — so a nested
+ * `:::iterate`'s tokens survive the outer pass and resolve in the inner one (use
+ * the `as` loop variable in nested templates to avoid scope collisions). Replace
+ * it with your own engine (Mustache/Handlebars/…) via the `interpolate` prop.
+ */
+export function defaultInterpolate(template: string, context: Record<string, unknown>): string {
+  return template.replace(TOKEN_RE, (match, path: string) => {
+    const value = path.split(".").reduce<unknown>((obj, key) => {
+      if (obj && typeof obj === "object") return (obj as Record<string, unknown>)[key];
+      return undefined;
+    }, context);
+    return value == null ? match : String(value);
+  });
+}
+
+/** Build the interpolation scope for a cell (fields + `as`-nested + row/col/index). */
+function cellScope(
+  spec: IterationSpec,
+  cell: IterationCell,
+  index: number,
+): Record<string, unknown> {
+  return {
+    ...cell.context,
+    [spec.as]: cell.context,
+    index,
+    row: cell.row,
+    col: cell.col,
+  };
+}
+
+function safeEvaluate(evaluate: EvaluateIteration, spec: IterationSpec): IterationData | null {
+  try {
+    return evaluate(spec);
+  } catch {
+    // A throwing hook degrades to the empty state — it never crashes the page.
+    return null;
+  }
+}
+
+function chunk<T>(arr: T[], size: number): T[][] {
+  if (size <= 0) return [arr];
+  const out: T[][] = [];
+  for (let i = 0; i < arr.length; i += size) out.push(arr.slice(i, i + size));
+  return out;
+}
+
+/**
+ * Deterministic bento tile-size rhythm by index — a 2×2 feature tile to open each
+ * six-cell cycle and a 2×1 wide tile mid-cycle, the rest 1×1. `grid-auto-flow:
+ * dense` packs them and col-spans clamp to the available tracks on narrow widths.
+ * A cell can override this via {@link IterationCell.size}.
+ */
+function bentoSize(index: number): BentoGridSize {
+  const m = index % 6;
+  if (m === 0) return "lg";
+  if (m === 3) return "md";
+  return "sm";
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                            */
+/* ------------------------------------------------------------------ */
+
+export interface IterationBlockProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+  /** The parsed iteration spec (from the directive, or hand-built). */
+  spec: IterationSpec;
+  /** Resolve the spec to data (consumer data source). */
+  evaluate: EvaluateIteration;
+  /** Fill a template with a cell context. Default: `{{path}}` substitution. */
+  interpolate?: InterpolateTemplate;
+  /** Render a resolved cell's markdown → node (e.g. a nested `MarkdownPreview`). */
+  render: (markdown: string) => ReactNode;
+  /** Override `spec.layout`. */
+  layout?: IterationLayout;
+  /** Empty-state message when there are no cells. */
+  emptyLabel?: string;
+}
+
+export const IterationBlock = forwardRef<HTMLDivElement, IterationBlockProps>(
+  function IterationBlock(
+    {
+      spec,
+      evaluate,
+      interpolate = defaultInterpolate,
+      render,
+      layout,
+      emptyLabel,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const data = safeEvaluate(evaluate, spec);
+    const cells = data?.cells ?? [];
+    const resolvedLayout = layout ?? spec.layout;
+
+    const renderCell = (cell: IterationCell, index: number): ReactNode => {
+      const md = cell.markdown ?? interpolate(spec.template, cellScope(spec, cell, index));
+      return render(md);
+    };
+
+    const label = spec.kind === "pivot" ? "Pivot" : "Iteration";
+
+    if (cells.length === 0) {
+      return (
+        <div
+          ref={ref}
+          role="group"
+          aria-label={label}
+          data-iteration={spec.kind}
+          className={cn("my-4 flex items-center gap-2 text-meta text-muted-foreground", className)}
+          {...props}
+        >
+          <Repeat2 className="size-4 shrink-0" aria-hidden="true" />
+          <span>
+            {emptyLabel ?? `Nothing to ${spec.kind === "pivot" ? "pivot" : "iterate"} yet.`}
+          </span>
+        </div>
+      );
+    }
+
+    // matrix needs both header axes; fall back to grid when they're absent.
+    const isMatrix =
+      resolvedLayout === "matrix" && !!data?.rowHeaders?.length && !!data?.colHeaders?.length;
+
+    let body: ReactNode;
+    if (resolvedLayout === "stacked") {
+      body = (
+        <ol className="space-y-6">
+          {cells.map((cell, i) => (
+            <li key={cell.key ?? i} className="[&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+              {renderCell(cell, i)}
+            </li>
+          ))}
+        </ol>
+      );
+    } else if (resolvedLayout === "bento") {
+      body = (
+        <BentoGrid>
+          {cells.map((cell, i) => (
+            <BentoGridItem key={cell.key ?? i} size={cell.size ?? bentoSize(i)}>
+              <div className="h-full overflow-auto p-4 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+                {renderCell(cell, i)}
+              </div>
+            </BentoGridItem>
+          ))}
+        </BentoGrid>
+      );
+    } else if (isMatrix) {
+      const rowHeaders = data!.rowHeaders!;
+      const colHeaders = data!.colHeaders!;
+      const at = new Map<string, { cell: IterationCell; index: number }>();
+      cells.forEach((cell, i) => {
+        if (cell.row != null && cell.col != null)
+          at.set(JSON.stringify([cell.row, cell.col]), { cell, index: i });
+      });
+      body = (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead aria-hidden="true" />
+              {colHeaders.map((c) => (
+                <TableHead key={c} scope="col">
+                  {c}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {rowHeaders.map((r) => (
+              <TableRow key={r}>
+                <TableHead scope="row" className="font-medium text-foreground">
+                  {r}
+                </TableHead>
+                {colHeaders.map((c) => {
+                  const hit = at.get(JSON.stringify([r, c]));
+                  return (
+                    <TableCell key={c} className="align-top">
+                      {hit ? renderCell(hit.cell, hit.index) : null}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      );
+    } else {
+      // grid (and matrix fallback): cells laid row-major into N columns.
+      const headers = data?.columns;
+      const colCount = (headers?.length ?? spec.columns ?? Math.min(cells.length, 3)) || 1;
+      const rows = chunk(cells, colCount);
+      body = (
+        <Table>
+          {headers ? (
+            <TableHeader>
+              <TableRow>
+                {headers.map((h) => (
+                  <TableHead key={h} scope="col">
+                    {h}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+          ) : null}
+          <TableBody>
+            {rows.map((row, r) => (
+              <TableRow key={r}>
+                {row.map((cell, c) => (
+                  <TableCell key={cell.key ?? c} className="align-top">
+                    {renderCell(cell, r * colCount + c)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      );
+    }
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-label={label}
+        data-iteration={spec.kind}
+        data-iteration-layout={resolvedLayout}
+        className={cn("my-4", className)}
+        {...props}
+      >
+        {body}
+      </div>
+    );
+  },
+);

package/src/markdown-iteration/template-dialog.stories.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@elabs-ai/components-ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { expect, userEvent, within } from "storybook/test";
+
+import { IterationTemplateDialog } from "./template-dialog";
+
+const meta = {
+  title: "Editor/Iteration/TemplateDialog",
+  component: IterationTemplateDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "The #223 template modal — author a `:::iterate` / `:::pivot` per-cell template in a " +
+          "focused `Dialog` embedding the full `MarkdownWorkspace` (source / split / preview-edit). " +
+          "Controlled (`open` / `onOpenChange`), seeded with `template`, returning the edit via " +
+          "`onSave`. Wire it to the node-view `⋯` re-edit with `IterationTemplateProvider`.",
+      },
+    },
+  },
+} satisfies Meta<typeof IterationTemplateDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { open: false, onOpenChange: () => {}, template: "", onSave: () => {} },
+  render: function DialogStory() {
+    const [open, setOpen] = useState(false);
+    const [saved, setSaved] = useState(
+      `:::card{title="{{item.name}}"}\n**{{item.role}}** · {{item.commits}} commits\n:::`,
+    );
+    return (
+      <div className="flex flex-col items-center gap-3">
+        <Button onClick={() => setOpen(true)}>Edit iteration template…</Button>
+        <pre className="max-w-md rounded-md bg-surface-muted p-3 text-caption text-muted-foreground">
+          {saved}
+        </pre>
+        <IterationTemplateDialog
+          open={open}
+          onOpenChange={setOpen}
+          template={saved}
+          onSave={setSaved}
+        />
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole("button", { name: /Edit iteration template/i }));
+    // The dialog portals to the body — assert on a control unique to it.
+    await expect(
+      await within(document.body).findByRole(
+        "button",
+        { name: "Save template" },
+        { timeout: 12000 },
+      ),
+    ).toBeInTheDocument();
+  },
+};

package/src/markdown-iteration/template-dialog.test.tsx

@@ -0,0 +1,104 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useContext } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// The dialog embeds a MarkdownWorkspace (Monaco/Milkdown — can't mount in jsdom).
+// Mock it with a plain textarea so these tests exercise the DIALOG's save/cancel +
+// provider LOGIC (not the editor — that has its own tests + the Storybook render).
+vi.mock("../markdown-workspace", () => ({
+  MarkdownWorkspace: ({
+    value,
+    onChange,
+    ["aria-label"]: ariaLabel,
+  }: {
+    value: string;
+    onChange: (v: string) => void;
+    "aria-label"?: string;
+  }) => (
+    <textarea aria-label={ariaLabel} value={value} onChange={(e) => onChange(e.target.value)} />
+  ),
+}));
+
+import { IterationEditContext } from "./edit-context";
+import { IterationTemplateDialog, IterationTemplateProvider } from "./template-dialog";
+
+afterEach(cleanup);
+
+describe("IterationTemplateDialog", () => {
+  it("seeds the editor with the template and saves edits", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <IterationTemplateDialog
+        open
+        onOpenChange={onOpenChange}
+        template="**{{item.name}}**"
+        onSave={onSave}
+      />,
+    );
+    const editor = screen.getByRole("textbox", { name: "Iteration template editor" });
+    expect(editor).toHaveValue("**{{item.name}}**");
+
+    await user.clear(editor);
+    // (avoid `{{` in user.type — it's the userEvent escape for a literal brace)
+    await user.type(editor, "# Edited heading");
+    await user.click(screen.getByRole("button", { name: "Save template" }));
+
+    expect(onSave).toHaveBeenCalledWith("# Edited heading");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("cancel closes without saving", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    const onOpenChange = vi.fn();
+    render(
+      <IterationTemplateDialog open onOpenChange={onOpenChange} template="t" onSave={onSave} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(onSave).not.toHaveBeenCalled();
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("titles + helper copy adapt to the pivot kind", () => {
+    render(
+      <IterationTemplateDialog
+        open
+        onOpenChange={() => {}}
+        template=""
+        onSave={() => {}}
+        kind="pivot"
+      />,
+    );
+    expect(screen.getByText(/Edit pivot template/i)).toBeInTheDocument();
+  });
+});
+
+/** A tiny consumer that fires an edit request through the context. */
+function EditTrigger({ onSave }: { onSave: (t: string) => void }) {
+  const onEdit = useContext(IterationEditContext);
+  return (
+    <button onClick={() => onEdit?.({ kind: "iterate", template: "seed", onSave })}>open</button>
+  );
+}
+
+describe("IterationTemplateProvider", () => {
+  it("opens the dialog on an edit request and routes the save back", async () => {
+    const user = userEvent.setup();
+    const onSave = vi.fn();
+    render(
+      <IterationTemplateProvider>
+        <EditTrigger onSave={onSave} />
+      </IterationTemplateProvider>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "open" }));
+    const editor = await screen.findByRole("textbox", { name: "Iteration template editor" });
+    expect(editor).toHaveValue("seed");
+
+    await user.click(screen.getByRole("button", { name: "Save template" }));
+    expect(onSave).toHaveBeenCalledWith("seed");
+  });
+});

package/src/markdown-iteration/template-dialog.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+/**
+ * IterationTemplateDialog — author a `:::iterate` / `:::pivot` per-cell TEMPLATE
+ * in a focused modal (the #223 template modal). Composes `@elabs-ai/components-ui` `Dialog`
+ * with the existing `MarkdownWorkspace` (source / split / preview-edit), so the
+ * template is edited with the same toolbar + live preview as any document.
+ *
+ * Controlled: drive `open` / `onOpenChange`; seed `template`; receive the edited
+ * markdown via `onSave`. The library does not own where the template is stored —
+ * the caller (a slash command, or the node-view `⋯` re-edit menu) wires it back.
+ */
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@elabs-ai/components-ui";
+import { useEffect, useState, type ReactNode } from "react";
+
+import { MarkdownWorkspace, type MarkdownWorkspaceMode } from "../markdown-workspace";
+import { IterationEditContext, type IterationEditRequest } from "./edit-context";
+
+export interface IterationTemplateDialogProps {
+  /** Whether the dialog is open. */
+  open: boolean;
+  /** Open-state change handler (Radix Dialog contract). */
+  onOpenChange: (open: boolean) => void;
+  /** The initial template markdown (the directive body). */
+  template: string;
+  /** Called with the edited template when the user saves. */
+  onSave: (template: string) => void;
+  /** Tunes the title + helper copy. Default `"iterate"`. */
+  kind?: "iterate" | "pivot";
+  /** Initial workspace mode. Default `"split"`. */
+  mode?: MarkdownWorkspaceMode;
+}
+
+export function IterationTemplateDialog({
+  open,
+  onOpenChange,
+  template,
+  onSave,
+  kind = "iterate",
+  mode = "split",
+}: IterationTemplateDialogProps) {
+  const [draft, setDraft] = useState(template);
+
+  // Re-seed the draft whenever the dialog (re)opens against a new template.
+  useEffect(() => {
+    if (open) setDraft(template);
+  }, [open, template]);
+
+  const unit = kind === "pivot" ? "cell" : "row";
+
+  const save = () => {
+    onSave(draft);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[85vh] w-[min(48rem,92vw)] max-w-none flex-col">
+        <DialogHeader>
+          <DialogTitle>Edit {kind === "pivot" ? "pivot" : "iteration"} template</DialogTitle>
+          <DialogDescription>
+            The per-{unit} template. Use <code>{"{{token}}"}</code> placeholders (e.g.{" "}
+            <code>{"{{item.name}}"}</code>) — each is filled per {unit} when the block renders.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="min-h-0 flex-1">
+          <MarkdownWorkspace
+            value={draft}
+            onChange={setDraft}
+            defaultMode={mode}
+            className="h-full"
+            aria-label="Iteration template editor"
+          />
+        </div>
+        <DialogFooter>
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={save}>Save template</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/**
+ * One-liner wiring for the node-view `⋯` re-edit: provides the
+ * {@link IterationEditContext} handler AND renders the `IterationTemplateDialog`
+ * it opens. Wrap your `MarkdownEditor` / `MarkdownWorkspace` in it to enable the
+ * `⋯` "Edit template…" affordance on `:::iterate` / `:::pivot` node-views.
+ */
+export function IterationTemplateProvider({ children }: { children: ReactNode }) {
+  const [request, setRequest] = useState<IterationEditRequest | null>(null);
+  return (
+    <IterationEditContext.Provider value={setRequest}>
+      {children}
+      <IterationTemplateDialog
+        open={request != null}
+        onOpenChange={(next) => {
+          if (!next) setRequest(null);
+        }}
+        template={request?.template ?? ""}
+        kind={request?.kind ?? "iterate"}
+        onSave={(template) => request?.onSave(template)}
+      />
+    </IterationEditContext.Provider>
+  );
+}

package/src/markdown-outline/document-outline.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Pin } from "lucide-react";
+import { useState } from "react";
+
+import { DocumentOutline, useMarkdownOutline } from "./document-outline";
+
+const DOC = `# Reporting migration plan
+
+## Phase overview
+
+### Discovery
+
+### Dual-run
+
+## Timeline
+
+## Risks and mitigations
+`;
+
+const meta = {
+  title: "Editor/DocumentOutline",
+  component: DocumentOutline,
+  tags: ["autodocs"],
+  parameters: { layout: "padded" },
+} satisfies Meta<typeof DocumentOutline>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Demo() {
+  const items = useMarkdownOutline(DOC);
+  const [active, setActive] = useState(items[0]?.id);
+  return (
+    <div className="max-w-56">
+      <DocumentOutline items={items} activeId={active} onSelect={(i) => setActive(i.id)} />
+    </div>
+  );
+}
+
+export const Default: Story = {
+  args: { items: [] },
+  render: () => <Demo />,
+};
+
+export const Empty: Story = {
+  args: { items: [] },
+};
+
+/** Per-entry hover affordances via `itemActions` (e.g. pin a section). */
+function ItemActionsDemo() {
+  const items = useMarkdownOutline(DOC);
+  const [pinned, setPinned] = useState<string | null>("timeline");
+  return (
+    <div className="max-w-56">
+      <DocumentOutline
+        items={items}
+        itemActions={(item) => (
+          <button
+            type="button"
+            aria-label={`Pin section “${item.text}”`}
+            aria-pressed={pinned === item.id}
+            onClick={() => setPinned((p) => (p === item.id ? null : item.id))}
+            className="rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Pin className="size-3" aria-hidden="true" />
+          </button>
+        )}
+      />
+    </div>
+  );
+}
+
+export const ItemActions: Story = {
+  args: { items: [] },
+  render: () => <ItemActionsDemo />,
+};