npm - @clef-sh/ui - Versions diffs - 0.1.20 → 0.1.21 - Mend

@clef-sh/ui 0.1.20 → 0.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/dist/client/assets/index-DPWHjBbB.js +34 -0
package/dist/client/assets/index-qsLTYpc9.css +2 -0
package/dist/client/clef.svg +2 -0
package/dist/client/index.html +3 -31
package/dist/client-lib/components/Button.d.ts +1 -1
package/dist/client-lib/components/Button.d.ts.map +1 -1
package/dist/client-lib/components/CopyButton.d.ts.map +1 -1
package/dist/client-lib/components/EnvBadge.d.ts.map +1 -1
package/dist/client-lib/components/MatrixGrid.d.ts.map +1 -1
package/dist/client-lib/components/Sidebar.d.ts +1 -1
package/dist/client-lib/components/Sidebar.d.ts.map +1 -1
package/dist/client-lib/components/StatusDot.d.ts.map +1 -1
package/dist/client-lib/components/SyncPanel.d.ts.map +1 -1
package/dist/client-lib/components/TopBar.d.ts +6 -0
package/dist/client-lib/components/TopBar.d.ts.map +1 -1
package/dist/client-lib/primitives/Badge.d.ts +11 -0
package/dist/client-lib/primitives/Badge.d.ts.map +1 -0
package/dist/client-lib/primitives/Card.d.ts +28 -0
package/dist/client-lib/primitives/Card.d.ts.map +1 -0
package/dist/client-lib/primitives/Dialog.d.ts +30 -0
package/dist/client-lib/primitives/Dialog.d.ts.map +1 -0
package/dist/client-lib/primitives/EmptyState.d.ts +10 -0
package/dist/client-lib/primitives/EmptyState.d.ts.map +1 -0
package/dist/client-lib/primitives/Field.d.ts +36 -0
package/dist/client-lib/primitives/Field.d.ts.map +1 -0
package/dist/client-lib/primitives/Input.d.ts +6 -0
package/dist/client-lib/primitives/Input.d.ts.map +1 -0
package/dist/client-lib/primitives/Stat.d.ts +11 -0
package/dist/client-lib/primitives/Stat.d.ts.map +1 -0
package/dist/client-lib/primitives/Table.d.ts +37 -0
package/dist/client-lib/primitives/Table.d.ts.map +1 -0
package/dist/client-lib/primitives/Tabs.d.ts +29 -0
package/dist/client-lib/primitives/Tabs.d.ts.map +1 -0
package/dist/client-lib/primitives/Toast.d.ts +16 -0
package/dist/client-lib/primitives/Toast.d.ts.map +1 -0
package/dist/client-lib/primitives/Toolbar.d.ts +29 -0
package/dist/client-lib/primitives/Toolbar.d.ts.map +1 -0
package/dist/client-lib/primitives/index.d.ts +23 -0
package/dist/client-lib/primitives/index.d.ts.map +1 -0
package/dist/client-lib/theme.d.ts +18 -41
package/dist/client-lib/theme.d.ts.map +1 -1
package/dist/server/api.d.ts.map +1 -1
package/dist/server/api.js +215 -0
package/dist/server/api.js.map +1 -1
package/dist/server/envelope.d.ts +15 -0
package/dist/server/envelope.d.ts.map +1 -0
package/dist/server/envelope.js +310 -0
package/dist/server/envelope.js.map +1 -0
package/package.json +7 -2
package/src/client/App.tsx +16 -41
package/src/client/components/Button.tsx +13 -22
package/src/client/components/CopyButton.tsx +5 -12
package/src/client/components/EnvBadge.tsx +30 -15
package/src/client/components/MatrixGrid.tsx +108 -252
package/src/client/components/Sidebar.tsx +123 -199
package/src/client/components/StatusDot.tsx +10 -15
package/src/client/components/SyncPanel.tsx +14 -62
package/src/client/components/TopBar.tsx +11 -36
package/src/client/index.html +1 -30
package/src/client/main.tsx +1 -0
package/src/client/primitives/Badge.test.tsx +47 -0
package/src/client/primitives/Badge.tsx +64 -0
package/src/client/primitives/Card.test.tsx +50 -0
package/src/client/primitives/Card.tsx +85 -0
package/src/client/primitives/Dialog.test.tsx +55 -0
package/src/client/primitives/Dialog.tsx +96 -0
package/src/client/primitives/EmptyState.test.tsx +25 -0
package/src/client/primitives/EmptyState.tsx +38 -0
package/src/client/primitives/Field.test.tsx +46 -0
package/src/client/primitives/Field.tsx +95 -0
package/src/client/primitives/Input.tsx +26 -0
package/src/client/primitives/Stat.test.tsx +32 -0
package/src/client/primitives/Stat.tsx +52 -0
package/src/client/primitives/Table.test.tsx +58 -0
package/src/client/primitives/Table.tsx +113 -0
package/src/client/primitives/Tabs.test.tsx +44 -0
package/src/client/primitives/Tabs.tsx +100 -0
package/src/client/primitives/Toast.test.tsx +77 -0
package/src/client/primitives/Toast.tsx +89 -0
package/src/client/primitives/Toolbar.test.tsx +50 -0
package/src/client/primitives/Toolbar.tsx +86 -0
package/src/client/primitives/index.ts +43 -0
package/src/client/public/clef.svg +2 -0
package/src/client/screens/BackendScreen.tsx +104 -363
package/src/client/screens/DiffView.tsx +187 -378
package/src/client/screens/EnvelopeScreen.test.tsx +542 -0
package/src/client/screens/EnvelopeScreen.tsx +948 -0
package/src/client/screens/GitLogView.tsx +48 -106
package/src/client/screens/ImportScreen.tsx +105 -308
package/src/client/screens/LintView.tsx +184 -379
package/src/client/screens/ManifestScreen.tsx +283 -445
package/src/client/screens/MatrixView.tsx +75 -91
package/src/client/screens/NamespaceEditor.tsx +234 -609
package/src/client/screens/PolicyView.tsx +183 -453
package/src/client/screens/RecipientsScreen.tsx +71 -350
package/src/client/screens/ResetScreen.tsx +67 -237
package/src/client/screens/ScanScreen.tsx +85 -249
package/src/client/screens/SchemaEditor.test.tsx +237 -0
package/src/client/screens/SchemaEditor.tsx +435 -0
package/src/client/screens/ServiceIdentitiesScreen.tsx +251 -788
package/src/client/styles.css +77 -0
package/src/client/theme.ts +27 -48
package/dist/client/assets/index-Db6WgHgY.js +0 -38

package/src/client/components/TopBar.tsx CHANGED Viewed

@@ -1,5 +1,4 @@
 import React from "react";
-import { theme } from "../theme";
 interface TopBarProps {
   title: string;
@@ -7,44 +6,20 @@ interface TopBarProps {
   actions?: React.ReactNode;
 }
+/**
+ * @deprecated Prefer the `<Toolbar>` primitive from `../primitives`. This
+ * thin wrapper exists for back-compat — every screen has migrated to
+ * `<Toolbar>`, but `TopBar` is still part of the public `@clef-sh/ui`
+ * client-lib export, so external consumers of the package may rely on it.
+ */
 export function TopBar({ title, subtitle, actions }: TopBarProps) {
   return (
-    <div
-      style={{
-        height: 54,
-        borderBottom: `1px solid ${theme.border}`,
-        display: "flex",
-        alignItems: "center",
-        padding: "0 24px",
-        gap: 16,
-        flexShrink: 0,
-      }}
-    >
-      <div style={{ flex: 1 }}>
-        <div
-          style={{
-            fontFamily: theme.sans,
-            fontWeight: 600,
-            fontSize: 14,
-            color: theme.text,
-          }}
-        >
-          {title}
-        </div>
-        {subtitle && (
-          <div
-            style={{
-              fontFamily: theme.mono,
-              fontSize: 10,
-              color: theme.textMuted,
-              marginTop: 1,
-            }}
-          >
-            {subtitle}
-          </div>
-        )}
+    <div className="flex h-[54px] shrink-0 items-center gap-4 border-b border-edge px-6">
+      <div className="flex-1">
+        <div className="font-sans text-[14px] font-semibold text-bone">{title}</div>
+        {subtitle && <div className="mt-px font-mono text-[10px] text-ash">{subtitle}</div>}
       </div>
-      <div style={{ display: "flex", gap: 8 }}>{actions}</div>
+      <div className="flex gap-2">{actions}</div>
     </div>
   );
 }

package/src/client/index.html CHANGED Viewed

@@ -10,38 +10,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap"
       rel="stylesheet"
     />
-    <style>
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-      body {
-        background: #0a0b0d;
-        color: #e8eaf0;
-        font-family: "DM Sans", system-ui, sans-serif;
-      }
-      ::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-      ::-webkit-scrollbar-track {
-        background: transparent;
-      }
-      ::-webkit-scrollbar-thumb {
-        background: #1e2330;
-        border-radius: 3px;
-      }
-      select option {
-        background: #111318;
-      }
-      input::placeholder {
-        color: #3d4455;
-      }
-    </style>
   </head>
   <body>
     <div id="root"></div>

package/src/client/main.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import "./styles.css";
 import App from "./App";
 import { initToken } from "./api";

package/src/client/primitives/Badge.test.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Badge } from "./Badge";
+describe("Badge", () => {
+  it("renders children with default outline + default tone classes", () => {
+    render(<Badge data-testid="b">PROD</Badge>);
+    const el = screen.getByTestId("b");
+    expect(el).toHaveTextContent("PROD");
+    expect(el.className).toContain("border-edge");
+    expect(el.className).toContain("text-ash-dim");
+  });
+  it("applies go solid variant classes", () => {
+    render(
+      <Badge tone="go" variant="solid" data-testid="b">
+        OK
+      </Badge>,
+    );
+    const el = screen.getByTestId("b");
+    expect(el.className).toContain("bg-go-500/15");
+    expect(el.className).toContain("text-go-500");
+  });
+  it("applies stop outline classes", () => {
+    render(
+      <Badge tone="stop" data-testid="b">
+        FAIL
+      </Badge>,
+    );
+    const el = screen.getByTestId("b");
+    expect(el.className).toContain("border-stop-500/40");
+    expect(el.className).toContain("text-stop-500");
+  });
+  it("applies blue tone using blue-400 token", () => {
+    render(
+      <Badge tone="blue" data-testid="b">
+        INFO
+      </Badge>,
+    );
+    const el = screen.getByTestId("b");
+    expect(el.className).toContain("border-blue-400/40");
+    expect(el.className).toContain("text-blue-400");
+  });
+});

package/src/client/primitives/Badge.tsx ADDED Viewed

@@ -0,0 +1,64 @@
+import React from "react";
+export type BadgeTone = "default" | "go" | "warn" | "stop" | "gold" | "blue" | "purple";
+export type BadgeVariant = "solid" | "outline";
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  tone?: BadgeTone;
+  variant?: BadgeVariant;
+  className?: string;
+  children?: React.ReactNode;
+}
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+function toneClasses(tone: BadgeTone, variant: BadgeVariant): string {
+  // For each tone we return the class string for the chosen variant.
+  switch (tone) {
+    case "go":
+      return variant === "solid"
+        ? "bg-go-500/15 text-go-500 border border-transparent"
+        : "border border-go-500/40 text-go-500";
+    case "warn":
+      return variant === "solid"
+        ? "bg-warn-500/15 text-warn-500 border border-transparent"
+        : "border border-warn-500/40 text-warn-500";
+    case "stop":
+      return variant === "solid"
+        ? "bg-stop-500/15 text-stop-500 border border-transparent"
+        : "border border-stop-500/40 text-stop-500";
+    case "gold":
+      return variant === "solid"
+        ? "bg-gold-500/15 text-gold-500 border border-transparent"
+        : "border border-gold-500/40 text-gold-500";
+    case "blue":
+      return variant === "solid"
+        ? "bg-blue-400/15 text-blue-400 border border-transparent"
+        : "border border-blue-400/40 text-blue-400";
+    case "purple":
+      return variant === "solid"
+        ? "bg-purple-400/15 text-purple-400 border border-transparent"
+        : "border border-purple-400/40 text-purple-400";
+    case "default":
+    default:
+      return variant === "solid"
+        ? "bg-edge text-ash border border-transparent"
+        : "border border-edge text-ash-dim";
+  }
+}
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  { tone = "default", variant = "outline", className, children, ...rest },
+  ref,
+) {
+  const base =
+    "inline-flex items-center font-mono text-[9px] font-bold uppercase tracking-[0.08em] rounded-sm px-1.5 py-0.5";
+  return (
+    <span ref={ref} className={joinClasses(base, toneClasses(tone, variant), className)} {...rest}>
+      {children}
+    </span>
+  );
+});

package/src/client/primitives/Card.test.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Card } from "./Card";
+describe("Card", () => {
+  it("renders header title and subtitle and body content", () => {
+    render(
+      <Card data-testid="card">
+        <Card.Header title="Identity" subtitle="namespace" />
+        <Card.Body>hello body</Card.Body>
+      </Card>,
+    );
+    expect(screen.getByTestId("card")).toBeInTheDocument();
+    expect(screen.getByText("Identity")).toBeInTheDocument();
+    expect(screen.getByText("namespace")).toBeInTheDocument();
+    expect(screen.getByText("hello body")).toBeInTheDocument();
+  });
+  it("applies error tone border class", () => {
+    render(
+      <Card tone="error" data-testid="card">
+        <Card.Body>broken</Card.Body>
+      </Card>,
+    );
+    const root = screen.getByTestId("card");
+    expect(root.className).toContain("border-stop-500/40");
+    expect(root.className).not.toContain("border-edge ");
+  });
+  it("applies interactive hover classes when interactive prop set", () => {
+    render(
+      <Card interactive data-testid="card">
+        <Card.Body>hover me</Card.Body>
+      </Card>,
+    );
+    const root = screen.getByTestId("card");
+    expect(root.className).toContain("hover:border-edge-strong");
+    expect(root.className).toContain("hover:shadow-soft-drop");
+  });
+  it("renders header actions slot", () => {
+    render(
+      <Card>
+        <Card.Header title="Files" actions={<button>add</button>} />
+      </Card>,
+    );
+    expect(screen.getByRole("button", { name: "add" })).toBeInTheDocument();
+  });
+});

package/src/client/primitives/Card.tsx ADDED Viewed

@@ -0,0 +1,85 @@
+import React from "react";
+type CardTone = "default" | "error";
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: CardTone;
+  interactive?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+const CardRoot = React.forwardRef<HTMLDivElement, CardProps>(function Card(
+  { tone = "default", interactive = false, className, children, ...rest },
+  ref,
+) {
+  const base = "bg-ink-850 border rounded-card";
+  const borderTone = tone === "error" ? "border-stop-500/40" : "border-edge";
+  const interactiveClasses = interactive
+    ? "transition-shadow transition-colors hover:border-edge-strong hover:shadow-soft-drop"
+    : "";
+  return (
+    <div
+      ref={ref}
+      className={joinClasses(base, borderTone, interactiveClasses, className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  className?: string;
+}
+function CardHeader({ title, subtitle, actions, className, ...rest }: CardHeaderProps) {
+  return (
+    <div
+      className={joinClasses(
+        "flex items-center justify-between px-4 py-3 border-b border-edge",
+        className,
+      )}
+      {...rest}
+    >
+      <div className="min-w-0">
+        <div className="font-sans text-[13px] font-bold text-bone">{title}</div>
+        {subtitle ? (
+          <div className="font-mono text-[10px] text-ash-dim mt-0.5">{subtitle}</div>
+        ) : null}
+      </div>
+      {actions ? <div className="flex gap-2 shrink-0">{actions}</div> : null}
+    </div>
+  );
+}
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+function CardBody({ className, children, ...rest }: CardBodyProps) {
+  return (
+    <div className={joinClasses("p-4", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+type CardCompound = typeof CardRoot & {
+  Header: typeof CardHeader;
+  Body: typeof CardBody;
+};
+const Card = CardRoot as CardCompound;
+Card.Header = CardHeader;
+Card.Body = CardBody;
+export { Card };

package/src/client/primitives/Dialog.test.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Dialog } from "./Dialog";
+describe("Dialog", () => {
+  it("renders nothing when closed", () => {
+    render(
+      <Dialog open={false} onClose={() => {}}>
+        <Dialog.Title>Hidden</Dialog.Title>
+      </Dialog>,
+    );
+    expect(screen.queryByText("Hidden")).not.toBeInTheDocument();
+  });
+  it("renders title, body, and footer when open", () => {
+    render(
+      <Dialog open={true} onClose={() => {}}>
+        <Dialog.Title>Confirm</Dialog.Title>
+        <Dialog.Body>are you sure?</Dialog.Body>
+        <Dialog.Footer>
+          <button>ok</button>
+        </Dialog.Footer>
+      </Dialog>,
+    );
+    expect(screen.getByRole("dialog")).toHaveAttribute("aria-modal", "true");
+    expect(screen.getByText("Confirm")).toBeInTheDocument();
+    expect(screen.getByText("are you sure?")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "ok" })).toBeInTheDocument();
+  });
+  it("calls onClose when scrim is clicked but not when panel is clicked", () => {
+    const onClose = jest.fn();
+    render(
+      <Dialog open={true} onClose={onClose}>
+        <Dialog.Body>panel</Dialog.Body>
+      </Dialog>,
+    );
+    fireEvent.click(screen.getByRole("dialog"));
+    expect(onClose).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByTestId("dialog-scrim"));
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+  it("calls onClose when Escape is pressed", () => {
+    const onClose = jest.fn();
+    render(
+      <Dialog open={true} onClose={onClose}>
+        <Dialog.Body>panel</Dialog.Body>
+      </Dialog>,
+    );
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/client/primitives/Dialog.tsx ADDED Viewed

@@ -0,0 +1,96 @@
+import React, { useEffect } from "react";
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+export interface DialogProps {
+  open: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+}
+function DialogRoot({ open, onClose, children }: DialogProps) {
+  useEffect(() => {
+    if (!open) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [open, onClose]);
+  if (!open) return null;
+  return (
+    <div
+      data-testid="dialog-scrim"
+      className="fixed inset-0 z-50 bg-[rgba(4,5,8,0.72)] flex items-center justify-center"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="bg-ink-850 border border-edge rounded-card shadow-plate w-full max-w-md p-5"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+export interface DialogTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+function DialogTitle({ className, children, ...rest }: DialogTitleProps) {
+  return (
+    <div
+      className={joinClasses("font-sans text-[15px] font-semibold text-bone mb-3", className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+}
+export interface DialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+function DialogBody({ className, children, ...rest }: DialogBodyProps) {
+  return (
+    <div className={joinClasses("font-sans text-[13px] text-bone", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children?: React.ReactNode;
+}
+function DialogFooter({ className, children, ...rest }: DialogFooterProps) {
+  return (
+    <div className={joinClasses("flex gap-2 justify-end mt-4", className)} {...rest}>
+      {children}
+    </div>
+  );
+}
+type DialogCompound = typeof DialogRoot & {
+  Title: typeof DialogTitle;
+  Body: typeof DialogBody;
+  Footer: typeof DialogFooter;
+};
+const Dialog = DialogRoot as DialogCompound;
+Dialog.Title = DialogTitle;
+Dialog.Body = DialogBody;
+Dialog.Footer = DialogFooter;
+export { Dialog };

package/src/client/primitives/EmptyState.test.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { EmptyState } from "./EmptyState";
+describe("EmptyState", () => {
+  it("renders title only when no body or action", () => {
+    render(<EmptyState title="No keys declared yet" data-testid="empty" />);
+    expect(screen.getByText("No keys declared yet")).toBeInTheDocument();
+    expect(screen.getByTestId("empty").className).toContain("border-dashed");
+  });
+  it("renders body and action when provided", () => {
+    render(
+      <EmptyState title="Loading" body="Loading manifest..." action={<button>Retry</button>} />,
+    );
+    expect(screen.getByText("Loading manifest...")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+  });
+  it("renders icon slot", () => {
+    render(<EmptyState icon={<span data-testid="ic">!</span>} title="Empty" />);
+    expect(screen.getByTestId("ic")).toBeInTheDocument();
+  });
+});

package/src/client/primitives/EmptyState.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import React from "react";
+function joinClasses(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(" ");
+}
+export interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  icon?: React.ReactNode;
+  title: string;
+  body?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+export const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(function EmptyState(
+  { icon, title, body, action, className, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      className={joinClasses(
+        "flex flex-col items-center justify-center border border-dashed border-edge rounded-md p-6 text-center",
+        className,
+      )}
+      {...rest}
+    >
+      {icon ? (
+        <div className="text-ash-dim mb-3 text-[32px] leading-none" aria-hidden>
+          {icon}
+        </div>
+      ) : null}
+      <div className="font-sans text-[13px] font-semibold text-bone">{title}</div>
+      {body ? <div className="font-sans text-[12px] text-ash-dim mt-1">{body}</div> : null}
+      {action ? <div className="mt-3">{action}</div> : null}
+    </div>
+  );
+});

package/src/client/primitives/Field.test.tsx ADDED Viewed

@@ -0,0 +1,46 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { Field, Input, Textarea } from "./Field";
+describe("Field", () => {
+  it("renders label and child input", () => {
+    render(
+      <Field label="Name">
+        <Input placeholder="enter name" />
+      </Field>,
+    );
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("enter name")).toBeInTheDocument();
+  });
+  it("shows hint when provided and no error", () => {
+    render(
+      <Field label="Pattern" hint="regex string">
+        <Input />
+      </Field>,
+    );
+    expect(screen.getByText("regex string")).toBeInTheDocument();
+  });
+  it("shows error and hides hint when error present", () => {
+    render(
+      <Field label="URL" hint="https://...." error="invalid URL">
+        <Input />
+      </Field>,
+    );
+    expect(screen.getByRole("alert")).toHaveTextContent("invalid URL");
+    expect(screen.queryByText("https://....")).not.toBeInTheDocument();
+  });
+  it("renders required asterisk when required", () => {
+    render(
+      <Field label="Required field" required>
+        <Textarea />
+      </Field>,
+    );
+    expect(screen.getByText(/Required field/)).toBeInTheDocument();
+    const star = screen.getByText("*");
+    expect(star.className).toContain("text-stop-500");
+  });
+});