npm - @gntik-ai/templates - Versions diffs - 0.9.0 → 0.10.0 - Mend

@gntik-ai/templates 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/index.d.ts +13 -5
package/dist/index.js +93 -67
package/dist/index.js.map +1 -1
package/package.json +5 -5
package/src/index.ts +1 -1
package/src/keyboard-shortcuts/Page.test.tsx +39 -1
package/src/keyboard-shortcuts/ShortcutSheet.tsx +3 -2
package/src/keyboard-shortcuts/data.ts +28 -14
package/src/resource-detail/Page.labels.test.tsx +67 -0
package/src/resource-detail/Page.tsx +18 -7
package/src/resource-detail/examples/Labels.tsx +18 -0
package/src/resource-detail/examples/Spanish.tsx +11 -0
package/src/resource-detail/template.meta.ts +1 -1
package/src/settings-profile/fixtures/editable.snap +1 -1
package/src/shared/ConsoleShell.test.tsx +13 -0
package/src/shared/ConsoleShell.tsx +35 -30
package/src/workflow-builder/Page.test.tsx +103 -2
package/src/workflow-builder/Page.tsx +34 -8
package/src/workflow-builder/examples/SaveGraph.tsx +17 -0
package/src/workflow-builder/template.meta.ts +1 -1

package/src/settings-profile/fixtures/editable.snap CHANGED Viewed

	@@ -1 +1 @@
1	- <div class="relative flex w-full min-w-0 overflow-hidden bg-background font-sans text-foreground h-dvh" data-sidebar-state="expanded"><a href="#main" class="sr-only focus:not-sr-only focus:top-3 focus:start-3 focus:z-50 focus:inline-flex focus:items-center focus:rounded-md focus:border focus:border-border focus:bg-card focus:px-3 focus:py-2 focus:text-[13px] focus:font-medium focus:text-foreground focus:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring focus:absolute">Skip to main content</a><aside id="_r_0_" aria-label="Sidebar" data-state="expanded" class="hidden shrink-0 flex-col overflow-hidden border-e border-border/60 bg-chrome lg:flex transition-[width] duration-200 motion-reduce:transition-none w-[248px]"><div class="flex shrink-0 items-center px-3 pt-4 pb-3"><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_1_" aria-label="Acme Industries, Switch workspace" class="group flex h-11 max-w-full cursor-pointer items-center gap-2.5 rounded-[10px] border border-border bg-card pe-2.5 ps-1.5 text-start transition-colors hover:bg-secondary/50 data-popup-open:bg-secondary/50 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-[30px]"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">AI</span></span></span><span class="flex min-w-0 flex-col leading-tight"><span class="truncate text-[13px] font-semibold text-foreground">Acme Industries</span><span class="mt-px truncate font-mono text-[10px] text-muted-foreground">Enterprise · Owner</span></span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down ms-1 shrink-0 text-muted-foreground" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></div><div class="min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 pt-1 pb-3"><nav aria-label="Main" class="flex flex-col gap-4"><div class="flex flex-col gap-0.5"><div id="_r_2_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Workspace</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_2_"><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/overview"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house lucide-home shrink-0" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg><span class="min-w-0 flex-1 truncate text-start">Overview</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/projects"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-kanban shrink-0" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6"></path></svg><span class="min-w-0 flex-1 truncate text-start">Projects</span> <span class="inline-flex h-[18px] shrink-0 items-center rounded-full bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground">12</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/deployments"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket shrink-0" aria-hidden="true"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"></path><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"></path></svg><span class="min-w-0 flex-1 truncate text-start">Deployments</span> <span class="inline-flex h-[18px] shrink-0 items-center rounded-full bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground">3</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/analytics"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column lucide-bar-chart-3 shrink-0" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg><span class="min-w-0 flex-1 truncate text-start">Analytics</span></a></li></ul></div><div data-open="" class="flex flex-col gap-0.5"><button type="button" data-panel-open="" tabindex="0" aria-disabled="false" aria-controls="base-ui-_r_3_" aria-expanded="true" class="group mb-0.5 flex w-full cursor-pointer items-center justify-between rounded-md px-2.5 py-1 transition-colors select-none hover:bg-accent/40 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"><span id="_r_4_" class="font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase group-hover:text-foreground">Admin</span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-closed:-rotate-90 motion-reduce:transition-none" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-open="" id="base-ui-_r_3_" style="--collapsible-panel-height: auto; --collapsible-panel-width: auto; animation-name: none;" class="h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0"><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_4_"><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/activity"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity shrink-0" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Activity</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/members"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users shrink-0" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Members</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/billing"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card shrink-0" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Billing</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/api-keys"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round shrink-0" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">API keys</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" aria-current="page" href="/settings"><span aria-hidden="true" class="absolute top-1.5 bottom-1.5 start-0 w-[3px] rounded-e bg-primary"></span><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings shrink-0" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Settings</span></a></li></ul></div></div></nav></div><div class="shrink-0 p-2.5"><div class="flex flex-col gap-1.5"><div class="rounded-[10px] border border-border bg-card p-2.5"><div aria-valuemax="10000" aria-valuemin="0" aria-valuenow="8200" aria-valuetext="8.2k / 10k" role="meter" data-level="warning" class="grid w-full gap-1.5" aria-labelledby="base-ui-_r_5_"><div class="flex items-baseline justify-between gap-3"><span id="base-ui-_r_5_" role="presentation" class="text-[13px] font-medium text-foreground">Monthly requests</span><span class="font-mono text-[11.5px] font-semibold tabular-nums text-warning-text">8.2k / 10k</span></div><div class="relative w-full overflow-hidden rounded-full bg-secondary h-1.5"><div style="inset-inline-start: 0px; height: inherit; width: 82%;" class="block h-full rounded-full transition-[width] duration-400 ease-out motion-reduce:transition-none bg-warning"></div></div><span role="presentation" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;">x</span></div></div><a href="#help" class="cursor-pointer underline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 text-muted-foreground no-underline flex h-[34px] items-center gap-2.5 rounded-lg px-2.5 text-[13px] font-medium hover:bg-accent/55 hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark lucide-help-circle lucide-circle-help" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>Help & docs</a><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_6_" aria-label="Account menu for Dana Whitfield" class="inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-popup-open:ring-2 data-popup-open:ring-ring/40 h-9 pe-2 ps-0.5 hover:bg-secondary/60 w-full justify-start"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-8"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">DW</span></span></span><span class="pe-1 text-[13px] font-semibold text-foreground">Dana Whitfield</span></button></div></div></aside><div class="flex min-h-0 min-w-0 flex-1 flex-col"><header class="flex h-14 shrink-0 items-center gap-2 border-b border-border/60 bg-chrome px-3 lg:gap-3 lg:px-5"><button type="button" tabindex="0" aria-label="Open navigation" data-base-ui-click-trigger="" id="base-ui-_r_7_" aria-haspopup="dialog" aria-expanded="false" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground gap-1.5 text-[13px] rounded-lg px-0 size-control lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button><button type="button" tabindex="0" aria-label="Collapse sidebar" aria-expanded="true" aria-controls="_r_0_" class="shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground gap-1.5 text-[13px] rounded-lg px-0 size-control hidden lg:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-close lucide-sidebar-close rtl:-scale-x-100" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path><path d="m16 15-3-3 3-3"></path></svg></button><div class="flex min-w-0 flex-1 items-center gap-2 lg:gap-3"><div class="flex min-w-0 flex-1 items-center gap-2 lg:gap-3"><div class="flex min-w-0 flex-1 items-center gap-2.5"><nav aria-label="Breadcrumb" class="min-w-0"><ol class="flex flex-wrap items-center gap-2.5 text-[13px]"><li class="inline-flex min-w-0 items-center gap-2.5"><a href="/settings" class="cursor-pointer underline-offset-4 aria-disabled:pointer-events-none aria-disabled:opacity-50 truncate rounded-sm text-muted-foreground no-underline transition-colors hover:text-foreground hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring font-normal">Settings</a><span class="inline-flex shrink-0 select-none text-muted-foreground/40" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right rtl:-scale-x-100" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span></li><li class="inline-flex min-w-0 items-center gap-2.5"><span class="truncate font-semibold text-foreground" aria-current="page">Profile</span></li></ol></nav><span class="max-w-full shrink-0 items-center gap-1.5 font-semibold select-none h-chip px-2.5 rounded-md bg-primary/14 text-primary-chip-text font-mono text-[10.5px] whitespace-nowrap hidden sm:inline-flex" data-environment="production"><span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-primary"></span><span class="sr-only">Environment: </span>production<span aria-hidden="true" class="opacity-60">·</span><span class="sr-only">, region</span> eu-west</span></div><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_r_8_" aria-haspopup="dialog" aria-expanded="false" class="h-10 cursor-pointer items-center gap-2.5 rounded-lg border border-border bg-card pe-2.5 ps-3.5 text-muted-foreground transition-colors hover:border-ring/50 hover:text-foreground motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring hidden md:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><span class="text-[13px]">Search</span><kbd class="inline-flex items-center gap-1 font-mono"><kbd class="inline-flex items-center justify-center rounded border border-border bg-card font-mono font-semibold text-muted-foreground h-4 min-w-4 px-1 text-[10px]"><span aria-hidden="true">⌘</span><span class="sr-only">Command</span></kbd><kbd class="inline-flex items-center justify-center rounded border border-border bg-card font-mono font-semibold text-muted-foreground h-4 min-w-4 px-1 text-[10px]">K</kbd></kbd></button><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_r_9_" aria-haspopup="dialog" aria-expanded="false" aria-label="Notifications, 2 unread" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[13px] rounded-lg px-0 size-control relative"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span aria-hidden="true" class="pointer-events-none absolute -top-1.5 -end-1.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 bg-destructive font-mono text-[10px] font-bold leading-none text-destructive-foreground ring-2 ring-chrome">2</span></button><button type="button" tabindex="0" aria-label="Theme: Dark. Switch to High contrast" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[13px] rounded-lg px-0 size-control"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_10_" aria-label="Account menu for Dana Whitfield" class="inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-popup-open:ring-2 data-popup-open:ring-ring/40"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-8"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">DW</span></span></span></button></div></div></header><main id="main" tabindex="-1" class="min-h-0 flex-1 overflow-y-auto focus:outline-none"><div class="relative flex flex-col overflow-hidden bg-background font-sans text-foreground lg:flex-row h-full min-h-full"><div class="hidden w-60 shrink-0 flex-col gap-4 overflow-y-auto border-e border-border bg-background px-3 py-6 lg:flex"><p class="px-2.5 text-[13px] font-semibold tracking-tight text-foreground" aria-hidden="true">Settings</p><nav aria-label="Settings" class="flex flex-col gap-4"><div class="flex flex-col gap-0.5"><div id="_r_11_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Account</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_11_"><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" aria-current="page"><span aria-hidden="true" class="absolute top-1.5 bottom-1.5 start-0 w-[3px] rounded-e bg-primary"></span><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user shrink-0" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Profile</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check shrink-0" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg><span class="min-w-0 flex-1 truncate text-start">Security</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell shrink-0" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span class="min-w-0 flex-1 truncate text-start">Notifications</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette shrink-0" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Appearance</span></button></li></ul></div><div class="flex flex-col gap-0.5"><div id="_r_12_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Workspace</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_12_"><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-complex lucide-building-2 shrink-0" aria-hidden="true"><path d="M10 12h4"></path><path d="M10 8h4"></path><path d="M14 21v-3a2 2 0 0 0-4 0v3"></path><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path></svg><span class="min-w-0 flex-1 truncate text-start">Workspace</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users shrink-0" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Members</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card shrink-0" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Billing</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round shrink-0" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">API keys</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug shrink-0" aria-hidden="true"><path d="M12 22v-5"></path><path d="M15 8V2"></path><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"></path><path d="M9 8V2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Integrations</span></button></li></ul></div></nav></div><div class="shrink-0 border-b border-border px-4 py-3 lg:hidden"><button type="button" tabindex="0" id="base-ui-_r_13_" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Settings section" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">Profile</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_13_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="profile"></div><div id="settings-content" tabindex="-1" class="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto outline-none"><div class="mx-auto flex w-full flex-1 flex-col gap-8 px-4 py-6 sm:px-8 lg:py-8 max-w-3xl"><header class="min-w-0"><div class="flex flex-wrap items-end justify-between gap-4"><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-3 gap-y-1.5"><h1 class="min-w-0 truncate text-2xl font-bold tracking-tight text-foreground">Profile</h1></div><p class="mt-1.5 max-w-2xl text-[13px] leading-6 text-muted-foreground">How other members see you across the workspace.</p></div></div></header><div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6"><div class="relative w-fit shrink-0"><span role="img" aria-label="Avery Collins" class="relative inline-flex shrink-0 align-middle size-16"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[20px] rounded-full bg-primary text-primary-foreground"><span class="absolute inset-0 grid place-items-center leading-none">AC</span></span></span><button type="button" tabindex="0" aria-label="Change avatar" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[12.5px] px-0 size-8 absolute -end-1 -bottom-1 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera" aria-hidden="true"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"></path><circle cx="12" cy="13" r="3"></circle></svg></button><input accept="image/" hidden="" type="file"></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-2.5"><h2 class="truncate text-[22px] font-semibold tracking-tight text-foreground">Avery Collins</h2><span class="inline-flex max-w-full shrink-0 items-center gap-1.5 font-semibold whitespace-nowrap select-none h-6 px-2.5 text-[11.5px] rounded-md bg-primary/14 text-primary-chip-text">Owner</span></div><p class="mt-1 text-[13.5px] text-muted-foreground">Platform lead · keeps deployments boring</p><ul aria-label="Details" class="mt-3 flex flex-wrap gap-x-5 gap-y-1.5"><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>avery@example.com</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-complex lucide-building-2" aria-hidden="true"><path d="M10 12h4"></path><path d="M10 8h4"></path><path d="M14 21v-3a2 2 0 0 0-4 0v3"></path><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path></svg>Platform team</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Lisbon, Portugal</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days" aria-hidden="true"><path d="M8 2v3"></path><path d="M16 2v3"></path><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M8 13h.01"></path><path d="M12 13h.01"></path><path d="M16 13h.01"></path><path d="M8 17h.01"></path><path d="M12 17h.01"></path><path d="M16 17h.01"></path></svg>Joined March 2024</li></ul></div></div><div class="flex min-w-0 flex-col flex-nowrap gap-8"><section aria-labelledby="_r_14_-title" class="grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-3 border-t border-border pt-8"><div class="min-w-0"><h2 id="_r_14_-title" class="text-[14px] font-semibold tracking-tight text-foreground">Personal details</h2><p class="mt-1 text-[13px] leading-6 text-pretty text-muted-foreground">Your name and email are visible to everyone in the workspace.</p></div><div class="min-w-0 md:col-span-2"><div class="grid grid-cols-1 gap-4 sm:grid-cols-2"><div class="flex min-w-0 flex-col gap-2 data-disabled:opacity-70" data-filled=""><label id="base-ui-_r_15_" for="base-ui-_r_16_" class="inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed" data-filled="">Full name</label><div class="flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground shadow-sm transition-colors motion-reduce:transition-none has-[input:focus-visible]:border-primary/60 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-focus-ring data-invalid:border-destructive/70 has-[input[data-invalid]]:border-destructive/70 has-[input[aria-invalid=true]]:border-destructive/70 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-secondary/50 has-[input:disabled]:text-muted-foreground has-[input:read-only]:bg-secondary/40 h-control gap-tight px-field text-[13px]"><input id="base-ui-_r_16_" autocomplete="name" class="h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-muted-foreground read-only:text-muted-foreground text-[13px]" value="Avery Collins" data-filled="" aria-labelledby="base-ui-_r_15_"></div></div><div class="flex min-w-0 flex-col gap-2 data-disabled:opacity-70" data-filled=""><label id="base-ui-_r_17_" for="base-ui-_r_18_" class="inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed" data-filled="">Email</label><div class="flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground shadow-sm transition-colors motion-reduce:transition-none has-[input:focus-visible]:border-primary/60 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-focus-ring data-invalid:border-destructive/70 has-[input[data-invalid]]:border-destructive/70 has-[input[aria-invalid=true]]:border-destructive/70 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-secondary/50 has-[input:disabled]:text-muted-foreground has-[input:read-only]:bg-secondary/40 h-control gap-tight px-field text-[13px]"><input id="base-ui-_r_18_" autocomplete="email" class="h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-muted-foreground read-only:text-muted-foreground text-[13px]" type="email" value="avery@example.com" data-filled="" aria-labelledby="base-ui-_r_17_" aria-describedby="base-ui-_r_19_"></div><p id="base-ui-_r_19_" class="text-[12px] leading-5 text-muted-foreground text-pretty" data-filled="">We send a confirmation link when it changes.</p></div></div></div></section><section aria-labelledby="_r_20_-title" class="grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-3 border-t border-border pt-8"><div class="min-w-0"><h2 id="_r_20_-title" class="text-[14px] font-semibold tracking-tight text-foreground">Language and region</h2><p class="mt-1 text-[13px] leading-6 text-pretty text-muted-foreground">Used for dates, numbers and email digests.</p></div><div class="min-w-0 md:col-span-2"><div class="grid grid-cols-1 gap-4 sm:grid-cols-2"><div id="base-ui-_r_21_-label" class="mb-2 block text-[13px] font-medium text-foreground">Locale</div><button type="button" tabindex="0" id="base-ui-_r_21_" role="combobox" aria-expanded="false" aria-haspopup="listbox" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full" aria-labelledby="base-ui-_r_21_-label"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">English (United Kingdom)</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_21_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="en-GB"><div id="base-ui-_r_22_-label" class="mb-2 block text-[13px] font-medium text-foreground">Time zone</div><button type="button" tabindex="0" id="base-ui-_r_22_" role="combobox" aria-expanded="false" aria-haspopup="listbox" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full" aria-labelledby="base-ui-_r_22_-label"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">(UTC±00:00) Lisbon</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_22_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="Europe/Lisbon"></div></div></section></div><section aria-label="Profile changes" class="sticky bottom-0 z-20 border-t border-border bg-card px-4 py-3 shadow-sm sm:px-6"><div class="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><p role="status" class="flex items-center gap-2 text-[13px] text-foreground"><span aria-hidden="true" class="size-2 shrink-0 rounded-full bg-success"></span>All changes saved</p><div class="flex items-center gap-2 sm:justify-end [&>]:flex-1 sm:[&>*]:flex-none"><button type="button" data-disabled="" tabindex="0" disabled="" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground h-control gap-1.5 px-control text-[13px] rounded-lg">Discard</button><button type="button" data-disabled="" tabindex="0" disabled="" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-control gap-1.5 px-control text-[13px] rounded-lg">Save changes</button></div></div></section></div></div></div></main></div></div>
1	+ <div class="relative flex w-full min-w-0 overflow-hidden bg-background font-sans text-foreground h-dvh" data-sidebar-state="expanded"><a href="#main" class="sr-only focus:not-sr-only focus:top-3 focus:start-3 focus:z-50 focus:inline-flex focus:items-center focus:rounded-md focus:border focus:border-border focus:bg-card focus:px-3 focus:py-2 focus:text-[13px] focus:font-medium focus:text-foreground focus:shadow-md focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring focus:absolute">Skip to main content</a><aside id="_r_0_" aria-label="Sidebar" data-state="expanded" class="hidden shrink-0 flex-col overflow-hidden border-e border-border/60 bg-chrome lg:flex transition-[width] duration-200 motion-reduce:transition-none w-[248px]"><div class="flex shrink-0 items-center px-3 pt-4 pb-3"><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_1_" aria-label="Acme Industries, Switch workspace" class="group flex h-11 max-w-full cursor-pointer items-center gap-2.5 rounded-[10px] border border-border bg-card pe-2.5 ps-1.5 text-start transition-colors hover:bg-secondary/50 data-popup-open:bg-secondary/50 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-[30px]"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">AI</span></span></span><span class="flex min-w-0 flex-col leading-tight"><span class="truncate text-[13px] font-semibold text-foreground">Acme Industries</span><span class="mt-px truncate font-mono text-[10px] text-muted-foreground">Enterprise · Owner</span></span><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevrons-up-down ms-1 shrink-0 text-muted-foreground" aria-hidden="true"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg></button></div><div class="min-h-0 flex-1 overflow-x-hidden overflow-y-auto px-3 pt-1 pb-3"><nav aria-label="Main" class="flex flex-col gap-4"><div class="flex flex-col gap-0.5"><div id="_r_2_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Workspace</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_2_"><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/overview"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-house lucide-home shrink-0" aria-hidden="true"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path><path d="M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg><span class="min-w-0 flex-1 truncate text-start">Overview</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/projects"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-kanban shrink-0" aria-hidden="true"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path><path d="M8 10v4"></path><path d="M12 10v2"></path><path d="M16 10v6"></path></svg><span class="min-w-0 flex-1 truncate text-start">Projects</span> <span class="inline-flex h-[18px] shrink-0 items-center rounded-full bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground">12</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/deployments"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket shrink-0" aria-hidden="true"><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"></path><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09"></path><path d="M9 12a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.4 22.4 0 0 1-4 2z"></path><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 .05 5 .05"></path></svg><span class="min-w-0 flex-1 truncate text-start">Deployments</span> <span class="inline-flex h-[18px] shrink-0 items-center rounded-full bg-secondary px-1.5 font-mono text-[10.5px] text-muted-foreground">3</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/analytics"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chart-column lucide-bar-chart-3 shrink-0" aria-hidden="true"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg><span class="min-w-0 flex-1 truncate text-start">Analytics</span></a></li></ul></div><div data-open="" class="flex flex-col gap-0.5"><button type="button" data-panel-open="" tabindex="0" aria-disabled="false" aria-controls="base-ui-_r_3_" aria-expanded="true" class="group mb-0.5 flex w-full cursor-pointer items-center justify-between rounded-md px-2.5 py-1 transition-colors select-none hover:bg-accent/40 motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring"><span id="_r_4_" class="font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase group-hover:text-foreground">Admin</span><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down shrink-0 text-muted-foreground transition-transform duration-200 group-data-panel-closed:-rotate-90 motion-reduce:transition-none" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button><div data-open="" id="base-ui-_r_3_" style="--collapsible-panel-height: auto; --collapsible-panel-width: auto; animation-name: none;" class="h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0"><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_4_"><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/activity"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity shrink-0" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Activity</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/members"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users shrink-0" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Members</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/billing"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card shrink-0" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Billing</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" href="/api-keys"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round shrink-0" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">API keys</span></a></li><li class="relative"><a class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" aria-current="page" href="/settings"><span aria-hidden="true" class="absolute top-1.5 bottom-1.5 start-0 w-[3px] rounded-e bg-primary"></span><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings shrink-0" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Settings</span></a></li></ul></div></div></nav></div><div class="shrink-0 p-2.5"><div class="flex flex-col gap-1.5"><div class="rounded-[10px] border border-border bg-card p-2.5"><div aria-valuemax="10000" aria-valuemin="0" aria-valuenow="8200" aria-valuetext="8.2k / 10k" role="meter" data-level="warning" class="grid w-full gap-1.5" aria-labelledby="base-ui-_r_5_"><div class="flex items-baseline justify-between gap-3"><span id="base-ui-_r_5_" role="presentation" class="text-[13px] font-medium text-foreground">Monthly requests</span><span class="font-mono text-[11.5px] font-semibold tabular-nums text-warning-text">8.2k / 10k</span></div><div class="relative w-full overflow-hidden rounded-full bg-secondary h-1.5"><div style="inset-inline-start: 0px; height: inherit; width: 82%;" class="block h-full rounded-full transition-[width] duration-400 ease-out motion-reduce:transition-none bg-warning"></div></div><span role="presentation" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;">x</span></div></div><a href="#help" class="cursor-pointer underline-offset-4 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 text-muted-foreground no-underline flex h-[34px] items-center gap-2.5 rounded-lg px-2.5 text-[13px] font-medium hover:bg-accent/55 hover:text-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-question-mark lucide-help-circle lucide-circle-help" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>Help & docs</a><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_6_" aria-label="Account menu for Dana Whitfield" class="inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-popup-open:ring-2 data-popup-open:ring-ring/40 h-9 pe-2 ps-0.5 hover:bg-secondary/60 w-full justify-start"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-8"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">DW</span></span></span><span class="pe-1 text-[13px] font-semibold text-foreground">Dana Whitfield</span></button></div></div></aside><div class="flex min-h-0 min-w-0 flex-1 flex-col"><header class="flex h-14 shrink-0 items-center gap-2 border-b border-border/60 bg-chrome px-3 lg:gap-3 lg:px-5"><button type="button" tabindex="0" aria-label="Open navigation" data-base-ui-click-trigger="" id="base-ui-_r_7_" aria-haspopup="dialog" aria-expanded="false" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground gap-1.5 text-[13px] rounded-lg px-0 size-control lg:hidden"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button><button type="button" tabindex="0" aria-label="Collapse sidebar" aria-expanded="true" aria-controls="_r_0_" class="shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground gap-1.5 text-[13px] rounded-lg px-0 size-control hidden lg:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-panel-left-close lucide-sidebar-close rtl:-scale-x-100" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path><path d="m16 15-3-3 3-3"></path></svg></button><div class="flex min-w-0 flex-1 items-center gap-2 lg:gap-3"><div class="flex min-w-0 flex-1 items-center gap-2 lg:gap-3"><div class="flex min-w-0 flex-1 items-center gap-2.5"><nav aria-label="Breadcrumb" class="min-w-0"><ol class="flex flex-wrap items-center gap-2.5 text-[13px]"><li class="inline-flex min-w-0 items-center gap-2.5"><a href="/settings" class="cursor-pointer underline-offset-4 aria-disabled:pointer-events-none aria-disabled:opacity-50 truncate rounded-sm text-muted-foreground no-underline transition-colors hover:text-foreground hover:no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring font-normal">Settings</a><span class="inline-flex shrink-0 select-none text-muted-foreground/40" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right rtl:-scale-x-100" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></span></li><li class="inline-flex min-w-0 items-center gap-2.5"><span class="truncate font-semibold text-foreground" aria-current="page">Profile</span></li></ol></nav><span class="max-w-full shrink-0 items-center gap-1.5 font-semibold select-none h-chip px-2.5 rounded-md bg-primary/14 text-primary-chip-text font-mono text-[10.5px] whitespace-nowrap hidden sm:inline-flex" data-environment="production"><span aria-hidden="true" class="size-1.5 shrink-0 rounded-full bg-primary"></span><span class="sr-only">Environment: </span>production<span aria-hidden="true" class="opacity-60">·</span><span class="sr-only">, region</span> eu-west</span></div><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_r_8_" aria-haspopup="dialog" aria-expanded="false" class="h-10 cursor-pointer items-center gap-2.5 rounded-lg border border-border bg-card pe-2.5 ps-3.5 text-muted-foreground transition-colors hover:border-ring/50 hover:text-foreground motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring hidden md:inline-flex"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg><span class="text-[13px]">Search</span><kbd class="inline-flex items-center gap-1 font-mono"><kbd class="inline-flex items-center justify-center rounded border border-border bg-card font-mono font-semibold text-muted-foreground h-4 min-w-4 px-1 text-[10px]"><span aria-hidden="true">Ctrl</span><span class="sr-only">Control</span></kbd><kbd class="inline-flex items-center justify-center rounded border border-border bg-card font-mono font-semibold text-muted-foreground h-4 min-w-4 px-1 text-[10px]">K</kbd></kbd></button><button type="button" tabindex="0" data-base-ui-click-trigger="" id="base-ui-_r_9_" aria-haspopup="dialog" aria-expanded="false" aria-label="Notifications, 2 unread" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[13px] rounded-lg px-0 size-control relative"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span aria-hidden="true" class="pointer-events-none absolute -top-1.5 -end-1.5 inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 bg-destructive font-mono text-[10px] font-bold leading-none text-destructive-foreground ring-2 ring-chrome">2</span></button><button type="button" tabindex="0" aria-label="Theme: Dark. Switch to High contrast" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[13px] rounded-lg px-0 size-control"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button><button type="button" tabindex="0" aria-haspopup="menu" aria-expanded="false" id="base-ui-_r_10_" aria-label="Account menu for Dana Whitfield" class="inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg transition-colors outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-popup-open:ring-2 data-popup-open:ring-ring/40"><span aria-hidden="true" class="relative inline-flex shrink-0 align-middle size-8"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[11px] bg-primary text-primary-foreground rounded-lg"><span class="absolute inset-0 grid place-items-center leading-none">DW</span></span></span></button></div></div></header><main id="main" tabindex="-1" class="min-h-0 flex-1 overflow-y-auto focus:outline-none"><div class="relative flex flex-col overflow-hidden bg-background font-sans text-foreground lg:flex-row h-full min-h-full"><div class="hidden w-60 shrink-0 flex-col gap-4 overflow-y-auto border-e border-border bg-background px-3 py-6 lg:flex"><p class="px-2.5 text-[13px] font-semibold tracking-tight text-foreground" aria-hidden="true">Settings</p><nav aria-label="Settings" class="flex flex-col gap-4"><div class="flex flex-col gap-0.5"><div id="_r_11_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Account</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_11_"><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5" aria-current="page"><span aria-hidden="true" class="absolute top-1.5 bottom-1.5 start-0 w-[3px] rounded-e bg-primary"></span><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user shrink-0" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Profile</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-check shrink-0" aria-hidden="true"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path><path d="m9 12 2 2 4-4"></path></svg><span class="min-w-0 flex-1 truncate text-start">Security</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bell shrink-0" aria-hidden="true"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg><span class="min-w-0 flex-1 truncate text-start">Notifications</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette shrink-0" aria-hidden="true"><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"></path><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Appearance</span></button></li></ul></div><div class="flex flex-col gap-0.5"><div id="_r_12_" class="px-2.5 pt-1 pb-1 font-mono text-[9.5px] tracking-[0.14em] text-muted-foreground uppercase select-none">Workspace</div><ul class="m-0 flex list-none flex-col gap-0.5 p-0" aria-labelledby="_r_12_"><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-complex lucide-building-2 shrink-0" aria-hidden="true"><path d="M10 12h4"></path><path d="M10 8h4"></path><path d="M14 21v-3a2 2 0 0 0-4 0v3"></path><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path></svg><span class="min-w-0 flex-1 truncate text-start">Workspace</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users shrink-0" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg><span class="min-w-0 flex-1 truncate text-start">Members</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-credit-card shrink-0" aria-hidden="true"><rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line><path d="M6 14h2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Billing</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round shrink-0" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"></path><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"></circle></svg><span class="min-w-0 flex-1 truncate text-start">API keys</span></button></li><li class="relative"><button type="button" class="relative flex h-control cursor-pointer items-center rounded-lg text-[13px] no-underline transition-colors motion-reduce:transition-none font-medium text-muted-foreground hover:bg-accent/45 hover:text-foreground aria-[current=page]:bg-accent aria-[current=page]:font-semibold aria-[current=page]:text-accent-foreground aria-disabled:pointer-events-none aria-disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring w-full gap-2.5 px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plug shrink-0" aria-hidden="true"><path d="M12 22v-5"></path><path d="M15 8V2"></path><path d="M17 8a1 1 0 0 1 1 1v4a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V9a1 1 0 0 1 1-1z"></path><path d="M9 8V2"></path></svg><span class="min-w-0 flex-1 truncate text-start">Integrations</span></button></li></ul></div></nav></div><div class="shrink-0 border-b border-border px-4 py-3 lg:hidden"><button type="button" tabindex="0" id="base-ui-_r_13_" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-label="Settings section" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">Profile</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_13_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="profile"></div><div id="settings-content" tabindex="-1" class="flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto outline-none"><div class="mx-auto flex w-full flex-1 flex-col gap-8 px-4 py-6 sm:px-8 lg:py-8 max-w-3xl"><header class="min-w-0"><div class="flex flex-wrap items-end justify-between gap-4"><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-x-3 gap-y-1.5"><h1 class="min-w-0 truncate text-2xl font-bold tracking-tight text-foreground">Profile</h1></div><p class="mt-1.5 max-w-2xl text-[13px] leading-6 text-muted-foreground">How other members see you across the workspace.</p></div></div></header><div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-6"><div class="relative w-fit shrink-0"><span role="img" aria-label="Avery Collins" class="relative inline-flex shrink-0 align-middle size-16"><span class="relative inline-flex size-full items-center justify-center overflow-hidden font-bold tracking-tight select-none text-[20px] rounded-full bg-primary text-primary-foreground"><span class="absolute inset-0 grid place-items-center leading-none">AC</span></span></span><button type="button" tabindex="0" aria-label="Change avatar" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 border border-border bg-card text-foreground shadow-sm hover:bg-secondary/70 gap-1.5 text-[12.5px] px-0 size-8 absolute -end-1 -bottom-1 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-camera" aria-hidden="true"><path d="M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z"></path><circle cx="12" cy="13" r="3"></circle></svg></button><input accept="image/" hidden="" type="file"></div><div class="min-w-0 flex-1"><div class="flex flex-wrap items-center gap-2.5"><h2 class="truncate text-[22px] font-semibold tracking-tight text-foreground">Avery Collins</h2><span class="inline-flex max-w-full shrink-0 items-center gap-1.5 font-semibold whitespace-nowrap select-none h-6 px-2.5 text-[11.5px] rounded-md bg-primary/14 text-primary-chip-text">Owner</span></div><p class="mt-1 text-[13.5px] text-muted-foreground">Platform lead · keeps deployments boring</p><ul aria-label="Details" class="mt-3 flex flex-wrap gap-x-5 gap-y-1.5"><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path><rect x="2" y="4" width="20" height="16" rx="2"></rect></svg>avery@example.com</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building-complex lucide-building-2" aria-hidden="true"><path d="M10 12h4"></path><path d="M10 8h4"></path><path d="M14 21v-3a2 2 0 0 0-4 0v3"></path><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"></path><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"></path></svg>Platform team</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path><circle cx="12" cy="10" r="3"></circle></svg>Lisbon, Portugal</li><li class="flex items-center gap-1.5 text-[12.5px] text-muted-foreground"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-days" aria-hidden="true"><path d="M8 2v3"></path><path d="M16 2v3"></path><rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M3 9h18"></path><path d="M8 13h.01"></path><path d="M12 13h.01"></path><path d="M16 13h.01"></path><path d="M8 17h.01"></path><path d="M12 17h.01"></path><path d="M16 17h.01"></path></svg>Joined March 2024</li></ul></div></div><div class="flex min-w-0 flex-col flex-nowrap gap-8"><section aria-labelledby="_r_14_-title" class="grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-3 border-t border-border pt-8"><div class="min-w-0"><h2 id="_r_14_-title" class="text-[14px] font-semibold tracking-tight text-foreground">Personal details</h2><p class="mt-1 text-[13px] leading-6 text-pretty text-muted-foreground">Your name and email are visible to everyone in the workspace.</p></div><div class="min-w-0 md:col-span-2"><div class="grid grid-cols-1 gap-4 sm:grid-cols-2"><div class="flex min-w-0 flex-col gap-2 data-disabled:opacity-70" data-filled=""><label id="base-ui-_r_15_" for="base-ui-_r_16_" class="inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed" data-filled="">Full name</label><div class="flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground shadow-sm transition-colors motion-reduce:transition-none has-[input:focus-visible]:border-primary/60 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-focus-ring data-invalid:border-destructive/70 has-[input[data-invalid]]:border-destructive/70 has-[input[aria-invalid=true]]:border-destructive/70 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-secondary/50 has-[input:disabled]:text-muted-foreground has-[input:read-only]:bg-secondary/40 h-control gap-tight px-field text-[13px]"><input id="base-ui-_r_16_" autocomplete="name" class="h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-muted-foreground read-only:text-muted-foreground text-[13px]" value="Avery Collins" data-filled="" aria-labelledby="base-ui-_r_15_"></div></div><div class="flex min-w-0 flex-col gap-2 data-disabled:opacity-70" data-filled=""><label id="base-ui-_r_17_" for="base-ui-_r_18_" class="inline-flex items-center gap-0.5 text-[13px] font-medium text-foreground data-disabled:cursor-not-allowed" data-filled="">Email</label><div class="flex w-full min-w-0 items-center rounded-md border border-border bg-background text-foreground shadow-sm transition-colors motion-reduce:transition-none has-[input:focus-visible]:border-primary/60 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-focus-ring data-invalid:border-destructive/70 has-[input[data-invalid]]:border-destructive/70 has-[input[aria-invalid=true]]:border-destructive/70 has-[input:disabled]:cursor-not-allowed has-[input:disabled]:bg-secondary/50 has-[input:disabled]:text-muted-foreground has-[input:read-only]:bg-secondary/40 h-control gap-tight px-field text-[13px]"><input id="base-ui-_r_18_" autocomplete="email" class="h-full w-full min-w-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:text-muted-foreground read-only:text-muted-foreground text-[13px]" type="email" value="avery@example.com" data-filled="" aria-labelledby="base-ui-_r_17_" aria-describedby="base-ui-_r_19_"></div><p id="base-ui-_r_19_" class="text-[12px] leading-5 text-muted-foreground text-pretty" data-filled="">We send a confirmation link when it changes.</p></div></div></div></section><section aria-labelledby="_r_20_-title" class="grid grid-cols-1 gap-x-10 gap-y-5 md:grid-cols-3 border-t border-border pt-8"><div class="min-w-0"><h2 id="_r_20_-title" class="text-[14px] font-semibold tracking-tight text-foreground">Language and region</h2><p class="mt-1 text-[13px] leading-6 text-pretty text-muted-foreground">Used for dates, numbers and email digests.</p></div><div class="min-w-0 md:col-span-2"><div class="grid grid-cols-1 gap-4 sm:grid-cols-2"><div id="base-ui-_r_21_-label" class="mb-2 block text-[13px] font-medium text-foreground">Locale</div><button type="button" tabindex="0" id="base-ui-_r_21_" role="combobox" aria-expanded="false" aria-haspopup="listbox" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full" aria-labelledby="base-ui-_r_21_-label"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">English (United Kingdom)</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_21_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="en-GB"><div id="base-ui-_r_22_-label" class="mb-2 block text-[13px] font-medium text-foreground">Time zone</div><button type="button" tabindex="0" id="base-ui-_r_22_" role="combobox" aria-expanded="false" aria-haspopup="listbox" class="group flex items-center justify-between gap-2 rounded-md border border-border bg-background text-foreground shadow-sm transition-colors select-none hover:border-muted-foreground/40 data-popup-open:border-primary/60 data-popup-open:ring-2 data-popup-open:ring-ring/25 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 h-control pe-2.5 ps-field text-[13px] w-full" aria-labelledby="base-ui-_r_22_-label"><span class="flex min-w-0 items-center gap-2 truncate data-placeholder:text-muted-foreground">(UTC±00:00) Lisbon</span><span aria-hidden="true" class="flex shrink-0 text-muted-foreground transition-transform motion-reduce:transition-none group-data-popup-open:rotate-180"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></span></button><input id="base-ui-_r_22_-hidden-input" style="clip-path: inset(50%); overflow: hidden; white-space: nowrap; border: 0px; padding: 0px; width: 1px; height: 1px; margin: -1px; position: fixed; top: 0px; left: 0px;" tabindex="-1" aria-hidden="true" value="Europe/Lisbon"></div></div></section></div><section aria-label="Profile changes" class="sticky bottom-0 z-20 border-t border-border bg-card px-4 py-3 shadow-sm sm:px-6"><div class="mx-auto flex max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"><p role="status" class="flex items-center gap-2 text-[13px] text-foreground"><span aria-hidden="true" class="size-2 shrink-0 rounded-full bg-success"></span>All changes saved</p><div class="flex items-center gap-2 sm:justify-end [&>]:flex-1 sm:[&>*]:flex-none"><button type="button" data-disabled="" tabindex="0" disabled="" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 text-muted-foreground hover:bg-secondary/70 hover:text-foreground h-control gap-1.5 px-control text-[13px] rounded-lg">Discard</button><button type="button" data-disabled="" tabindex="0" disabled="" class="inline-flex shrink-0 items-center justify-center font-semibold whitespace-nowrap transition-colors select-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring data-[disabled]:pointer-events-none data-[disabled]:opacity-50 bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-control gap-1.5 px-control text-[13px] rounded-lg">Save changes</button></div></div></section></div></div></div></main></div></div>

package/src/shared/ConsoleShell.test.tsx CHANGED Viewed

@@ -1,3 +1,5 @@
+import { I18nProvider } from '@gntik-ai/ui';
+import { BarChart } from '@gntik-ai/charts';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ComponentType } from 'react';
@@ -16,6 +18,17 @@ const workspaces = [
 ];
 describe('ConsoleShell', () => {
+  it('passes the kit locale to charts in its content', () => {
+    render(
+      <I18nProvider locale="es">
+        <ConsoleShell>
+          <BarChart data={[]} index="month" categories={['requests']} state="loading" />
+        </ConsoleShell>
+      </I18nProvider>,
+    );
+    expect(screen.getByRole('status', { name: 'Cargando gráfico' })).toBeInTheDocument();
+  });
   it('shows the default usage meter and help link', () => {
     render(<ConsoleShell>content</ConsoleShell>);
     expect(screen.getByRole('meter')).toBeInTheDocument();

package/src/shared/ConsoleShell.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { ChartLocaleProvider } from '@gntik-ai/charts';
 import {
   AppSidebarFooter,
   AppSidebarHeader,
@@ -9,6 +10,7 @@ import {
 } from '@gntik-ai/blocks';
 import {
   SidebarLayout,
+  useI18n,
   type BreadcrumbItem,
   type NavGroup,
   type SidebarLayoutProps,
@@ -63,36 +65,39 @@ export function ConsoleShell({
   sidebarLabel,
   collapseMode,
 }: ConsoleShellProps) {
+  const { locale } = useI18n();
   return (
-    <SidebarLayout
-      fullScreen
-      storageKey={storageKey}
-      sidebarLabel={sidebarLabel}
-      collapseMode={collapseMode}
-      sidebarHeader={({ collapsed }) => (
-        <AppSidebarHeader
-          collapsed={collapsed}
-          workspaces={workspaces}
-          currentWorkspaceId={currentWorkspaceId}
-          onWorkspaceChange={onWorkspaceChange}
-          onCreateWorkspace={onCreateWorkspace}
-        />
-      )}
-      sidebar={({ collapsed }) => <AppSidebarNav groups={nav} currentHref={currentHref} collapsed={collapsed} />}
-      sidebarFooter={({ collapsed }) => (
-        <AppSidebarFooter
-          collapsed={collapsed}
-          user={user}
-          usage={usage}
-          helpHref={helpHref}
-          helpLabel={helpLabel}
-          userMenuItems={userMenuItems}
-          onSignOut={onSignOut}
-        />
-      )}
-      topbar={<AppTopbar breadcrumbs={breadcrumbs} user={user} {...topbar} />}
-    >
-      {children}
-    </SidebarLayout>
+    <ChartLocaleProvider locale={locale}>
+      <SidebarLayout
+        fullScreen
+        storageKey={storageKey}
+        sidebarLabel={sidebarLabel}
+        collapseMode={collapseMode}
+        sidebarHeader={({ collapsed }) => (
+          <AppSidebarHeader
+            collapsed={collapsed}
+            workspaces={workspaces}
+            currentWorkspaceId={currentWorkspaceId}
+            onWorkspaceChange={onWorkspaceChange}
+            onCreateWorkspace={onCreateWorkspace}
+          />
+        )}
+        sidebar={({ collapsed }) => <AppSidebarNav groups={nav} currentHref={currentHref} collapsed={collapsed} />}
+        sidebarFooter={({ collapsed }) => (
+          <AppSidebarFooter
+            collapsed={collapsed}
+            user={user}
+            usage={usage}
+            helpHref={helpHref}
+            helpLabel={helpLabel}
+            userMenuItems={userMenuItems}
+            onSignOut={onSignOut}
+          />
+        )}
+        topbar={<AppTopbar breadcrumbs={breadcrumbs} user={user} {...topbar} />}
+      >
+        {children}
+      </SidebarLayout>
+    </ChartLocaleProvider>
   );
 }

package/src/workflow-builder/Page.test.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectNoAxeViolations } from '../test/a11y';
 import { useState } from 'react';
-import type { ConsoleEntry } from '@gntik-ai/blocks';
+import { builderNodes, builderEdges, type ConsoleEntry, type FlowGraph } from '@gntik-ai/blocks';
 import FlowBuilderPage from './Page';
 // React Flow in jsdom reads the zoom from DOMMatrixReadOnly and node sizes from offset*.
@@ -19,6 +19,107 @@ beforeAll(() => {
 });
 describe('FlowBuilderPage', () => {
+  it('keeps nodes and edges as initial values when uncontrolled', async () => {
+    const onSave = vi.fn<(graph: FlowGraph) => void>();
+    const { rerender } = render(<FlowBuilderPage nodes={builderNodes} edges={builderEdges} onSave={onSave} />);
+    rerender(<FlowBuilderPage nodes={[]} edges={[]} onSave={onSave} />);
+    expect(screen.getByText('5 nodes · 4 edges')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave.mock.calls[0]?.[0].nodes).toHaveLength(5);
+    expect(onSave.mock.calls[0]?.[0].edges).toHaveLength(4);
+  });
+  it('saves the controlled graph on screen when the host ignores a reported edit', async () => {
+    const graph = {
+      nodes: builderNodes.map((node) => ({
+        ...node,
+        selected: node.id === 'validate',
+        dragging: false,
+        measured: { width: 208, height: 90 },
+      })),
+      edges: builderEdges,
+    };
+    const changed = vi.fn();
+    const onSave = vi.fn<(graph: FlowGraph) => void>();
+    render(<FlowBuilderPage graph={graph} onGraphChange={changed} onSave={onSave} />);
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Ignored edit' } });
+    expect(changed).toHaveBeenCalledOnce();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    const saved = onSave.mock.calls[0]![0];
+    expect(saved.nodes.find((node) => node.id === 'validate')?.data.title).toBe('Validate payload');
+    for (const node of saved.nodes) {
+      expect(node).not.toHaveProperty('selected');
+      expect(node).not.toHaveProperty('dragging');
+      expect(node).not.toHaveProperty('measured');
+    }
+  });
+  it('keeps edits made during a pending save unsaved', async () => {
+    let finish = () => {};
+    const onSave = () =>
+      new Promise<void>((resolve) => {
+        finish = resolve;
+      });
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'First' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('aria-busy', 'true');
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Second' } });
+    await act(async () => finish());
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).not.toHaveAttribute('aria-busy', 'true');
+  });
+  it('marks edits unsaved, marks a resolved save saved and leaves failed saves unsaved', async () => {
+    const onSave = vi
+      .fn<(graph: FlowGraph) => Promise<void>>()
+      .mockResolvedValueOnce()
+      .mockRejectedValueOnce(new Error('Offline'));
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    const title = screen.getByRole('textbox', { name: 'Title' });
+    fireEvent.change(title, { target: { value: 'Check order' } });
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(await screen.findByText('All changes saved')).toBeInTheDocument();
+    fireEvent.change(title, { target: { value: 'Check again' } });
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(screen.getByText('You have unsaved changes')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Save' })).not.toHaveAttribute('aria-busy', 'true');
+  });
+  it('saves the initial sample graph before an edit', async () => {
+    const onSave = vi.fn<(graph: FlowGraph) => Promise<void>>(() => Promise.resolve());
+    render(<FlowBuilderPage onSave={onSave} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledOnce();
+    expect(onSave.mock.calls[0]).toEqual([
+      expect.objectContaining({
+        nodes: expect.arrayContaining([expect.objectContaining({ id: 'validate' })]),
+      }),
+    ]);
+    expect(onSave.mock.calls[0]?.[0].nodes).toHaveLength(5);
+    expect(onSave.mock.calls[0]?.[0].edges).toHaveLength(4);
+  });
+  it('saves the edited title in the graph', async () => {
+    const onSave = vi.fn(() => Promise.resolve());
+    render(<FlowBuilderPage onSave={onSave} />);
+    fireEvent.click(screen.getByTestId('rf__node-validate'));
+    fireEvent.change(screen.getByRole('textbox', { name: 'Title' }), { target: { value: 'Check order' } });
+    await userEvent.click(screen.getByRole('button', { name: 'Save' }));
+    expect(onSave).toHaveBeenCalledExactlyOnceWith(
+      expect.objectContaining({
+        nodes: expect.arrayContaining([
+          expect.objectContaining({ id: 'validate', data: expect.objectContaining({ title: 'Check order' }) }),
+        ]),
+        edges: expect.any(Array),
+      }),
+    );
+  });
   it('renders the editor chrome and the flow builder', { timeout: 15000 }, async () => {
     render(<FlowBuilderPage />);
     expect(screen.getByRole('main', { name: 'Order sync editor' })).toBeInTheDocument();