diff --git a/packages/app/public/features/agent-bridge.html b/packages/app/public/features/agent-bridge.html new file mode 100644 index 0000000..37ff325 --- /dev/null +++ b/packages/app/public/features/agent-bridge.html @@ -0,0 +1,869 @@ + + + + + +Agent Bridge — Originmain + + + + + + + + + + + +
+
+ ⇄ Agent Bridge +

MCP channel to
Cursor, Claude Code
& more.

+

Agent Bridge exposes your entire Origin Graph through the Model Context Protocol — so Cursor, Claude Code, and any MCP-compatible agent can read your component tree, run diffs, and propose changes without leaving the editor.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+
+
+
+
🔒 app.originmain.io/canvas — Agent Bridge active
+
+
+
+ + +
+
+ Editor + Cursor +
+
+
11const CardRoot = styled.div`
+
12display: flex;
+
13flex-direction: column;
+
14border-radius: var(--radius-md);
+
15padding: 16px;
+ +
+
Cursor suggestion · via Agent Bridge
+
+ − padding: 16px; + + padding: 24px; +
+
+ + +
+
+
16overflow: hidden;
+
17`;
+
18
+
19// diff_components() — origin graph context loaded
+
20// 3 affected children: CardHeader, CardBody, CardFooter
+
+
+ + +
+
+
+
+
+
+
+
⇄
+
+
+
+ + +
+
+ Canvas + Intent Diff +
+
+ +
+
+
△
+ CardRoot + Proposed by: Cursor +
+
+ padding +
+ 16px + → + 24px +
+
+
+ + +
+
+ +
+
+
△
+ CardHeader + Proposed by: Cursor +
+
+ gap +
+ 8px + → + 12px +
+
+
+ +
+
+ MCP connected · 2 pending diffs +
+
+
+
+
+
+ + +
+
+
+ Protocol +

From handshake to diff
in four steps.

+

A JSON-RPC 2.0 MCP server sits between your AI agent and the Origin Graph. The agent calls tools. The bridge executes them. Proposed changes come back to you for review.

+
+
+
+
01
+

Agent connects

+

Add the Agent Bridge MCP endpoint to your Cursor or Claude Code settings. The MCP handshake authenticates via AGENT_BRIDGE_SECRET and announces available tool definitions.

+
+
+
02
+

Tool call made

+

Your agent issues a JSON-RPC call — e.g. diff_components({ before, after }). The bridge validates the input schema with Zod before any execution begins.

+
+
+
03
+

Bridge executes

+

Agent Bridge queries the live Origin Graph, runs the diff engine against your real component tree, and streams structured results back to the agent.

+
+
+
04
+

Result returned

+

The agent receives a structured JSON response. Any proposed change is simultaneously queued as an Intent Diff in your canvas — ready for human review before anything applies.

+
+
+
+
+ + +
+
+
+ MCP tool definitions +

Real tools,
not hallucinations.

+

Every agent tool is backed by a live query against your Origin Graph. The agent gets your actual component tree, real prop values, and real token relationships — not documentation that may have drifted from your codebase.

+
    +
  • ⇄Tool inputs are defined as JSON Schema and validated with Zod on every call. Malformed inputs never reach the graph.
    • +
  • ◉query_graph runs structured traversals — find components by name, trace token usage, map dependency chains.
    • +
  • △answer_question gives agents plain-language answers grounded in the real graph, not training data.
    • +
+ Read the MCP docs +
+
+
+
MCP tool definitions
+ + +
+
get_component
+
+
in:  { name: string, includeChildren?: boolean }
+
out: { node: ComponentNode, props: PropSchema, children: ComponentNode[] }
+
+
+ + +
+
diff_components
+
+
in:  { before: ComponentSnapshot, after: ComponentSnapshot }
+
out: { diff: IntentDiff[], affectedCount: number }
+
+
+ + +
+
query_graph
+
+
in:  { query: string, depth?: number, filters?: GraphFilter[] }
+
out: { nodes: GraphNode[], edges: GraphEdge[], total: number }
+
+
+ + +
+
answer_question
+
+
in:  { question: string, context?: string[] }
+
out: { answer: string, sources: GraphNode[], confidence: number }
+
+
+
+
+
+
+ + +
+
+
+ Audit trail +

Auditable agent
actions. Always.

+

Every change an agent proposes flows through the exact same Intent Diff review pipeline as a human edit. Nothing is applied silently. Every agent action is stamped, attributable, and reversible.

+
    +
  • △Agent-proposed diffs appear in your canvas labeled with the source agent — Cursor, Claude Code, or any MCP-compatible client.
    • +
  • ◈Accept or reject individual diffs. The agent cannot bypass the review queue or apply changes directly.
    • +
  • ⇄Every action is written to an append-only audit log with timestamp, agent identity, tool called, and full input/output payload.
    • +
+ Explore Intent Diff +
+
+
+
Intent Diff — agent queue
+ + +
+
+
△
+ CardRoot + Proposed by: Claude Code +
+
+ padding +
+ 16px + → + 24px +
+
+
+ gap +
+ 8px + → + 12px +
+
+
+ + +
+
+ + +
+
Audit log
+
+
+ 14:02:31 + claude-code + diff_components + queued +
+
+ 14:02:28 + cursor + query_graph + ok +
+
+ 14:02:21 + cursor + get_component + ok +
+
+ 14:02:09 + cursor + answer_question + ok +
+
+
+
+
+
+
+ + +
+
+
+ Developer reference +

The full tool schema.

+

Agent Bridge speaks standard JSON-RPC 2.0. Drop the endpoint into any MCP-compatible client and tool definitions auto-discover on connect.

+
+
+// Agent Bridge — MCP server tool manifest +// Add to Cursor: Settings → MCP → Add Server → paste endpoint + secret + +const tools = [ + { + name: "get_component", + description: "Fetch a component node from the Origin Graph by name or ID", + inputSchema: { + type: "object", + properties: { + name: { type: "string", description: "Component display name" }, + includeChildren: { type: "boolean", default: false } + }, + required: ["name"] + } + }, + { + name: "diff_components", + description: "Run a structural diff between two component snapshots", + inputSchema: { + type: "object", + properties: { + before: { type: "object", description: "ComponentSnapshot before change" }, + after: { type: "object", description: "ComponentSnapshot after change" } + }, + required: ["before", "after"] + } + }, + { + name: "query_graph", + description: "Traverse the Origin Graph — find components, tokens, and relationships", + inputSchema: { + type: "object", + properties: { + query: { type: "string" }, + depth: { type: "number", default: 2 }, + filters: { type: "array", items: { type: "string" } } + }, + required: ["query"] + } + }, + { + name: "answer_question", + description: "Ask a natural-language question grounded in the live Origin Graph", + inputSchema: { + type: "object", + properties: { + question: { type: "string" }, + context: { type: "array", items: { type: "string" } } + }, + required: ["question"] + } + } +]; +
+
+
+ + +
+
+
+ Technical foundation +

Built on open protocols.

+

Agent Bridge is a first-class MCP server. No proprietary SDKs, no vendor lock-in. If your agent speaks MCP, it works.

+
+
+
+
📡
+

JSON-RPC 2.0

+

Every tool call and response follows the JSON-RPC 2.0 specification exactly — standard request/response envelopes, structured error codes, and batch request support out of the box.

+ Protocol +
+
+
⇄
+

MCP protocol

+

Agent Bridge registers as a full MCP server — tool discovery, capability negotiation, and streaming all follow the Model Context Protocol spec. Works with Cursor, Claude Code, and any future MCP client.

+ Standard +
+
+
🛡
+

Tool schema validation

+

Every inbound tool call is validated against a Zod schema before any execution. Malformed inputs are rejected with structured JSON-RPC error responses — the graph is never reached by bad data.

+ Zod +
+
+
🔑
+

AGENT_BRIDGE_SECRET auth

+

Authentication is token-based via a pre-shared AGENT_BRIDGE_SECRET. Set it once in your MCP client config — all subsequent calls are bearer-authenticated automatically.

+ Security +
+
+
⚡
+

Streaming responses

+

Large graph queries and diff results stream back incrementally as NDJSON. Your agent receives the first nodes immediately — no waiting for the full response payload to accumulate server-side.

+ Performance +
+
+
📋
+

Audit log for agent actions

+

Every agent action is persisted to an append-only audit log — agent identity, tool called, inputs, outputs, and timestamp. Queryable from the canvas and exportable to JSON at any time.

+ Compliance +
+
+
+
+ + +
+
+
+ Connected features +

Agent Bridge is
one half of the loop.

+

Agents read from the Origin Graph and write back through Intent Diff. The whole system is the pipeline.

+
+
+ +
◉
+

Origin Graph

+

The queryable index that Agent Bridge reads from. Every component, token, and relationship in your codebase — live, traversable, and always in sync with your real code.

+ Explore Origin Graph → + + +
△
+

Intent Diff

+

Every change an agent proposes enters the same Intent Diff review pipeline as a human edit. Nothing gets applied without your explicit sign-off — every agent action is auditable.

+ Explore Intent Diff → + + +
◈
+

Completion Zone

+

Mark a region in the canvas and let AI fill it using your design language constraints. Pairs with Agent Bridge for end-to-end agentic design-to-code sessions.

+ Explore Completion Zone → + +
+
+
+ + +
+
+

Give your agents
real context.

+

Connect Cursor or Claude Code to your live Origin Graph in under five minutes. No hallucinated docs — just your actual codebase, queryable from any MCP agent.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/features/completion-zone.html b/packages/app/public/features/completion-zone.html new file mode 100644 index 0000000..58f7311 --- /dev/null +++ b/packages/app/public/features/completion-zone.html @@ -0,0 +1,805 @@ + + + + + +Completion Zone — Originmain + + + + + + + + + + + +
+
+ ◈ Completion Zone +

AI-filled design,
constrained to your system.

+

Describe a component in plain language. Completion Zone generates it using only tokens, variants, and patterns that already exist in your design system — no hallucinated styles, no drift.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+
+
+
+
🔒 app.originmain.io/canvas — Completion Zone
+
+
+
+
Constrained generation
+ + +
+
MetricsCard — completing…
+
+
+
+ Weekly Overview + Live +
+
+
+
Sessions
+
4,821
+
↑ 12%
+
+
+
Conversions
+
9.4%
+
↑ 2.1%
+
+
+ +
+ ? + metric badge +
+
+
+
Goal progress68%
+
+
+
+ +
+ ◈ + Add a metric badge to the top-right corner + +
+
+
Matching:
+
MetricBadge
+
·
+
color.success
+
+
+ + +
+
constrained
+
→
+
generation
+
+ + +
+
MetricsCard — completed
+
+
+
+ Weekly Overview + Live +
+
+
+
Sessions
+
4,821
+
↑ 12%
+
+
+
Conversions
+
9.4%
+
↑ 2.1%
+
+
+ +
+
+
Avg. session
+
3m 42s
+
+
↑ 8%
+
+
+
+
Goal progress68%
+
+
+
+
+ ✓ MetricBadge variant="success" · color.success.600 · spacing.md +
+
+
+
+
+ + +
+
+
+ Architecture +

From prompt to placed component in four steps.

+

Completion Zone is not a generic AI. Every generation pass is anchored to the full context of your Origin Graph — so the output is always on-system.

+
+
+
+
01
+

Prompt captured

+

"Add a stats row below the chart" — your plain-language intent is parsed and the target artboard region is identified.

+ Natural language +
+
+
02
+

Graph context injected

+

Relevant components, design tokens, spacing scales, and color palettes are fetched from your Origin Graph and assembled into the model context.

+ Origin Graph +
+
+
03
+

AI generates

+

Claude constrains its output strictly to the graph context — only existing variants, only tokens in your scale. No new styles are ever invented.

+ Constrained output +
+
+
04
+

Component placed

+

The generated component is written into the artboard, the live canvas updates, and the result is emitted as an Intent Diff ready to ship.

+ Live Artboard +
+
+
+
+ + +
+
+
+ Key differentiator +

Not generation —
completion.

+

Generic AI tools invent. Completion Zone finishes. The difference is the constraint layer: every output token is validated against your existing design system before anything touches the canvas.

+
    +
  • ◈Zero design drift — the AI only uses tokens that already exist in your system, never creating new ones.
    • +
  • ◈Only variants that exist — if your Button has three variants, the AI can only choose from those three.
    • +
  • ◈Only spacings from your scale — no magic numbers, no arbitrary pixel values slipping through.
    • +
  • ◈Generates real code, not images — the output is a live component on your artboard, not a static screenshot.
    • +
+ Request early access +
+ + +
+
+ +
+
+ Generic AI +
+
Output
+
+ ✗ +
Arbitrary stylesbackground: #2D3748 · padding: 14px 18px
+
+
+ ✗ +
New tokens introduced--new-color-7: #1a202c
+
+
+ ✗ +
Inconsistent variantsButton size="xl" — not in your system
+
+
+ ✗ +
Magic numbersborder-radius: 7px · margin: 11px
+
+
+ ✗ +
Hallucinated componentsStatsWidget — not in your library
+
+
+
Result: design drift. Manual cleanup required.
+
+
+ +
+
+ ◈ Completion Zone +
+
Output
+
+ ✓ +
Existing tokens onlycolor.success.600 · spacing.md
+
+
+ ✓ +
Zero new tokensOnly what's already in your Origin Graph
+
+
+ ✓ +
Constrained variantsButton variant="primary" size="md" — verified
+
+
+ ✓ +
Scale-only spacingsAll values drawn from your spacing scale
+
+
+ ✓ +
Verified componentsMetricBadge — confirmed in your library
+
+
+
Result: zero drift. Ships as-is.
+
+
+
+
+
+
+ + +
+
+
+ Full graph context +

The AI knows
your entire system.

+

Before Claude generates a single character, it receives the complete context of your Origin Graph — every token, every component name, every spacing value. The constraint is baked into the prompt, not tacked on afterward.

+
    +
  • ◈All design tokens — color palettes, typography scales, spacing systems — injected verbatim into the system prompt.
    • +
  • ◈All component names, accepted props, and valid variant combinations from your live component library.
    • +
  • ◈The current artboard snapshot — surrounding components inform what fits, stylistically and spatially.
    • +
  • ◈Accepted completions feed back into the graph, making every future suggestion smarter over time.
    • +
+
+ +
+
+
Context assembly — completion_zone.ts
+
+// 1. Fetch full Origin Graph context +const graph = await originGraph.getContext({ + tokens: true, // all design tokens + components: true, // all names + props + variants: true, // valid combos only + snapshot: artboard.snapshot(), +}); + +// 2. Build constrained system prompt +const systemPrompt = buildPrompt({ + instruction: "Only use tokens in this list. " + + "Never invent new tokens or variants.", + tokens: graph.tokens, + components: graph.components, + artboard: graph.snapshot, +}); + +// 3. Call Claude with full context +const result = await claude.complete({ + system: systemPrompt, + prompt: userIntent, + model: "claude-sonnet-4-6", +}); + +// 4. Validate against graph +const validated = validateAgainstGraph( + result.component, graph +); + +// 5. Place + record feedback loop +if (validated.ok) { + artboard.place(validated.component); + feedbackLoop.accept(validated); +} +
+
+
+
+
+ + +
+
+
+
+
◈
+

Zero design drift

+

Every token, every spacing value, every color reference is pulled from your existing scale. Nothing new is ever introduced into your system.

+
+
+
⬛
+

Generates real code

+

The output is a live component placed on your artboard — actual JSX using your real component library, not a static image or an approximation.

+
+
+
⟳
+

Learns from your patterns

+

Every accepted completion feeds back into the Origin Graph. The more you build, the better Completion Zone understands your conventions.

+
+
+
◉
+

Respects constraints

+

Only variants that exist in your library. Only spacings from your defined scale. Hard constraints enforced in the prompt, not soft suggestions.

+
+
+
+
+ + +
+
+
+ Technical foundation +

Engineered for design systems.

+

Completion Zone is not a thin wrapper around an LLM. It's a constraint engine built from the ground up for the specific demands of systematic design at scale.

+
+
+
+
⚡
+

Claude API + context injection

+

Claude powers generation, but the constraint work happens before and after the API call. The system prompt is fully assembled from your Origin Graph on every request — no stale cached context, no drift over time.

+ Claude API +
+
+
◈
+

Token-constrained generation

+

A validation layer sits between the LLM output and the canvas. Every proposed token value is checked against your design token registry. Invalid tokens are flagged or substituted with the nearest valid match from your scale.

+ Constraint layer +
+
+
◉
+

Graph context retrieval

+

The Origin Graph is queried with a relevance function to fetch the most pertinent subset of your component library for each prompt — keeping the context window focused and the generation latency low.

+ Origin Graph +
+
+
△
+

Component snapshot diffing

+

Before placing a completion on the canvas, Originmain diffs it against the current artboard state. Only the minimal set of changes is applied, producing a clean Intent Diff entry with zero noise or redundancy.

+ Intent Diff +
+
+
✦
+

Prompt engineering for design systems

+

The system prompt template communicates your design system's grammar to the model — token naming conventions, component composition patterns, spatial reasoning cues, and variant inheritance rules.

+ Prompt design +
+
+
⟳
+

Feedback loop

+

Accepted completions are written back into the Origin Graph as accepted pattern examples. Over time, these examples shift the model's priors toward your team's specific conventions without any fine-tuning or retraining.

+ Adaptive +
+
+
+
+ + +
+
+
+ What powers it +

Completion Zone runs on the full stack.

+

Every piece of Originmain contributes to making completions possible — and every completion makes the rest of the platform smarter.

+
+
+ +
◉
+

Origin Graph

+

The indexed knowledge base of every component, token, and relationship in your design system. Completion Zone pulls its constraints directly from the graph on every generation request.

+ Explore Origin Graph → + + +
⬜
+

Live Artboard

+

Completed components are placed directly onto the live artboard — rendered as real code in a real iframe, not as a static preview. What you see on the canvas is exactly what ships.

+ Explore Live Artboard → + + +
⇄
+

Agent Bridge

+

Trigger completions from inside Cursor or Claude Code via the MCP channel. Your editor prompt invokes the same constraint engine, placing components directly from your IDE without switching context.

+ Explore Agent Bridge → + +
+
+
+ + +
+
+

Fill the gaps in your
design system.

+

Early access is free. Connect your Origin Graph and run your first completion in under two minutes.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/features/integrations.html b/packages/app/public/features/integrations.html new file mode 100644 index 0000000..0fcacbb --- /dev/null +++ b/packages/app/public/features/integrations.html @@ -0,0 +1,833 @@ + + + + + +Integrations — Originmain + + + + + + + + + + + +
+
+ Integrations +

Connect your
entire workflow.

+

Originmain integrates with GitHub, Figma, Linear, Slack, VS Code, Cursor, TypeScript, and React — so every part of your design-to-code pipeline is connected, without changing how you work.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+ +
+ +
+
GitHub
+
PR reviews trigger automatic diffs. Every merge computes a full component-level diff.
+
+ Live +
+ +
+ +
+
Figma
+
Design tokens, components & layouts synced live into the graph.
+
+ Live +
+ +
+ +
+
Linear
+
Issue tracking tied to component changes. Auto-creates issues when drift is detected.
+
+ Live +
+ +
+ +
+
Slack
+
Deploy alerts, review pings, and diff summaries posted to your channels.
+
+ Live +
+ +
+ +
+
VS Code
+
Extension with inline diff annotations. See component history without leaving your editor.
+
+ Live +
+ +
+ +
+
Cursor
+
Origin diffs surface as Cursor suggestions. Accept/reject via the Agent Bridge.
+
+ Live +
+ +
+ +
+
TypeScript
+
Type-safe component contracts. Prop inference from your TypeScript types.
+
+ Live +
+ +
+ +
+
React
+
Component tree, hooks, and context all mapped to the graph. Full React Fiber integration.
+
+ Live +
+
+
+
+ + +
+
+
+ How it works +

From connect to notify in four steps.

+

Every integration follows the same secure pipeline — events flow in, diffs are computed, and your team is alerted in the tools they already use.

+
+
+
+
01
+

Connect

+

Authorize via OAuth or register a webhook. Originmain handles token refresh and credential storage with zero manual config.

+
+
+
02
+

Sync

+

Events flow into Originmain in real time. Each payload is verified with HMAC signatures before any processing begins.

+
+
+
03
+

Diff

+

Changes are automatically fed into the Intent Diff engine. Component-level diffs are computed and attributed to the triggering event.

+
+
+
04
+

Notify

+

Your team is alerted where they work — a Slack message, a PR comment, a Linear issue update, or an inline editor annotation.

+
+
+
+
+ + +
+
+
+ GitHub integration +

Every merge computes
a full component diff.

+

When a PR is opened, Originmain receives the push event and immediately kicks off a component-level diff across the entire affected subtree. The result is posted back to the PR as a structured comment — no manual review step.

+
    +
  • ⚡PR events trigger automatic diff computation the moment they are received.
    • +
  • ◉Branch tracking keeps the Origin Graph in sync with every push — not just merges.
    • +
  • ⇄Originmain posts a structured diff comment directly onto the GitHub PR for inline review.
    • +
+ Connect GitHub +
+
+
+ +
Incoming webhook payload
+
+{ + "event": "pull_request", + "action": "opened", + "number": 142, + "head": { + "sha": "a4f3c2d", + "ref": "feat/dashboard-v2" + }, + "x-hub-signature-256": "sha256=…" +}
+ +
+
+
+ ✓ + HMAC verified · diff triggered +
+
+
+ +
Computed component diff
+
+
~ DashboardHeader
+
- title: "Overview"
+
+ title: "Dashboard v2"
+
+ MetricCard (new)
+
+ metric="weekly_active"
+
+ format="number"
+
+ +
+
+
posted to PR #142
+
+
+ +
+
+
+ originmain-bot + commented just now +
+
Origin Diff — 2 components changed, 1 added
+
View full diff on Originmain →
+
+
+
+
+
+ + +
+
+
+ Figma integration +

Design changes update
the graph automatically.

+

Connect your Figma file and Originmain subscribes to every change. Design tokens, component definitions, and layout compositions are extracted and mapped directly into the Origin Graph — no manual export, no hand-off step.

+
    +
  • ◈Design tokens (color, spacing, typography) are extracted and kept in sync as you iterate in Figma.
    • +
  • ⬜Component library updates propagate to every artboard that references them — instantly.
    • +
  • △Layout changes generate Intent Diffs that can be handed directly to the Agent Bridge.
    • +
+ Connect Figma +
+
+
+ +
Figma → Origin Graph
+ +
+
+
+
color/brand/primary
#0066FF
+
synced
+
+
+
T
+
typography/heading/xl
900 / 4.5rem / -0.045em
+
synced
+
+
+
sp
+
spacing/lg
32px
+
updating
+
+
+ +
+
Component library — 48 components
+
+
Button
+
Card
+
Input
+
Badge ↑
+
+
+
+
+
+
+ + +
+
+
+ Setup in minutes +

Built on secure, open standards.

+

Every integration uses platform-native authentication and cryptographic verification. No credentials stored in plaintext, no polling — only push-based, event-driven architecture.

+
+
+
+
🔐
+

HMAC verification

+

Every incoming webhook is verified with HMAC-SHA256 before processing. The shared secret is stored encrypted in Originmain's key vault — never in environment variables or config files.

+ Security +
+
+
✍️
+

Webhook signatures

+

Each platform has its own signature header — x-hub-signature-256 for GitHub, x-figma-signature for Figma. Originmain verifies each using the platform's prescribed algorithm.

+ Protocol +
+
+
📨
+

Event types

+

Subscribe only to the events you need. Originmain exposes a per-integration event filter — receive pull_request.opened and push from GitHub, or FILE_UPDATE from Figma.

+ Granularity +
+
+
🔑
+

OAuth flows

+

GitHub, Figma, Linear, and Slack all use standard OAuth 2.0 with PKCE. Tokens are refreshed automatically — you authorize once and Originmain handles the rest without user intervention.

+ Authentication +
+
+
⏱
+

API rate limits

+

Originmain's integration layer respects every platform's rate limit with adaptive back-off and request queuing. High-volume repos with hundreds of daily PRs process without dropped events.

+ Reliability +
+
+
📋
+

Audit logs

+

Every event received, every diff triggered, every notification sent is recorded with a timestamp and payload hash. Full audit trail available to workspace admins via the Originmain dashboard.

+ Compliance +
+
+
+
+ + +
+
+
+ Integration status +

All integrations, all live.

+

Every integration ships fully operational on day one. Connect GitHub and Figma in under two minutes, then add Linear, Slack, and your editor tools from the dashboard.

+
+
+
+
+ +
+
+

GitHub

+

PR diffs & branch sync

+ Operational +
+
+
+
+ +
+
+

Figma

+

Token & component sync

+ Operational +
+
+
+
+ +
+
+

Linear

+

Issue & milestone sync

+ Operational +
+
+
+
+ +
+
+

Slack

+

Alerts & diff summaries

+ Operational +
+
+
+
+ +
+
+

VS Code

+

Inline diff annotations

+ Operational +
+
+
+
+ +
+
+

Cursor

+

Agent Bridge suggestions

+ Operational +
+
+
+
+ +
+
+

TypeScript

+

Type-safe prop contracts

+ Operational +
+
+
+
+ +
+
+

React

+

Full Fiber tree mapping

+ Operational +
+
+
+
+
+ + +
+
+
+ Goes deeper with +

Integrations power every feature.

+

The integration layer is the connective tissue of the whole platform — every feature benefits from a connected workflow.

+
+
+ +
⇄
+

Agent Bridge

+

Cursor and Claude Code receive Origin diffs directly through the Agent Bridge MCP channel. Integrations are what keep the bridge fed with up-to-date component context.

+ Explore Agent Bridge → + + +
△
+

Intent Diff

+

GitHub pushes, Figma changes, and Linear milestones all trigger Intent Diff computations. Every integration event has a diff attached — automatically, with no manual review step.

+ Explore Intent Diff → + + +
◉
+

Origin Graph

+

Figma tokens, TypeScript types, and React Fiber data all flow into the Origin Graph through the integration layer, keeping your component index complete and current at all times.

+ Explore Origin Graph → + +
+
+
+ + +
+
+

Your whole stack,
finally connected.

+

Connect GitHub and Figma in under two minutes. Every other integration is one click from the dashboard.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/features/intent-diff.html b/packages/app/public/features/intent-diff.html new file mode 100644 index 0000000..d7ad7b1 --- /dev/null +++ b/packages/app/public/features/intent-diff.html @@ -0,0 +1,740 @@ + + + + + +Intent Diff — Originmain + + + + + + + + + + + +
+
+ △ Intent Diff +

Ship component-level
diffs, not redlines.

+

Every design change is expressed as a structured diff of props, styles, and tree — not a screenshot comparison. Reviewers see exactly what changed and why.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+
+
+
+
🔒 app.originmain.io/diff/Button@pr-412
+
+ Split + Unified +
+
+
+ + +
+
+ Before + a/Button.tsx +
+
+
@@ -1,10 +1,10 @@ Button
+
1 component: "Button"
+
2 variant: "primary"
+
3−padding: 16px
+
4−color: #333333
+
5−background: #F5F5F5
+
6 fontSize: 14
+
7 fontWeight: 500
+
8 height: 36
+
9 disabled: false
+
+
+ + +
+ + +
+
+ After + b/Button.tsx +
+
+
@@ -1,10 +1,11 @@ Button
+
1 component: "Button"
+
2 variant: "primary"
+
3+padding: 24px
+
4+color: #0066FF
+
5+background: #EBF2FF
+
6+borderRadius: 8px
+
7 fontSize: 14
+
8 fontWeight: 500
+
9 height: 36
+
10 disabled: false
+
+
+ +
+
+
+ + +
+
+
+ Architecture +

From snapshot to diff in four steps.

+

Intent Diff runs a Myers/LCS algorithm on serialized component trees — not on pixels. Every merge triggers a full, machine-readable patch automatically.

+
+
+
+
01
+

Snapshot captured

+

The component tree is serialized to a structured document of props and styles, validated against a Zod schema before being stored as the diff baseline.

+
+
+
02
+

Myers algorithm runs

+

The LCS-based Myers diff algorithm compares the serialized lines of the before and after snapshots, finding the minimum edit script between them.

+
+
+
03
+

Unified patch generated

+

A standard unified patch string is emitted — --- before / +++ after with hunk headers and context lines on each side.

+
+
+
04
+

Diff rendered

+

The patch is passed to @pierre/diffs and displayed in Split or Unified view for reviewers to inspect, accept, or reject individual prop changes.

+
+
+
+
+ + +
+
+
+ Structured, not visual +

The diff runs on the
component AST, not pixels.

+

Screenshot comparison tools tell you something looks different. Intent Diff tells you exactly which prop changed, from what value to what value. Every diff is a first-class data structure — queryable, storable, and consumable by CI/CD pipelines without any manual interpretation.

+
    +
  • △Diffs are computed on Zod-validated component snapshots, never on rendered images.
    • +
  • △Output is a standard unified patch string — parseable by any diff tooling in your stack.
    • +
  • △CI/CD can consume the patch directly — block merges, post PR comments, or trigger alerts on specific prop changes.
    • +
+ Request early access +
+
+
+
Unified patch — Button.tsx
+
+
--- a/Button
+
+++ b/Button
+
@@ -3,5 +3,6 @@ Button
+
  component: "Button"
+
  variant: "primary"
+
- padding: 16px
+
+ padding: 24px
+
- color: #333333
+
+ color: #0066FF
+
- background: #F5F5F5
+
+ background: #EBF2FF
+
+ borderRadius: 8px
+
  fontSize: 14
+
  fontWeight: 500
+
+
+
3 removals
+
4 additions
+
1 hunk
+
+
+
+
+
+ + +
+
+
+ Granular review +

Accept or reject
individual prop changes.

+

Reviewers are not forced to approve or reject an entire diff. Each prop change is an independent item — cherry-pick what ships and what goes back, with a full audit trail recorded per decision. No more all-or-nothing PR approvals on design work.

+
    +
  • △Check a single prop to accept it without touching adjacent changes in the same diff.
    • +
  • △Rejected changes surface as inline comments on the originating artboard in real time.
    • +
  • △Every accepted change is recorded in the merge commit metadata — zero ambiguity in history.
    • +
+
+
+
+
Diff inspector — Button@pr-412
+
+
+ Prop changes · 4 total + 2 accepted · 1 rejected · 1 pending +
+
+
✓
+
+
padding
+
+ 16px + → + 24px +
+
+
+ Accept + Reject +
+
+
+
+
+
color
+
+ #333333 + → + #0066FF +
+
+
+ Accept + Reject +
+
+
+
✓
+
+
background
+
+ #F5F5F5 + → + #EBF2FF +
+
+
+ Accept + Reject +
+
+
+
+
+
borderRadius new
+
+ 8px +
+
+
+ Accept + Reject +
+
+
+
Reviewed by SinachPat · just now
+
+
+
+
+ + +
+
+
+ Technical foundation +

Built on proven algorithms.

+

Intent Diff applies battle-tested diff theory — the same algorithm that powers Git — to component trees, not text files. Structured input means structured, machine-readable output.

+
+
+
+
ND
+

Myers algorithm

+

The O(ND) Myers diff algorithm finds the shortest edit script between two sequences. The same algorithm used in git diff — applied here to serialized component prop lines, not source code.

+ Core algorithm +
+
+
LCS
+

LCS backtracking

+

After the edit graph is constructed, longest-common-subsequence backtracking produces the minimum set of additions and removals — minimizing diff noise and keeping context stable across rebases.

+ Edit script +
+
+
±
+

Unified patch format

+

Output is a standard unified patch string with --- and +++ headers, @@ hunk ranges, and three lines of context. Parseable by any standard tooling out of the box.

+ Output format +
+
+
⊟⊠
+

Split / Unified views

+

The patch is rendered by @pierre/diffs in two modes: Split (side-by-side panels) for detailed prop comparison, and Unified (stacked) for a linear review flow.

+ Rendering +
+
+
🗂
+

Zod schemas for snapshots

+

Every component snapshot is validated at write time against a shared Zod schema. Type-safe serialization means the diff algorithm always operates on well-formed input — no silent failures or undefined prop shapes.

+ Type safety +
+
+
⚙
+

CI/CD integration

+

The unified patch is available as a JSON payload on every merge event. Pipe it into GitHub Actions, Linear, or your own webhook to block PRs on token violations or notify designers of overridden changes.

+ Automation +
+
+
+
+ + +
+
+
+ What connects here +

Intent Diff sits at the center.

+

Every artboard edit creates a diff. Every diff is queryable by the graph. Every diff is shippable through the bridge.

+
+
+ +
⬜
+

Live Artboard

+

Every prop change made in a Live Artboard is recorded as an Intent Diff entry automatically — edits accumulate into a reviewable, shippable patch without any extra steps from the designer.

+ Explore Live Artboard → + + +
◉
+

Origin Graph

+

Diffs are indexed into the Origin Graph, making it queryable which components changed most frequently, which props are most volatile, and who last touched any given node in the tree.

+ Explore Origin Graph → + + +
⇄
+

Agent Bridge

+

The Agent Bridge exposes diffs as MCP tool responses. Ask Cursor or Claude Code to apply the accepted diff for any component and the agent writes the prop changes directly into your codebase.

+ Explore Agent Bridge → + +
+
+
+ + +
+
+

No more redline hell.
Ship the diff.

+

Every design change expressed as a structured, machine-readable, component-level diff. Early access is free.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/features/live-artboard.html b/packages/app/public/features/live-artboard.html new file mode 100644 index 0000000..f9ae180 --- /dev/null +++ b/packages/app/public/features/live-artboard.html @@ -0,0 +1,652 @@ + + + + + +Live Artboard — Originmain + + + + + + + + + + + +
+
+ Live Artboard +

Your app,
live on the canvas.

+

Not a mockup. Not a screenshot. Every artboard is a real iframe render of your actual component tree — running your real code, connected to your real data.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+
+
+
+
🔒 app.originmain.io/canvas
+
+
+
+
Live render
+ + +
+
DashboardCard — live
+
+
+ +
+
+ Card +
+
+ Title +
+
+
+ +
+
+ Revenue Overview + Live +
+
$12,450
+
↑ +2.4%
+
+
+
+ + +
+
UserProfile
+
+
+
Sarah Chen
+
Design Engineer
+
+
+ + +
+
Props — Card
+
title"Revenue…"
+
value12450
+
livetrue
+
+
+
+
+ + +
+
+
+ Architecture +

From URL to live canvas in four steps.

+

A lightweight runtime bridge connects your running app to the Originmain canvas with no build step required.

+
+
+
+
01
+

Open any route

+

Paste any URL from your running app. Originmain opens it as an iframe-backed artboard in the canvas.

+
+
+
02
+

Fiber hook injects

+

A lightweight script injects into the iframe and hooks into React's fiber tree — reading every component's props, state, and DOM rect.

+
+
+
03
+

Canvas receives tree

+

The fiber tree streams to the host via postMessage. The canvas renders selection overlays and prop inspectors in real time.

+
+
+
04
+

Edits write back

+

Click any component. Change a prop in the inspector. The iframe re-renders instantly — no round-trips, no rebuild.

+
+
+
+
+ + +
+
+
+ Real renders +

Not a mockup.
The actual component tree.

+

Every artboard runs your actual React components in a sandboxed iframe. Your real styles, your real tokens, your real data — all visible and editable from the canvas.

+
    +
  • ⬜Open any route from your dev server, staging URL, or production app.
    • +
  • ◉The full fiber tree is mapped — every component, hook, and context value.
    • +
  • ⚡Hot module reload propagates instantly. The canvas always reflects the current build.
    • +
+ Request early access +
+
+
+
Fiber tree — DashboardCard
+ +
▶DashboardCard×1
+
+
▶Cardelevation="md"
+
+
CardHeader
+
MetricDisplayvalue=12450
+
ProgressBarvalue=68
+
TagList×3 items
+
+
+
+
SELECTED — MetricDisplay
+
value12450
+
currency"USD"
+
format"compact"
+
+
+
+
+
+ + +
+
+
+ Interaction model +

Click. Edit. See it.
No context switch.

+

Click any component in the canvas — the inspector populates with its live props. Change a value and the iframe re-renders in under 16ms. All edits accumulate into an Intent Diff automatically.

+
    +
  • ◈Selection handles show the exact DOM rect reported by the fiber hook.
    • +
  • △Every prop change is recorded as an entry in the artboard's undo stack.
    • +
  • ⇄Cmd+Z / Cmd+Shift+Z for full undo/redo — applied live to the iframe.
    • +
+
+
+
+
+ +
+ +
+
+
+
+ +
Revenue Overview
+
$12,450
+
↑ +2.4%
+
+
+ +
+
Props
+
borderRadius
12
+
accentColor
"#0066FF"
+
elevation
"medium"
+
+ +
ProgressBar
+
+
+
+
+
+ + +
+
+
+ Technical foundation +

Built on open standards.

+

No proprietary runtime. No custom compiler. Live Artboard works with any React app — any version, any bundler, any framework.

+
+
+
+
⬛
+

iframe sandboxing

+

Each artboard runs in a sandboxed iframe with allow-scripts allow-same-origin. Your app runs in full isolation — Originmain never modifies your code.

+ Security +
+
+
⚛
+

React Fiber hook

+

A lightweight script hooks into React's internal fiber tree via __REACT_DEVTOOLS_GLOBAL_HOOK__ — the same API used by React DevTools. Works with React 16.8+.

+ Compatibility +
+
+
📡
+

postMessage protocol

+

Fiber tree updates stream from the iframe to the host canvas via a typed postMessage protocol. Messages are validated with a shared artboard ID so multiple artboards never cross-contaminate.

+ Protocol +
+
+
🎯
+

DOM rect tracking

+

Every component's bounding rect is captured on mount and update. This drives the selection overlay, hover highlights, and resize handles — all pixel-accurate to the live render.

+ Precision +
+
+
♻️
+

Zero build step

+

No Babel plugin, no webpack loader, no custom babel config. Paste any URL — dev server, staging, or production — and the artboard renders immediately.

+ Zero friction +
+
+
🔒
+

Cross-origin safe

+

When the iframe is cross-origin, the renderer can include the hook script directly via a small npm package. Same protocol, same canvas experience — no compromise on security.

+ Flexibility +
+
+
+
+ + +
+
+
+ What's next +

Live Artboard powers everything.

+

The real-time component tree is the foundation for every other Originmain feature.

+
+
+ +
◉
+

Origin Graph

+

The fiber tree feeds directly into the Origin Graph — building a queryable index of every component, token, and relationship in your app.

+ Explore Origin Graph → + + +
△
+

Intent Diff

+

Every visual edit in a live artboard generates an Intent Diff — a machine-readable, component-level description of exactly what changed.

+ Explore Intent Diff → + + +
◈
+

Completion Zone

+

Mark any region of the artboard. AI fills it using your design language constraints, then renders the result live in the same artboard.

+ Explore Completion Zone → + +
+
+
+ + +
+
+

See your app
live on the canvas.

+

Early access is free. Connect your first artboard in under two minutes.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/features/origin-graph.html b/packages/app/public/features/origin-graph.html new file mode 100644 index 0000000..11c4b8f --- /dev/null +++ b/packages/app/public/features/origin-graph.html @@ -0,0 +1,774 @@ + + + + + +Origin Graph — Originmain + + + + + + + + + + + +
+
+ ◉ Origin Graph +

Every component,
indexed and queryable.

+

The Origin Graph is a living knowledge graph of your entire component ecosystem — relationships, history, usage, and design tokens — all queryable in real time.

+
+ Request Early Access + See how it works ↓ +
+
+ + +
+
+
+
+
+
🔒 app.originmain.io/graph
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + NavBar + + + + + + Button + + + + + + + Dashboard + Card + + + + + + DashboardCard — selected + + + + + + Card + + + + + + Input + + + + + + --color + -primary + + + + + +
+
Node Inspector
+
DashboardCard
+
+ uses + 4 +
+
+ used by + 2 +
+
+ tokens consumed + 12 +
+
+
Edge types
+
+
+
+ Usage +
+
+
+ Inheritance +
+
+
+ Token link +
+
+
+
+
+
+ + +
+
+
+ Architecture +

From source file to queryable graph
in four steps.

+

A two-pass pipeline — static analysis plus runtime capture — builds a continuously updated graph with zero manual annotation required.

+
+
+
+
01
+

Static analysis

+

An AST walker scans every component file, extracting imports, prop signatures, and design-token references without running your code.

+
+
+
02
+

Runtime capture

+

A React Fiber hook captures live props and state at render time, adding real-world usage data that static analysis alone can't see.

+
+
+
03
+

Graph construction

+

Nodes and typed edges — usage, inheritance, token links — are written to Supabase, forming a queryable graph that updates incrementally.

+
+
+
04
+

Query interface

+

A REST API and MCP tool set expose the graph to AI agents, the diff engine, and the Inspector — answering natural-language queries in real time.

+
+
+
+
+ + +
+
+
+ Impact analysis, instant +

Change a token.
See all 47 components affected — instantly.

+

Because every design-token link is a first-class edge in the graph, changing --color-primary immediately highlights every component downstream. No Storybook trawl. No grep. Just the answer.

+
    +
  • ◉Token edges are resolved at index time — the graph knows before you even ask.
    • +
  • ◉Affected nodes are ranked by depth: direct consumers first, transitive next.
    • +
  • ◉The result feeds directly into Intent Diff, so every PR ships with a complete blast-radius audit.
    • +
+ Request early access +
+
+
+
Token blast radius — --color-primary
+ + +
+
+ +
+ --color-primary + #0066FF → #0891B2 +
+ + +
+
+
+
+ Button + direct +
+
+
+
+ Card + direct +
+
+
+
+ NavBar + direct +
+
+
+
+ DashboardCard + via Card +
+
+
+
+ Input + via Button +
+
+
+ + 42 more components… +
+
+ + +
+ Total affected + 47 components +
+
+
+
+
+ + +
+
+
+ The graph as API +

Not just a visualization.
A queryable API.

+

Every node in the graph is a structured JSON object accessible via REST or MCP tools. AI agents, CI pipelines, and custom tooling can query your entire component ecosystem programmatically — no scraping, no docs to keep in sync.

+
    +
  • ◉REST endpoints return nodes, edges, and subgraphs with fully typed results.
    • +
  • ◉MCP tools let AI agents query the graph via natural language through Agent Bridge.
    • +
  • ◉Completion Zone AI pulls the relevant graph neighborhood as context automatically — no manual prompt engineering.
    • +
+
+
+
+
GET /graph/nodes/Button
+
+{ + "id": "Button", + "type": "component", + "file": "src/ui/Button.tsx", + "props": { + "label": "string", + "variant": "primary | secondary", + "disabled": "boolean" + }, + "usedBy": ["Card", "NavBar"], + "uses": [], + "tokens": [ + "--color-primary", + "--radius-sm", + "--font-weight-semibold" + ], + "updatedAt": "2025-04-25T14:22:07Z" +} +
+
+ MCP → + graph.query("What will break if I rename Button?") +
+
+
+
+
+ + +
+
+
+ Technical foundation +

Six layers that keep
the graph always current.

+

Origin Graph is designed to stay accurate as your codebase moves — incremental, typed, and accessible to any tooling that speaks REST or MCP.

+
+
+
+
🌳
+

AST walker

+

A Babel-based AST walker traverses every component file on save, extracting imports, JSX usage, and design-token references — without executing any code.

+ Static analysis +
+
+
⚛
+

React Fiber runtime

+

A Fiber hook captures live props and state during rendering, adding real-world usage data — actual prop values in production — that static analysis cannot infer.

+ Runtime +
+
+
🗄
+

Supabase graph store

+

Nodes and edges are persisted in Supabase Postgres with a graph-friendly schema. Postgres views and RPC functions serve subgraph queries with sub-10ms latency.

+ Persistence +
+
+
🔗
+

Typed edges

+

Three edge types — usage, inheritance, token — are stored with directionality and metadata, making impact analysis a simple graph traversal rather than a heuristic search.

+ Data model +
+
+
💬
+

Natural language queries

+

Agent Bridge exposes the graph as an MCP tool. Ask "What will break if I rename Card?" in plain English from Cursor, Claude Code, or any MCP-compatible editor.

+ Agent Bridge +
+
+
⚡
+

Incremental updates

+

Only the files touched since the last commit are re-indexed. No full rebuild. A project with 1,000 components updates in under two seconds on a file save.

+ Performance +
+
+
+
+ + +
+
+
+ What connects here +

Origin Graph powers
everything downstream.

+

The graph is infrastructure. Every Originmain feature that needs to understand your codebase queries it first.

+
+
+ +
⬜
+

Live Artboard

+

The Fiber hook that powers Live Artboard is the same one feeding runtime usage data into Origin Graph. Both features share a single, lightweight injection.

+ Explore Live Artboard → + + +
△
+

Intent Diff

+

When Intent Diff calculates the blast radius of a change, it queries Origin Graph. The complete token and usage graph makes the diff semantically complete.

+ Explore Intent Diff → + + +
◈
+

Completion Zone

+

Completion Zone AI pulls the relevant graph neighborhood as context before generating. Your design system constraints arrive as graph data — not a prompt you maintain.

+ Explore Completion Zone → + +
+
+
+ + +
+
+

Your component graph,
always up to date.

+

Early access is free. Connect your repo and the first full graph index runs in under a minute.

+
+ Request Early Access + Back to overview +
+
+
+ + + + + + + diff --git a/packages/app/public/marketing.html b/packages/app/public/marketing.html index 195155e..8961b65 100644 --- a/packages/app/public/marketing.html +++ b/packages/app/public/marketing.html @@ -349,6 +349,63 @@ button { font-family: inherit; cursor: pointer; border: none; background: none; font-size: .875rem; } +/* ── Nav dropdown ── */ +.nav-dropdown { position: relative; } +.nav-dropdown > a { display: flex; align-items: center; gap: 4px; } +.nav-dd-caret { transition: transform 0.15s; } +.nav-dropdown.open .nav-dd-caret { transform: rotate(180deg); } +.nav-dropdown-menu { + position: absolute; + top: 100%; + left: 50%; + transform: translateX(-50%) translateY(-4px); + background: rgba(255,255,255,0.98); + backdrop-filter: blur(20px); + border: 1px solid var(--border); + border-radius: var(--r-3); + box-shadow: var(--sh-xl); + padding: 10px 8px 8px; /* top padding bridges the visual gap without a dead zone */ + min-width: 248px; + opacity: 0; + visibility: hidden; + transition: opacity 0.15s, transform 0.15s, visibility 0.15s; + pointer-events: none; +} +.nav-dropdown-menu.open { + opacity: 1; + visibility: visible; + transform: translateX(-50%) translateY(0); + pointer-events: all; +} +/* Mobile sub-nav (product pages list inside hamburger drawer) */ +.nav-mobile-sub { display: none; padding: 2px 0 6px 14px; flex-direction: column; } +.nav-mobile-sub.open { display: flex; } +.nav-mobile-sub a { font-size: 0.875rem; color: var(--fg-3); padding: 8px 4px; border-bottom: 1px solid var(--border); letter-spacing: -0.01em; transition: color 0.1s; } +.nav-mobile-sub a:last-child { border-bottom: none; } +.nav-mobile-sub a:hover { color: var(--fg); } +.nav-dd-item { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 9px 10px; + border-radius: var(--r-2); + transition: background 0.1s; + cursor: pointer; +} +.nav-dd-item:hover { background: var(--bg-muted); } +.nav-dd-icon { + width: 30px; height: 30px; + background: var(--blue-soft); + border: 1px solid var(--blue-mid); + border-radius: 6px; + display: flex; align-items: center; justify-content: center; + flex-shrink: 0; font-size: 13px; +} +.nav-dd-text { display: flex; flex-direction: column; } +.nav-dd-name { font-size: 0.8125rem; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; } +.nav-dd-desc { font-size: 0.6875rem; color: var(--fg-3); margin-top: 1px; line-height: 1.4; } +.nav-dd-sep { height: 1px; background: var(--border); margin: 4px 0; } + /* ════════════════════════════════════════════════════════════ HERO — Figma Sites: product-forward, massive type ════════════════════════════════════════════════════════════ */ @@ -1529,7 +1586,39 @@ footer {
- Explore Intent Diff → + Explore Intent Diff →
@@ -1865,7 +1967,7 @@ footer { Agent Bridge exposes the graph to external AI tools via MCP protocol. - Explore the Graph → + Explore the Graph →
@@ -2339,11 +2441,13 @@ footer {

Product

@@ -2400,6 +2504,38 @@ document.querySelectorAll('.int-card:not(.int-more)').forEach(card => { }); }); +// ── Nav dropdown: delay-based hover (desktop) + click toggle (mobile/touch) ── +document.querySelectorAll('.nav-dropdown').forEach(dd => { + const menu = dd.querySelector('.nav-dropdown-menu'); + let closeTimer; + const open = () => { clearTimeout(closeTimer); dd.classList.add('open'); menu.classList.add('open'); }; + const sched = () => { closeTimer = setTimeout(() => { dd.classList.remove('open'); menu.classList.remove('open'); }, 150); }; + dd.addEventListener('mouseenter', open); + dd.addEventListener('mouseleave', sched); + menu.addEventListener('mouseenter', open); + menu.addEventListener('mouseleave', sched); + // Mobile / touch: click the trigger link to toggle instead of hover + dd.querySelector('a').addEventListener('click', e => { + if (window.matchMedia('(hover: none)').matches || window.innerWidth <= 1024) { + e.preventDefault(); + const isOpen = menu.classList.toggle('open'); + dd.classList.toggle('open', isOpen); + } + }); +}); + +// ── Mobile product sub-accordion ───────────────────────── +const mobProductToggle = document.getElementById('mob-product-toggle'); +const navMobileSub = document.getElementById('nav-mobile-sub'); +const mobDdCaret = document.getElementById('mob-dd-caret'); +if (mobProductToggle && navMobileSub) { + mobProductToggle.addEventListener('click', e => { + e.preventDefault(); + const isOpen = navMobileSub.classList.toggle('open'); + if (mobDdCaret) mobDdCaret.style.transform = isOpen ? 'rotate(180deg)' : ''; + }); +} + // ── Mobile hamburger ────────────────────────────────────── const burger = document.getElementById('nav-burger'); const mobileMenu = document.getElementById('nav-mobile');