janux 0.1.0 → 0.2.0

package/src/client/navigate.ts

@@ -0,0 +1,180 @@
+import diff from 'diff-dom-streaming';
+import { mountIsland, type MountContext } from './mount';
+import { consumePrefetched } from './prefetch';
+import { singleChunkStream } from './single-chunk';
+
+export interface NavigateOptions {
+  signal?: AbortSignal;
+}
+
+const esc = (id: string): string =>
+  typeof CSS !== 'undefined' && CSS.escape ? CSS.escape(id) : id;
+
+function emitNavigate(phase: 'before' | 'after', from: string, to: string): void {
+  document.dispatchEvent(new CustomEvent('janux:navigate', { detail: { phase, from, to } }));
+}
+
+function throwIfAborted(signal?: AbortSignal): void {
+  if (signal?.aborted) throw new DOMException('navigation superseded', 'AbortError');
+}
+
+interface PersistedIsland {
+  id: string;
+  node: Element;
+}
+
+/**
+ * transition:persist strategy: mounted `persist` islands are lifted out of the
+ * document before the diff (live instance and DOM untouched) and grafted back
+ * over whatever the incoming page rendered for them — or disposed if it's gone.
+ */
+function extractPersisted(mount: MountContext): PersistedIsland[] {
+  return [...document.querySelectorAll('janux-island[data-jx-persist]')]
+    .filter((node) => mount.registry.mounted.has(node.getAttribute('data-jx') ?? ''))
+    .map((node) => {
+      node.remove();
+
+      return { id: node.getAttribute('data-jx')!, node };
+    });
+}
+
+async function restorePersisted(mount: MountContext, kept: PersistedIsland[]): Promise<void> {
+  await Promise.all(
+    kept.map(async ({ id, node }) => {
+      const incoming = document.querySelector(`janux-island[data-jx="${esc(id)}"]`);
+
+      if (incoming) incoming.replaceWith(node);
+      else await mount.registry.mounted.get(id)?.dispose();
+    }),
+  );
+}
+
+/** Store names still referenced by an island that survived the diff (persisted or newly resumed). */
+function storesInUse(mount: MountContext): Set<string> {
+  const used = [...mount.registry.mounted.values()].flatMap((instance) =>
+    Object.values(instance.def.use ?? {}).map((store) => store.name),
+  );
+
+  return new Set(used);
+}
+
+/** After the diff: dispose route stores no surviving island still uses. Islands are swept by DOM state. */
+async function disposeRouteStores(mount: MountContext): Promise<void> {
+  const { registry } = mount;
+  const keptStores = storesInUse(mount);
+  const dropped = [...registry.stores.entries()].filter(
+    ([name, instance]) => instance.def.scope === 'route' && !keptStores.has(name),
+  );
+
+  await Promise.all(dropped.map(([, instance]) => instance.dispose()));
+  dropped.forEach(([name]) => registry.stores.delete(name));
+}
+
+/** App-store snapshots (already-embedded) survive; UI snapshots are replaced by the incoming page. */
+function reindexSnapshots(mount: MountContext): void {
+  [...mount.registry.snapshots.keys()]
+    .filter((uri) => uri.startsWith('ui://'))
+    .forEach((uri) => mount.registry.snapshots.delete(uri));
+  document.querySelectorAll('script[type="application/janux+state"]').forEach((script) => {
+    const uri = script.getAttribute('data-uri');
+
+    if (!uri) return;
+    try {
+      mount.registry.snapshots.set(uri, JSON.parse(script.textContent ?? '{}'));
+    } catch {
+      document.dispatchEvent(new CustomEvent('janux:error', { detail: `invalid snapshot ${uri}` }));
+    }
+  });
+}
+
+/** Islands marked `eager` mount without waiting for interaction (editors, event listeners…). */
+export async function mountEagerIslands(mount: MountContext): Promise<void> {
+  const pending = [...document.querySelectorAll('janux-island[data-jx-eager]')].filter(
+    (node) => !mount.registry.mounted.has(node.getAttribute('data-jx') ?? ''),
+  );
+
+  await Promise.all(pending.map((node) => mountIsland(node.getAttribute('data-jx')!, node, mount)));
+}
+
+async function sweepDisconnected(mount: MountContext): Promise<void> {
+  const gone = [...mount.registry.mounted.entries()].filter(
+    ([id]) => !document.querySelector(`janux-island[data-jx="${esc(id)}"]`)?.isConnected,
+  );
+
+  await Promise.all(gone.map(([, instance]) => instance.dispose()));
+}
+
+async function fetchStream(url: string, signal?: AbortSignal): Promise<ReadableStream<Uint8Array>> {
+  const cached = consumePrefetched(url);
+
+  if (cached) return cached;
+  const response = await fetch(url, { signal, headers: { accept: 'text/html' } });
+
+  if (!response.ok) throw new Error(`navigation fetch failed (${response.status})`);
+
+  // Buffer the whole page before diffing: a navigation fetches a complete,
+  // server-rendered page, so a single-chunk stream is deterministic and
+  // avoids the streaming diff's chunk-boundary edge cases (a swap is not SSR).
+  return singleChunkStream(await response.text());
+}
+
+/**
+ * Diff-then-dispose: nothing is destroyed before the DOM actually changes, so
+ * an abort before/during the diff leaves the current page fully intact (kept
+ * persisted nodes are re-attached, no island disposed). Disposal happens after,
+ * driven by what the diff removed from the document.
+ */
+async function applyPage(mount: MountContext, stream: ReadableStream<Uint8Array>, signal?: AbortSignal): Promise<void> {
+  const kept = extractPersisted(mount);
+
+  try {
+    throwIfAborted(signal);
+    // The Navigation API drives the transition; diff directly (its own would be skipped).
+    await diff(document, stream);
+    await restorePersisted(mount, kept);
+  } catch (error) {
+    // Aborted/failed before the swap committed: put persisted nodes back untouched.
+    kept.forEach(({ node }) => {
+      if (!node.isConnected) document.body.appendChild(node);
+    });
+    throw error;
+  }
+}
+
+async function runNavigation(url: string, mount: MountContext, options: NavigateOptions): Promise<void> {
+  const from = location.href;
+
+  emitNavigate('before', from, url);
+  try {
+    throwIfAborted(options.signal);
+    const stream = await fetchStream(url, options.signal);
+
+    throwIfAborted(options.signal);
+    await applyPage(mount, stream, options.signal);
+    reindexSnapshots(mount);
+    await sweepDisconnected(mount);
+    await disposeRouteStores(mount);
+    await mountEagerIslands(mount);
+    emitNavigate('after', from, url);
+  } catch (error) {
+    if ((error as any)?.name === 'AbortError') return;
+    document.dispatchEvent(new CustomEvent('janux:error', { detail: String(error) }));
+    location.href = url;
+  }
+}
+
+let navChain: Promise<void> = Promise.resolve();
+
+/**
+ * SPA navigation: streams the next page's HTML and DIFFS it against the live
+ * document (diff-dom-streaming) — unchanged shells are never touched, persisted
+ * islands keep their live instances, and everything else re-resumes from the
+ * incoming snapshots, exactly like an initial load. Navigations are serialized:
+ * a superseded one (aborted by the Navigation API) finishes its cleanup before
+ * the next starts, so persisted islands are never lost to a race.
+ */
+export function performNavigation(url: string, mount: MountContext, options: NavigateOptions = {}): Promise<void> {
+  navChain = navChain.then(() => runNavigation(url, mount, options));
+
+  return navChain;
+}

package/src/client/prefetch.ts

@@ -0,0 +1,38 @@
+interface PrefetchEntry {
+  body: Promise<string>;
+  at: number;
+}
+
+const prefetched = new Map<string, PrefetchEntry>();
+const PREFETCH_TTL = 30_000;
+
+function isFresh(entry: PrefetchEntry | undefined): entry is PrefetchEntry {
+  return entry !== undefined && Date.now() - entry.at <= PREFETCH_TTL;
+}
+
+/** Warms the next page on link hover; entries expire after 30s. */
+export function prefetch(url: string): void {
+  if (isFresh(prefetched.get(url))) return;
+  prefetched.set(url, {
+    at: Date.now(),
+    body: fetch(url, { headers: { accept: 'text/html' } }).then((response) =>
+      response.ok ? response.text() : Promise.reject(new Error('prefetch failed')),
+    ),
+  });
+  prefetched.get(url)!.body.catch(() => prefetched.delete(url));
+}
+
+/** Returns a stream of the prefetched page if still fresh, evicting the entry either way. */
+export function consumePrefetched(url: string): ReadableStream<Uint8Array> | undefined {
+  const entry = prefetched.get(url);
+
+  prefetched.delete(url);
+  if (!isFresh(entry)) return undefined;
+
+  return new ReadableStream({
+    async start(controller) {
+      controller.enqueue(new TextEncoder().encode(await entry.body));
+      controller.close();
+    },
+  });
+}

package/src/client/single-chunk.ts

@@ -0,0 +1,14 @@
+/**
+ * Wraps already-buffered HTML into a one-chunk stream. Client navigation
+ * fetches a complete, server-rendered page, so streaming buys nothing here —
+ * and delivering it in a single chunk sidesteps the diff's chunk-boundary
+ * edge cases entirely, making every navigation deterministic.
+ */
+export function singleChunkStream(html: string): ReadableStream<Uint8Array> {
+  return new ReadableStream({
+    start(controller) {
+      controller.enqueue(new TextEncoder().encode(html));
+      controller.close();
+    },
+  });
+}

package/src/client/webmcp.test.ts

@@ -0,0 +1,201 @@
+import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, it, mock } from 'bun:test';
+import { component, intent } from '../define/factories';
+import { jsx } from '../jsx-runtime';
+import { int, schema } from '../schema';
+import { renderToString } from '../render/server';
+import { boot, type JanuxClient } from './boot';
+import {
+  createModelContextPolyfill,
+  installWebMCP,
+  type ModelContextPolyfill,
+  type WebMCPHandle,
+} from './webmcp';
+
+beforeAll(() => GlobalRegistrator.register());
+afterAll(() => GlobalRegistrator.unregister());
+
+const counter = component({
+  name: 'counter',
+  state: schema({ n: int() }),
+  intents: {
+    inc: intent({ description: 'Increment', run: ({ state }) => (state.n += 1) }),
+    reset: intent({ guard: 'confirm', run: ({ state }) => (state.n = 0) }),
+  },
+  view: ({ state, intents }: any) =>
+    jsx('div', {
+      children: [
+        jsx('output', { children: `n=${state.n}` }),
+        jsx('button', { on: intents.inc, children: '+1' }),
+      ],
+    }),
+});
+
+const ROUTE_MANIFEST = {
+  janux: '0.1.0',
+  resources: [],
+  tools: [
+    {
+      name: 'api.shop.pay',
+      description: 'Pay the order',
+      guard: 'confirm',
+      input: { type: 'object', properties: { total: { type: 'number' } } },
+    },
+  ],
+  events: [],
+};
+
+const originalFetch = globalThis.fetch;
+let manifestTools = ROUTE_MANIFEST.tools;
+const fetchMock = mock(async (input: any, init?: RequestInit) => {
+  const url = String(input);
+
+  if (url.startsWith('/_janux/manifest')) {
+    return Response.json({ ...ROUTE_MANIFEST, tools: manifestTools });
+  }
+  if (url.startsWith('/_janux/api/')) return Response.json({ ok: true, result: 'paid' });
+
+  return originalFetch(input, init);
+});
+
+async function serveAndBoot(): Promise<JanuxClient> {
+  const { html, snapshots } = await renderToString(jsx(counter as any, {}), {
+    initialState: { 'ui://counter#default': { n: 5 } },
+  });
+  const scripts = snapshots
+    .map(
+      (s) =>
+        `<script type="application/janux+state" data-uri="${s.uri}">${JSON.stringify({ state: s.state, sources: s.sources ?? {} })}</script>`,
+    )
+    .join('');
+
+  document.body.innerHTML = html + scripts;
+
+  return boot({ defs: [counter], webmcp: false });
+}
+
+function polyfillOf(): ModelContextPolyfill {
+  return (document as any).modelContext;
+}
+
+describe('WebMCP integration', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+    delete (document as any).modelContext;
+    manifestTools = ROUTE_MANIFEST.tools;
+    fetchMock.mockClear();
+    globalThis.fetch = fetchMock as any;
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+  });
+
+  it('polyfill: registers, lists, calls and honors AbortSignal', async () => {
+    const context = createModelContextPolyfill();
+    const controller = new AbortController();
+
+    context.registerTool(
+      { name: 'echo', description: 'Echo', execute: (input) => input },
+      { signal: controller.signal },
+    );
+    expect(context.listTools().map((tool) => tool.name)).toEqual(['echo']);
+    expect(await context.callTool('echo', { a: 1 })).toEqual({ a: 1 });
+
+    controller.abort();
+    expect(context.listTools()).toHaveLength(0);
+    expect(context.callTool('echo')).rejects.toThrow('unknown tool');
+  });
+
+  it('polyfill: provideContext replaces the registered set', () => {
+    const context = createModelContextPolyfill();
+
+    context.registerTool({ name: 'old', execute: () => null });
+    context.provideContext!({ tools: [{ name: 'next', execute: () => null }] });
+    expect(context.listTools().map((tool) => tool.name)).toEqual(['next']);
+  });
+
+  it('registers route manifest tools plus live local tools, with sanitized names', async () => {
+    const client = await serveAndBoot();
+
+    await client.call('counter.inc'); // mounts the island → local manifest is live
+    const handle = installWebMCP(client);
+
+    await handle.sync();
+    const names = polyfillOf()
+      .listTools()
+      .map((tool) => tool.name);
+
+    expect(names).toContain('api_shop_pay');
+    expect(names).toContain('counter_inc');
+    expect(names).toContain('counter_reset');
+    handle.dispose();
+  });
+
+  it('executes UI tools through the bridge and annotates confirm guards', async () => {
+    const client = await serveAndBoot();
+
+    await client.call('counter.inc');
+    const handle = installWebMCP(client);
+
+    await handle.sync();
+    const result: any = await polyfillOf().callTool('counter_inc');
+
+    await client.settled();
+    expect(document.querySelector('output')!.textContent).toBe('n=7');
+    expect(result.content[0].type).toBe('text');
+
+    const reset = polyfillOf()
+      .listTools()
+      .find((tool) => tool.name === 'counter_reset')!;
+
+    expect(reset.description).toContain('human must approve');
+    handle.dispose();
+  });
+
+  it('executes api.* tools over HTTP with the agent origin header', async () => {
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+
+    await handle.sync();
+    const result: any = await polyfillOf().callTool('api_shop_pay', { total: 25 });
+
+    expect(JSON.parse(result.content[0].text)).toEqual({ ok: true, result: 'paid' });
+    const apiCall = fetchMock.mock.calls.find(([url]) => String(url).startsWith('/_janux/api/'));
+
+    expect(String(apiCall![0])).toBe('/_janux/api/shop.pay');
+    expect((apiCall![1]!.headers as any)['x-janux-origin']).toBe('agent');
+    handle.dispose();
+  });
+
+  it('re-syncs on SPA navigation without duplicating registrations', async () => {
+    const client = await serveAndBoot();
+    const handle = installWebMCP(client);
+
+    await handle.sync();
+    manifestTools = [{ ...ROUTE_MANIFEST.tools[0]!, name: 'api.shop.refund' }];
+    document.dispatchEvent(
+      new CustomEvent('janux:navigate', { detail: { phase: 'after', from: '/', to: '/next' } }),
+    );
+    await handle.sync();
+    const names = polyfillOf()
+      .listTools()
+      .map((tool) => tool.name);
+
+    expect(names).toContain('api_shop_refund');
+    expect(names).not.toContain('api_shop_pay');
+    handle.dispose();
+  });
+
+  it('boot installs WebMCP by default (0 config)', async () => {
+    const { html } = await renderToString(jsx(counter as any, {}), {
+      initialState: { 'ui://counter#default': { n: 1 } },
+    });
+
+    document.body.innerHTML = html;
+    boot({ defs: [counter] });
+    await new Promise((resolve) => setTimeout(resolve, 0));
+    expect(polyfillOf()).toBeDefined();
+    expect(polyfillOf().polyfilled).toBe(true);
+  });
+});

package/src/client/webmcp.ts

@@ -0,0 +1,165 @@
+import type { Manifest, ManifestTool } from '../manifest';
+import type { JanuxBridge } from './bridge';
+
+export interface WebMCPToolDescriptor {
+  name: string;
+  description?: string;
+  inputSchema?: Record<string, unknown>;
+  execute: (input: unknown) => unknown;
+}
+
+export interface ModelContext {
+  registerTool(tool: WebMCPToolDescriptor, options?: { signal?: AbortSignal }): unknown;
+  provideContext?(context: { tools: WebMCPToolDescriptor[] }): unknown;
+}
+
+export interface ModelContextPolyfill extends ModelContext {
+  polyfilled: true;
+  /** Polyfill-only: enumerate registered tools (the real API keeps them internal). */
+  listTools(): WebMCPToolDescriptor[];
+  /** Polyfill-only: invoke a registered tool by name, gui-agent style. */
+  callTool(name: string, input?: unknown): Promise<unknown>;
+}
+
+export interface WebMCPHandle {
+  /** Re-reads the manifest and re-registers every tool. Runs automatically on SPA navigation. */
+  sync(): Promise<void>;
+  dispose(): void;
+}
+
+/**
+ * Spec-shaped stand-in for `document.modelContext` (WebMCP). Lets the same
+ * registration path — and any in-page agent or test — work in browsers that
+ * don't ship the API yet. Registrations honor AbortSignal like the real thing.
+ */
+export function createModelContextPolyfill(): ModelContextPolyfill {
+  const tools = new Map<string, WebMCPToolDescriptor>();
+
+  const registerTool = (tool: WebMCPToolDescriptor, options?: { signal?: AbortSignal }): void => {
+    if (options?.signal?.aborted) return;
+    tools.set(tool.name, tool);
+    options?.signal?.addEventListener('abort', () => {
+      if (tools.get(tool.name) === tool) tools.delete(tool.name);
+    });
+  };
+
+  return {
+    polyfilled: true,
+    registerTool,
+    provideContext({ tools: next }) {
+      tools.clear();
+      next.forEach((tool) => registerTool(tool));
+    },
+    listTools: () => [...tools.values()],
+    async callTool(name, input) {
+      const tool = tools.get(name);
+
+      if (!tool) throw new Error(`WebMCP polyfill: unknown tool "${name}"`);
+
+      return tool.execute(input);
+    },
+  };
+}
+
+/** The native context when the browser has one (Chrome 149+ behind a flag); the polyfill otherwise. */
+function resolveModelContext(): ModelContext {
+  const doc = document as any;
+  const native = doc.modelContext ?? (navigator as any).modelContext;
+
+  if (native) return native;
+
+  return (doc.modelContext = createModelContextPolyfill());
+}
+
+/** The server knows the whole route (lazy islands, api() tools); unreachable → empty, fail-soft. */
+async function routeTools(): Promise<ManifestTool[]> {
+  try {
+    const url = `/_janux/manifest?path=${encodeURIComponent(location.pathname)}`;
+    const response = await fetch(url, { headers: { accept: 'application/json' } });
+
+    if (!response.ok) return [];
+
+    return ((await response.json()) as Manifest).tools ?? [];
+  } catch {
+    return [];
+  }
+}
+
+async function callServerTool(name: string, input: unknown): Promise<unknown> {
+  const response = await fetch(`/_janux/api/${name.slice('api.'.length)}`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json', 'x-janux-origin': 'agent' },
+    body: JSON.stringify(input ?? {}),
+  });
+
+  return response.json();
+}
+
+function descriptorFor(tool: ManifestTool, bridge: JanuxBridge): WebMCPToolDescriptor {
+  const approval = tool.guard === 'confirm' ? ' Returns a proposal a human must approve.' : '';
+
+  return {
+    name: tool.name.replace(/[^\w-]/g, '_'),
+    description: `${tool.description ?? `Janux tool ${tool.name}`}${approval}`,
+    inputSchema: tool.input ?? { type: 'object', properties: {} },
+    async execute(input) {
+      const result = tool.name.startsWith('api.')
+        ? await callServerTool(tool.name, input)
+        : await bridge.call(tool.name, input);
+
+      return { content: [{ type: 'text', text: JSON.stringify(result ?? null) }] };
+    },
+  };
+}
+
+/** Route manifest first, live local manifest on top (its `ready` state is current). */
+function mergedTools(bridge: JanuxBridge, remote: ManifestTool[]): ManifestTool[] {
+  const byName = new Map(remote.map((tool) => [tool.name, tool]));
+
+  bridge.manifest().tools.forEach((tool) => byName.set(tool.name, tool));
+
+  return [...byName.values()];
+}
+
+/**
+ * Zero-config WebMCP: registers every mounted tool with `document.modelContext`
+ * (polyfilled when absent) and keeps the registration in sync across SPA
+ * navigations. Chrome's DevTools WebMCP panel then shows the Janux surface as-is.
+ */
+export function installWebMCP(bridge: JanuxBridge): WebMCPHandle {
+  const context = resolveModelContext();
+  let controller: AbortController | undefined;
+  let chain: Promise<void> = Promise.resolve();
+
+  const run = async (): Promise<void> => {
+    const tools = mergedTools(bridge, await routeTools());
+
+    controller?.abort();
+    controller = new AbortController();
+    for (const tool of tools) {
+      try {
+        await context.registerTool(descriptorFor(tool, bridge), { signal: controller.signal });
+      } catch {
+        // One rejected registration (schema quirks, duplicate names…) must not drop the rest.
+      }
+    }
+  };
+
+  // Serialized like navigations: a re-sync never races the previous one's aborts.
+  const sync = (): Promise<void> => (chain = chain.then(run));
+
+  const onNavigate = (event: Event): void => {
+    if ((event as CustomEvent).detail?.phase === 'after') void sync();
+  };
+
+  document.addEventListener('janux:navigate', onNavigate);
+  void sync();
+
+  return {
+    sync,
+    dispose() {
+      document.removeEventListener('janux:navigate', onNavigate);
+      void chain.then(() => controller?.abort());
+    },
+  };
+}

package/src/define/factories.test.tsx

@@ -0,0 +1,25 @@
+/** @jsxImportSource .. */
+import { describe, expect, it } from 'bun:test';
+
+import { component } from './factories';
+import { renderToString } from '../render/server';
+
+const Island = component({
+  name: 'tag-island',
+  view: () => <p>hello</p>,
+});
+
+describe('component() as a JSX tag', () => {
+  it('typechecks as an element and server-renders as an island', async () => {
+    const page = (
+      <main>
+        <Island eager />
+      </main>
+    );
+    const result = await renderToString(page);
+
+    expect(result.html).toContain('data-jx="tag-island#');
+    expect(result.html).toContain('data-jx-eager');
+    expect(result.html).toContain('<p>hello</p>');
+  });
+});

package/src/define/factories.ts

@@ -1,5 +1,6 @@
 import type {
   ComponentDef,
+  ComponentTag,
   EffectDef,
   IntentDef,
   RefreshPolicy,
@@ -16,13 +17,13 @@ function assertName(name: unknown, kind: string): void {
 }
 
 /** Defines a bifacial component: view for humans, resource+tools for agents. */
-export function component(def: ComponentInput): ComponentDef {
+export function component(def: ComponentInput): ComponentTag {
   assertName(def.name, 'component()');
   if (typeof def.view !== 'function') {
     throw new Error(`Janux: component "${def.name}" requires a view`);
   }
 
-  return Object.freeze({ ...def, kind: 'component' as const });
+  return Object.freeze({ ...def, kind: 'component' as const }) as ComponentTag;
 }
 
 /** Defines a shared store: a bifacial component without a view. */

package/src/define/types.ts

@@ -1,4 +1,5 @@
 import type { JxType } from '../schema';
+import type { JanuxNode } from '../jsx-runtime';
 
 export type GuardValue = 'auto' | 'confirm' | 'forbidden';
 export type Guard = GuardValue | ((bag: { ctx: Ctx }) => GuardValue);
@@ -81,3 +82,11 @@ export interface ComponentDef {
   scope?: 'app' | 'route';
   persist?: 'local' | 'none';
 }
+
+/**
+ * ComponentDef with a phantom call signature so TSX accepts `<MyIsland />` as
+ * an element. The signature never exists at runtime: `component()` returns a
+ * frozen plain object, and the renderer checks `typeof $t === 'function'`
+ * before `isComponentDef`, so defs always take the island path.
+ */
+export type ComponentTag = ComponentDef & ((props?: Record<string, unknown>) => JanuxNode);

package/src/index.ts

@@ -10,6 +10,7 @@ export {
 } from './define/factories';
 export type {
   ComponentDef,
+  ComponentTag,
   IntentDef,
   EffectDef,
   SourceDef,
@@ -40,5 +41,5 @@ export {
 export { signal, computed, effect as watch, batch, untrack } from './signals';
 export { createInstance, type JanuxInstance, type InstanceOptions } from './runtime/instance';
 export { createBus, type EventBus } from './runtime/bus';
-export { JanuxIntentError, type AuditEntry, type Proposal } from './runtime/intents';
+export { JanuxIntentError, resolveGuard, type AuditEntry, type Proposal } from './runtime/intents';
 export { Fragment, jsx, jsxs, type JanuxNode } from './jsx-runtime';

package/src/jsx-runtime.ts

@@ -29,6 +29,9 @@ export declare namespace JSX {
   interface IntrinsicElements {
     [element: string]: Record<string, unknown>;
   }
+  interface IntrinsicAttributes {
+    key?: string | number;
+  }
   interface ElementChildrenAttribute {
     children: unknown;
   }