@nwire/studio 0.9.1

package/src/components/FilterInput.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+/**
+ * Filter input — shadcn-vue's `Input` with a Lucide search icon. Two-way
+ * bound via v-model. `compact` shrinks the wrapper to a sidebar-friendly
+ * 18rem.
+ */
+import { Search } from "lucide-vue-next";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+defineProps<{
+  modelValue: string;
+  placeholder?: string;
+  compact?: boolean;
+}>();
+
+defineEmits<{ "update:modelValue": [value: string] }>();
+</script>
+
+<template>
+  <div :class="cn('relative', compact ? 'w-72' : 'w-full')">
+    <Search
+      class="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500 pointer-events-none"
+    />
+    <Input
+      :model-value="modelValue"
+      :placeholder="placeholder ?? 'filter…'"
+      data-testid="filter-input"
+      class="pl-7 h-9 text-sm bg-zinc-900 border-zinc-800 placeholder:text-zinc-600 focus-visible:border-zinc-600 focus-visible:ring-0"
+      @update:model-value="(v: string | number) => $emit('update:modelValue', String(v))"
+    />
+  </div>
+</template>

package/src/components/JsonView.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import JsonView from "./JsonView.vue";
+
+const meta: Meta<typeof JsonView> = {
+  title: "Components/JsonView",
+  component: JsonView,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof JsonView>;
+
+export const ZodSchema: Story = {
+  args: {
+    label: "Body schema",
+    value: {
+      type: "object",
+      properties: {
+        postId: { type: "string" },
+        authorId: { type: "string" },
+        body: { type: "string", minLength: 1, maxLength: 5000 },
+      },
+      required: ["authorId", "body"],
+    },
+  },
+};
+
+export const Empty: Story = {
+  args: { label: "Empty value", value: undefined },
+};
+
+export const Capped: Story = {
+  args: {
+    label: "Capped at 8 lines",
+    maxLines: 8,
+    value: Array.from({ length: 30 }, (_, i) => ({ id: `t-${i}`, status: "open" })),
+  },
+};

package/src/components/JsonView.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+/**
+ * Pretty-printed JSON inside a card. Used for schemas, payloads, and any
+ * other small JSON payload Studio surfaces. Indentation locked at 2 spaces.
+ */
+import { computed } from "vue";
+
+const props = defineProps<{
+  /** Anything JSON-serializable. `undefined` renders an empty card. */
+  value: unknown;
+  /** Heading shown above the card. Optional. */
+  label?: string;
+  /** Cap rendering at N lines (CSS overflow); 0 = unlimited. Default: 0. */
+  maxLines?: number;
+}>();
+
+const text = computed(() =>
+  props.value === undefined ? "" : JSON.stringify(props.value, null, 2),
+);
+</script>
+
+<template>
+  <div class="space-y-2">
+    <h3 v-if="label" class="text-xs uppercase tracking-wide text-zinc-500">
+      {{ label }}
+    </h3>
+    <pre
+      data-testid="json-view"
+      class="text-xs bg-zinc-950 border border-zinc-800 rounded p-3 overflow-auto"
+      :style="maxLines ? `max-height: ${maxLines * 1.5}em` : ''"
+      >{{ text }}</pre
+    >
+  </div>
+</template>

package/src/components/KindBadge.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import KindBadge from "./KindBadge.vue";
+
+const meta: Meta<typeof KindBadge> = {
+  title: "Components/KindBadge",
+  component: KindBadge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: [
+        "neutral",
+        "info",
+        "success",
+        "warning",
+        "danger",
+        "muted",
+        "public",
+        "private",
+        "active",
+        "deprecated",
+        "sunset",
+      ],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof KindBadge>;
+
+export const Default: Story = {
+  args: { variant: "neutral" },
+  render: (args) => ({
+    components: { KindBadge },
+    setup: () => ({ args }),
+    template: `<KindBadge v-bind="args">submissions</KindBadge>`,
+  }),
+};
+
+export const AllVariants: Story = {
+  render: () => ({
+    components: { KindBadge },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <KindBadge variant="neutral">neutral</KindBadge>
+        <KindBadge variant="info">info</KindBadge>
+        <KindBadge variant="success">success</KindBadge>
+        <KindBadge variant="warning">warning</KindBadge>
+        <KindBadge variant="danger">danger</KindBadge>
+        <KindBadge variant="muted">muted</KindBadge>
+        <KindBadge variant="public">public</KindBadge>
+        <KindBadge variant="private">private</KindBadge>
+        <KindBadge variant="active">active</KindBadge>
+        <KindBadge variant="deprecated">deprecated</KindBadge>
+        <KindBadge variant="sunset">sunset</KindBadge>
+      </div>
+    `,
+  }),
+};
+
+export const ResolverStatuses: Story = {
+  render: () => ({
+    components: { KindBadge },
+    template: `
+      <div class="flex flex-wrap gap-2">
+        <KindBadge variant="active">active</KindBadge>
+        <KindBadge variant="deprecated">deprecated</KindBadge>
+        <KindBadge variant="sunset">sunset</KindBadge>
+      </div>
+    `,
+  }),
+};

package/src/components/KindBadge.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * Semantic badge — wraps shadcn-vue's `Badge` with the Nwire-specific
+ * palette (active/deprecated/sunset/public/private/etc.). shadcn's four
+ * built-in variants don't carry domain meaning, so we layer our colour
+ * tokens via `class` instead of forking the base component.
+ */
+import { computed } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  variant?:
+    | "neutral"
+    | "info"
+    | "success"
+    | "warning"
+    | "danger"
+    | "muted"
+    | "public"
+    | "private"
+    | "active"
+    | "deprecated"
+    | "sunset";
+  uppercase?: boolean;
+}>();
+
+const variant = computed(() => props.variant ?? "neutral");
+
+const palette: Record<string, string> = {
+  neutral: "bg-zinc-900 border-zinc-800 text-zinc-300",
+  info: "bg-blue-950/50 border-blue-900 text-blue-300",
+  success: "bg-emerald-950/50 border-emerald-900 text-emerald-300",
+  warning: "bg-amber-950/50 border-amber-900 text-amber-300",
+  danger: "bg-rose-950/50 border-rose-900 text-rose-300",
+  muted: "bg-zinc-950 border-zinc-900 text-zinc-500",
+  public: "bg-emerald-950/50 border-emerald-900 text-emerald-300",
+  private: "bg-zinc-950 border-zinc-900 text-zinc-500",
+  active: "bg-emerald-950/50 border-emerald-900 text-emerald-300",
+  deprecated: "bg-amber-950/50 border-amber-900 text-amber-300",
+  sunset: "bg-rose-950/50 border-rose-900 text-rose-300",
+};
+</script>
+
+<template>
+  <Badge
+    variant="outline"
+    :class="
+      cn(
+        'rounded text-[10px] px-2 py-0.5 font-normal',
+        palette[variant],
+        (uppercase ?? true) ? 'uppercase tracking-wide' : '',
+      )
+    "
+    data-testid="kind-badge"
+  >
+    <slot />
+  </Badge>
+</template>

package/src/components/ListRow.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { Network, Zap, Globe, Lock } from "lucide-vue-next";
+import ListRow from "./ListRow.vue";
+import KindBadge from "./KindBadge.vue";
+
+const meta: Meta<typeof ListRow> = {
+  title: "Components/ListRow",
+  component: ListRow,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof ListRow>;
+
+export const Resolver: Story = {
+  render: () => ({
+    components: { ListRow, KindBadge, Network },
+    template: `
+      <div class="bg-zinc-950 border border-zinc-800 rounded w-[480px]">
+        <ListRow>
+          <template #title>
+            <Network class="w-3 h-3 text-rose-400 shrink-0" />
+            <span class="font-mono text-sm">moderation.SubmitPost</span>
+            <span class="text-[10px] text-zinc-500 font-mono">v1</span>
+          </template>
+          <template #meta>
+            <KindBadge variant="active">active</KindBadge>
+            <span class="text-[10px] text-zinc-500">moderation-queue</span>
+          </template>
+          <template #description>Marta submits a post for review.</template>
+        </ListRow>
+      </div>
+    `,
+  }),
+};
+
+export const ActionWithVisibility: Story = {
+  render: () => ({
+    components: { ListRow, Zap, Globe, Lock },
+    template: `
+      <div class="bg-zinc-950 border border-zinc-800 rounded w-[480px]">
+        <ListRow selected>
+          <template #title>
+            <Zap class="w-3 h-3 text-amber-400 shrink-0" />
+            <span class="font-mono text-sm">moderation.submit-post</span>
+          </template>
+          <template #meta>
+            <Globe class="w-3 h-3 text-emerald-400" />
+            <span class="text-[10px] text-zinc-500">moderation-queue</span>
+          </template>
+          <template #description>Marta sends a freshly-written post for human review.</template>
+        </ListRow>
+      </div>
+    `,
+  }),
+};

package/src/components/ListRow.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/**
+ * One row in a master list — shadcn-vue's `Button` with the `ghost`
+ * variant gives us the focus ring + keyboard accessibility for free, and
+ * we just override its layout to be a full-width left-aligned card.
+ *
+ *   <ListRow :selected="…" @click="…">
+ *     <template #title>...</template>
+ *     <template #meta>...badges...</template>
+ *     <template #description>...</template>
+ *   </ListRow>
+ */
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+defineProps<{
+  selected?: boolean;
+}>();
+defineEmits<{ click: [] }>();
+</script>
+
+<template>
+  <Button
+    variant="ghost"
+    :class="
+      cn(
+        'w-full h-auto justify-start text-left px-4 py-2.5 rounded-none border-b border-zinc-900 hover:bg-zinc-900/50 focus-visible:ring-1 focus-visible:ring-zinc-700 focus-visible:ring-offset-0',
+        selected ? 'bg-zinc-900' : '',
+      )
+    "
+    data-testid="list-row"
+    @click="$emit('click')"
+  >
+    <div class="w-full flex flex-col gap-1 min-w-0">
+      <div class="w-full flex items-center justify-between gap-2">
+        <div class="flex items-center gap-2 min-w-0">
+          <slot name="title" />
+        </div>
+        <div class="flex items-center gap-1 shrink-0">
+          <slot name="meta" />
+        </div>
+      </div>
+      <div v-if="$slots.description" class="text-xs text-zinc-500 line-clamp-2 w-full font-normal">
+        <slot name="description" />
+      </div>
+    </div>
+  </Button>
+</template>

package/src/components/MasterDetail.stories.ts

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { ref } from "vue";
+import { Network } from "lucide-vue-next";
+import MasterDetail from "./MasterDetail.vue";
+import ListRow from "./ListRow.vue";
+import FilterInput from "./FilterInput.vue";
+import KindBadge from "./KindBadge.vue";
+
+const meta: Meta<typeof MasterDetail> = {
+  title: "Components/MasterDetail",
+  component: MasterDetail,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj<typeof MasterDetail>;
+
+const sample = [
+  { id: "1", name: "moderation.SubmitPost", status: "active", summary: "Marta submits a post" },
+  { id: "2", name: "moderation.ClaimForReview", status: "active", summary: "Dina claims a post" },
+  {
+    id: "3",
+    name: "moderation.ApprovePost",
+    status: "deprecated",
+    summary: "Dina approves a post",
+  },
+  { id: "4", name: "moderation.RejectPost", status: "sunset", summary: "Dina rejects a post" },
+];
+
+export const ResolversExample: Story = {
+  render: () => ({
+    components: { MasterDetail, ListRow, FilterInput, KindBadge, Network },
+    setup() {
+      const filter = ref("");
+      const selected = ref<string | null>("1");
+      const detail = () => sample.find((s) => s.id === selected.value);
+      return { filter, selected, sample, detail, Network };
+    },
+    template: `
+      <div style="height: 80vh" class="border border-zinc-800 rounded">
+        <MasterDetail>
+          <template #listHeader>
+            <FilterInput v-model="filter" placeholder="filter…" />
+          </template>
+          <template #list>
+            <ListRow
+              v-for="s in sample"
+              :key="s.id"
+              :selected="selected === s.id"
+              @click="selected = s.id"
+            >
+              <template #title>
+                <Network class="w-3 h-3 text-rose-400 shrink-0" />
+                <span class="font-mono text-sm truncate">{{ s.name }}</span>
+              </template>
+              <template #meta>
+                <KindBadge :variant="s.status">{{ s.status }}</KindBadge>
+              </template>
+              <template #description>{{ s.summary }}</template>
+            </ListRow>
+          </template>
+          <template v-if="detail()" #detail>
+            <div class="p-6">
+              <h2 class="font-mono text-xl">{{ detail()?.name }}</h2>
+              <p class="text-sm text-zinc-400 mt-2">{{ detail()?.summary }}</p>
+            </div>
+          </template>
+          <template #empty>Select an item.</template>
+        </MasterDetail>
+      </div>
+    `,
+  }),
+};

package/src/components/MasterDetail.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * Two-pane master/detail layout used by Actions, Events, Resolvers,
+ * Workflows. The list pane uses shadcn-vue's `ScrollArea` so long lists
+ * get a styled scrollbar consistent with the rest of the UI.
+ *
+ *   <MasterDetail>
+ *     <template #listHeader>...filter input...</template>
+ *     <template #list>...items...</template>
+ *     <template #detail>...selected item...</template>
+ *     <template #empty>"Select an item."</template>
+ *   </MasterDetail>
+ */
+import { ScrollArea } from "@/components/ui/scroll-area";
+</script>
+
+<template>
+  <div class="h-full flex" data-testid="master-detail">
+    <div class="w-2/5 border-r border-zinc-800 flex flex-col">
+      <div class="border-b border-zinc-800 px-4 py-3 shrink-0">
+        <slot name="listHeader" />
+      </div>
+      <ScrollArea class="flex-1" data-testid="master-list">
+        <slot name="list" />
+      </ScrollArea>
+    </div>
+    <ScrollArea class="flex-1" data-testid="detail-pane">
+      <slot name="detail">
+        <div class="p-6 text-zinc-500 text-sm">
+          <slot name="empty">Select an item.</slot>
+        </div>
+      </slot>
+    </ScrollArea>
+  </div>
+</template>

package/src/components/MonacoViewer.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/**
+ * `MonacoViewer` — read-only code view backed by Monaco Editor. The
+ * editor module is lazy-imported the first time the component mounts;
+ * subsequent instances share the loaded module. ~3MB on first open,
+ * negligible after.
+ *
+ *   <MonacoViewer
+ *     :content="text"
+ *     language="typescript"
+ *     :highlight-line="42"
+ *   />
+ *
+ * Designed for source-viewer drawers (the file referenced by a
+ * `SourcePill`), not for editing. Editing is out of scope — readers
+ * should jump to their IDE for that.
+ */
+import { onMounted, onBeforeUnmount, ref, watch } from "vue";
+
+const props = defineProps<{
+  /** File contents to display. */
+  content: string;
+  /** Monaco language id (`typescript`, `javascript`, `json`, `markdown`, ...). */
+  language?: string;
+  /** Line to scroll into view + visually mark. 1-based. */
+  highlightLine?: number;
+  /** Override max height; default is the parent's height. */
+  maxHeight?: string;
+}>();
+
+const container = ref<HTMLElement>();
+let editor:
+  | {
+      dispose(): void;
+      setValue(v: string): void;
+      revealLineInCenter(l: number): void;
+      updateOptions(o: Record<string, unknown>): void;
+    }
+  | undefined;
+let monacoModule: typeof import("monaco-editor") | undefined;
+let decorationIds: string[] = [];
+
+async function ensureMonaco(): Promise<typeof import("monaco-editor")> {
+  if (!monacoModule) {
+    monacoModule = await import("monaco-editor");
+    // Disable web workers — they need a worker URL we don't ship.
+    // Falls back to running languages in the main thread (fine for read-only).
+    (self as unknown as { MonacoEnvironment: unknown }).MonacoEnvironment = {
+      getWorker() {
+        return {
+          postMessage() {},
+          terminate() {},
+          addEventListener() {},
+          removeEventListener() {},
+        };
+      },
+    };
+  }
+  return monacoModule;
+}
+
+async function mount() {
+  if (!container.value) return;
+  const monaco = await ensureMonaco();
+  editor = monaco.editor.create(container.value, {
+    value: props.content,
+    language: props.language ?? "typescript",
+    readOnly: true,
+    domReadOnly: true,
+    minimap: { enabled: false },
+    scrollBeyondLastLine: false,
+    automaticLayout: true,
+    fontSize: 12,
+    lineNumbers: "on",
+    folding: true,
+    renderLineHighlight: "all",
+    scrollbar: { vertical: "auto", horizontal: "auto" },
+    theme: "vs-dark",
+    overviewRulerBorder: false,
+    glyphMargin: false,
+    contextmenu: false,
+  });
+  applyHighlight();
+}
+
+function applyHighlight() {
+  if (!editor || !monacoModule || !props.highlightLine) return;
+  const line = props.highlightLine;
+  decorationIds = (
+    editor as unknown as { deltaDecorations(o: string[], n: unknown[]): string[] }
+  ).deltaDecorations(decorationIds, [
+    {
+      range: new monacoModule.Range(line, 1, line, 1),
+      options: {
+        isWholeLine: true,
+        className: "monaco-source-highlight",
+        marginClassName: "monaco-source-highlight-margin",
+      },
+    },
+  ]);
+  editor.revealLineInCenter(line);
+}
+
+onMounted(() => {
+  void mount();
+});
+
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.dispose();
+    editor = undefined;
+  }
+});
+
+watch(
+  () => props.content,
+  (v) => {
+    editor?.setValue(v ?? "");
+    applyHighlight();
+  },
+);
+
+watch(
+  () => props.highlightLine,
+  () => applyHighlight(),
+);
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="w-full h-full min-h-[200px] rounded-md overflow-hidden border border-zinc-800"
+    :style="maxHeight ? { maxHeight } : {}"
+  />
+</template>
+
+<style>
+/* Loaded globally so monaco's injected DOM picks it up. */
+.monaco-source-highlight {
+  background-color: rgba(249, 115, 22, 0.1);
+  border-left: 2px solid rgba(249, 115, 22, 0.7);
+}
+</style>

package/src/components/PageHeader.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { Network, GitBranch } from "lucide-vue-next";
+import PageHeader from "./PageHeader.vue";
+
+const meta: Meta<typeof PageHeader> = {
+  title: "Components/PageHeader",
+  component: PageHeader,
+  tags: ["autodocs"],
+};
+export default meta;
+
+type Story = StoryObj<typeof PageHeader>;
+
+export const Basic: Story = {
+  args: { title: "Modules" },
+};
+
+export const WithSubtitle: Story = {
+  args: {
+    title: "Resolvers",
+    subtitle: "Interface layer — every operation exposed to transports",
+  },
+};
+
+export const WithIconAndCount: Story = {
+  args: {
+    title: "Resolvers",
+    subtitle: "Interface layer — every operation",
+    icon: Network,
+    iconColor: "text-rose-400",
+    count: 4,
+    total: 17,
+  },
+};
+
+export const Workflows: Story = {
+  args: {
+    title: "Workflows",
+    subtitle: "Event-driven side effects — reactions, translators, sagas",
+    icon: GitBranch,
+    iconColor: "text-violet-400",
+    count: 7,
+    total: 7,
+  },
+};

package/src/components/PageHeader.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Page header — title + icon + optional count + slot for actions.
+ *
+ * Used at the top of every Studio data page so the chrome looks the same:
+ *   title, optional Lucide icon, optional "x / y" count badge, action slot.
+ */
+import type { FunctionalComponent } from "vue";
+
+defineProps<{
+  /** Page title — e.g. "Resolvers". */
+  title: string;
+  /** Optional subtitle / description shown below the title. */
+  subtitle?: string;
+  /** Lucide icon component, e.g. `Globe`. */
+  icon?: FunctionalComponent;
+  /** Tailwind text color class for the icon. Default: `text-zinc-300`. */
+  iconColor?: string;
+  /** Filtered count shown as `count / total`. */
+  count?: number;
+  /** Total count for the `count / total` badge. */
+  total?: number;
+}>();
+</script>
+
+<template>
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-semibold tracking-tight flex items-center gap-2">
+        <component :is="icon" v-if="icon" class="w-6 h-6" :class="iconColor ?? 'text-zinc-300'" />
+        {{ title }}
+      </h1>
+      <p v-if="subtitle" class="text-sm text-zinc-500 mt-1">{{ subtitle }}</p>
+    </div>
+    <div class="flex items-center gap-3 shrink-0">
+      <span
+        v-if="total !== undefined"
+        class="text-xs text-zinc-500 font-mono"
+        data-testid="page-count"
+      >
+        {{ count ?? total }} / {{ total }}
+      </span>
+      <slot name="actions" />
+    </div>
+  </div>
+</template>