@elabs-ai/components-editor 4.0.0

package/src/mermaid-workspace/mermaid-workspace.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * MermaidWorkspace (#L2) — the source ⇄ diagram editing surface.
+ *
+ * Same compound pattern as `MarkdownWorkspace`: one mermaid source string,
+ * Monaco on the left, the live branded `MermaidDiagram` on the right
+ * (debounced so keystrokes don't thrash the engine). Controlled
+ * (`value`/`onChange`) or uncontrolled (`defaultValue`).
+ */
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { forwardRef, useEffect, useState, type HTMLAttributes } from "react";
+
+import { CodeEditor } from "../code-editor";
+import { MermaidDiagram } from "../mermaid-diagram";
+
+export interface MermaidWorkspaceProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  "onChange" | "defaultValue"
+> {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (source: string) => void;
+  /** Debounce (ms) before the diagram re-renders while typing. Default 350. */
+  debounceMs?: number;
+}
+
+export const MermaidWorkspace = forwardRef<HTMLDivElement, MermaidWorkspaceProps>(
+  function MermaidWorkspace(
+    { value, defaultValue, onChange, debounceMs = 350, className, ...props },
+    ref,
+  ) {
+    const isControlled = value !== undefined;
+    const [internal, setInternal] = useState(value ?? defaultValue ?? "");
+    const source = isControlled ? value : internal;
+
+    const [debounced, setDebounced] = useState(source);
+    useEffect(() => {
+      const t = setTimeout(() => setDebounced(source), debounceMs);
+      return () => clearTimeout(t);
+    }, [source, debounceMs]);
+
+    const setSource = (next: string) => {
+      if (!isControlled) setInternal(next);
+      onChange?.(next);
+    };
+
+    return (
+      <div
+        ref={ref}
+        data-testid="mermaid-workspace"
+        className={cn("h-full min-h-0 overflow-hidden", className)}
+        {...props}
+      >
+        <ResizablePanelGroup direction="horizontal">
+          <ResizablePanel defaultSize={45} minSize={25}>
+            {/* Monaco has no mermaid grammar — plaintext keeps it honest (no wrong colors). */}
+            <CodeEditor language="plaintext" value={source} onChange={setSource} />
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={55} minSize={25}>
+            <div className="h-full overflow-auto p-4">
+              <MermaidDiagram chart={debounced} label="Diagram preview" />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+);

package/src/metric-block/index.ts

@@ -0,0 +1 @@
+export { MetricBlock, type MetricBlockProps } from "./metric-block";

package/src/metric-block/metric-block.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MetricBlock } from "./metric-block";
+
+const meta = {
+  title: "Editor/MetricBlock",
+  component: MetricBlock,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Compact KPI tile (label · value · description · optional delta). The branded " +
+          "target for the `::metric` directive. Thin alias for `@elabs-ai/components-ui` MetricCard " +
+          "(see ADR 0012).",
+      },
+    },
+  },
+} satisfies Meta<typeof MetricBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Migration scope",
+    value: "1,245",
+    description: "frozen report candidates",
+    delta: "+12%",
+    deltaDirection: "up",
+  },
+};
+
+export const NoDelta: Story = {
+  args: {
+    label: "Open gaps",
+    value: "2",
+    description: "in @elabs-ai/components-data + @elabs-ai/components-icons",
+  },
+};

package/src/metric-block/metric-block.tsx

@@ -0,0 +1,14 @@
+/**
+ * MetricBlock — thin alias for the canonical `@elabs-ai/components-ui` MetricCard.
+ *
+ * Previously a fork that added `description` + avoided an editor→charts sideways
+ * dep. Now that MetricCard lives in `@elabs-ai/components-ui` (which @elabs-ai/components-editor already depends
+ * on), this wrapper preserves the `MetricBlock` / `MetricBlockProps` public names so
+ * `directive-views.tsx` and `markdown/index.ts` keep working unchanged.
+ *
+ * ADR: docs/ADR/0012-metric-card-canonical-home.md
+ */
+import { MetricCard, type MetricCardProps } from "@elabs-ai/components-ui";
+
+export type MetricBlockProps = MetricCardProps;
+export const MetricBlock = MetricCard;

package/src/monaco-workers.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Ambient type for Vite's `?worker` import suffix. The Monaco worker entries
+ * (`monaco-editor/esm/vs/.../*.worker?worker`) are resolved + bundled by Vite at
+ * app build time; this declaration lets `tsc` typecheck the import in
+ * `lib/monaco-environment.ts` without resolving the real module.
+ */
+declare module "*?worker" {
+  const workerConstructor: { new (): Worker };
+  export default workerConstructor;
+}

package/src/prose/index.ts

@@ -0,0 +1,14 @@
+export {
+  Heading,
+  Text,
+  Link,
+  List,
+  ListItem,
+  Blockquote,
+  InlineCode,
+  type HeadingProps,
+  type HeadingLevel,
+  type TextProps,
+  type LinkProps,
+  type ListProps,
+} from "./prose";

package/src/prose/prose.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Blockquote, Heading, InlineCode, Link, List, ListItem, Text } from "./prose";
+
+const meta = {
+  title: "Editor/Prose",
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Token-driven typography primitives the markdown preview maps onto: Heading, " +
+          "Text, Link, List, Blockquote, InlineCode. Generic and theme-safe.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const All: Story = {
+  render: () => (
+    <div className="max-w-2xl space-y-3">
+      <Heading level={1}>Heading level 1</Heading>
+      <Heading level={2}>Heading level 2</Heading>
+      <Heading level={3}>Heading level 3</Heading>
+      <Text>
+        Body text with an <Link href="https://example.com">external link</Link> and some{" "}
+        <InlineCode>inline code</InlineCode>.
+      </Text>
+      <Text variant="muted">Muted helper text.</Text>
+      <Blockquote>A blockquote rendered through the branded primitive.</Blockquote>
+      <List>
+        <ListItem>First bullet</ListItem>
+        <ListItem>Second bullet</ListItem>
+      </List>
+      <List ordered>
+        <ListItem>First step</ListItem>
+        <ListItem>Second step</ListItem>
+      </List>
+    </div>
+  ),
+};

package/src/prose/prose.test.tsx

@@ -0,0 +1,44 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+
+import { Heading, InlineCode, Link, List, ListItem, Text } from "./prose";
+
+afterEach(cleanup);
+
+describe("prose primitives", () => {
+  it("renders the heading element for the given level", () => {
+    render(<Heading level={3}>Title</Heading>);
+    const h = screen.getByRole("heading", { level: 3, name: "Title" });
+    expect(h.tagName).toBe("H3");
+  });
+
+  it("adds safe rel + target for external links", () => {
+    render(<Link href="https://example.com">Out</Link>);
+    const a = screen.getByRole("link", { name: "Out" });
+    expect(a).toHaveAttribute("target", "_blank");
+    expect(a).toHaveAttribute("rel", "noopener noreferrer");
+  });
+
+  it("does not externalize relative links", () => {
+    render(<Link href="/docs">In</Link>);
+    expect(screen.getByRole("link", { name: "In" })).not.toHaveAttribute("target");
+  });
+
+  it("renders an ordered list when asked", () => {
+    render(
+      <List ordered>
+        <ListItem>one</ListItem>
+      </List>,
+    );
+    expect(screen.getByRole("list").tagName).toBe("OL");
+  });
+
+  it("renders inline code + body text", () => {
+    render(
+      <Text>
+        see <InlineCode>cn()</InlineCode>
+      </Text>,
+    );
+    expect(screen.getByText("cn()").tagName).toBe("CODE");
+  });
+});

package/src/prose/prose.tsx

@@ -0,0 +1,21 @@
+/**
+ * Prose primitives — re-exported from @elabs-ai/components-ui (#188; ADR-0012 own/re-export
+ * model: @elabs-ai/components-ui owns the canonical prose source in
+ * `components/typography/prose.tsx`; this package derives). The
+ * `@elabs-ai/components-editor/markdown` public surface keeps the original names
+ * (Heading, Text, Link, List, ListItem, Blockquote, InlineCode).
+ */
+export {
+  ProseHeading as Heading,
+  ProseText as Text,
+  ProseLink as Link,
+  ProseList as List,
+  ProseListItem as ListItem,
+  ProseBlockquote as Blockquote,
+  ProseInlineCode as InlineCode,
+  type ProseHeadingProps as HeadingProps,
+  type ProseHeadingLevel as HeadingLevel,
+  type ProseTextProps as TextProps,
+  type ProseLinkProps as LinkProps,
+  type ProseListProps as ListProps,
+} from "@elabs-ai/components-ui";

package/src/timeline/index.ts

@@ -0,0 +1,18 @@
+/**
+ * Timeline — MOVED to `@elabs-ai/components-ui` (#190, research 10 §B.2; the ADR-0012
+ * own/re-export model). `@elabs-ai/components-ui` owns the canonical rail; this shim keeps
+ * the editor-facing surface byte-compatible — `markdown/index.ts` and the
+ * `:::timeline` preview keep importing from `../timeline` unchanged.
+ *
+ * `TimelineItem` here is the ARRAY-item data shape (named `TimelineEntry` in
+ * `@elabs-ai/components-ui`, where `TimelineItem` is the compound `<li>` part); the alias
+ * preserves the editor's original public type name. `TimelineStatus`
+ * (`done|active|pending`) now lives with its `fromTimelineStatus` mapper in
+ * status-badge and reaches the `@elabs-ai/components-ui` barrel from there.
+ */
+export {
+  Timeline,
+  type TimelineEntry as TimelineItem,
+  type TimelineProps,
+  type TimelineStatus,
+} from "@elabs-ai/components-ui";