**diagrams.aws.compute.Batch**
+
+**diagrams.aws.compute.Bottlerocket**
+
**diagrams.aws.compute.ComputeOptimizer**
@@ -995,6 +998,9 @@ Node classes list of the aws provider.
**diagrams.aws.management.ControlTower**
+
+**diagrams.aws.management.DevopsAgent**
+
**diagrams.aws.management.LicenseManager**
@@ -1592,6 +1598,9 @@ Node classes list of the aws provider.
**diagrams.aws.security.SingleSignOn**
+
+**diagrams.aws.security.VerifiedPermissions**
+
**diagrams.aws.security.WAFFilteringRule**
diff --git a/docs/nodes/azure.md b/docs/nodes/azure.md
index 570f537e..a738654c 100644
--- a/docs/nodes/azure.md
+++ b/docs/nodes/azure.md
@@ -3,7 +3,7 @@ id: azure
title: Azure
---
-Node classes list of azure provider.
+Node classes list of the azure provider.
## azure.aimachinelearning
@@ -50,6 +50,9 @@ Node classes list of azure provider.
**diagrams.azure.aimachinelearning.ContentModerators**
+
+**diagrams.azure.aimachinelearning.ContentSafety**
+
**diagrams.azure.aimachinelearning.CustomVision**
@@ -254,6 +257,9 @@ Node classes list of azure provider.
## azure.compute
+
+**diagrams.azure.compute.AksAutomatic**
+
**diagrams.azure.compute.AppServices**
@@ -287,6 +293,9 @@ Node classes list of azure provider.
**diagrams.azure.compute.CloudsimpleVirtualMachines**
+
+**diagrams.azure.compute.ComputeFleet**
+
**diagrams.azure.compute.ContainerApps**
@@ -644,6 +653,9 @@ Node classes list of azure provider.
**diagrams.azure.devops.LoadTesting**
+
+**diagrams.azure.devops.ManagedDevopsPools**
+
**diagrams.azure.devops.Pipelines**
@@ -653,6 +665,9 @@ Node classes list of azure provider.
**diagrams.azure.devops.TestPlans**
+
+**diagrams.azure.devops.WorkspaceGateway**
+
## azure.general
@@ -1001,6 +1016,9 @@ Node classes list of azure provider.
## azure.hybridmulticloud
+
+**diagrams.azure.hybridmulticloud.AzureMonitorPipeline**
+
**diagrams.azure.hybridmulticloud.AzureOperator5GCore**
@@ -1085,18 +1103,42 @@ Node classes list of azure provider.
**diagrams.azure.identity.EnterpriseApplications**
+
+**diagrams.azure.identity.EntraConnectHealth**
+
+
+**diagrams.azure.identity.EntraConnectSync**
+
**diagrams.azure.identity.EntraConnect**
**diagrams.azure.identity.EntraDomainServices**
+
+**diagrams.azure.identity.EntraGlobalSecureAccess**
+
**diagrams.azure.identity.EntraIDProtection**
+
+**diagrams.azure.identity.EntraIdentityCustomRoles**
+
+
+**diagrams.azure.identity.EntraIdentityLicenses**
+
+
+**diagrams.azure.identity.EntraIdentityRolesAndAdministrators**
+
+
+**diagrams.azure.identity.EntraInternetAccess**
+
**diagrams.azure.identity.EntraManagedIdentities**
+
+**diagrams.azure.identity.EntraPrivateAccess**
+
**diagrams.azure.identity.EntraPrivlegedIdentityManagement**
@@ -1124,6 +1166,9 @@ Node classes list of azure provider.
**diagrams.azure.identity.ManagedIdentities**
+
+**diagrams.azure.identity.MultiFactorAuthentication**
+
**diagrams.azure.identity.PrivateAccess**
@@ -1142,6 +1187,9 @@ Node classes list of azure provider.
**diagrams.azure.identity.VerifiableCredentials**
+
+**diagrams.azure.identity.VerificationAsAService**
+
## azure.integration
@@ -1178,6 +1226,9 @@ Node classes list of azure provider.
**diagrams.azure.integration.AzureStackEdge**
+
+**diagrams.azure.integration.BusinessProcessTracking**
+
**diagrams.azure.integration.DataCatalog**
@@ -1280,6 +1331,9 @@ Node classes list of azure provider.
**diagrams.azure.intune.Ebooks**
+
+**diagrams.azure.intune.EntraIdentityRolesAndAdministrators**
+
**diagrams.azure.intune.ExchangeAccess**
@@ -1319,6 +1373,9 @@ Node classes list of azure provider.
**diagrams.azure.iot.AzureMapsAccounts**
+
+**diagrams.azure.iot.AzureStackHciSizer**
+
**diagrams.azure.iot.AzureStack**
@@ -1643,6 +1700,9 @@ Node classes list of azure provider.
**diagrams.azure.monitor.LogAnalyticsWorkspaces**
+
+**diagrams.azure.monitor.Logs**
+
**diagrams.azure.monitor.Metrics**
@@ -1742,6 +1802,9 @@ Node classes list of azure provider.
## azure.networking
+
+**diagrams.azure.networking.ApplicationGatewayContainers**
+
**diagrams.azure.networking.ApplicationGateways**
@@ -1898,27 +1961,144 @@ Node classes list of azure provider.
## azure.newicons
+
+**diagrams.azure.newicons.AIAtEdge**
+
+
+**diagrams.azure.newicons.AksNetworkPolicy**
+
+
+**diagrams.azure.newicons.AzureAppTesting**
+
+
+**diagrams.azure.newicons.AzureConsumptionCommitment**
+
+
+**diagrams.azure.newicons.AzureContainerStorage**
+
+
+**diagrams.azure.newicons.AzureLinux**
+
+
+**diagrams.azure.newicons.AzureLocal**
+
+
+**diagrams.azure.newicons.AzureManagedRedis**
+
**diagrams.azure.newicons.AzureSustainability**
+
+**diagrams.azure.newicons.Breeze**
+
**diagrams.azure.newicons.ConnectedVehiclePlatform**
+
+**diagrams.azure.newicons.DataVirtualization**
+
+
+**diagrams.azure.newicons.EdgeActions**
+
+
+**diagrams.azure.newicons.EdgeStorageAccelerator**
+
+
+**diagrams.azure.newicons.EngageCenterConnect**
+
**diagrams.azure.newicons.EntraConnectHealth**
**diagrams.azure.newicons.EntraConnectSync**
+
+**diagrams.azure.newicons.ExternalIDModified**
+
+
+**diagrams.azure.newicons.ExternalID**
+
+
+**diagrams.azure.newicons.FrdQa**
+
+
+**diagrams.azure.newicons.HybridConnectivityHub**
+
**diagrams.azure.newicons.IcmTroubleshooting**
+
+**diagrams.azure.newicons.KubernetesHub**
+
+
+**diagrams.azure.newicons.LandingZone**
+
+
+**diagrams.azure.newicons.LoadBalancerHub**
+
+
+**diagrams.azure.newicons.LogicAppsTemplate**
+
+
+**diagrams.azure.newicons.MicrosoftDiscovery**
+
+
+**diagrams.azure.newicons.MonitorIssues**
+
+
+**diagrams.azure.newicons.NetworkFoundationHub**
+
+
+**diagrams.azure.newicons.NetworkSecurityHub**
+
+
+**diagrams.azure.newicons.OperationCenter**
+
**diagrams.azure.newicons.Osconfig**
+
+**diagrams.azure.newicons.PlanetaryComputerPro**
+
+
+**diagrams.azure.newicons.Promethus**, **Prometheus** (alias)
+
+
+**diagrams.azure.newicons.Pubsub**
+
+
+**diagrams.azure.newicons.ScheduledActions**
+
+
+**diagrams.azure.newicons.ServiceGroupRelationships**
+
+
+**diagrams.azure.newicons.ServiceGroups**
+
+
+**diagrams.azure.newicons.SQLDatabaseFleetManager**
+
+
+**diagrams.azure.newicons.StageMaps**
+
**diagrams.azure.newicons.StorageActions**
+
+**diagrams.azure.newicons.StorageHubs**
+
+
+**diagrams.azure.newicons.ToolchainOrchestrator**
+
+
+**diagrams.azure.newicons.VnetAppliance**
+
+
+**diagrams.azure.newicons.Vpnclientwindows**
+
+
+**diagrams.azure.newicons.WorkloadOrchestration**
+
## azure.other
@@ -2018,6 +2198,9 @@ Node classes list of azure provider.
**diagrams.azure.other.AzureSupportCenterBlue**
+
+**diagrams.azure.other.AzureSustainability**
+
**diagrams.azure.other.AzureVideoIndexer**
@@ -2060,6 +2243,9 @@ Node classes list of azure provider.
**diagrams.azure.other.ConfidentialLedgers**
+
+**diagrams.azure.other.ConnectedVehiclePlatform**
+
**diagrams.azure.other.ContainerAppsEnvironments**
@@ -2162,6 +2348,9 @@ Node classes list of azure provider.
**diagrams.azure.other.ElasticSan**
+
+**diagrams.azure.other.EntraIdentityLicenses**
+
**diagrams.azure.other.ExchangeOnPremisesAccess**
@@ -2180,6 +2369,9 @@ Node classes list of azure provider.
**diagrams.azure.other.HdiAksCluster**
+
+**diagrams.azure.other.IcmTroubleshooting**
+
**diagrams.azure.other.InstancePools**
@@ -2213,6 +2405,9 @@ Node classes list of azure provider.
**diagrams.azure.other.ModularDataCenter**
+
+**diagrams.azure.other.MonitorHealthModels**
+
**diagrams.azure.other.NetworkManagers**
@@ -2222,6 +2417,9 @@ Node classes list of azure provider.
**diagrams.azure.other.OpenSupplyChainPlatform**
+
+**diagrams.azure.other.Osconfig**
+
**diagrams.azure.other.PeeringService**
@@ -2291,6 +2489,9 @@ Node classes list of azure provider.
**diagrams.azure.other.VMImageVersion**
+
+**diagrams.azure.other.WacInstaller**
+
**diagrams.azure.other.Wac**
@@ -2342,6 +2543,12 @@ Node classes list of azure provider.
**diagrams.azure.security.Detonation**
+
+**diagrams.azure.security.EntraIdentityRiskySignins**
+
+
+**diagrams.azure.security.EntraIdentityRiskyUsers**
+
**diagrams.azure.security.ExtendedSecurityUpdates**
@@ -2426,6 +2633,9 @@ Node classes list of azure provider.
**diagrams.azure.storage.ImportExportJobs**
+
+**diagrams.azure.storage.ManagedFileShares**
+
**diagrams.azure.storage.NetappFiles**
@@ -2441,6 +2651,9 @@ Node classes list of azure provider.
**diagrams.azure.storage.StorageAccounts**
+
+**diagrams.azure.storage.StorageActions**
+
**diagrams.azure.storage.StorageExplorer**
@@ -2483,6 +2696,9 @@ Node classes list of azure provider.
**diagrams.azure.web.AppServices**
+
+**diagrams.azure.web.AppSpaceComponent**
+
**diagrams.azure.web.AppSpace**
diff --git a/playground/.gitignore b/playground/.gitignore
new file mode 100644
index 00000000..c7f06306
--- /dev/null
+++ b/playground/.gitignore
@@ -0,0 +1,12 @@
+node_modules/
+dist/
+public/icons/
+public/wheels/
+public/catalog.json
+test-results/
+playwright-report/
+*.tsbuildinfo
+vite.config.js
+vite.config.d.ts
+.omc/
+.vite/
diff --git a/playground/e2e/playground.spec.ts b/playground/e2e/playground.spec.ts
new file mode 100644
index 00000000..c0603b12
--- /dev/null
+++ b/playground/e2e/playground.spec.ts
@@ -0,0 +1,57 @@
+import { expect, test } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+ await page.goto("/");
+ // wait for Pyodide init + the default example to finish rendering
+ await expect(page.getByTestId("preview").locator("svg")).toBeVisible({ timeout: 150_000 });
+});
+
+test("renders the default example with icons", async ({ page }) => {
+ const preview = page.getByTestId("preview");
+ await expect(preview.locator("svg image").first()).toHaveAttribute("xlink:href", /icons\/aws\//);
+});
+
+test("autocompletes EC2 from the aws compute module", async ({ page }) => {
+ const editor = page.getByTestId("editor").locator(".cm-content");
+ await editor.click();
+ await page.keyboard.press("ControlOrMeta+a");
+ await page.keyboard.type("from diagrams.aws.compute import EC2A");
+ await expect(page.locator(".cm-tooltip-autocomplete")).toContainText("EC2AutoScaling", { timeout: 10_000 });
+});
+
+test("share link roundtrips code", async ({ page, context }) => {
+ const editor = page.getByTestId("editor").locator(".cm-content");
+ await editor.click();
+ await page.keyboard.press("ControlOrMeta+a");
+ await page.keyboard.type('from diagrams import Diagram\nwith Diagram("Shared", show=False):\n pass');
+ await page.getByTestId("share-button").click();
+ await expect(page.getByTestId("share-button")).toContainText("Link copied!");
+ const url = page.url();
+ expect(url).toContain("#code=");
+ const second = await context.newPage();
+ await second.goto(url);
+ await expect(second.getByTestId("editor")).toContainText("Shared", { timeout: 150_000 });
+});
+
+test("python errors keep the previous preview", async ({ page }) => {
+ const editor = page.getByTestId("editor").locator(".cm-content");
+ await editor.click();
+ await page.keyboard.press("ControlOrMeta+a");
+ await page.keyboard.type("1/0");
+ await expect(page.getByTestId("error-panel")).toContainText("ZeroDivisionError", { timeout: 30_000 });
+ await expect(page.getByTestId("preview").locator("svg")).toBeVisible();
+});
+
+test("exports PNG", async ({ page }) => {
+ const downloadPromise = page.waitForEvent("download");
+ // Background White is the ExportBar's default; WIDTH/HEIGHT left as
+ // "auto" fall back to the default-2x output size.
+ await page.getByRole("button", { name: "PNG" }).click();
+ const download = await downloadPromise;
+ expect(download.suggestedFilename()).toMatch(/\.png$/);
+});
+
+test("copies image to clipboard", async ({ page }) => {
+ await page.getByRole("button", { name: "Copy Image" }).click();
+ await expect(page.getByText("Copied!")).toBeVisible();
+});
diff --git a/playground/index.html b/playground/index.html
new file mode 100644
index 00000000..282ecb37
--- /dev/null
+++ b/playground/index.html
@@ -0,0 +1,121 @@
+
+
+
+
+
+ Diagrams Playground
++ Write diagrams code in Python and see the rendered cloud architecture diagram + instantly — right in your browser, with nothing to install. +
++ Loading the playground… +
+ ++ Documentation + · + GitHub +
+
+
+ clampSidebarWidth(clientX - rect.left)}
+ resetValue={DEFAULT_SIDEBAR_WIDTH}
+ />
+
+
+ );
+}
diff --git a/playground/src/app.css b/playground/src/app.css
new file mode 100644
index 00000000..59bff561
--- /dev/null
+++ b/playground/src/app.css
@@ -0,0 +1,1308 @@
+/* ============================================================
+ Diagrams Playground — light-first soft modern SaaS theme
+ ============================================================ */
+
+/* ---------- Theme-agnostic tokens ---------- */
+:root {
+ --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
+ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+ --radius-sm: 10px; /* buttons / inputs */
+ --radius-md: 12px; /* cards / panels */
+ --radius-lg: 16px; /* diagram card */
+
+ --accent: #6366f1;
+ --accent-hover: #4f46e5;
+ --accent-soft: #eef2ff;
+}
+
+/* ---------- Light theme (DEFAULT) ---------- */
+:root[data-theme="light"] {
+ --page-bg: #ffffff;
+ --panel-bg: #ffffff;
+ --panel-alt: #f8f9fb;
+ --input-bg: #f3f4f6;
+ --border: #e5e7eb;
+ --text: #111827;
+ --text-muted: #6b7280;
+
+ /* Accordion surfaces: provider rows sit on --panel-bg at rest; --surface-1
+ tints a provider row's header on hover and while expanded
+ (aria-expanded), and --surface-2 tints that header's count badge in the
+ same states, kept distinct from --surface-1 so the badge still reads as
+ a separate pill. */
+ --surface-1: #f1f2f5;
+ --surface-2: #fafbfc;
+
+ --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 3px rgba(17, 24, 39, 0.06);
+ --shadow-2: 0 4px 24px rgba(17, 24, 39, 0.08);
+
+ --status-ready-bg: #dcfce7;
+ --status-ready-fg: #15803d;
+ --status-busy-bg: #fef3c7;
+ --status-busy-fg: #b45309;
+ --status-error-bg: #fee2e2;
+ --status-error-fg: #b91c1c;
+
+ --share-bg: #111827;
+ --share-fg: #ffffff;
+
+ --canvas-bg: #fafafb;
+ --canvas-dot: #d1d5db;
+
+ --error-bg: #fef2f2;
+ --error-border: #fecaca;
+ --error-fg: #b91c1c;
+
+ --chip-bg: rgba(255, 255, 255, 0.92);
+ --chip-fg: var(--text-muted);
+
+ --cm-bg: #ffffff;
+ --cm-fg: var(--text);
+ --cm-caret: #111827;
+ --cm-selection: rgba(99, 102, 241, 0.18);
+ --cm-active-line: #f8f9fb;
+ --cm-gutter-bg: #ffffff;
+ --cm-gutter-fg: var(--text-muted);
+ --cm-gutter-border: var(--border);
+ --cm-active-gutter-bg: #f3f4f6;
+ --cm-active-gutter-fg: var(--text);
+ --cm-selection-match: rgba(99, 102, 241, 0.15);
+ --cm-matching-bracket-bg: rgba(99, 102, 241, 0.15);
+ --cm-matching-bracket-outline: var(--accent);
+ --cm-tooltip-bg: #ffffff;
+ --cm-tooltip-border: var(--border);
+ --cm-tooltip-fg: var(--text);
+ --cm-autocomplete-selected-bg: var(--accent);
+ --cm-autocomplete-selected-fg: #ffffff;
+
+ --syn-keyword: #7c3aed;
+ --syn-string: #c2410c;
+ --syn-comment: #9ca3af;
+ --syn-function: #2563eb;
+ --syn-number: #0d9488;
+ --syn-operator: var(--text);
+ --syn-variable: var(--text);
+ --syn-property: #2563eb;
+ --syn-bool: #7c3aed;
+ --syn-atom: #7c3aed;
+}
+
+/* ---------- Dark theme (neutral grays, indigo accent stays) ---------- */
+:root[data-theme="dark"] {
+ --page-bg: #0f1115;
+ --panel-bg: #16181d;
+ --panel-alt: #1b1e24;
+ --input-bg: #1e2127;
+ --border: #2a2d34;
+ --text: #e5e7eb;
+ --text-muted: #9ca3af;
+
+ /* Accordion surfaces — dark equivalents, see light theme comment above. */
+ --surface-1: #1e2128;
+ --surface-2: #1a1c22;
+
+ --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.24);
+ --shadow-2: 0 4px 24px rgba(0, 0, 0, 0.4);
+
+ --status-ready-bg: rgba(34, 197, 94, 0.16);
+ --status-ready-fg: #4ade80;
+ --status-busy-bg: rgba(245, 158, 11, 0.16);
+ --status-busy-fg: #fbbf24;
+ --status-error-bg: rgba(239, 68, 68, 0.16);
+ --status-error-fg: #f87171;
+
+ --share-bg: #ffffff;
+ --share-fg: #111827;
+
+ --canvas-bg: #131519;
+ --canvas-dot: #2a2d34;
+
+ --error-bg: rgba(239, 68, 68, 0.1);
+ --error-border: rgba(239, 68, 68, 0.35);
+ --error-fg: #f87171;
+
+ --chip-bg: rgba(22, 24, 29, 0.85);
+ --chip-fg: var(--text-muted);
+
+ --cm-bg: #16181d;
+ --cm-fg: var(--text);
+ --cm-caret: #e5e7eb;
+ --cm-selection: rgba(99, 102, 241, 0.32);
+ --cm-active-line: #1b1e24;
+ --cm-gutter-bg: #16181d;
+ --cm-gutter-fg: var(--text-muted);
+ --cm-gutter-border: var(--border);
+ --cm-active-gutter-bg: #1e2127;
+ --cm-active-gutter-fg: var(--text);
+ --cm-selection-match: rgba(99, 102, 241, 0.25);
+ --cm-matching-bracket-bg: rgba(99, 102, 241, 0.25);
+ --cm-matching-bracket-outline: var(--accent);
+ --cm-tooltip-bg: #1b1e24;
+ --cm-tooltip-border: var(--border);
+ --cm-tooltip-fg: var(--text);
+ --cm-autocomplete-selected-bg: var(--accent);
+ --cm-autocomplete-selected-fg: #ffffff;
+
+ --syn-keyword: #a78bfa;
+ --syn-string: #fb923c;
+ --syn-comment: #6b7280;
+ --syn-function: #60a5fa;
+ --syn-number: #2dd4bf;
+ --syn-operator: var(--text);
+ --syn-variable: var(--text);
+ --syn-property: #60a5fa;
+ --syn-bool: #a78bfa;
+ --syn-atom: #a78bfa;
+}
+
+/* ---------- Reset & base ---------- */
+* {
+ box-sizing: border-box;
+ margin: 0;
+}
+html,
+body,
+#root,
+.app {
+ height: 100%;
+ font-family: var(--font-sans);
+ background: var(--page-bg);
+ color: var(--text);
+ -webkit-font-smoothing: antialiased;
+}
+.app {
+ display: flex;
+ flex-direction: column;
+ transition: background-color 160ms ease, color 160ms ease;
+}
+
+/* ---------- Scrollbars ---------- */
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--border) transparent;
+}
+*::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+*::-webkit-scrollbar-track {
+ background: transparent;
+}
+*::-webkit-scrollbar-thumb {
+ background: var(--border);
+ border-radius: 6px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+*::-webkit-scrollbar-thumb:hover {
+ background: var(--accent);
+ background-clip: padding-box;
+}
+
+/* ---------- Motion ---------- */
+@keyframes fade-slide {
+ from {
+ opacity: 0;
+ transform: translateY(6px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+@keyframes loading-sweep {
+ 0% {
+ transform: translateX(-100%);
+ }
+ 100% {
+ transform: translateX(100%);
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.001ms !important;
+ animation-iteration-count: 1 !important;
+ }
+}
+
+/* ---------- Buttons (shared baseline) ---------- */
+.app button {
+ font-family: var(--font-sans);
+ font-size: 13px;
+ font-weight: 500;
+ cursor: pointer;
+ border-radius: var(--radius-sm);
+ transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease,
+ box-shadow 120ms ease;
+}
+.app button:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 1px;
+}
+
+/* Ghost bordered button — used for Theme / GitHub / Docs. Fixed height so
+ the GitHub button (whose inner star pill would otherwise inflate it)
+ lines up exactly with its plain siblings. */
+.btn-ghost {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ height: 32px;
+ box-sizing: border-box;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ padding: 0 12px;
+ text-decoration: none;
+ font-size: 13px;
+ font-weight: 500;
+ border-radius: var(--radius-sm);
+ transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
+}
+.btn-ghost:hover,
+.btn-ghost:focus-visible {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+.btn-ghost:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 1px;
+}
+
+/* Star-count badge inside the GitHub ghost button (logo + "GitHub" + count). */
+.gh-stars {
+ display: inline-flex;
+ align-items: center;
+ gap: 3px;
+ margin-left: 2px;
+ padding: 2px 7px;
+ border-radius: 999px;
+ background: var(--panel-alt);
+ border: 1px solid var(--border);
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ line-height: 1;
+}
+.gh-stars svg {
+ color: #f5b400;
+}
+
+/* Filled dark "Share" button — same fixed height as the ghost buttons. */
+.btn-share {
+ display: inline-flex;
+ align-items: center;
+ height: 32px;
+ box-sizing: border-box;
+ color: var(--share-fg);
+ background: var(--share-bg);
+ border: 1px solid var(--share-bg);
+ padding: 0 16px;
+ font-weight: 600;
+ border-radius: var(--radius-sm);
+}
+.btn-share:hover {
+ opacity: 0.9;
+}
+
+/* ---------- Header (single row) ---------- */
+.toolbar {
+ position: relative;
+ background: var(--page-bg);
+ border-bottom: 1px solid var(--border);
+ padding: 12px 20px;
+ display: flex;
+ align-items: center;
+ gap: 14px;
+ animation: fade-slide 420ms ease-out both;
+}
+.toolbar::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -1px;
+ height: 2px;
+ background: var(--accent);
+ opacity: 0;
+ transform: translateX(-100%);
+ pointer-events: none;
+}
+.toolbar.is-loading::after {
+ opacity: 1;
+ animation: loading-sweep 1.1s ease-in-out infinite;
+}
+/* White chip in BOTH themes — the logo's dark strokes need a light ground. */
+.app-mark {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ flex-shrink: 0;
+ border-radius: 8px;
+ background: #ffffff;
+}
+.toolbar-title {
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 16px;
+ color: var(--text);
+ letter-spacing: -0.01em;
+}
+.status-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 10px 4px 8px;
+ border-radius: 999px;
+ font-family: var(--font-sans);
+ font-size: 12px;
+ font-weight: 500;
+}
+.status-dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ flex-shrink: 0;
+}
+.status-pill--ready {
+ background: var(--status-ready-bg);
+ color: var(--status-ready-fg);
+}
+.status-pill--ready .status-dot {
+ background: var(--status-ready-fg);
+}
+.status-pill--busy {
+ background: var(--status-busy-bg);
+ color: var(--status-busy-fg);
+}
+.status-pill--busy .status-dot {
+ background: var(--status-busy-fg);
+}
+.status-pill--error {
+ background: var(--status-error-bg);
+ color: var(--status-error-fg);
+}
+.status-pill--error .status-dot {
+ background: var(--status-error-fg);
+}
+.toolbar-spacer {
+ flex: 1;
+}
+.toolbar-actions {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+/* ---------- Examples row ---------- */
+.examples {
+ position: relative;
+ background: var(--page-bg);
+ border-bottom: 1px solid var(--border);
+ padding: 10px 20px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ flex-wrap: wrap;
+ animation: fade-slide 420ms ease-out both;
+ animation-delay: 30ms;
+}
+.examples-label {
+ font-family: var(--font-sans);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ font-size: 11px;
+ font-weight: 600;
+ color: var(--text-muted);
+ margin-right: 4px;
+}
+.example-pill {
+ font-size: 13px;
+ font-weight: 500;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 6px 12px;
+}
+.example-pill:hover,
+.example-pill:focus-visible {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+.example-pill.is-active {
+ background: var(--accent-soft);
+ border-color: var(--accent);
+ color: var(--accent-hover);
+}
+
+/* ---------- Main row ---------- */
+/* Flat layout (mockup): panels butt together and are separated by 1px
+ hairlines only — no gaps, no per-panel cards/shadows/rounding. */
+.main {
+ flex: 1;
+ display: flex;
+ min-height: 0;
+ gap: 0;
+ padding: 0;
+ background: var(--panel-bg);
+}
+
+/* ---------- Split container (editor + handle + preview) ---------- */
+.split-container {
+ flex: 1;
+ display: flex;
+ min-width: 0;
+ min-height: 0;
+}
+
+/* ---------- Node search sidebar ---------- */
+/* Width is set inline (resizable via DragHandle); 260px is the CSS
+ fallback. The right divider line is the DragHandle itself. */
+.node-search {
+ width: 260px;
+ flex-shrink: 0;
+ background: var(--panel-bg);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ animation: fade-slide 420ms ease-out both;
+}
+.search-input-wrap {
+ position: relative;
+ margin: 12px;
+}
+.search-icon {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-muted);
+ pointer-events: none;
+ display: inline-flex;
+}
+.node-search input {
+ width: 100%;
+ padding: 8px 10px 8px 32px;
+ background: var(--input-bg);
+ border: 1px solid transparent;
+ border-radius: var(--radius-md);
+ color: var(--text);
+ font-family: var(--font-sans);
+ font-size: 13px;
+ outline: none;
+ transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
+}
+.node-search input::placeholder {
+ color: var(--text-muted);
+}
+.node-search input:focus {
+ background: var(--panel-bg);
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.node-search-results {
+ flex: 1;
+ overflow-y: auto;
+ list-style: none;
+ padding: 0 8px 12px;
+ font-size: 13px;
+}
+
+/* Shared class row (flat search results + expanded-category tree rows).
+ Fixed layout that never shifts — no hover-revealed controls live here;
+ actions are a right-click context menu instead (see .ctx-menu below).
+ Row hover/focus is a subtle background tint only.
+ Horizontal padding lives on the row itself (not on an ancestor
+
+ rect.width === 0 ? DEFAULT_RATIO : clampRatio(((clientX - rect.left) / rect.width) * 100)
+ }
+ resetValue={DEFAULT_RATIO}
+ />
+
+
+
+
+ (replaceCodeRef.current = fn)}
+ onRunNow={() => void execute(codeRef.current)}
+ onShare={handleShare}
+ />
+
+ - ), so
+ the row's own box — and therefore its hover/focus background — always
+ spans the full width of the results list, edge to edge, regardless of
+ tree depth; only the padding-left (content inset) grows with depth. */
+.hit-row {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 6px 8px;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: background-color 100ms ease;
+}
+.hit-row:hover,
+.hit-row:focus-visible {
+ background-color: var(--panel-alt);
+}
+.hit-row:focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: -2px;
+}
+/* Class row nested inside an expanded tree category (depth 2): the
+ .tree-class-rows container carries the indent + rail (see below); the
+ row itself only keeps its base padding. */
+.hit-row.is-tree-class {
+ padding-left: 8px;
+}
+/* Bare node icon — the real icon image with no wrapper box (no border,
+ background, or radius): just a fixed-size flex slot for alignment. */
+.hit-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+}
+.hit-name {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 13px;
+ color: var(--text);
+}
+.hit-module {
+ color: var(--text-muted);
+ font-family: var(--font-mono);
+ font-size: 11px;
+ flex-shrink: 0;
+ max-width: 40%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* Right-click context menu for a hit row: Copy import / Insert import.
+ Portaled to document.body (see NodeSearch.tsx) so position:fixed is
+ always viewport-relative; z-index 1000 keeps it above the editor. */
+.ctx-menu {
+ position: fixed;
+ z-index: 1000;
+ min-width: 160px;
+ padding: 4px;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ box-shadow: var(--shadow-2);
+ animation: fade-slide 100ms ease-out both;
+}
+.ctx-menu button {
+ display: block;
+ width: 100%;
+ text-align: left;
+ padding: 6px 10px;
+ font-family: var(--font-sans);
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text);
+ background: transparent;
+ border: none;
+ border-radius: var(--radius-sm);
+}
+.ctx-menu button:hover,
+.ctx-menu button:focus-visible {
+ background: var(--accent-soft);
+ color: var(--accent-hover);
+}
+
+/* ---------- Node tree (browse view, shown when search is empty) ----------
+ Mockup style: no section divider lines, rounded row highlights, count
+ PILLS on provider rows, mono category names, and one thin vertical rail
+ per expanded level for depth. */
+.tree-node {
+ display: block;
+ padding: 0;
+}
+.tree-row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 7px 8px;
+ background-color: transparent;
+ border: none;
+ border-radius: 8px;
+ color: var(--text);
+ font-family: var(--font-sans);
+ font-size: 13px;
+ text-align: left;
+ transition: background-color 100ms ease;
+}
+.tree-row:hover {
+ background-color: var(--panel-alt);
+}
+/* Provider row: rounded highlight while open (mockup), sticky while its
+ subtree scrolls so you always know which provider you're browsing.
+ Opaque bg when stuck so rows don't ghost through underneath. */
+.tree-provider-row {
+ position: sticky;
+ top: 0;
+ z-index: 2;
+ background-color: var(--panel-bg);
+}
+.tree-provider-row:hover,
+.tree-provider-row[aria-expanded="true"] {
+ background-color: var(--surface-1);
+}
+/* Centered SVG caret (see Chevron in NodeSearch.tsx): fixed square box +
+ center transform-origin so the open-rotation spins in place at BOTH tree
+ levels. */
+.tree-chevron {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
+ color: var(--text-muted);
+ transition: transform 150ms ease;
+ transform-origin: center;
+}
+.tree-provider-row[aria-expanded="true"] .tree-chevron,
+.tree-category-row[aria-expanded="true"] .tree-chevron {
+ transform: rotate(90deg);
+}
+.tree-provider-name {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--text);
+}
+.tree-category-name {
+ flex: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-family: var(--font-mono);
+ font-weight: 500;
+ font-size: 12.5px;
+ color: var(--text);
+}
+/* Counts: provider level = rounded pill, category level = plain muted. */
+.tree-badge {
+ font-family: var(--font-mono);
+ font-size: 11px;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+.tree-provider-row .tree-badge {
+ background: var(--surface-1);
+ border-radius: 999px;
+ padding: 2px 8px;
+}
+.tree-provider-row:hover .tree-badge,
+.tree-provider-row[aria-expanded="true"] .tree-badge {
+ background: var(--surface-2);
+}
+/* Expanded levels: no bg tint — a single thin vertical rail per level
+ (mockup) carries the hierarchy, aligned under the parent's chevron. */
+.tree-children {
+ list-style: none;
+ margin: 2px 0 6px 17px;
+ padding-left: 4px;
+ border-left: 1px solid var(--border);
+}
+.tree-class-rows {
+ list-style: none;
+ margin: 2px 0 6px 17px;
+ padding-left: 4px;
+ border-left: 1px solid var(--border);
+}
+
+/* ---------- Editor column ---------- */
+.editor-column {
+ /* flex-basis is set inline as a ${splitRatio}% of .split-container; no
+ grow/shrink so the drag ratio is respected exactly, with the preview
+ pane (flex: 1) filling whatever remains. */
+ flex: 0 0 auto;
+ min-width: 160px;
+ display: flex;
+ flex-direction: column;
+ background: var(--panel-bg);
+ overflow: hidden;
+ animation: fade-slide 420ms ease-out both;
+ animation-delay: 60ms;
+}
+.editor-pane-wrap {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ min-height: 0;
+}
+/* Fixed height shared with .preview-header so the two panel headers sit on
+ the same baseline and their bottom hairlines form one continuous line. */
+.editor-topbar {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 46px;
+ box-sizing: border-box;
+ padding: 0 16px;
+ border-bottom: 1px solid var(--border);
+ background: var(--panel-bg);
+}
+.editor-filename {
+ font-family: var(--font-mono);
+ font-size: 13px;
+ color: var(--text);
+}
+.editor-linecount {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--text-muted);
+}
+.editor-pane {
+ flex: 1;
+ overflow: auto;
+ min-height: 0;
+}
+.editor-pane .cm-editor {
+ height: 100%;
+}
+/* Line-number gutter: slightly smaller digits than the code, with a bit of
+ breathing room on both sides of the number column. */
+.editor-pane .cm-lineNumbers .cm-gutterElement {
+ font-size: 11.5px;
+ padding: 0 10px 0 12px;
+}
+.cm-signature-hint {
+ background: var(--panel-bg);
+ color: var(--accent-hover);
+ padding: 5px 10px;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ font-family: var(--font-mono);
+ font-size: 12px;
+ max-width: 480px;
+ box-shadow: var(--shadow-2);
+}
+
+/* ---------- Split handle ---------- */
+/* A flush 1px divider that takes exactly 1px of layout — no white gutter
+ on either side. The invisible ::before overlay extends the drag hit-area
+ 4px into each neighboring panel (pseudo-element events hit the handle). */
+.split-handle {
+ flex: 0 0 1px;
+ width: 1px;
+ cursor: col-resize;
+ background: var(--border);
+ position: relative;
+ touch-action: none;
+ transition: background-color 120ms ease;
+ z-index: 4;
+}
+.split-handle::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: -4px;
+ right: -4px;
+ background: transparent;
+}
+.split-handle:hover,
+.split-handle.is-active {
+ background: var(--accent);
+}
+
+/* ---------- Error panel (traceback) ---------- */
+.error-panel {
+ max-height: 30%;
+ overflow: auto;
+ background: var(--error-bg);
+ color: var(--error-fg);
+ padding: 12px 14px;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ border-top: 1px solid var(--error-border);
+ /* The export bar is now always the last element in .editor-column, so it
+ owns the rounded bottom corners instead of this panel. */
+}
+.error-panel::before {
+ content: "TRACEBACK";
+ display: block;
+ font-family: var(--font-sans);
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ font-size: 11px;
+ text-transform: uppercase;
+ color: var(--error-fg);
+ opacity: 0.85;
+ margin-bottom: 5px;
+}
+
+/* ---------- Preview pane ---------- */
+.preview-pane {
+ flex: 1 1 0;
+ min-width: 160px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ background: var(--panel-bg);
+ overflow: hidden;
+ animation: fade-slide 420ms ease-out both;
+ animation-delay: 120ms;
+}
+
+/* Fixed header bar: a real flex sibling above `.preview-canvas` (not part of
+ the transformed content), so it never pans/zooms with the diagram. Opaque
+ themed surface + hairline bottom border + z-index keep it visually
+ anchored above the canvas at all times. */
+.preview-header {
+ position: relative;
+ z-index: 3;
+ flex: 0 0 auto;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 12px;
+ height: 46px;
+ box-sizing: border-box;
+ padding: 0 16px;
+ background: var(--panel-bg);
+ border-bottom: 1px solid var(--border);
+}
+
+/* True infinite canvas: a fixed, clipped viewport. All pan/zoom lives in the
+ `.preview-content` transform below — this element never scrolls. The
+ dot-grid background-position is driven by tx/ty (inline style) so the
+ grid visually pans in lockstep with the content. */
+.preview-canvas {
+ position: relative;
+ flex: 1;
+ overflow: hidden;
+ touch-action: none;
+ color: var(--text);
+ background-color: var(--canvas-bg);
+ background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px);
+ background-size: 16px 16px;
+ transition: background-color 160ms ease;
+ cursor: grab;
+}
+.preview-canvas.is-panning {
+ cursor: grabbing;
+ user-select: none;
+}
+
+/* Absolutely-positioned content layer — translate(tx,ty) scale(s) with
+ transform-origin 0 0 is applied inline (see PreviewPane.tsx) so tx/ty can
+ go negative with no bounds, unlike the old scrollLeft/scrollTop pan. */
+.preview-content {
+ position: absolute;
+ top: 0;
+ left: 0;
+ transform-origin: 0 0;
+}
+
+.diagram-block {
+ margin-bottom: 28px;
+}
+/* Per-sheet name label, shown above each sheet only when there are multiple
+ diagrams (the fixed header only ever shows the first diagram's name), so
+ panning users can tell sheets apart. */
+.sheet-label {
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 12px;
+ color: var(--text-muted);
+ margin-bottom: 8px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.diagram-header-left {
+ display: inline-flex;
+ align-items: baseline;
+ gap: 6px;
+ min-width: 0;
+}
+.diagram-name {
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--text);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+/* Click-to-edit affordance: the pencil icon stays hidden until hover/focus so
+ the header doesn't look cluttered while just viewing the diagram. */
+.diagram-name--editable {
+ display: inline-flex;
+ align-items: baseline;
+ gap: 4px;
+ cursor: pointer;
+ border-radius: var(--radius-sm);
+}
+.diagram-name--editable:hover,
+.diagram-name--editable:focus-visible {
+ color: var(--accent-hover);
+}
+.diagram-name-edit-icon {
+ font-size: 11px;
+ color: var(--text-muted);
+ opacity: 0;
+ transition: opacity 120ms ease;
+}
+.diagram-name--editable:hover .diagram-name-edit-icon,
+.diagram-name--editable:focus-visible .diagram-name-edit-icon {
+ opacity: 1;
+}
+/* Inline rename input — same font/size as `.diagram-name` so the swap
+ doesn't reflow the header, plus a subtle bordered field to read as
+ editable. */
+.diagram-name-input {
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 14px;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 1px 6px;
+ min-width: 80px;
+ max-width: 260px;
+ outline: none;
+}
+.diagram-name-input:focus {
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.diagram-meta {
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--text-muted);
+ white-space: nowrap;
+}
+.diagram-header-right {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
+.zoom-segment {
+ display: inline-flex;
+ align-items: stretch;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ overflow: hidden;
+}
+.zoom-segment button {
+ border: none;
+ border-radius: 0;
+ background: var(--panel-bg);
+ color: var(--text);
+ padding: 5px 10px;
+ font-size: 12px;
+ line-height: 1;
+}
+.zoom-segment button + button {
+ border-left: 1px solid var(--border);
+}
+.zoom-segment button:hover {
+ color: var(--accent-hover);
+}
+.zoom-pct {
+ font-family: var(--font-mono);
+ min-width: 44px;
+ text-align: center;
+}
+
+.preview-overlay-chip {
+ position: absolute;
+ top: 12px;
+ right: 12px;
+ z-index: 2;
+ display: inline-flex;
+ align-items: center;
+ padding: 5px 10px;
+ border-radius: 999px;
+ background: var(--chip-bg);
+ border: 1px solid var(--border);
+ color: var(--chip-fg);
+ font-family: var(--font-sans);
+ font-size: 12px;
+ font-weight: 500;
+ box-shadow: var(--shadow-1);
+ pointer-events: none;
+ backdrop-filter: blur(4px);
+}
+
+.render-ms-chip {
+ position: absolute;
+ left: 12px;
+ bottom: 12px;
+ z-index: 2;
+ padding: 4px 10px;
+ border-radius: 999px;
+ background: var(--chip-bg);
+ border: 1px solid var(--border);
+ color: var(--chip-fg);
+ font-family: var(--font-mono);
+ font-size: 12px;
+ box-shadow: var(--shadow-1);
+ pointer-events: none;
+ backdrop-filter: blur(4px);
+}
+
+/* ---------- Export bar (permanently visible, docked under the editor) ----------
+ Two full-width stacked rows on the plain panel surface, separated from
+ the editor above by a single full-bleed hairline (the same divider
+ treatment every panel section uses):
+ - fields row — `SIZE [W] × [H] px [Auto switch]` (+ TARGET select when
+ several diagrams exist), stretched across the full row. One Auto
+ switch governs both dimensions.
+ - actions row — PNG / SVG / JPEG download buttons stretched equally,
+ plus a compact "Copy Image" clipboard button, each with a small icon. */
+.export-bar {
+ flex-shrink: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ padding: 18px 16px;
+ background: var(--panel-bg);
+ border-top: 1px solid var(--border);
+ border-radius: 0;
+}
+.export-bar-row {
+ display: flex;
+ align-items: flex-end;
+ flex-wrap: wrap;
+ gap: 8px 16px;
+}
+.export-bar-row-fields {
+ justify-content: space-between;
+}
+.export-bar-row-actions {
+ align-items: center;
+}
+.export-field {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 8px;
+ flex: 1;
+ min-width: 0;
+}
+.export-field-label {
+ font-family: var(--font-sans);
+ font-size: 11px;
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--text-muted);
+ flex-shrink: 0;
+}
+/* SIZE inputs: two bordered pixel fields joined by "×", indigo focus ring;
+ dimmed while the Auto switch is on. */
+.export-size-input {
+ flex: 1;
+ min-width: 64px;
+ width: auto;
+ text-align: center;
+ font-family: var(--font-mono);
+ font-size: 12px;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: 10px;
+ padding: 6px 8px;
+}
+.export-size-input:focus {
+ outline: none;
+ border-color: var(--accent);
+ box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.export-size-input:disabled {
+ color: var(--text-muted);
+ background: var(--surface-1);
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+.export-size-x,
+.export-size-px {
+ color: var(--text-muted);
+ font-size: 12px;
+ flex-shrink: 0;
+}
+/* Auto switch: pill with a sliding knob (mockup). aria-checked drives the
+ on/off visuals. */
+.export-auto-toggle {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ border: 1px solid var(--border);
+ border-radius: 999px;
+ padding: 5px 12px 5px 6px;
+ background: var(--panel-bg);
+ font-family: var(--font-sans);
+ font-size: 12px;
+ font-weight: 500;
+ color: var(--text);
+}
+.export-auto-toggle .toggle-track {
+ position: relative;
+ width: 28px;
+ height: 16px;
+ border-radius: 999px;
+ background: var(--border);
+ transition: background-color 150ms ease;
+ flex-shrink: 0;
+}
+.export-auto-toggle .toggle-knob {
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: #ffffff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ transition: transform 150ms ease;
+}
+.export-auto-toggle[aria-checked="true"] .toggle-track {
+ background: var(--accent);
+}
+.export-auto-toggle[aria-checked="true"] .toggle-knob {
+ transform: translateX(12px);
+}
+/* (BACKGROUND option removed — exports always use a white background.) */
+.export-bar-select {
+ font-family: var(--font-sans);
+ font-size: 12px;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 5px 8px;
+ max-width: 160px;
+ flex-shrink: 0;
+}
+.export-download-btn,
+.export-copy-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 6px;
+ flex: 1 1 0;
+}
+.export-download-btn {
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 12px;
+ color: var(--text);
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 6px 13px;
+}
+.export-download-btn:hover:not(:disabled) {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+.export-download-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.export-copy-btn {
+ flex: 0 0 auto;
+ font-family: var(--font-sans);
+ font-weight: 600;
+ font-size: 12px;
+ color: var(--text-muted);
+ background: transparent;
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ padding: 6px 13px;
+}
+.export-copy-btn:hover:not(:disabled) {
+ border-color: var(--accent);
+ color: var(--accent);
+}
+.export-copy-btn:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+.export-bar-message {
+ font-family: var(--font-sans);
+ font-size: 11px;
+ font-weight: 600;
+ flex-shrink: 0;
+}
+.export-bar-message-error {
+ color: var(--error-fg);
+}
+.export-bar-message-success {
+ color: var(--status-ready-fg);
+}
+
+/* The diagram itself always renders on a white card — icons are drawn for a
+ light background, so this stays white in BOTH themes. */
+.diagram-card {
+ display: inline-block;
+ background: #ffffff;
+ border-radius: var(--radius-lg);
+ box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+ padding: 20px;
+}
+
+/* ---------- CodeMirror search panel (Mod-F) — theme both modes ---------- */
+.editor-pane .cm-panels {
+ background: var(--panel-alt);
+ color: var(--text);
+ border-color: var(--border);
+}
+.editor-pane .cm-panels.cm-panels-top {
+ border-bottom: 1px solid var(--border);
+}
+.editor-pane .cm-panel.cm-search label {
+ color: var(--text-muted);
+}
+.editor-pane .cm-textfield {
+ background: var(--panel-bg);
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ color: var(--text);
+}
+.editor-pane .cm-button {
+ background: var(--panel-bg);
+ background-image: none;
+ border: 1px solid var(--border);
+ border-radius: 6px;
+ color: var(--text);
+}
+.editor-pane .cm-button:active {
+ background: var(--surface-1);
+}
+.editor-pane .cm-searchMatch {
+ background: rgba(245, 184, 92, 0.35);
+}
+.editor-pane .cm-searchMatch-selected {
+ background: rgba(99, 102, 241, 0.4);
+}
+
+/* ---------- CodeMirror autocomplete / tooltip chrome ---------- */
+.cm-tooltip {
+ background: var(--cm-tooltip-bg);
+ border: 1px solid var(--cm-tooltip-border);
+ border-radius: var(--radius-sm);
+ color: var(--cm-tooltip-fg);
+ font-family: var(--font-mono);
+}
+.cm-tooltip-autocomplete ul li[aria-selected] {
+ background: var(--cm-autocomplete-selected-bg) !important;
+ color: var(--cm-autocomplete-selected-fg) !important;
+}
diff --git a/playground/src/completions/imports.test.ts b/playground/src/completions/imports.test.ts
new file mode 100644
index 00000000..c596dccd
--- /dev/null
+++ b/playground/src/completions/imports.test.ts
@@ -0,0 +1,79 @@
+import { CompletionContext, CompletionResult } from "@codemirror/autocomplete";
+import { EditorState } from "@codemirror/state";
+import { describe, expect, it } from "vitest";
+import type { Catalog } from "../types";
+import { diagramsCompletions, moduleSegments, parseImports } from "./imports";
+
+function ctx(doc: string, pos = doc.length, explicit = false): CompletionContext {
+ return new CompletionContext(EditorState.create({ doc }), pos, explicit);
+}
+
+const CATALOG: Catalog = {
+ modules: {
+ "diagrams.aws.compute": [
+ { name: "EC2", aliases: [], icon: "aws/compute/ec2.png" },
+ { name: "ElasticContainerService", aliases: ["ECS"], icon: "aws/compute/x.png" },
+ ],
+ "diagrams.aws.database": [{ name: "RDS", aliases: [], icon: "aws/database/rds.png" }],
+ "diagrams.gcp.compute": [{ name: "GCE", aliases: [], icon: "gcp/compute/gce.png" }],
+ },
+ signatures: { Diagram: [], Cluster: [], Edge: [] },
+};
+
+describe("parseImports", () => {
+ it("collects plain and aliased names", () => {
+ const doc = "from diagrams import Diagram\nfrom diagrams.aws.compute import EC2, ElasticContainerService as ECS\n";
+ const names = parseImports(doc);
+ expect(names.get("Diagram")).toBe("diagrams.Diagram");
+ expect(names.get("EC2")).toBe("diagrams.aws.compute.EC2");
+ expect(names.get("ECS")).toBe("diagrams.aws.compute.ElasticContainerService");
+ });
+
+ it("ignores non-import lines", () => {
+ expect(parseImports("x = 1\n# from fake import Y\n").size).toBe(0);
+ });
+});
+
+describe("moduleSegments", () => {
+ it("lists next segments for a prefix", () => {
+ expect(moduleSegments(CATALOG, "diagrams.")).toEqual(["aws", "gcp"]);
+ expect(moduleSegments(CATALOG, "diagrams.aws.")).toEqual(["compute", "database"]);
+ });
+});
+
+describe("diagramsCompletions", () => {
+ const source = diagramsCompletions(CATALOG);
+
+ it("completes next segments after a dotted prefix", () => {
+ const r = source(ctx("from diagrams.aws.")) as CompletionResult;
+ expect(r.options.map((o) => o.label)).toEqual(["compute", "database"]);
+ expect(r.from).toBe("from diagrams.aws.".length);
+ });
+
+ it("offers the root module while typing it (no corruption)", () => {
+ const r = source(ctx("from diag")) as CompletionResult;
+ expect(r.options.map((o) => o.label)).toEqual(["diagrams"]);
+ expect(r.from).toBe("from ".length);
+ });
+
+ it("handles extra whitespace after from", () => {
+ const r = source(ctx("from diagrams.")) as CompletionResult;
+ expect(r.from).toBe("from diagrams.".length);
+ expect(r.options.map((o) => o.label)).toEqual(["aws", "gcp"]);
+ });
+
+ it("completes classes when an earlier name is aliased", () => {
+ const r = source(ctx("from diagrams.aws.compute import EC2 as E, EC")) as CompletionResult;
+ expect(r.options.some((o) => o.label === "ElasticContainerService")).toBe(true);
+ expect(r.from).toBe("from diagrams.aws.compute import EC2 as E, ".length);
+ });
+});
+
+describe("parseImports parenthesized", () => {
+ it("handles multiline parenthesized imports with aliases", () => {
+ const doc = "from diagrams.aws.compute import (\n EC2,\n ElasticContainerService as ECS,\n)\n";
+ const names = parseImports(doc);
+ expect(names.get("EC2")).toBe("diagrams.aws.compute.EC2");
+ expect(names.get("ECS")).toBe("diagrams.aws.compute.ElasticContainerService");
+ });
+});
diff --git a/playground/src/completions/imports.ts b/playground/src/completions/imports.ts
new file mode 100644
index 00000000..1b644c7c
--- /dev/null
+++ b/playground/src/completions/imports.ts
@@ -0,0 +1,112 @@
+import { Completion, CompletionContext, CompletionResult, CompletionSource } from "@codemirror/autocomplete";
+import type { Catalog } from "../types";
+
+const IMPORT_LINE = /^from\s+(diagrams(?:\.\w+)*)\s+import\s+(.+)$/;
+const PAREN_IMPORT = /from\s+(diagrams(?:\.\w+)*)\s+import\s*\(([^)]*)\)/g;
+
+function addImportNames(names: Map
- onInsert(importStmt)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ onInsert(importStmt);
+ }
+ }}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ onContextMenu(e.clientX, e.clientY, { name, importStmt });
+ }}
+ >
+
+
+ + {name} + {module !== undefined && {module}} +
+ );
+}
+
+interface ContextMenuProps {
+ x: number;
+ y: number;
+ hit: MenuHit;
+ onInsert: (importStmt: string) => void;
+ onClose: () => void;
+}
+
+// Small custom right-click menu: Copy import / Insert import. Rendered via a
+// portal straight onto — several ancestors (e.g. `.node-search`'s
+// fade-slide entrance animation) end their animation with a lingering
+// `transform`, which per spec establishes a new containing block for any
+// `position: fixed` descendant. Left in place, that made the menu position
+// itself relative to the sidebar instead of the viewport (appearing far from
+// the click) and clipped it under `.node-search`'s `overflow: hidden` and
+// the editor's stacking context (covered instead of on top). Portaling to
+// `document.body` sidesteps all of that: `position: fixed` is now always
+// viewport-relative, and a high z-index guarantees it paints above the
+// editor. Closes on outside pointerdown, Esc, or scroll (capture-phase
+// listeners so scrolling inside the results list — which doesn't bubble —
+// still closes it); these still work unchanged since `rootRef` points at the
+// real portaled DOM node regardless of where in the tree it renders.
+function ContextMenu({ x, y, hit, onInsert, onClose }: ContextMenuProps) {
+ const rootRef = useRef -
+
+ {providerOpen && (
+
-
+ {provider.categories.map((cat) => {
+ const categoryKey = `category:${cat.module}`;
+ const categoryOpen = expanded.has(categoryKey);
+ const label = cat.category || cat.module.split(".").pop() || cat.module;
+ return (
+
-
+
+ {categoryOpen && (
+
-
+ {cat.classes.map((cls) => (
+
+ ))} +
+ );
+ })}
+
+ );
+ })}
+ -
+
+ {categoryOpen && (
+
onChange(resetValue)}
+ />
+ );
+}
diff --git a/playground/src/components/EditorPane.tsx b/playground/src/components/EditorPane.tsx
new file mode 100644
index 00000000..eafe3abb
--- /dev/null
+++ b/playground/src/components/EditorPane.tsx
@@ -0,0 +1,102 @@
+import { indentWithTab } from "@codemirror/commands";
+import { python } from "@codemirror/lang-python";
+import { Extension } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { useEffect, useRef } from "react";
+import { blueprintTheme } from "../editor-theme";
+
+interface Props {
+ initialCode: string;
+ extensions?: Extension[];
+ lineCount: number;
+ onChange: (code: string) => void;
+ onReplaceRef?: (replace: (code: string) => void) => void;
+ /** Mod-Enter: run the current code immediately (skips the debounce). */
+ onRunNow?: () => void;
+ /** Mod-S: share (intercepts the browser's save dialog). */
+ onShare?: () => void;
+}
+
+export default function EditorPane({
+ initialCode,
+ extensions = [],
+ lineCount,
+ onChange,
+ onReplaceRef,
+ onRunNow,
+ onShare,
+}: Props) {
+ const hostRef = useRef(null);
+ // Keep the latest callbacks without remounting the view (avoids stale
+ // closures if prop identities change after mount).
+ const onChangeRef = useRef(onChange);
+ onChangeRef.current = onChange;
+ const onRunNowRef = useRef(onRunNow);
+ onRunNowRef.current = onRunNow;
+ const onShareRef = useRef(onShare);
+ onShareRef.current = onShare;
+
+ // NOTE: `extensions` and `initialCode` are intentionally captured once at
+ // mount — the App mounts EditorPane only after the catalog is loaded, so
+ // extensions are stable for the lifetime of the view.
+ useEffect(() => {
+ const view = new EditorView({
+ doc: initialCode,
+ parent: hostRef.current!,
+ extensions: [
+ // Playground-level bindings, ahead of basicSetup so they win:
+ // Mod-Enter = run now (skip debounce), Mod-S = share link instead of
+ // the browser's useless save dialog.
+ keymap.of([
+ {
+ key: "Mod-Enter",
+ preventDefault: true,
+ run: () => {
+ onRunNowRef.current?.();
+ return true;
+ },
+ },
+ {
+ key: "Mod-s",
+ preventDefault: true,
+ run: () => {
+ onShareRef.current?.();
+ return true;
+ },
+ },
+ ]),
+ basicSetup,
+ // basicSetup's default keymap doesn't bind Tab (that's deliberate
+ // upstream, so Tab still moves focus for a11y by default) — add it
+ // back explicitly so Tab indents code, matching every code editor's
+ // expected behavior here. autocompletion's own Tab-to-accept binding
+ // (wired in App.tsx via `extensions`, spread in below) still wins
+ // while a completion popup is open — CodeMirror gives it higher
+ // precedence internally — so this only fires when no popup is open.
+ keymap.of([indentWithTab]),
+ python(),
+ blueprintTheme,
+ EditorView.updateListener.of((update) => {
+ if (update.docChanged) onChangeRef.current(update.state.doc.toString());
+ }),
+ ...extensions,
+ ],
+ });
+ onReplaceRef?.((code) => {
+ view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: code } });
+ });
+ return () => view.destroy();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+ (null);
+ const [copied, setCopied] = useState(false);
+
+ // Keep the selection valid as the diagram list changes (e.g. a script edit
+ // that drops from two `with Diagram(...)` blocks down to one).
+ useEffect(() => {
+ if (selectedIndex >= svgs.length && svgs.length > 0) setSelectedIndex(0);
+ }, [svgs.length, selectedIndex]);
+
+ const active = svgs[selectedIndex] ?? null;
+ const effectiveWidth = auto ? undefined : parseDim(width);
+ const effectiveHeight = auto ? undefined : parseDim(height);
+
+ function handleDimBlur(setter: (v: string) => void) {
+ return (e: FocusEvent) => setter(clampDimText(e.currentTarget.value));
+ }
+
+ function handleDimKeyDown(e: KeyboardEvent) {
+ // Commit + clamp on Enter rather than waiting for blur, so a keyboard
+ // user can confirm the value without tabbing away.
+ if (e.key === "Enter") e.currentTarget.blur();
+ }
+
+ async function handleDownload(format: DownloadFormat) {
+ if (!active) return;
+ setError(null);
+ setCopied(false);
+ try {
+ const fileSlug = slug(active.name);
+ if (format === "svg") {
+ // SVG is vector — SIZE is meaningless for it.
+ const inlined = await inlineIcons(active.svg);
+ download(`${fileSlug}.svg`, new Blob([inlined], { type: "image/svg+xml" }));
+ } else {
+ const mime = format === "jpeg" ? "image/jpeg" : "image/png";
+ const blob = await svgToPngBlob(active.svg, {
+ width: effectiveWidth,
+ height: effectiveHeight,
+ mime,
+ });
+ download(`${fileSlug}.${format === "jpeg" ? "jpg" : "png"}`, blob);
+ }
+ } catch (err) {
+ setError(`Export failed: ${err instanceof Error ? err.message : String(err)}`);
+ }
+ }
+
+ async function handleCopyImage() {
+ if (!active) return;
+ setError(null);
+ try {
+ const blob = await svgToPngBlob(active.svg, {
+ width: effectiveWidth,
+ height: effectiveHeight,
+ mime: "image/png",
+ });
+ await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+ setCopied(true);
+ setTimeout(() => setCopied(false), COPIED_TIMEOUT_MS);
+ } catch (err) {
+ setCopied(false);
+ setError(`Copy failed: ${err instanceof Error ? err.message : String(err)}`);
+ }
+ }
+
+ const message = error
+ ? { text: error, tone: "error" as const }
+ : copied
+ ? { text: "Copied!", tone: "success" as const }
+ : null;
+
+ return (
+ (null);
+
+ useEffect(() => {
+ function handlePointerDown(e: PointerEvent) {
+ if (rootRef.current && !rootRef.current.contains(e.target as Node)) onClose();
+ }
+ function handleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Escape") onClose();
+ }
+ function handleScroll() {
+ onClose();
+ }
+ document.addEventListener("pointerdown", handlePointerDown);
+ document.addEventListener("keydown", handleKeyDown);
+ window.addEventListener("scroll", handleScroll, true);
+ return () => {
+ document.removeEventListener("pointerdown", handlePointerDown);
+ document.removeEventListener("keydown", handleKeyDown);
+ window.removeEventListener("scroll", handleScroll, true);
+ };
+ }, [onClose]);
+
+ return createPortal(
+ >(new Set());
+ const [menu, setMenu] = useState(null);
+
+ const hits = useMemo(
+ () => (catalog ? searchCatalog(catalog, query) : []),
+ [catalog, query]
+ );
+ const tree = useMemo(() => (catalog ? catalogTree(catalog) : []), [catalog]);
+
+ function toggle(key: string) {
+ setExpanded((prev) => {
+ const next = new Set(prev);
+ if (next.has(key)) next.delete(key);
+ else next.add(key);
+ return next;
+ });
+ }
+
+ // One menu instance at a time: keep it fully on-screen by clamping against
+ // the viewport rather than letting it render past the right/bottom edge.
+ function openMenu(x: number, y: number, hit: MenuHit) {
+ const clampedX = Math.min(x, window.innerWidth - MENU_WIDTH - 8);
+ const clampedY = Math.min(y, window.innerHeight - MENU_HEIGHT - 8);
+ setMenu({ x: Math.max(8, clampedX), y: Math.max(8, clampedY), hit });
+ }
+
+ // Flat search-result row (non-empty query).
+ function hitRow(hit: SearchHit) {
+ return (
+ ({ tx: 0, ty: 0, scale: 1 });
+ const containerRef = useRef(null);
+ const contentRef = useRef(null);
+ const viewRef = useRef(view);
+ viewRef.current = view;
+
+ // Click-to-edit for the fixed header's diagram name (always index 0 — the
+ // per-sheet `.sheet-label`s below stay read-only). `titleDraft` is local
+ // input state so typing doesn't touch `svgs`/App state until commit.
+ const [isEditingTitle, setIsEditingTitle] = useState(false);
+ const [titleDraft, setTitleDraft] = useState("");
+ const titleInputRef = useRef(null);
+
+ useEffect(() => {
+ if (!isEditingTitle) return;
+ const input = titleInputRef.current;
+ input?.focus();
+ input?.select();
+ }, [isEditingTitle]);
+
+ function startEditingTitle() {
+ if (!onRenameDiagram) return;
+ setTitleDraft(svgs[0]?.name ?? "");
+ setIsEditingTitle(true);
+ }
+
+ function commitTitleEdit() {
+ setIsEditingTitle(false);
+ const nextName = titleDraft;
+ const previousName = svgs[0]?.name ?? "";
+ if (nextName !== previousName) onRenameDiagram?.(0, nextName);
+ }
+
+ function handleTitleKeyDown(e: KeyboardEvent) {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ commitTitleEdit();
+ } else if (e.key === "Escape") {
+ e.preventDefault();
+ setIsEditingTitle(false);
+ }
+ }
+
+ // Fits the content layer entirely inside the canvas viewport (scaled down
+ // for large diagrams, scaled up — capped at 2x — for tiny ones) and
+ // centers it on both axes. offsetWidth/Height read the content's
+ // untransformed layout size (CSS transforms don't affect layout), so this
+ // is correct regardless of the view's current scale. Used both for the
+ // initial/on-new-svgs sizing and for the "%" fit button.
+ const fitToView = useCallback(() => {
+ const container = containerRef.current;
+ const content = contentRef.current;
+ if (!container || !content) return;
+ const rect = container.getBoundingClientRect();
+ setView(fitView(rect.width, rect.height, content.offsetWidth, content.offsetHeight));
+ }, []);
+
+ useLayoutEffect(() => {
+ fitToView();
+ }, [svgs, fitToView]);
+
+ // ctrl+wheel (trackpad pinch) zooms at the cursor; a plain wheel pans
+ // (natural two-finger trackpad scroll). Must be a real (non-passive) DOM
+ // listener — not React's onWheel — so preventDefault() actually stops the
+ // browser's own page-zoom/scroll for the gesture.
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+ function handleWheel(e: WheelEvent) {
+ e.preventDefault();
+ const rect = container!.getBoundingClientRect();
+ if (e.ctrlKey) {
+ const factor = Math.exp(-e.deltaY * 0.01);
+ setView((v) => zoomAt(v, e.clientX - rect.left, e.clientY - rect.top, factor));
+ } else {
+ setView((v) => ({ ...v, tx: v.tx - e.deltaX, ty: v.ty - e.deltaY }));
+ }
+ }
+ container.addEventListener("wheel", handleWheel, { passive: false });
+ return () => container.removeEventListener("wheel", handleWheel);
+ }, []);
+
+ // Two-pointer touch pinch: track active pointers' positions, and on each
+ // move with exactly two active pointers, derive a scale factor from the
+ // change in distance between them and zoom at their midpoint.
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+ const pointers = new Map();
+ let lastDistance: number | null = null;
+
+ function distance(): number {
+ const [a, b] = [...pointers.values()];
+ return Math.hypot(a.x - b.x, a.y - b.y);
+ }
+ function midpoint(): { x: number; y: number } {
+ const [a, b] = [...pointers.values()];
+ return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+ }
+
+ function handlePointerDown(e: PointerEvent) {
+ if (e.pointerType !== "touch") return;
+ pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+ lastDistance = pointers.size === 2 ? distance() : null;
+ }
+ function handlePointerMove(e: PointerEvent) {
+ if (!pointers.has(e.pointerId)) return;
+ pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+ if (pointers.size !== 2) return;
+ const dist = distance();
+ if (lastDistance === null || lastDistance === 0) {
+ lastDistance = dist;
+ return;
+ }
+ const factor = dist / lastDistance;
+ const { x, y } = midpoint();
+ const rect = container!.getBoundingClientRect();
+ setView((v) => zoomAt(v, x - rect.left, y - rect.top, factor));
+ lastDistance = dist;
+ }
+ function handlePointerEnd(e: PointerEvent) {
+ pointers.delete(e.pointerId);
+ lastDistance = pointers.size === 2 ? distance() : null;
+ }
+
+ container.addEventListener("pointerdown", handlePointerDown);
+ container.addEventListener("pointermove", handlePointerMove);
+ container.addEventListener("pointerup", handlePointerEnd);
+ container.addEventListener("pointercancel", handlePointerEnd);
+ container.addEventListener("pointerleave", handlePointerEnd);
+ return () => {
+ container.removeEventListener("pointerdown", handlePointerDown);
+ container.removeEventListener("pointermove", handlePointerMove);
+ container.removeEventListener("pointerup", handlePointerEnd);
+ container.removeEventListener("pointercancel", handlePointerEnd);
+ container.removeEventListener("pointerleave", handlePointerEnd);
+ };
+ }, []);
+
+ // One-pointer drag-to-pan: tx/ty move freely with the pointer — no bounds,
+ // so dragging toward the left/top can carry content into negative
+ // translate space (this is exactly what fixes "can't pan left/up past the
+ // edge" from the old scrollLeft/scrollTop approach). A 3px move threshold
+ // keeps incidental clicks (zoom buttons, etc.) from starting a drag; those
+ // targets are also excluded outright. If a second pointer comes down
+ // mid-drag, pan disengages immediately and hands off to the pinch effect.
+ useEffect(() => {
+ const container = containerRef.current;
+ if (!container) return;
+
+ let draggingId: number | null = null;
+ let engaged = false;
+ let originX = 0;
+ let originY = 0;
+ let originTx = 0;
+ let originTy = 0;
+
+ function disengage() {
+ if (draggingId !== null && container!.hasPointerCapture(draggingId)) {
+ container!.releasePointerCapture(draggingId);
+ }
+ container!.classList.remove("is-panning");
+ draggingId = null;
+ engaged = false;
+ }
+
+ function handlePointerDown(e: PointerEvent) {
+ if (draggingId !== null) {
+ disengage();
+ return;
+ }
+ if (e.button !== 0) return;
+ if ((e.target as Element).closest("button, a, input, select, [role=menu]")) return;
+ draggingId = e.pointerId;
+ engaged = false;
+ originX = e.clientX;
+ originY = e.clientY;
+ originTx = viewRef.current.tx;
+ originTy = viewRef.current.ty;
+ container!.setPointerCapture(draggingId);
+ }
+
+ function handlePointerMove(e: PointerEvent) {
+ if (draggingId === null || e.pointerId !== draggingId) return;
+ const dx = e.clientX - originX;
+ const dy = e.clientY - originY;
+ if (!engaged) {
+ if (Math.hypot(dx, dy) < 3) return;
+ engaged = true;
+ container!.classList.add("is-panning");
+ }
+ setView((v) => ({ ...v, tx: originTx + dx, ty: originTy + dy }));
+ }
+
+ function handlePointerEnd(e: PointerEvent) {
+ if (draggingId !== e.pointerId) return;
+ disengage();
+ }
+
+ container.addEventListener("pointerdown", handlePointerDown);
+ container.addEventListener("pointermove", handlePointerMove);
+ container.addEventListener("pointerup", handlePointerEnd);
+ container.addEventListener("pointercancel", handlePointerEnd);
+ return () => {
+ container.removeEventListener("pointerdown", handlePointerDown);
+ container.removeEventListener("pointermove", handlePointerMove);
+ container.removeEventListener("pointerup", handlePointerEnd);
+ container.removeEventListener("pointercancel", handlePointerEnd);
+ };
+ }, []);
+
+ // Zoom segment (−/+) buttons zoom around the container's center.
+ function zoomByFactor(factor: number) {
+ const container = containerRef.current;
+ if (!container) return;
+ const rect = container.getBoundingClientRect();
+ setView((v) => zoomAt(v, rect.width / 2, rect.height / 2, factor));
+ }
+
+ const pct = Math.round(view.scale * 100);
+ const first = svgs[0];
+ const firstStats = first ? svgStats(first.svg) : null;
+ const showSheetLabels = svgs.length > 1;
+
+ return (
+ (
+ () => readCachedStars() ?? readCachedStars(true) ?? FALLBACK_STARS
+ );
+
+ useEffect(() => {
+ if (readCachedStars() !== null) return; // fresh cache already applied above
+ let cancelled = false;
+ fetch(STARS_API_URL)
+ .then((res) => {
+ if (!res.ok) throw new Error(`HTTP ${res.status}`);
+ return res.json();
+ })
+ .then((data: { stargazers_count?: unknown }) => {
+ if (cancelled) return;
+ const count = data.stargazers_count;
+ if (typeof count !== "number") return;
+ setStars(count);
+ localStorage.setItem(STARS_CACHE_KEY, JSON.stringify({ count, ts: Date.now() } satisfies StarsCache));
+ })
+ .catch(() => {
+ // Fetch failed (network, rate limit, bad shape): keep whatever count
+ // is already displayed — a fresh/stale cached value or the baked-in
+ // fallback — rather than surfacing an error.
+ });
+ return () => {
+ cancelled = true;
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return (
+
+ {/* The real diagrams project logo (copied from assets/img/diagrams.png)
+ on a white chip so its dark strokes stay legible in dark theme. */}
+
+ {/* The page's only h1 — the app is a single tool, and crawlers that do
+ run JS should still find a real heading. */}
+
+ );
+}
diff --git a/playground/src/editor-theme.ts b/playground/src/editor-theme.ts
new file mode 100644
index 00000000..f487e450
--- /dev/null
+++ b/playground/src/editor-theme.ts
@@ -0,0 +1,98 @@
+import type { Extension } from "@codemirror/state";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { EditorView } from "@codemirror/view";
+import { tags as t } from "@lezer/highlight";
+
+// Blueprint engineering drawing theme for CodeMirror.
+// Static module-level constant — imported once into EditorPane's static
+// extension list at mount time (see HARD CONSTRAINT #4 in the redesign spec).
+//
+// Every color below is a var(--cm-*)/var(--syn-*) reference into app.css's
+// per-theme token blocks (:root[data-theme="dark"|"light"]). CodeMirror's
+// theme values are plain CSS strings, so var() resolves live against
+// document.documentElement's data-theme attribute — flipping the theme
+// re-paints the editor instantly with no remount required.
+
+const blueprintEditorTheme = EditorView.theme(
+ {
+ "&": {
+ backgroundColor: "var(--cm-bg)",
+ color: "var(--cm-fg)",
+ height: "100%",
+ },
+ ".cm-content": {
+ caretColor: "var(--cm-caret)",
+ fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
+ fontSize: "13px",
+ },
+ ".cm-cursor, .cm-dropCursor": {
+ borderLeftColor: "var(--cm-caret)",
+ borderLeftWidth: "2px",
+ },
+ // `!important` is required here: @codemirror/view's own baseTheme (part
+ // of basicSetup) ships a same-named `&dark.cm-focused > .cm-scroller >
+ // .cm-selectionLayer .cm-selectionBackground` rule with strictly higher
+ // selector specificity (it targets the internal DOM chain, not just the
+ // class) that otherwise wins the cascade and paints an opaque `#233`
+ // regardless of this token's value or insertion order — that mismatch,
+ // not the token color itself, was the actual cause of "selection too
+ // dark/opaque" (confirmed via getComputedStyle: it read `rgb(34,51,51)`
+ // — CodeMirror's literal default — in both app themes before this fix).
+ "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
+ backgroundColor: "var(--cm-selection) !important",
+ },
+ ".cm-activeLine": {
+ backgroundColor: "var(--cm-active-line)",
+ },
+ ".cm-gutters": {
+ backgroundColor: "var(--cm-gutter-bg)",
+ color: "var(--cm-gutter-fg)",
+ border: "none",
+ borderRight: "1px solid var(--cm-gutter-border)",
+ },
+ ".cm-activeLineGutter": {
+ backgroundColor: "var(--cm-active-gutter-bg)",
+ color: "var(--cm-active-gutter-fg)",
+ },
+ ".cm-lineNumbers .cm-gutterElement": {
+ fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
+ },
+ ".cm-selectionMatch": {
+ backgroundColor: "var(--cm-selection-match)",
+ },
+ ".cm-matchingBracket, .cm-nonmatchingBracket": {
+ backgroundColor: "var(--cm-matching-bracket-bg)",
+ outline: "1px solid var(--cm-matching-bracket-outline)",
+ },
+ ".cm-tooltip": {
+ backgroundColor: "var(--cm-tooltip-bg)",
+ border: "1px solid var(--cm-tooltip-border)",
+ color: "var(--cm-tooltip-fg)",
+ fontFamily: "'IBM Plex Mono', ui-monospace, monospace",
+ },
+ ".cm-tooltip-autocomplete ul li[aria-selected]": {
+ backgroundColor: "var(--cm-autocomplete-selected-bg)",
+ color: "var(--cm-autocomplete-selected-fg)",
+ },
+ },
+ { dark: true }
+);
+
+const blueprintHighlightStyle = HighlightStyle.define([
+ { tag: t.keyword, color: "var(--syn-keyword)" },
+ { tag: [t.string, t.special(t.string)], color: "var(--syn-string)" },
+ { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: "var(--syn-comment)", fontStyle: "italic" },
+ {
+ tag: [t.function(t.variableName), t.function(t.definition(t.variableName)), t.className, t.definition(t.className)],
+ color: "var(--syn-function)",
+ },
+ { tag: [t.number, t.integer, t.float], color: "var(--syn-number)" },
+ { tag: [t.operator, t.punctuation, t.bracket], color: "var(--syn-operator)" },
+ { tag: t.variableName, color: "var(--syn-variable)" },
+ { tag: t.propertyName, color: "var(--syn-property)" },
+ { tag: [t.bool, t.null], color: "var(--syn-bool)" },
+ { tag: t.definition(t.variableName), color: "var(--syn-variable)" },
+ { tag: t.atom, color: "var(--syn-atom)" },
+]);
+
+export const blueprintTheme: Extension = [blueprintEditorTheme, syntaxHighlighting(blueprintHighlightStyle)];
diff --git a/playground/src/examples.ts b/playground/src/examples.ts
new file mode 100644
index 00000000..a738e455
--- /dev/null
+++ b/playground/src/examples.ts
@@ -0,0 +1,80 @@
+export const DEFAULT_CODE = `from diagrams import Diagram
+from diagrams.aws.compute import EC2
+from diagrams.aws.database import RDS
+from diagrams.aws.network import ELB
+
+with Diagram("Web Service", show=False):
+ ELB("lb") >> EC2("web") >> RDS("userdb")
+`;
+
+export const EXAMPLES: { title: string; code: string }[] = [
+ { title: "Web Service", code: DEFAULT_CODE },
+ {
+ title: "Grouped Workers",
+ code: `from diagrams import Diagram
+from diagrams.aws.compute import EC2
+from diagrams.aws.database import RDS
+from diagrams.aws.network import ELB
+
+with Diagram("Grouped Workers", show=False, direction="TB"):
+ ELB("lb") >> [EC2("worker1"),
+ EC2("worker2"),
+ EC2("worker3"),
+ EC2("worker4"),
+ EC2("worker5")] >> RDS("events")
+`,
+ },
+ {
+ title: "Clustered Web Services",
+ code: `from diagrams import Cluster, Diagram
+from diagrams.aws.compute import ECS
+from diagrams.aws.database import ElastiCache, RDS
+from diagrams.aws.network import ELB, Route53
+
+with Diagram("Clustered Web Services", show=False):
+ dns = Route53("dns")
+ lb = ELB("lb")
+
+ with Cluster("Services"):
+ svc_group = [ECS("web1"), ECS("web2"), ECS("web3")]
+
+ with Cluster("DB Cluster"):
+ db_primary = RDS("userdb")
+ db_primary - [RDS("userdb ro")]
+
+ memcached = ElastiCache("memcached")
+
+ dns >> lb >> svc_group
+ svc_group >> db_primary
+ svc_group >> memcached
+`,
+ },
+ {
+ title: "Event Processing (K8s + OnPrem)",
+ code: `from diagrams import Cluster, Diagram
+from diagrams.aws.compute import ECS, EKS, Lambda
+from diagrams.aws.database import Redshift
+from diagrams.aws.integration import SQS
+from diagrams.aws.storage import S3
+
+with Diagram("Event Processing", show=False):
+ source = EKS("k8s source")
+
+ with Cluster("Event Flows"):
+ with Cluster("Event Workers"):
+ workers = [ECS("worker1"), ECS("worker2"), ECS("worker3")]
+
+ queue = SQS("event queue")
+
+ with Cluster("Processing"):
+ handlers = [Lambda("proc1"), Lambda("proc2"), Lambda("proc3")]
+
+ store = S3("events store")
+ dw = Redshift("analytics")
+
+ source >> workers >> queue >> handlers
+ handlers >> store
+ handlers >> dw
+`,
+ },
+];
diff --git a/playground/src/export/exporter.test.ts b/playground/src/export/exporter.test.ts
new file mode 100644
index 00000000..5f6020ae
--- /dev/null
+++ b/playground/src/export/exporter.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from "vitest";
+import { inlineIcons, resolveSize } from "./exporter";
+
+const PNG_BYTES = new Uint8Array([137, 80, 78, 71]);
+
+function fakeFetch(): typeof fetch {
+ return vi.fn(async () => new Response(PNG_BYTES.buffer, { status: 200 })) as unknown as typeof fetch;
+}
+
+describe("inlineIcons", () => {
+ it("replaces icons/ hrefs with data URIs", async () => {
+ const svg = ``;
+ const result = await inlineIcons(svg, fakeFetch());
+ expect(result).toContain("data:image/png;base64,iVBORw==".slice(0, 30));
+ expect(result).not.toContain("icons/aws");
+ });
+
+ it("fetches each unique icon once", async () => {
+ const fetcher = fakeFetch();
+ const svg = ``;
+ await inlineIcons(svg, fetcher);
+ expect(fetcher).toHaveBeenCalledTimes(2);
+ });
+
+ it("leaves svg without icons untouched", async () => {
+ const svg = "";
+ expect(await inlineIcons(svg, fakeFetch())).toBe(svg);
+ });
+
+ it("rejects when an icon fetch returns non-ok", async () => {
+ const fetcher = vi.fn(async () => new Response("nope", { status: 404 })) as unknown as typeof fetch;
+ const svg = ``;
+ await expect(inlineIcons(svg, fetcher)).rejects.toThrow("HTTP 404");
+ });
+
+ it("uses svg mime for .svg icons", async () => {
+ const svg = ``;
+ const result = await inlineIcons(svg, fakeFetch());
+ expect(result).toContain("data:image/svg+xml;base64,");
+ });
+});
+
+describe("resolveSize", () => {
+ it("defaults to 2x the natural size when both axes are unset", () => {
+ expect(resolveSize(100, 50)).toEqual({ w: 200, h: 100 });
+ });
+
+ it("treats invalid (non-finite / non-positive) axes as unset, falling back to the 2x default", () => {
+ expect(resolveSize(200, 100, 0, Number.NaN)).toEqual({ w: 400, h: 200 });
+ });
+
+ it("derives height from the natural aspect ratio when only width is given", () => {
+ expect(resolveSize(200, 100, 50)).toEqual({ w: 50, h: 25 });
+ });
+
+ it("derives width from the natural aspect ratio when only height is given", () => {
+ expect(resolveSize(200, 100, undefined, 25)).toEqual({ w: 50, h: 25 });
+ });
+
+ it("uses both axes exactly, allowing aspect distortion", () => {
+ expect(resolveSize(200, 100, 300, 50)).toEqual({ w: 300, h: 50 });
+ });
+
+ it("clamps each axis to the 16px minimum independently after computation", () => {
+ // width=5 -> derived height = round(5 * 100 / 200) = 3, both below 16.
+ expect(resolveSize(200, 100, 5)).toEqual({ w: 16, h: 16 });
+ });
+
+ it("clamps each axis to the 8192px maximum independently after computation", () => {
+ expect(resolveSize(200, 100, 20_000)).toEqual({ w: 8192, h: 8192 });
+ });
+
+ it("falls back to the (clamped) 2x default when the natural size is degenerate, ignoring width/height", () => {
+ expect(resolveSize(0, 100, 300, 150)).toEqual({ w: 16, h: 200 });
+ expect(resolveSize(-10, -20)).toEqual({ w: 16, h: 16 });
+ });
+});
diff --git a/playground/src/export/exporter.ts b/playground/src/export/exporter.ts
new file mode 100644
index 00000000..0f1caa27
--- /dev/null
+++ b/playground/src/export/exporter.ts
@@ -0,0 +1,116 @@
+const ICON_HREF = /(xlink:href|href)="(icons\/[^"]+)"/g;
+
+async function toDataUri(url: string, fetcher: typeof fetch): Promise {
+ const res = await fetcher(url);
+ if (!res.ok) throw new Error(`Failed to fetch icon ${url}: HTTP ${res.status}`);
+ const mime = url.endsWith(".svg") ? "image/svg+xml" : "image/png";
+ const bytes = new Uint8Array(await res.arrayBuffer());
+ let binary = "";
+ for (const byte of bytes) binary += String.fromCharCode(byte);
+ return `data:${mime};base64,${btoa(binary)}`;
+}
+
+export async function inlineIcons(svg: string, fetcher: typeof fetch = fetch): Promise {
+ const urls = new Set();
+ for (const match of svg.matchAll(ICON_HREF)) urls.add(match[2]);
+ if (!urls.size) return svg;
+ const dataUris = new Map();
+ await Promise.all(
+ [...urls].map(async (url) => dataUris.set(url, await toDataUri(url, fetcher)))
+ );
+ return svg.replace(ICON_HREF, (_full, attr, url) => `${attr}="${dataUris.get(url)}"`);
+}
+
+export interface OutputSize {
+ w: number;
+ h: number;
+}
+
+const MIN_OUTPUT_SIZE = 16;
+const MAX_OUTPUT_SIZE = 8192;
+
+function clampAxis(n: number): number {
+ return Math.min(MAX_OUTPUT_SIZE, Math.max(MIN_OUTPUT_SIZE, Math.round(n)));
+}
+
+// Resolves the raster output size for an export from the optional
+// user-provided WIDTH/HEIGHT fields (both in px):
+// - neither set (or not a positive finite number) -> defaults to 2x the
+// diagram's natural size, matching the export bar's previous default
+// output.
+// - only one axis set -> the other axis is derived from the diagram's
+// natural aspect ratio, so the diagram is never stretched by accident.
+// - both axes set -> used exactly as given; the user explicitly asked for
+// both dimensions, so aspect distortion is allowed.
+// A degenerate natural size (<=0 on either axis, e.g. before an ![]()
has
+// finished loading) can't produce a meaningful aspect ratio, so it's guarded
+// by always falling back to the default-2x branch, which is itself then
+// clamped, so the result is still a valid, positive canvas size.
+// Every result is rounded and clamped per-axis to [MIN_OUTPUT_SIZE,
+// MAX_OUTPUT_SIZE] so callers can hand it straight to a
+
+ );
+}
diff --git a/playground/src/components/ErrorPanel.tsx b/playground/src/components/ErrorPanel.tsx
new file mode 100644
index 00000000..2a13bf7a
--- /dev/null
+++ b/playground/src/components/ErrorPanel.tsx
@@ -0,0 +1,13 @@
+interface Props {
+ error: string | null;
+ testId?: string;
+}
+
+export default function ErrorPanel({ error, testId = "error-panel" }: Props) {
+ if (!error) return null;
+ return (
+
+ main.py
+ {lineCount} lines
+
+
+
+ {error}
+
+ );
+}
diff --git a/playground/src/components/ExamplesGallery.tsx b/playground/src/components/ExamplesGallery.tsx
new file mode 100644
index 00000000..fd934444
--- /dev/null
+++ b/playground/src/components/ExamplesGallery.tsx
@@ -0,0 +1,23 @@
+import { EXAMPLES } from "../examples";
+
+interface Props {
+ activeExample: string | null;
+ onSelect: (example: { title: string; code: string }) => void;
+}
+
+export default function ExamplesGallery({ activeExample, onSelect }: Props) {
+ return (
+
+ Examples
+ {EXAMPLES.map((example) => (
+
+ ))}
+
+ );
+}
diff --git a/playground/src/components/ExportBar.tsx b/playground/src/components/ExportBar.tsx
new file mode 100644
index 00000000..a76784b0
--- /dev/null
+++ b/playground/src/components/ExportBar.tsx
@@ -0,0 +1,249 @@
+import { useEffect, useState } from "react";
+import { download, inlineIcons, svgToPngBlob } from "../export/exporter";
+import type { FocusEvent, KeyboardEvent } from "react";
+
+type DownloadFormat = "png" | "svg" | "jpeg";
+
+const MIN_DIM = 16;
+const MAX_DIM = 8192;
+const COPIED_TIMEOUT_MS = 2000;
+
+interface Props {
+ svgs: { name: string; svg: string }[];
+}
+
+function slug(name: string): string {
+ return name ? name.toLowerCase().replace(/\W+/g, "_") : "diagram";
+}
+
+// Parses a raw SIZE field's text into a positive pixel value. Empty (or
+// not-yet-a-number, e.g. mid-typing) means "no override" — resolveSize's
+// aspect-ratio-preserving default takes over for that axis. Clamping to
+// [MIN_DIM, MAX_DIM] happens separately on blur (see `clampDimText`).
+function parseDim(raw: string): number | undefined {
+ if (raw.trim() === "") return undefined;
+ const n = Number(raw);
+ return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+
+function clampDimText(raw: string): string {
+ if (raw.trim() === "") return "";
+ const n = Math.round(Number(raw));
+ if (!Number.isFinite(n)) return "";
+ return String(Math.min(MAX_DIM, Math.max(MIN_DIM, n)));
+}
+
+// Small download-arrow icon rendered to the right of each format button's
+// label. Purely decorative — the button's accessible name still comes from
+// its text content ("PNG"/"SVG"/"JPEG"), which e2e depends on — so this
+// stays aria-hidden.
+function DownloadIcon() {
+ return (
+
+ );
+}
+
+// Small copy icon rendered LEFT of "Copy" (mockup order) — decorative and
+// aria-hidden for the same reason as `DownloadIcon`.
+function CopyIcon() {
+ return (
+
+ );
+}
+
+// Permanently-visible export bar docked under the editor (Mermaid-Live
+// style). Two full-width rows:
+// - fields row: `SIZE [W] × [H] px [Auto toggle]` stretched across the
+// full width (+ TARGET select when several diagrams exist). One Auto
+// switch governs BOTH dimensions: ON = inputs disabled/dimmed and the
+// exporter's aspect-preserving default (2x) applies; OFF = explicit
+// pixel inputs (either axis may be left empty for per-axis aspect
+// auto). Toggling Auto back on keeps the last typed values.
+// - actions row: PNG / SVG / JPEG download buttons (equal width) and a
+// compact "Copy Image" (clipboard PNG) button. Exports always use a
+// white background (the BACKGROUND option was dropped).
+export default function ExportBar({ svgs }: Props) {
+ const [auto, setAuto] = useState(true);
+ const [width, setWidth] = useState("");
+ const [height, setHeight] = useState("");
+ const [selectedIndex, setSelectedIndex] = useState(0);
+ const [error, setError] = useState
+
+ );
+}
diff --git a/playground/src/components/NodeSearch.tsx b/playground/src/components/NodeSearch.tsx
new file mode 100644
index 00000000..b1a71ca2
--- /dev/null
+++ b/playground/src/components/NodeSearch.tsx
@@ -0,0 +1,297 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { providerLabel } from "../search/providerLabel";
+import { searchCatalog, type SearchHit } from "../search/search";
+import { catalogTree } from "../search/tree";
+import type { Catalog } from "../types";
+
+interface Props {
+ catalog: Catalog | null;
+ onInsert: (importStmt: string) => void;
+ /** Resizable sidebar width in px (see DragHandle); falls back to CSS. */
+ width?: number;
+}
+
+interface MenuHit {
+ name: string;
+ importStmt: string;
+}
+
+interface MenuState {
+ x: number;
+ y: number;
+ hit: MenuHit;
+}
+
+interface HitRowProps {
+ icon: string;
+ name: string;
+ importStmt: string;
+ module?: string;
+ onInsert: (importStmt: string) => void;
+ onContextMenu: (x: number, y: number, hit: MenuHit) => void;
+ // Set only when rendered as a class row inside an expanded tree category
+ // (depth 2); the container carries the indent/rail, this only tweaks the
+ // row's own padding via the "is-tree-class" CSS class.
+ inTree?: boolean;
+}
+
+// Shared row for a single class: real node icon (bare, no wrapper box),
+// name, optional module path. Fixed layout that never shifts on hover —
+// used by both the flat search results and the expanded-category tree rows
+// so the two views stay visually unified. Left-click inserts the import;
+// right-click opens a small custom context menu (Copy/Insert) owned by the
+// parent NodeSearch.
+function HitRow({ icon, name, importStmt, module, onInsert, onContextMenu, inTree }: HitRowProps) {
+ return (
+
+
+
+
+ Size
+ setWidth(e.target.value.replace(/\D/g, ""))}
+ onBlur={handleDimBlur(setWidth)}
+ onKeyDown={handleDimKeyDown}
+ />
+
+ setHeight(e.target.value.replace(/\D/g, ""))}
+ onBlur={handleDimBlur(setHeight)}
+ onKeyDown={handleDimKeyDown}
+ />
+
+
+ {svgs.length > 1 && (
+
+ )}
+
+
+
+
+
+
+ {message && {message.text}}
+
+
+
+
+
,
+ document.body
+ );
+}
+
+const MENU_WIDTH = 160;
+const MENU_HEIGHT = 76;
+
+// Centered SVG chevron shared by both tree levels. Unlike the old text
+// glyphs ("▸"/"▾"), the triangle is geometrically centered in its box, so
+// the CSS 90° open-rotation spins in place instead of drifting (the glyph's
+// off-center metrics were visibly shifting the depth-1 caret mid-turn).
+function Chevron() {
+ return (
+
+ );
+}
+
+export default function NodeSearch({ catalog, onInsert, width }: Props) {
+ const [query, setQuery] = useState("");
+ const [expanded, setExpanded] = useState
+ setMenu(null)}
+ />
+ )}
+
+ );
+}
diff --git a/playground/src/components/PreviewPane.tsx b/playground/src/components/PreviewPane.tsx
new file mode 100644
index 00000000..98e60cd1
--- /dev/null
+++ b/playground/src/components/PreviewPane.tsx
@@ -0,0 +1,337 @@
+import type { KeyboardEvent, ReactNode } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { svgStats } from "../utils/svgStats";
+import { fitView, zoomAt, type ViewTransform } from "../utils/zoom";
+
+interface Props {
+ svgs: { name: string; svg: string }[];
+ loading: boolean;
+ renderMs: number | null;
+ onRenameDiagram?: (index: number, name: string) => void;
+ /** Rendered docked at the bottom of the pane, below the canvas
+ * (the ExportBar lives here per the design mockup). */
+ children?: ReactNode;
+}
+
+// True infinite canvas: the container is a fixed, overflow:hidden viewport;
+// all pan/zoom state lives in `view` (tx/ty/scale) and is applied as a
+// single CSS transform on the absolutely-positioned content layer. Unlike
+// the old scrollLeft/scrollTop-based pan, tx/ty are unbounded — content can
+// be dragged past the left/top edge (negative translate) with no clamping.
+export default function PreviewPane({ svgs, loading, renderMs, onRenameDiagram, children }: Props) {
+ const [view, setView] = useState
+
+ setQuery(e.target.value)}
+ data-testid="node-search-input"
+ />
+
+ {isBlank ? (
+ -
+ {tree.map((provider) => {
+ const providerKey = `provider:${provider.provider}`;
+ const providerOpen = expanded.has(providerKey);
+ return (
+
- {hits.map((hit) => hitRow(hit))}
+
+ );
+}
diff --git a/playground/src/components/Toolbar.tsx b/playground/src/components/Toolbar.tsx
new file mode 100644
index 00000000..e733e1c0
--- /dev/null
+++ b/playground/src/components/Toolbar.tsx
@@ -0,0 +1,145 @@
+import { useEffect, useState } from "react";
+import { formatStars } from "../utils/format";
+import { toggleTheme } from "../utils/theme";
+
+interface Props {
+ status: string;
+ onShare: () => void;
+ shared: boolean;
+}
+
+function statusVariant(status: string): "ready" | "busy" | "error" {
+ if (status === "Ready") return "ready";
+ if (status.startsWith("Failed")) return "error";
+ return "busy";
+}
+
+const STARS_CACHE_KEY = "dgp-gh-stars";
+const STARS_TTL_MS = 60 * 60 * 1000; // 1h
+const STARS_API_URL = "https://api.github.com/repos/mingrammer/diagrams";
+// The badge must always render — when the API is unreachable (e.g. rate
+// limited) and no cache exists yet, fall back to this approximate count;
+// it self-corrects on the next successful fetch.
+const FALLBACK_STARS = 42_500;
+
+interface StarsCache {
+ count: number;
+ ts: number;
+}
+
+function readCachedStars(ignoreTtl = false): number | null {
+ try {
+ const raw = localStorage.getItem(STARS_CACHE_KEY);
+ if (!raw) return null;
+ const parsed = JSON.parse(raw) as StarsCache;
+ if (typeof parsed.count !== "number" || typeof parsed.ts !== "number") return null;
+ if (!ignoreTtl && Date.now() - parsed.ts > STARS_TTL_MS) return null;
+ return parsed.count;
+ } catch {
+ return null;
+ }
+}
+
+// GitHub's official octocat mark, inlined so it renders crisp at 16px with
+// no extra request and follows `currentColor` in both themes.
+function GitHubMark() {
+ return (
+
+ );
+}
+
+// Small filled star, used ahead of the formatted count.
+function StarMark() {
+ return (
+
+ );
+}
+
+export default function Toolbar({ status, onShare, shared }: Props) {
+ const isLoading = status === "Rendering…";
+ const variant = statusVariant(status);
+ // Stale-while-error: fresh cache → stale cache (expired TTL) → baked-in
+ // fallback, so the count is always visible; a successful fetch replaces it.
+ const [stars, setStars] = useState
+
+ {/* testid lives on the canvas (not the pane root) so e2e's
+ `preview svg` matches only rendered diagram SVGs — the ExportBar
+ docked below carries its own decorative icon
+ {isEditingTitle ? (
+ setTitleDraft(e.target.value)}
+ onBlur={commitTitleEdit}
+ onKeyDown={handleTitleKeyDown}
+ />
+ ) : (
+ {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ startEditingTitle();
+ }
+ }
+ : undefined
+ }
+ title={onRenameDiagram ? "Click to rename" : undefined}
+ >
+ {first?.name || "diagram"}
+ {onRenameDiagram && (
+
+ )}
+
+ )}
+ {firstStats && (
+
+ · {firstStats.nodes} nodes · {firstStats.edges} edges
+
+ )}
+
+
+
+
+
+
+
+
+ 
+ Diagrams Playground
+
+
+ {status}
+
+
+
+