@yourrealm/sdk 0.0.0-alpha.1378.ce03c8dc

package/src/ui/components/dropdown-menu.tsx

@@ -0,0 +1,73 @@
+import type { ComponentProps } from "preact";
+import { Menu as MenuPrimitive } from "@ark-ui/react/menu";
+
+import { cn } from "../utils.ts";
+
+function DropdownMenu(props: ComponentProps<typeof MenuPrimitive.Root>) {
+  return <MenuPrimitive.Root {...props} />;
+}
+
+function DropdownMenuTrigger(props: ComponentProps<typeof MenuPrimitive.Trigger>) {
+  return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+}
+
+// Opens the menu on right-click (desktop) or long-press (touch), anchored at
+// the pointer. Wrap the element the menu belongs to with `asChild`.
+function DropdownMenuContextTrigger(props: ComponentProps<typeof MenuPrimitive.ContextTrigger>) {
+  return <MenuPrimitive.ContextTrigger data-slot="dropdown-menu-context-trigger" {...props} />;
+}
+
+function DropdownMenuContent({
+  className,
+  children,
+  align = "end",
+  ...props
+}: ComponentProps<typeof MenuPrimitive.Content> & {
+  align?: "start" | "center" | "end";
+}) {
+  return (
+    <MenuPrimitive.Positioner
+      className="z-50"
+      // Ark's Positioner reads positioning from props on Root; we expose
+      // a minimal `align` shortcut here. Anything fancier — offset,
+      // side, strategy — is set on Root via `positioning={...}`.
+      data-align={align}
+    >
+      <MenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </MenuPrimitive.Content>
+    </MenuPrimitive.Positioner>
+  );
+}
+
+function DropdownMenuItem({ className, ...props }: ComponentProps<typeof MenuPrimitive.Item>) {
+  return (
+    <MenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg px-2 py-1.5 text-sm outline-none transition-colors",
+        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContextTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+};

package/src/ui/components/empty-state.tsx

@@ -0,0 +1,51 @@
+import type { ComponentChildren, JSX } from "preact";
+import { cn, type ElementProps } from "../utils.ts";
+
+type EmptyStateProps = Omit<ElementProps<"div">, "title"> & {
+  /** Icon component from `icons.tsx`. Omitted renders text-only. */
+  icon?: (props: { className?: string }) => JSX.Element;
+  /** One short line saying what isn't here yet. */
+  title: string;
+  /** Optional second line saying how to make it exist. */
+  description?: ComponentChildren;
+  /** Optional call to action, usually the same Button the populated view has. */
+  action?: ComponentChildren;
+};
+
+/**
+ * The "nothing here yet" placeholder, sized for one or two lines.
+ *
+ * Nine of these were hand-rolled across the dashboard, at three different
+ * paddings and with three different opinions on whether an icon belongs, so
+ * an empty Domains page was a 170px dashed box holding eleven words. The
+ * padding here is deliberately smaller than what it replaced: an empty state
+ * says nothing, and nothing does not need a third of the viewport. Its
+ * measure is capped for the same reason `PageHeader`'s is — a line of prose
+ * stretched across a 1600px page is unreadable.
+ */
+function EmptyState({
+  className,
+  icon: Icon,
+  title,
+  description,
+  action,
+  ...props
+}: EmptyStateProps) {
+  return (
+    <div
+      data-slot="empty-state"
+      className={cn(
+        "flex flex-col items-center gap-2 rounded-2xl border border-dashed border-border bg-card/50 px-6 py-8 text-center",
+        className,
+      )}
+      {...props}
+    >
+      {Icon && <Icon className="size-7 text-muted-foreground/70" />}
+      <p class="text-sm font-medium text-foreground">{title}</p>
+      {description && <p class="max-w-prose text-sm text-muted-foreground">{description}</p>}
+      {action && <div class="mt-2 flex items-center gap-2">{action}</div>}
+    </div>
+  );
+}
+
+export { EmptyState };

package/src/ui/components/highlight.ts

@@ -0,0 +1,59 @@
+import { codeToHtml, codeToTokens, type BundledLanguage } from "shiki";
+import poimandres from "shiki/themes/poimandres.mjs";
+
+const HTML_ESCAPES: Record<string, string> = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+};
+
+function escapeHtml(text: string): string {
+  return text.replace(/[&<>"]/g, (c) => HTML_ESCAPES[c] ?? c);
+}
+
+/**
+ * Highlight a whole file and return one HTML string per line, so a caller
+ * that shows only some lines (a unified diff) can look them up by line
+ * number while multi-line tokens (block comments, template literals) still
+ * tokenize against their real context. Same theme as `highlightCode`.
+ * Server-only, for the reason above.
+ */
+export async function highlightLines(
+  code: string,
+  lang: BundledLanguage = "typescript",
+): Promise<string[]> {
+  const { tokens } = await codeToTokens(code, { lang, theme: poimandres });
+  return tokens.map((line) =>
+    line
+      .map((token) => {
+        const style: string[] = [];
+        if (token.color) style.push(`color:${token.color}`);
+        // shiki's FontStyle bit flags: 1 italic, 2 bold, 4 underline.
+        const fs = token.fontStyle ?? 0;
+        if (fs & 1) style.push("font-style:italic");
+        if (fs & 2) style.push("font-weight:bold");
+        if (fs & 4) style.push("text-decoration:underline");
+        const content = escapeHtml(token.content);
+        return style.length > 0 ? `<span style="${style.join(";")}">${content}</span>` : content;
+      })
+      .join(""),
+  );
+}
+
+// Server-only. Kept out of code-block.tsx so the pure CodeBlock component can be
+// imported by client islands (e.g. Home's WorkersPanel) without dragging Shiki +
+// its oniguruma WASM into the client bundle - that WASM trips Home's CSP
+// (script-src lacks unsafe-eval) and bloats the island chunk.
+export async function highlightCode(code: string, lang = "typescript") {
+  const html = await codeToHtml(code, {
+    lang,
+    theme: poimandres,
+  });
+  // Strip the outer <pre><code>...</code></pre> wrapper and background color
+  // so the consuming component controls the container styling
+  return html
+    .replace(/^<pre[^>]*><code>/, "")
+    .replace(/<\/code><\/pre>$/, "")
+    .replace(/background-color:#[0-9a-fA-F]+;?/g, "");
+}

package/src/ui/components/icons.tsx

@@ -0,0 +1,101 @@
+// Named exports only — Vite/esbuild tree-shake by dropping unused names.
+// `import * as` consumers (resolveIcon below) intentionally pull in all
+// icons and form the registry of valid string names.
+
+import type { JSX } from "preact";
+
+// react-icons' IconBaseProps extends SVGAttributes which doesn't surface
+// className/style under preact's typings. Merge in the props we use.
+declare module "react-icons/lib" {
+  interface IconBaseProps {
+    className?: string;
+    style?: preact.JSX.CSSProperties | string;
+  }
+}
+
+export { PiArrowCircleUpDuotone as ArrowCircleUpIcon } from "react-icons/pi";
+export { PiArrowsClockwiseDuotone as ArrowsClockwiseIcon } from "react-icons/pi";
+export { PiArrowSquareOutDuotone as ArrowSquareOutIcon } from "react-icons/pi";
+export { PiCaretDownBold as CaretDownIcon } from "react-icons/pi";
+export { PiCaretLeftBold as CaretLeftIcon } from "react-icons/pi";
+export { PiCaretRightBold as CaretRightIcon } from "react-icons/pi";
+export { PiCaretUpBold as CaretUpIcon } from "react-icons/pi";
+export { PiCaretUpDownBold as CaretUpDownIcon } from "react-icons/pi";
+export { PiChartLineUpDuotone as ChartLineUpIcon } from "react-icons/pi";
+export { PiCheckBold as CheckBoldIcon } from "react-icons/pi";
+export { PiCheckCircleDuotone as CheckCircleIcon } from "react-icons/pi";
+export { PiCheckDuotone as CheckIcon } from "react-icons/pi";
+export { PiClipboardDuotone as ClipboardIcon } from "react-icons/pi";
+export { PiClockDuotone as ClockIcon } from "react-icons/pi";
+export { PiCloudArrowDownDuotone as CloudArrowDownIcon } from "react-icons/pi";
+export { PiCloudSunDuotone as CloudSunIcon } from "react-icons/pi";
+export { PiColumnsDuotone as ColumnsIcon } from "react-icons/pi";
+export { PiCubeDuotone as CubeIcon } from "react-icons/pi";
+export { PiDatabaseDuotone as DatabaseIcon } from "react-icons/pi";
+export { PiDeviceMobileDuotone as DeviceMobileIcon } from "react-icons/pi";
+export { PiDownloadSimpleDuotone as DownloadSimpleIcon } from "react-icons/pi";
+export { PiEnvelopeDuotone as EnvelopeIcon } from "react-icons/pi";
+export { PiEyeDuotone as EyeIcon } from "react-icons/pi";
+export { PiEyeSlashDuotone as EyeSlashIcon } from "react-icons/pi";
+export { PiFadersDuotone as FadersIcon } from "react-icons/pi";
+export { PiFolderOpenDuotone as FolderOpenIcon } from "react-icons/pi";
+export { PiFolderSimpleDuotone as FolderSimpleIcon } from "react-icons/pi";
+export { PiGaugeDuotone as GaugeIcon } from "react-icons/pi";
+export { PiGearDuotone as GearIcon } from "react-icons/pi";
+export { PiGiftDuotone as GiftIcon } from "react-icons/pi";
+export { PiGithubLogoDuotone as GithubLogoIcon } from "react-icons/pi";
+export { PiGlobeDuotone as GlobeIcon } from "react-icons/pi";
+export { PiGraphicsCardDuotone as GraphicsCardIcon } from "react-icons/pi";
+export { PiHammerDuotone as HammerIcon } from "react-icons/pi";
+export { PiHandshakeDuotone as HandshakeIcon } from "react-icons/pi";
+export { PiHardDrivesDuotone as HardDrivesIcon } from "react-icons/pi";
+export { PiHouseDuotone as HouseIcon } from "react-icons/pi";
+export { PiInfoDuotone as InfoIcon } from "react-icons/pi";
+export { PiKeyDuotone as KeyIcon } from "react-icons/pi";
+export { PiLightbulbDuotone as LightbulbIcon } from "react-icons/pi";
+export { PiListChecksDuotone as ListChecksIcon } from "react-icons/pi";
+export { PiLockDuotone as LockIcon } from "react-icons/pi";
+export { PiMagnifyingGlassDuotone as MagnifyingGlassIcon } from "react-icons/pi";
+export { PiNotePencilDuotone as NotePencilIcon } from "react-icons/pi";
+export { PiPackageDuotone as PackageIcon } from "react-icons/pi";
+export { PiPencilSimpleDuotone as PencilSimpleIcon } from "react-icons/pi";
+export { PiPlugDuotone as PlugIcon } from "react-icons/pi";
+export { PiPlusDuotone as PlusIcon } from "react-icons/pi";
+export { PiPulseDuotone as PulseIcon } from "react-icons/pi";
+export { PiQuestionDuotone as QuestionIcon } from "react-icons/pi";
+export { PiRocketLaunchDuotone as RocketLaunchIcon } from "react-icons/pi";
+export { PiShareNetworkDuotone as ShareNetworkIcon } from "react-icons/pi";
+export { PiShieldDuotone as ShieldIcon } from "react-icons/pi";
+export { PiSidebarDuotone as SidebarIcon } from "react-icons/pi";
+export { PiSignOutDuotone as SignOutIcon } from "react-icons/pi";
+export { PiStackDuotone as StackIcon } from "react-icons/pi";
+export { PiStarDuotone as StarIcon } from "react-icons/pi";
+export { PiTerminalWindowDuotone as TerminalWindowIcon } from "react-icons/pi";
+export { PiTextAlignCenterDuotone as TextAlignCenterIcon } from "react-icons/pi";
+export { PiTextAlignLeftDuotone as TextAlignLeftIcon } from "react-icons/pi";
+export { PiTextAlignRightDuotone as TextAlignRightIcon } from "react-icons/pi";
+export { PiTrashDuotone as TrashIcon } from "react-icons/pi";
+export { PiUserDuotone as UserIcon } from "react-icons/pi";
+export { PiWarningDuotone as WarningIcon } from "react-icons/pi";
+export { PiWarningOctagonDuotone as WarningOctagonIcon } from "react-icons/pi";
+export { PiXBold as XBoldIcon } from "react-icons/pi";
+export { PiXCircleDuotone as XCircleIcon } from "react-icons/pi";
+export { PiXDuotone as XIcon } from "react-icons/pi";
+
+// String-keyed lookup: surfaces store an icon name (e.g. `"CubeIcon"`)
+// in the DB or in realm.tsx manifests instead of importing the component.
+// `IconName` is the union of every named icon export above; `resolveIcon`
+// looks the name up via `import * as` and falls back to `FadersIcon` on
+// unknown/missing values.
+import * as Icons from "./icons.tsx";
+
+export type IconName = Exclude<keyof typeof Icons, "resolveIcon">;
+
+export function resolveIcon(
+  name: string | undefined,
+): (props: { className?: string }) => JSX.Element {
+  if (name && name in Icons && name !== "resolveIcon") {
+    return Icons[name as IconName] as unknown as (props: { className?: string }) => JSX.Element;
+  }
+  return Icons.FadersIcon as unknown as (props: { className?: string }) => JSX.Element;
+}

package/src/ui/components/image-posture.tsx

@@ -0,0 +1,85 @@
+import type { ComponentChildren } from "preact";
+import { CubeIcon, UserIcon, PlugIcon, FolderOpenIcon, ClockIcon } from "./icons.tsx";
+
+type ImagePostureProps = {
+  image: string;
+  digest: string;
+  runsAs: string;
+  runsAsRoot?: boolean;
+  exposes: string[];
+  volumes: string[];
+  age: string;
+};
+
+function Field({
+  icon,
+  label,
+  children,
+}: {
+  icon: ComponentChildren;
+  label: string;
+  children: ComponentChildren;
+}) {
+  return (
+    <div className="flex items-center gap-2.5 text-sm">
+      <span className="text-muted-foreground">{icon}</span>
+      <span className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[78px]">
+        {label}
+      </span>
+      <span className="font-mono text-xs text-foreground">{children}</span>
+    </div>
+  );
+}
+
+function ImagePosture({
+  image,
+  digest,
+  runsAs,
+  runsAsRoot,
+  exposes,
+  volumes,
+  age,
+}: ImagePostureProps) {
+  const shortDigest = digest.startsWith("sha256:") ? `${digest.slice(0, 19)}…` : digest;
+
+  return (
+    <div className="not-content bg-card rounded-3xl shadow-clay p-4 flex flex-col gap-3">
+      <div className="flex items-start gap-3">
+        <span className="text-perm mt-0.5">
+          <CubeIcon className="w-[22px] h-[22px]" />
+        </span>
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-bold text-foreground font-mono">{image}</h3>
+          <p className="text-[11px] mt-0.5 font-mono text-muted-foreground truncate">
+            {shortDigest}
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col gap-1.5 pl-0.5">
+        <Field icon={<UserIcon className="w-[18px] h-[18px]" />} label="Runs as">
+          <span className={runsAsRoot ? "text-danger font-bold" : ""}>{runsAs}</span>
+        </Field>
+        <Field icon={<PlugIcon className="w-[18px] h-[18px]" />} label="Exposes">
+          {exposes.length > 0 ? (
+            exposes.join(", ")
+          ) : (
+            <span className="text-muted-foreground">none</span>
+          )}
+        </Field>
+        <Field icon={<FolderOpenIcon className="w-[18px] h-[18px]" />} label="Volumes">
+          {volumes.length > 0 ? (
+            volumes.join(", ")
+          ) : (
+            <span className="text-muted-foreground">none</span>
+          )}
+        </Field>
+        <Field icon={<ClockIcon className="w-[18px] h-[18px]" />} label="Age">
+          {age}
+        </Field>
+      </div>
+    </div>
+  );
+}
+
+export { ImagePosture };
+export type { ImagePostureProps };

package/src/ui/components/input.tsx

@@ -0,0 +1,28 @@
+import { cn, type ElementProps } from "../utils.ts";
+
+type InputProps = ElementProps<"input"> & {
+  onValueChange?: (value: string) => void;
+};
+
+function Input({ className, type, onInput, onValueChange, ...props }: InputProps) {
+  const wrapped = onValueChange
+    ? (e: Event) => {
+        if (typeof onInput === "function") onInput(e as never);
+        onValueChange((e.currentTarget as HTMLInputElement).value);
+      }
+    : onInput;
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-2xl border border-border bg-secondary px-2.5 py-1 text-base shadow-sm transition-all outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:shadow focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:shadow-clay-dark-sm dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+      onInput={wrapped}
+    />
+  );
+}
+
+export { Input };

package/src/ui/components/label.tsx

@@ -0,0 +1,16 @@
+import { cn, type ElementProps } from "../utils.ts";
+
+function Label({ className, ...props }: ElementProps<"label">) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/src/ui/components/line-chart.tsx

@@ -0,0 +1,113 @@
+// Line + area charts. A single SVG <path> over an evenly-spaced value series,
+// drawn in a fixed viewBox and stretched to the container with
+// `preserveAspectRatio="none"`, so it's responsive without measuring; the stroke
+// keeps a constant width via `vector-effect="non-scaling-stroke"`. Colors default
+// to `--chart-1`, so both theme with the surface. `AreaChart` is `LineChart` plus
+// a translucent fill down to the baseline.
+
+import { cn } from "../utils.ts";
+
+interface LineChartProps {
+  /** y-values; x is the index (evenly spaced). Needs at least two points to draw. */
+  data: number[];
+  /** Rendered height in px. Width fills the container. Default 64. */
+  height?: number;
+  /** Stroke (and area fill) color. Default `--chart-1`. */
+  color?: string;
+  /** y-domain overrides; default to the data's own min/max. */
+  min?: number;
+  max?: number;
+  /** Stroke width in px (constant, not scaled). Default 2. */
+  strokeWidth?: number;
+  className?: string;
+}
+
+// Fixed vertical coordinate space; x spans 0..(len-1). preserveAspectRatio
+// stretches both to the container, so the actual pixel values don't matter.
+const VH = 100;
+
+function linePath(data: number[], min?: number, max?: number): { d: string; vw: number } | null {
+  if (data.length < 2) return null;
+  const vw = data.length - 1;
+  const lo = min ?? Math.min(...data);
+  const hi = max ?? Math.max(...data);
+  const span = hi - lo || 1; // flat series → a centered horizontal line
+  const y = (v: number) => (VH - ((v - lo) / span) * VH).toFixed(2);
+  let d = `M 0 ${y(data[0]!)}`;
+  for (let i = 1; i < data.length; i++) d += ` L ${i} ${y(data[i]!)}`;
+  return { d, vw };
+}
+
+export function LineChart({
+  data,
+  height = 64,
+  color = "var(--chart-1)",
+  min,
+  max,
+  strokeWidth = 2,
+  className,
+}: LineChartProps) {
+  const p = linePath(data, min, max);
+  return (
+    <svg
+      className={cn("block w-full", className)}
+      style={{ height }}
+      viewBox={`0 0 ${p ? p.vw : 1} ${VH}`}
+      preserveAspectRatio="none"
+      data-slot="line-chart"
+    >
+      {p && (
+        <path
+          d={p.d}
+          fill="none"
+          stroke={color}
+          stroke-width={strokeWidth}
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      )}
+    </svg>
+  );
+}
+
+export function AreaChart({
+  data,
+  height = 64,
+  color = "var(--chart-1)",
+  min,
+  max,
+  strokeWidth = 2,
+  className,
+}: LineChartProps) {
+  const p = linePath(data, min, max);
+  return (
+    <svg
+      className={cn("block w-full", className)}
+      style={{ height }}
+      viewBox={`0 0 ${p ? p.vw : 1} ${VH}`}
+      preserveAspectRatio="none"
+      data-slot="area-chart"
+    >
+      {p && (
+        <path
+          d={`${p.d} L ${p.vw} ${VH} L 0 ${VH} Z`}
+          stroke="none"
+          fill={color}
+          fill-opacity={0.15}
+        />
+      )}
+      {p && (
+        <path
+          d={p.d}
+          fill="none"
+          stroke={color}
+          stroke-width={strokeWidth}
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      )}
+    </svg>
+  );
+}

package/src/ui/components/page.tsx

@@ -0,0 +1,39 @@
+import type { ComponentChildren } from "preact";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  actions?: ComponentChildren;
+}
+
+export function PageHeader({ title, subtitle, actions }: PageHeaderProps) {
+  return (
+    <header class="flex items-start justify-between gap-4 border-b border-border px-6 py-5">
+      <div class="flex flex-col gap-1">
+        <h1 class="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+        {subtitle && <p class="text-sm text-muted-foreground">{subtitle}</p>}
+      </div>
+      {actions && <div class="flex items-center gap-2">{actions}</div>}
+    </header>
+  );
+}
+
+interface PageProps extends PageHeaderProps {
+  children?: ComponentChildren;
+}
+
+/**
+ * Full-bleed page layout. Wraps a `PageHeader` over a scrollable body
+ * slot. Used inside ui surface iframes (page surfaces are full-bleed
+ * by default, the (authed) layout owns sidebar + breadcrumb chrome
+ * outside the iframe). Also reused inside Home for native dashboard
+ * pages so the look matches.
+ */
+export function Page({ title, subtitle, actions, children }: PageProps) {
+  return (
+    <div class="flex h-full flex-col">
+      <PageHeader title={title} subtitle={subtitle} actions={actions} />
+      <main class="flex-1 overflow-auto">{children}</main>
+    </div>
+  );
+}