@nwire/studio 0.9.1

package/src/components/SchemaNode.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * Recursive renderer for `SchemaTree`. One node per call; nested objects/
+ * arrays/anyOf are rendered by re-entering this component on their
+ * children. Indentation comes from the `depth` prop.
+ */
+import { computed, ref } from "vue";
+import { ChevronRight, ChevronDown } from "lucide-vue-next";
+
+interface JsonSchemaNode {
+  type?: string | string[];
+  properties?: Record<string, JsonSchemaNode>;
+  required?: readonly string[];
+  items?: JsonSchemaNode | readonly JsonSchemaNode[];
+  enum?: readonly unknown[];
+  const?: unknown;
+  anyOf?: readonly JsonSchemaNode[];
+  oneOf?: readonly JsonSchemaNode[];
+  description?: string;
+  format?: string;
+  pattern?: string;
+  minLength?: number;
+  maxLength?: number;
+  minimum?: number;
+  maximum?: number;
+  default?: unknown;
+  $ref?: string;
+  [k: string]: unknown;
+}
+
+const props = defineProps<{
+  /** The schema node to render. */
+  node: JsonSchemaNode | undefined;
+  /** Root schema — used for $ref resolution. */
+  root: JsonSchemaNode | undefined;
+  /** Path of keys leading to this node — used for display + collapse state. */
+  path: readonly string[];
+  /** Render depth — controls indentation. */
+  depth: number;
+  /** True when this node is a required field of its parent object. */
+  required?: boolean;
+  /** Field name (when this node is a property of an object). */
+  fieldName?: string;
+}>();
+
+const expanded = ref(props.depth < 2);
+
+// Resolve $ref against the root schema's definitions.
+const resolved = computed<JsonSchemaNode | undefined>(() => {
+  let n = props.node;
+  if (!n) return undefined;
+  if (n.$ref && typeof n.$ref === "string" && props.root) {
+    const refName = n.$ref.replace(/^#\/definitions\//, "");
+    const defs = (props.root.definitions ?? {}) as Record<string, JsonSchemaNode>;
+    n = defs[refName] ?? n;
+  }
+  return n;
+});
+
+const kind = computed<string>(() => {
+  const n = resolved.value;
+  if (!n) return "unknown";
+  if (n.enum) return "enum";
+  if (n.anyOf) return "anyOf";
+  if (n.oneOf) return "oneOf";
+  if (n.const !== undefined) return "const";
+  if (Array.isArray(n.type)) return n.type.join(" | ");
+  return n.type ?? "any";
+});
+
+const isObject = computed(() => kind.value === "object" && resolved.value?.properties);
+const isArray = computed(() => kind.value === "array" && resolved.value?.items);
+const isExpandable = computed(
+  () =>
+    isObject.value ||
+    isArray.value ||
+    Boolean(resolved.value?.anyOf?.length) ||
+    Boolean(resolved.value?.oneOf?.length),
+);
+
+const constraints = computed<string[]>(() => {
+  const n = resolved.value;
+  if (!n) return [];
+  const out: string[] = [];
+  if (n.format) out.push(n.format);
+  if (n.pattern) out.push(`pattern: /${n.pattern}/`);
+  if (typeof n.minLength === "number") out.push(`min ${n.minLength}`);
+  if (typeof n.maxLength === "number") out.push(`max ${n.maxLength}`);
+  if (typeof n.minimum === "number") out.push(`≥ ${n.minimum}`);
+  if (typeof n.maximum === "number") out.push(`≤ ${n.maximum}`);
+  if (n.default !== undefined) out.push(`default: ${JSON.stringify(n.default)}`);
+  return out;
+});
+
+const enumValues = computed<readonly unknown[]>(() => resolved.value?.enum ?? []);
+
+const propertyEntries = computed(() => {
+  const n = resolved.value;
+  if (!n?.properties) return [];
+  const required = new Set(n.required ?? []);
+  return Object.entries(n.properties).map(([key, child]) => ({
+    key,
+    child: child as JsonSchemaNode,
+    required: required.has(key),
+  }));
+});
+
+const itemSchema = computed<JsonSchemaNode | undefined>(() => {
+  const n = resolved.value;
+  if (!n) return undefined;
+  if (Array.isArray(n.items)) return undefined; // tuple shape — render later
+  return n.items as JsonSchemaNode | undefined;
+});
+
+const unionOptions = computed<readonly JsonSchemaNode[]>(() => {
+  return resolved.value?.anyOf ?? resolved.value?.oneOf ?? [];
+});
+
+const toggle = () => {
+  if (isExpandable.value) expanded.value = !expanded.value;
+};
+</script>
+
+<template>
+  <div :style="{ paddingLeft: depth > 0 ? '0.75rem' : '0' }">
+    <!-- Header row — field name + type + chips -->
+    <div
+      class="flex items-baseline gap-2 leading-snug"
+      :class="
+        isExpandable ? 'cursor-pointer hover:bg-zinc-800/50 rounded-sm px-1 -mx-1' : 'px-1 -mx-1'
+      "
+      @click="toggle"
+    >
+      <ChevronDown v-if="isExpandable && expanded" class="h-3 w-3 mt-0.5 text-zinc-500 shrink-0" />
+      <ChevronRight v-else-if="isExpandable" class="h-3 w-3 mt-0.5 text-zinc-500 shrink-0" />
+      <span v-else class="w-3 shrink-0" />
+
+      <span v-if="fieldName" class="text-zinc-200">
+        {{ fieldName }}<span v-if="required" class="text-orange-400 ml-0.5">*</span>
+      </span>
+      <span class="text-violet-400 text-[11px]">{{ kind }}</span>
+      <span
+        v-for="c in constraints"
+        :key="c"
+        class="text-[10px] text-zinc-500 bg-zinc-800/60 rounded px-1.5 py-0.5"
+      >
+        {{ c }}
+      </span>
+      <span
+        v-if="resolved?.description"
+        class="text-zinc-500 italic font-sans text-[11px] truncate"
+      >
+        — {{ resolved.description }}
+      </span>
+    </div>
+
+    <!-- Body — expand for object/array/enum/union -->
+    <div v-if="expanded && isExpandable" class="mt-1 border-l border-zinc-800/60 ml-1.5">
+      <!-- Object properties -->
+      <template v-if="isObject">
+        <SchemaNode
+          v-for="entry in propertyEntries"
+          :key="entry.key"
+          :node="entry.child"
+          :root="root"
+          :path="[...path, entry.key]"
+          :depth="depth + 1"
+          :field-name="entry.key"
+          :required="entry.required"
+        />
+      </template>
+
+      <!-- Array item -->
+      <SchemaNode
+        v-else-if="isArray && itemSchema"
+        :node="itemSchema"
+        :root="root"
+        :path="[...path, '[]']"
+        :depth="depth + 1"
+        field-name="(item)"
+      />
+
+      <!-- Union (anyOf / oneOf) -->
+      <template v-else-if="unionOptions.length">
+        <SchemaNode
+          v-for="(opt, i) in unionOptions"
+          :key="i"
+          :node="opt"
+          :root="root"
+          :path="[...path, `#${i}`]"
+          :depth="depth + 1"
+          :field-name="`option ${i + 1}`"
+        />
+      </template>
+    </div>
+
+    <!-- Enum values (collapse-friendly, but always visible) -->
+    <div v-if="enumValues.length" class="ml-4 mt-1 flex flex-wrap gap-1">
+      <span
+        v-for="(v, i) in enumValues"
+        :key="i"
+        class="text-[10px] bg-zinc-800/60 border border-zinc-700/60 text-emerald-400 rounded px-1.5 py-0.5"
+      >
+        {{ typeof v === "string" ? `"${v}"` : String(v) }}
+      </span>
+    </div>
+  </div>
+</template>

package/src/components/SchemaTree.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+/**
+ * `SchemaTree` — render a Zod-derived JSON Schema as a typed structured
+ * tree. Replaces raw `<pre>{JSON.stringify(schema)}</pre>` blocks.
+ *
+ *   <SchemaTree :schema="action.schema" />
+ *
+ * Recognizes the schema shapes our scanner emits via
+ * `zod-to-json-schema`:
+ *   - `type: "object"` with `properties` + `required` → expandable rows
+ *   - `type: "array"` with `items` → wraps the item tree
+ *   - `type: "string" | "number" | "boolean" | "null"` → leaf
+ *   - `enum: […]` → enum chip
+ *   - `anyOf` / `oneOf` → "one of" panel with each option as a sub-tree
+ *   - `$ref` → resolves against the top-level schema's `definitions`
+ *
+ * Designed for read-only inspection. The companion `SchemaForm` (Try page)
+ * builds editors from the same shape.
+ */
+import { computed } from "vue";
+import SchemaNode from "./SchemaNode.vue";
+
+const props = defineProps<{
+  /** A JSON Schema (the scanner already converted Zod → JSON Schema). */
+  schema: unknown;
+  /** Optional heading. */
+  label?: string;
+}>();
+
+// The scanner sometimes wraps top-level types under `definitions`; pull the
+// root in if so.
+const rootSchema = computed(() => {
+  const s = props.schema as Record<string, unknown> | undefined;
+  if (!s) return undefined;
+  if (s.$ref && typeof s.$ref === "string") {
+    const refName = s.$ref.replace(/^#\/definitions\//, "");
+    const defs = (s.definitions ?? {}) as Record<string, unknown>;
+    return (defs[refName] ?? s) as Record<string, unknown>;
+  }
+  return s;
+});
+
+const empty = computed(() => {
+  if (!rootSchema.value) return true;
+  if (typeof rootSchema.value !== "object") return true;
+  return Object.keys(rootSchema.value as Record<string, unknown>).length === 0;
+});
+</script>
+
+<template>
+  <div class="space-y-2">
+    <h3 v-if="label" class="text-xs uppercase tracking-wide text-zinc-500">
+      {{ label }}
+    </h3>
+    <div
+      v-if="empty"
+      class="rounded-md border border-zinc-800 bg-zinc-900/30 px-3 py-2 text-xs italic text-zinc-500"
+    >
+      No schema declared.
+    </div>
+    <div v-else class="rounded-md border border-zinc-800 bg-zinc-900/30 p-3 font-mono text-xs">
+      <SchemaNode :node="rootSchema" :root="rootSchema" :path="[]" :depth="0" />
+    </div>
+  </div>
+</template>

package/src/components/SourceDrawer.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+/**
+ * `SourceDrawer` — right-side panel that fetches a source file (via the
+ * `/__nwire/source` Studio middleware) and displays it in a `MonacoViewer`
+ * with the relevant line highlighted.
+ *
+ *   <SourceDrawer :source="selectedSource" @close="selectedSource = null" />
+ *
+ * The fetch goes through Studio's Vite middleware so we never need a
+ * separate dev server; the middleware reads the file from disk and
+ * returns `{ content, language }`. Permission scope is the repo root
+ * — the middleware refuses paths outside the cwd.
+ */
+import { ref, watch } from "vue";
+import { X } from "lucide-vue-next";
+import MonacoViewer from "./MonacoViewer.vue";
+import SourcePill from "./SourcePill.vue";
+
+const props = defineProps<{
+  source?: { file: string; line: number; column?: number } | null;
+}>();
+
+const emit = defineEmits<{ (e: "close"): void }>();
+
+const content = ref<string>("");
+const language = ref<string>("typescript");
+const loading = ref(false);
+const error = ref<string | undefined>();
+
+async function load(file: string) {
+  loading.value = true;
+  error.value = undefined;
+  try {
+    const res = await fetch(`/__nwire/source?path=${encodeURIComponent(file)}`);
+    if (!res.ok) {
+      error.value = `${res.status} ${res.statusText}`;
+      content.value = "";
+      return;
+    }
+    const body = (await res.json()) as { content: string; language?: string };
+    content.value = body.content;
+    language.value = body.language ?? "typescript";
+  } catch (err) {
+    error.value = (err as Error).message;
+    content.value = "";
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.source?.file,
+  (file) => {
+    if (file) void load(file);
+    else content.value = "";
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-transform duration-200"
+      enter-from-class="translate-x-full"
+      enter-to-class="translate-x-0"
+      leave-active-class="transition-transform duration-150"
+      leave-from-class="translate-x-0"
+      leave-to-class="translate-x-full"
+    >
+      <aside
+        v-if="source"
+        class="fixed top-0 right-0 z-50 h-screen w-[min(720px,80vw)] bg-zinc-950 border-l border-zinc-800 shadow-2xl flex flex-col"
+      >
+        <header class="flex items-center justify-between border-b border-zinc-800 px-4 py-3">
+          <div class="flex items-center gap-3 min-w-0">
+            <h2 class="text-sm font-medium text-zinc-200 truncate">Source</h2>
+            <SourcePill :source="source" compact />
+          </div>
+          <button
+            type="button"
+            class="text-zinc-500 hover:text-zinc-300 transition-colors"
+            @click="emit('close')"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </header>
+
+        <div class="flex-1 overflow-hidden p-3">
+          <div v-if="loading" class="flex h-full items-center justify-center text-xs text-zinc-500">
+            Loading source…
+          </div>
+          <div
+            v-else-if="error"
+            class="rounded-md border border-rose-900/40 bg-rose-950/30 p-4 text-xs text-rose-300"
+          >
+            <p class="font-medium">Could not load source.</p>
+            <p class="mt-1 text-rose-400/80">{{ error }}</p>
+            <p class="mt-2 text-zinc-500">
+              The file is outside the Studio process's working directory, or the path doesn't exist
+              on this machine. Try the
+              <a
+                :href="`vscode://file${source.file}:${source.line}`"
+                class="text-orange-400 underline"
+              >
+                IDE link
+              </a>
+              instead.
+            </p>
+          </div>
+          <MonacoViewer
+            v-else
+            :content="content"
+            :language="language"
+            :highlight-line="source.line"
+          />
+        </div>
+      </aside>
+    </Transition>
+
+    <Transition
+      enter-active-class="transition-opacity duration-150"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-100"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="source"
+        class="fixed inset-0 z-40 bg-black/40 backdrop-blur-sm"
+        @click="emit('close')"
+      />
+    </Transition>
+  </Teleport>
+</template>

package/src/components/SourcePill.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * `SourcePill` — chip that shows a `file:line` source location with a copy
+ * button and an "open in IDE" button. Backed by the `source` field every
+ * `.nwire/*.json` entry now carries (set at `defineX` call time by
+ * `captureSourceLocation()`).
+ *
+ *   <SourcePill :source="action.source" />
+ *
+ * The IDE-open URI scheme is picked from `localStorage["nwire.ide"]`
+ * (default: `vscode`). Supported values: `vscode`, `cursor`, `zed`,
+ * `idea`, `webstorm`. Users can change theirs from the Studio Overview
+ * "Settings" pane (see `pages/Overview.vue`).
+ */
+import { computed } from "vue";
+import { ExternalLink, Copy, Check } from "lucide-vue-next";
+import { useCopy } from "../composables/useCopy";
+
+const props = defineProps<{
+  source?: { file: string; line: number; column?: number };
+  /** Compact mode — no label, just the path:line. Default false. */
+  compact?: boolean;
+}>();
+
+const { copy, copied } = useCopy();
+
+const fileSegment = computed(() => {
+  if (!props.source) return "";
+  const parts = props.source.file.split("/");
+  // Last 2 path segments give enough context without filling the chip.
+  return parts.slice(-2).join("/");
+});
+
+const idePrefix = (): string => {
+  if (typeof localStorage === "undefined") return "vscode://file";
+  const ide = localStorage.getItem("nwire.ide") ?? "vscode";
+  switch (ide) {
+    case "cursor":
+      return "cursor://file";
+    case "zed":
+      return "zed://file";
+    case "idea":
+    case "webstorm":
+    case "jetbrains":
+      return `jetbrains://idea/navigate/reference?path=`;
+    default:
+      return "vscode://file";
+  }
+};
+
+const ideHref = computed(() => {
+  if (!props.source) return undefined;
+  const { file, line, column } = props.source;
+  const prefix = idePrefix();
+  // JetBrains uses a query-string scheme; everything else uses path:line:col.
+  if (prefix.includes("?path=")) {
+    return `${prefix}${encodeURIComponent(file)}:${line}`;
+  }
+  return `${prefix}${file}:${line}${column ? `:${column}` : ""}`;
+});
+
+const copyText = computed(() => {
+  if (!props.source) return "";
+  return `${props.source.file}:${props.source.line}${props.source.column ? `:${props.source.column}` : ""}`;
+});
+
+const onCopy = (e: Event) => {
+  e.preventDefault();
+  e.stopPropagation();
+  copy(copyText.value);
+};
+</script>
+
+<template>
+  <div
+    v-if="source"
+    class="inline-flex items-center gap-1.5 rounded-md border border-zinc-800 bg-zinc-900/50 px-2 py-1 text-xs font-mono text-zinc-400 hover:border-zinc-700 hover:text-zinc-300 transition-colors"
+  >
+    <span
+      v-if="!compact"
+      class="text-zinc-600 text-[10px] uppercase tracking-wider font-sans pr-0.5"
+    >
+      source
+    </span>
+    <a
+      :href="ideHref"
+      :title="`Open ${copyText} in IDE`"
+      class="inline-flex items-center gap-1 hover:text-orange-400"
+    >
+      {{ fileSegment }}:{{ source.line }}
+      <ExternalLink class="h-3 w-3 opacity-60" />
+    </a>
+    <button
+      type="button"
+      :title="copied ? 'Copied!' : `Copy ${copyText}`"
+      class="ml-1 inline-flex items-center text-zinc-500 hover:text-zinc-300"
+      @click="onCopy"
+    >
+      <Check v-if="copied" class="h-3 w-3 text-emerald-400" />
+      <Copy v-else class="h-3 w-3" />
+    </button>
+  </div>
+</template>

package/src/components/__tests__/EmptyState.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import { Network } from "lucide-vue-next";
+import EmptyState from "../EmptyState.vue";
+
+describe("EmptyState", () => {
+  it("renders title + hint + icon", () => {
+    const wrapper = mount(EmptyState, {
+      props: { title: "No resolvers", hint: "Run nwire cache", icon: Network },
+    });
+    expect(wrapper.get("[data-testid=empty-state]").text()).toContain("No resolvers");
+    expect(wrapper.get("[data-testid=empty-state]").text()).toContain("Run nwire cache");
+    expect(wrapper.findComponent(Network).exists()).toBe(true);
+  });
+
+  it("renders without icon + hint", () => {
+    const wrapper = mount(EmptyState, { props: { title: "Empty" } });
+    expect(wrapper.get("[data-testid=empty-state]").text()).toContain("Empty");
+  });
+
+  it("renders the actions slot", () => {
+    const wrapper = mount(EmptyState, {
+      props: { title: "Empty" },
+      slots: { actions: '<button class="btn">Reload</button>' },
+    });
+    expect(wrapper.find("button.btn").exists()).toBe(true);
+  });
+});

package/src/components/__tests__/ErrorBoundary.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount, flushPromises } from "@vue/test-utils";
+import { defineComponent, h, nextTick, ref } from "vue";
+import ErrorBoundary from "../ErrorBoundary.vue";
+
+describe("ErrorBoundary", () => {
+  it("renders children when nothing throws", () => {
+    const Child = defineComponent({ template: "<p data-testid='ok'>hello</p>" });
+    const wrapper = mount(ErrorBoundary, { slots: { default: Child } });
+    expect(wrapper.find("[data-testid=ok]").text()).toBe("hello");
+    expect(wrapper.find("[data-testid=error-boundary]").exists()).toBe(false);
+  });
+
+  it("catches a render-time error and renders the fallback", async () => {
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const Boom = defineComponent({
+      render() {
+        throw new Error("kaboom");
+      },
+    });
+
+    const wrapper = mount(ErrorBoundary, { slots: { default: () => h(Boom) } });
+    await nextTick();
+    expect(wrapper.find("[data-testid=error-boundary]").exists()).toBe(true);
+    expect(wrapper.find("[data-testid=error-boundary]").text()).toContain("kaboom");
+    consoleError.mockRestore();
+  });
+
+  it("reset clears the captured error", async () => {
+    const consoleError = vi.spyOn(console, "error").mockImplementation(() => {});
+    const shouldThrow = ref(true);
+    const Maybe = defineComponent({
+      render() {
+        if (shouldThrow.value) throw new Error("once");
+        return h("p", { "data-testid": "ok" }, "fine");
+      },
+    });
+
+    const wrapper = mount(ErrorBoundary, { slots: { default: () => h(Maybe) } });
+    await nextTick();
+    expect(wrapper.find("[data-testid=error-boundary]").exists()).toBe(true);
+
+    shouldThrow.value = false;
+    await wrapper.get("button").trigger("click");
+    await flushPromises();
+    await nextTick();
+
+    expect(wrapper.find("[data-testid=error-boundary]").exists()).toBe(false);
+    expect(wrapper.find("[data-testid=ok]").exists()).toBe(true);
+    consoleError.mockRestore();
+  });
+});

package/src/components/__tests__/FilterInput.test.ts

@@ -0,0 +1,38 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import FilterInput from "../FilterInput.vue";
+
+describe("FilterInput", () => {
+  it("renders the placeholder", () => {
+    const wrapper = mount(FilterInput, {
+      props: { modelValue: "", placeholder: "filter by name" },
+    });
+    expect(wrapper.get("[data-testid=filter-input]").attributes("placeholder")).toBe(
+      "filter by name",
+    );
+  });
+
+  it("emits update:modelValue when user types", async () => {
+    const wrapper = mount(FilterInput, { props: { modelValue: "" } });
+    await wrapper.get("[data-testid=filter-input]").setValue("moderation");
+    const emitted = wrapper.emitted("update:modelValue");
+    expect(emitted).toBeTruthy();
+    expect(emitted![0]).toEqual(["moderation"]);
+  });
+
+  it("reflects modelValue prop", () => {
+    const wrapper = mount(FilterInput, { props: { modelValue: "queue" } });
+    expect((wrapper.get("[data-testid=filter-input]").element as HTMLInputElement).value).toBe(
+      "queue",
+    );
+  });
+
+  it("applies compact width modifier", () => {
+    const wrapper = mount(FilterInput, {
+      props: { modelValue: "", compact: true },
+    });
+    expect(wrapper.get("[data-testid=filter-input]").attributes("class")).toContain("w-full");
+    // Compact mode shrinks the wrapper, not the input itself
+    expect(wrapper.html()).toContain("w-72");
+  });
+});

package/src/components/__tests__/JsonView.test.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import JsonView from "../JsonView.vue";
+
+describe("JsonView", () => {
+  it("pretty-prints the value with 2-space indent", () => {
+    const wrapper = mount(JsonView, {
+      props: { value: { a: 1, b: "two" } },
+    });
+    const text = wrapper.get("[data-testid=json-view]").text();
+    expect(text).toContain('"a": 1');
+    expect(text).toContain('"b": "two"');
+  });
+
+  it("renders an empty pre when value is undefined", () => {
+    const wrapper = mount(JsonView, { props: { value: undefined } });
+    expect(wrapper.get("[data-testid=json-view]").text()).toBe("");
+  });
+
+  it("shows the label header when provided", () => {
+    const wrapper = mount(JsonView, {
+      props: { value: {}, label: "Body schema" },
+    });
+    expect(wrapper.text()).toContain("Body schema");
+  });
+
+  it("applies max-height style when maxLines is set", () => {
+    const wrapper = mount(JsonView, {
+      props: { value: {}, maxLines: 5 },
+    });
+    expect(wrapper.get("[data-testid=json-view]").attributes("style")).toContain("max-height");
+  });
+});