@nwire/studio 0.9.1

package/src/components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";

package/src/components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from "reka-ui";
+import { cn } from "@/lib/utils";
+import ScrollBar from "./ScrollBar.vue";
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { ScrollAreaScrollbar, ScrollAreaThumb } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    orientation: "vertical",
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none select-none transition-colors',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
+        props.class,
+      )
+    "
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

package/src/components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from "./ScrollArea.vue";
+export { default as ScrollBar } from "./ScrollBar.vue";

package/src/components/ui/separator/Separator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SeparatorProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<SeparatorProps & { class?: HTMLAttributes["class"] }>(), {
+  orientation: "horizontal",
+  decorative: true,
+});
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border',
+        props.orientation === 'horizontal' ? 'h-px w-full' : 'w-px h-full',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/components/ui/separator/index.ts

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";

package/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";

package/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<TabsRootProps>();
+const emits = defineEmits<TabsRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsContent } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TabsContent
+    :class="
+      cn(
+        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        props.class,
+      )
+    "
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsList } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsTrigger, useForwardProps } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>

package/src/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from "./Tabs.vue";
+export { default as TabsContent } from "./TabsContent.vue";
+export { default as TabsList } from "./TabsList.vue";
+export { default as TabsTrigger } from "./TabsTrigger.vue";

package/src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from "reka-ui";
+import { TooltipRoot, useForwardPropsEmits } from "reka-ui";
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from "reka-ui";
+import { TooltipProvider } from "reka-ui";
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from "reka-ui";
+import { TooltipTrigger } from "reka-ui";
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/components/ui/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";

package/src/composables/useCopy.ts

@@ -0,0 +1,31 @@
+import { ref } from "vue";
+
+/**
+ * Clipboard helper with a 1.5s "copied" flash for the UI.
+ *
+ *   const { copy, copied } = useCopy();
+ *   copy("hello");          // → fires navigator.clipboard.writeText
+ *   // copied.value flips to true for 1500ms
+ */
+export function useCopy(flashMs = 1500) {
+  const copied = ref(false);
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  async function copy(text: string): Promise<void> {
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      }
+      copied.value = true;
+      if (timeoutId) clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        copied.value = false;
+      }, flashMs);
+    } catch {
+      // Clipboard may be unavailable (iframe, insecure context, denied
+      // permission). Silently fail — the chip just won't flash.
+    }
+  }
+
+  return { copy, copied };
+}

package/src/lib/__tests__/normalize-cache.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect } from "vitest";
+import { normalizeCache } from "../normalize-cache";
+
+describe("normalizeCache", () => {
+  it("fills every expected array when input is empty", () => {
+    const { cache, missingFields } = normalizeCache({});
+    expect(cache).not.toBeNull();
+    expect(cache?.apps).toEqual([]);
+    expect(cache?.modules).toEqual([]);
+    expect(cache?.actions).toEqual([]);
+    expect(cache?.events).toEqual([]);
+    expect(cache?.actors).toEqual([]);
+    expect(cache?.projections).toEqual([]);
+    expect(cache?.queries).toEqual([]);
+    expect(cache?.resolvers).toEqual([]);
+    expect(cache?.routes).toEqual([]);
+    expect(cache?.workflows).toEqual([]);
+    expect(cache?.graph).toEqual({ events: [] });
+    expect(missingFields).toContain("resolvers");
+    expect(missingFields).toContain("workflows");
+    expect(missingFields).toContain("graph");
+  });
+
+  it("preserves arrays that ARE present", () => {
+    const input = {
+      apps: [{ name: "x", modules: [] }],
+      modules: [],
+      actions: [],
+      events: [],
+      actors: [],
+      projections: [],
+      queries: [],
+      resolvers: [{ operation: "Op", version: 1 }],
+      routes: [],
+      workflows: [],
+      externalCalls: [],
+      inboundWebhooks: [],
+      outboxes: [],
+      inboxes: [],
+      crons: [],
+      hooks: [],
+      plugins: [],
+      graph: { events: [] },
+      generatedAt: "2026-05-17T00:00:00Z",
+    };
+    const { cache, missingFields } = normalizeCache(input);
+    expect(cache?.apps).toEqual(input.apps);
+    expect(cache?.resolvers).toEqual(input.resolvers);
+    expect(missingFields).toEqual([]);
+  });
+
+  it("reports the exact list of missing array fields", () => {
+    const { missingFields } = normalizeCache({
+      apps: [],
+      modules: [],
+      actions: [],
+      events: [],
+      actors: [],
+      projections: [],
+      queries: [],
+      // resolvers + workflows + graph missing
+      routes: [],
+      externalCalls: [],
+      inboundWebhooks: [],
+      outboxes: [],
+      inboxes: [],
+      crons: [],
+      generatedAt: "2026-05-17T00:00:00Z",
+    });
+    expect([...missingFields].sort()).toEqual([
+      "graph",
+      "hooks",
+      "plugins",
+      "resolvers",
+      "workflows",
+    ]);
+  });
+
+  it("ignores non-array values masquerading as the field", () => {
+    const { cache, missingFields } = normalizeCache({ resolvers: "not an array" });
+    expect(cache?.resolvers).toEqual([]);
+    expect(missingFields).toContain("resolvers");
+  });
+
+  it("returns null + fatal error when input is not an object", () => {
+    expect(normalizeCache(null).cache).toBeNull();
+    expect(normalizeCache(null).fatalError).toMatch(/not a JSON object/i);
+    expect(normalizeCache([]).cache).toBeNull();
+    expect(normalizeCache("oops").cache).toBeNull();
+    expect(normalizeCache(42).cache).toBeNull();
+  });
+
+  it("synthesises generatedAt when missing", () => {
+    const { cache, missingFields } = normalizeCache({});
+    expect(cache?.generatedAt).toBeTypeOf("string");
+    expect(missingFields).toContain("generatedAt");
+  });
+
+  it("handles graph.events missing while graph exists", () => {
+    const { cache, missingFields } = normalizeCache({ graph: {} });
+    expect(cache?.graph).toEqual({ events: [] });
+    expect(missingFields).toContain("graph.events");
+  });
+});