Domain Studio - P2 Identity Integration

Reactive Custom Element `<order-detail>`

P1 Enhanced

Now with reactive updates! Use setModel() to update the order and watch it re-render automatically.

<order-detail urn="urn:order:550e8400-e29b-41d4-a716-446655440000"></order-detail>

OpenAPI 3.1.1 Spec

P1 #6

Domain operations automatically generate OpenAPI specs via @orpc/openapi + @orpc/arktype.

Click "Fetch OpenAPI Spec" to view...

oRPC Invocation

P1 #6

Call domain operations via POST /api/rpc/{domain}/{operation}

Select an operation and click "Invoke"...

MCP Tool Surface

P1 #9

Domain operations are exposed as MCP tools for AI agents. Tool naming: domain:{DomainName}:{operation}

- Tools

- Domains

Available Tools

Loading tools...

Tool Invocation

Select a tool and click "Invoke"...

Domain Registry

Select a domain to view its JSON Schema export via .toJsonSchema()

JSON Schema (P0 #5)

Select a domain above and click "Inspect Schema"...

Order Domain - Validation Test

Enter JSON above and click "Validate Order"

Acceptance Criteria

Phase	Criterion	Test	Status
P0	JSON → ArkType compiles	`compileDomain(OrderDefinitionJSON)`	✓
P0	get(urn) works	`OrderDomain.get("urn:order:...")`	✓
P0	JSON Schema exports	`OrderDomain.toJsonSchema()`	✓
P0	satisfies pattern	`runtime satisfies DomainRuntime`	✓
P0	Registry resolves	`Domains.get("Order")`	✓
P0	Custom Element + URN	`<order-detail urn="...">`	✓
P1	oRPC Router from domain	`createDomainRouter(OrderDomain)`	✓
P1	OpenAPI 3.1.1 valid	`GET /api/domains/Order/openapi`	✓
P1	Reactive signals work	`element.setModel(newModel)`	✓
P1	MCP tools generated	`domainToMcpTools(OrderDomain)`	✓
P1	MCP invocation works	`POST /api/mcp/tools/{name}`	✓

DOM Type Augmentation

The HTMLElementTagNameMap is extended for strong typing:

declare global {
  interface HTMLElementTagNameMap {
    "order-detail": OrderDetailElement;
    "line-item": LineItemElement;
    "user-confirmation": UserConfirmationElement;
  }
}

// Now these are strongly typed:
const el = document.createElement("order-detail");  // OrderDetailElement
const found = document.querySelector("order-detail");  // OrderDetailElement | null

// P1: Reactive updates
el.setModel(newOrder);  // Triggers re-render
el.onModelChange(model => console.log('Changed:', model));

Reactive Custom Element <order-detail>