@once-ui-system/core 1.8.5 → 2.0.0-alpha.1

package/ai/examples/blocks/Waitlist1.tsx

@@ -68,18 +68,18 @@ export const Waitlist1 = () => {
           </Badge>
         </RevealFx>
         <Column horizontal="center" align="center" gap="24">
-          <RevealFx horizontal="center" delay={0.4}>
+          <RevealFx horizontal="center" delay={400}>
             <Heading variant="display-strong-xl" onBackground="neutral-strong">
               The all-in-one course platform
             </Heading>
           </RevealFx>
-          <RevealFx horizontal="center" delay={0.6}>
+          <RevealFx horizontal="center" delay={600}>
             <Text onBackground="neutral-medium" variant="heading-default-xl">
               Launch and sell your courses with ease. We handle enrollment, payments and analytics. You focus on creating.
             </Text>
           </RevealFx>
         </Column>
-        <RevealFx horizontal="center" delay={0.8}>
+        <RevealFx horizontal="center" delay={800}>
           <AvatarGroup
             reverse
             size="m"
@@ -110,14 +110,14 @@ export const Waitlist1 = () => {
               </Row>
             </RevealFx>
           ) : (
-            <RevealFx key="subscribed" direction="column" horizontal="center" delay={1} gap="16" data-border="rounded">
+            <RevealFx key="subscribed" direction="column" horizontal="center" delay={1000} gap="16" data-border="rounded">
               <Input
                 id="email"
                 placeholder="Enter email"
                 value={email}
                 validate={(value) => validateEmail(value as string)}
                 onChange={(e) => setEmail(e.target.value)}
-                hasSuffix={
+                suffix={
                   <IconButton size="l" style={{marginRight: "-0.5rem"}} icon="send" onClick={() => subscribe()}/>
                 }
               />

package/ai/examples/blocks/content/resources.ts

@@ -1,4 +1,6 @@
-export const social = [
+import type { IconName } from "@once-ui-system/core";
+
+export const social: { icon: IconName; label: string; href: string }[] = [
   { icon: "link", label: "Discord", href: "https://discord.com/invite/5EyAQ4eNdS" },
   { icon: "link", label: "GitHub", href: "https://github.com/once-ui-system" },
   { icon: "document", label: "Email", href: "mailto:demo@email.com" },

package/ai/examples/dashboard.tsx

@@ -6,6 +6,7 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
+  Button,
   Column,
   CountFx,
   Grid,
@@ -37,9 +38,9 @@ const activity = {
     { content: "Time", key: "time" },
   ],
   rows: [
-    ["Plan upgraded to Pro", "jane@acme.co", <Tag size="s" variant="success">Completed</Tag>, "2m ago"],
-    ["New signup", "alex@studio.io", <Tag size="s" variant="brand">New</Tag>, "14m ago"],
-    ["Payment failed", "ops@build.dev", <Tag size="s" variant="danger">Action</Tag>, "1h ago"],
+    ["Plan upgraded to Pro", "jane@acme.co", <Tag size="s" scheme="success">Completed</Tag>, "2m ago"],
+    ["New signup", "alex@studio.io", <Tag size="s" scheme="brand">New</Tag>, "14m ago"],
+    ["Payment failed", "ops@build.dev", <Tag size="s" scheme="danger">Action</Tag>, "1h ago"],
   ],
 };
 
@@ -54,7 +55,7 @@ export function DashboardExample() {
 
   return (
     <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24" gap="40">
-      <Column fillWidth maxWidth="l" gap="40">
+      <Column maxWidth="l" gap="40">
         <Row fillWidth horizontal="between" vertical="end" gap="24" s={{ direction: "column", horizontal: "start" }}>
           <Column gap="8">
             <Text variant="label-default-s" onBackground="brand-medium">
@@ -65,8 +66,8 @@ export function DashboardExample() {
             </Heading>
           </Column>
           <SegmentedControl
-            selected={range}
-            onToggle={setRange}
+            value={range}
+            onChange={setRange}
             buttons={[
               { value: "7d", label: "7 days" },
               { value: "30d", label: "30 days" },
@@ -77,8 +78,8 @@ export function DashboardExample() {
 
         <Grid ref={statsRef} columns="4" gap="16" m={{ columns: 2 }} s={{ columns: 1 }}>
           {stats.map((stat, index) => (
-            <RevealFx key={stat.label} fill trigger={seen} translateY="8" delay={index * 0.1}>
-              <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16">
+            <RevealFx key={stat.label} fill revealed={seen} translateY="8" delay={index * 100}>
+              <Column background="surface" border radius="l" padding="24" gap="16">
                 <Row fillWidth horizontal="between" vertical="center">
                   <Text variant="label-default-s" onBackground="neutral-weak">
                     {stat.label}
@@ -108,7 +109,7 @@ export function DashboardExample() {
         </Grid>
 
         <Grid columns="2" gap="24" s={{ columns: 1 }}>
-          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+          <Column background="surface" border radius="l" padding="24" gap="16" minHeight={32}>
             <Heading as="h2" variant="heading-strong-s">
               Revenue trend
             </Heading>
@@ -119,7 +120,7 @@ export function DashboardExample() {
               </Text>
             </Column>
           </Column>
-          <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="16" minHeight={32}>
+          <Column background="surface" border radius="l" padding="24" gap="16" minHeight={32}>
             <Heading as="h2" variant="heading-strong-s">
               Signups by channel
             </Heading>
@@ -132,14 +133,12 @@ export function DashboardExample() {
           </Column>
         </Grid>
 
-        <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+        <Column background="surface" border radius="l" padding="24" gap="24">
           <Row fillWidth horizontal="between" vertical="center">
             <Heading as="h2" variant="heading-strong-s">
               Recent activity
             </Heading>
-            <Text variant="label-default-s" onBackground="brand-medium" style={{ cursor: "pointer" }}>
-              View all
-            </Text>
+            <Button variant="tertiary" size="s" label="View all" />
           </Row>
           <Line />
           <Table fillWidth data={activity} />

package/ai/examples/marketing-hero.tsx

@@ -84,13 +84,13 @@ export function MarketingHeroExample() {
               </Heading>
             </Column>
           </RevealFx>
-          <RevealFx delay={0.1} translateY="16">
+          <RevealFx delay={100} translateY="16">
             <Text variant="body-default-l" onBackground="neutral-weak" align="center">
               Build semantic layouts with Row, Column and Grid. Add 100+ pre-styled components.
               Manage themes in a single file.
             </Text>
           </RevealFx>
-          <RevealFx delay={0.2} translateY="16">
+          <RevealFx delay={200} translateY="16">
             <Row gap="12" s={{ direction: "column" }}>
               <Button arrowIcon>View docs</Button>
               <Button variant="secondary" suffixIcon="arrowUpRight">
@@ -103,7 +103,7 @@ export function MarketingHeroExample() {
 
       {/* Feature grid — left-aligned section header, not repeated centered blocks */}
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Column gap="12" maxWidth={32}>
             <Text variant="label-default-s" onBackground="brand-medium">
               Components
@@ -117,7 +117,7 @@ export function MarketingHeroExample() {
               <Column
                 key={feature.title}
                 background="surface"
-                border="neutral-alpha-weak"
+                border
                 radius="l"
                 padding="24"
                 gap="16"

package/ai/examples/pricing.tsx

@@ -6,7 +6,6 @@
  */
 import { useEffect, useRef, useState } from "react";
 import {
-  AccordionGroup,
   Background,
   BlobFx,
   Button,
@@ -96,14 +95,14 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Row fillWidth horizontal="between" vertical="end" gap="24" s={{ direction: "column", horizontal: "start" }}>
             <Heading as="h2" variant="display-strong-xs">
               Three plans, one decision
             </Heading>
             <SegmentedControl
-              selected={billing}
-              onToggle={(value) => setBilling(value as Billing)}
+              value={billing}
+              onChange={(value) => setBilling(value as Billing)}
               buttons={[
                 { value: "monthly", label: "Monthly" },
                 { value: "yearly", label: "Yearly −20%" },
@@ -113,7 +112,7 @@ export function PricingExample() {
 
           <Grid ref={tiersRef} columns="3" gap="24" s={{ columns: 1 }}>
             {tiers.map((tier, index) => (
-              <RevealFx key={tier.name} fill trigger={tiersSeen} translateY="8" delay={index * 0.1}>
+              <RevealFx key={tier.name} fill revealed={tiersSeen} translateY="8" delay={index * 100}>
                 <Column
                   fill
                   background="surface"
@@ -146,7 +145,7 @@ export function PricingExample() {
                       <Heading as="h3" variant="heading-strong-m">
                         {tier.name}
                       </Heading>
-                      {tier.highlighted && <Tag variant="brand" size="s" label="Most popular" />}
+                      {tier.highlighted && <Tag scheme="brand" size="s" label="Most popular" />}
                     </Row>
                     <Text variant="body-default-s" onBackground="neutral-weak">
                       {tier.description}
@@ -182,7 +181,7 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center" background="neutral-alpha-weak" paddingY="80" paddingX="24">
-        <Column fillWidth maxWidth="l" gap="40">
+        <Column maxWidth="l" gap="40">
           <Heading as="h2" variant="display-strong-xs">
             Every feature, side by side
           </Heading>
@@ -204,7 +203,7 @@ export function PricingExample() {
       </Column>
 
       <Column fillWidth horizontal="center">
-        <Column fillWidth maxWidth="l" radius="xl" border="neutral-alpha-weak" overflow="hidden" padding="64" center>
+        <Column maxWidth="l" radius="xl" border overflow="hidden" padding="64" center>
           <BlobFx position="absolute" top="0" left="0" fill opacity={60} seed={2} />
           <Column zIndex={1} center gap="24" maxWidth={40}>
             <Heading as="h2" variant="display-strong-s" align="center">

package/ai/examples/settings.tsx

@@ -29,7 +29,7 @@ const sections = [
 export function SettingsExample() {
   return (
     <Column as="main" fillWidth horizontal="center" paddingY="48" paddingX="24">
-      <Column fillWidth maxWidth="l" gap="40">
+      <Column maxWidth="l" gap="40">
         <Column gap="12">
           <Text variant="label-default-s" onBackground="brand-medium">
             Settings
@@ -46,7 +46,7 @@ export function SettingsExample() {
               gap="4"
               padding="16"
               background="surface"
-              border="neutral-alpha-weak"
+              border
               radius="l"
               s={{ hide: true }}
             >
@@ -66,7 +66,7 @@ export function SettingsExample() {
           }
           rightPanel={
             <Column flex={1} gap="24">
-            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+            <Column background="surface" border radius="l" padding="24" gap="24">
               <Heading as="h2" variant="heading-strong-m">
                 Profile
               </Heading>
@@ -97,7 +97,7 @@ export function SettingsExample() {
               </Row>
             </Column>
 
-            <Column background="surface" border="neutral-alpha-weak" radius="l" padding="24" gap="24">
+            <Column background="surface" border radius="l" padding="24" gap="24">
               <Heading as="h2" variant="heading-strong-m">
                 Notifications
               </Heading>
@@ -108,7 +108,7 @@ export function SettingsExample() {
                     Release notes and changelog
                   </Text>
                 </Column>
-                <Switch isChecked onToggle={() => {}} />
+                <Switch checked onToggle={() => {}} />
               </Row>
               <Line />
               <Row fillWidth horizontal="between" vertical="center">
@@ -118,9 +118,9 @@ export function SettingsExample() {
                     Tips, templates, and community highlights
                   </Text>
                 </Column>
-                <Switch isChecked={false} onToggle={() => {}} />
+                <Switch checked={false} onToggle={() => {}} />
               </Row>
-              <Checkbox label="Weekly digest" isChecked />
+              <Checkbox label="Weekly digest" checked />
             </Column>
 
             <Column background="surface" border="danger-alpha-medium" radius="l" padding="24" gap="16">

package/ai/gotchas.json

@@ -1,86 +1,160 @@
 {
   "Background.gradient.width": {
     "rule": "Quarter-percent units: 400 = 100% of container. Soft glows use width 100–200, not 500.",
-    "components": ["Background"]
+    "components": [
+      "Background"
+    ]
   },
   "Background.gradient.x": {
     "rule": "x/y are percent positions of the container (50/50 = center).",
-    "components": ["Background"]
+    "components": [
+      "Background"
+    ]
   },
   "Background.absolute": {
     "rule": "Every absolute decorative layer needs top=\"0\" left=\"0\" or it offsets by parent padding.",
-    "components": ["Background", "MatrixFx", "BlobFx"]
+    "components": [
+      "Background",
+      "MatrixFx",
+      "BlobFx"
+    ]
   },
   "Card.interactive": {
-    "rule": "Card is for interactive surfaces only (href or onClick). Static panels use Column + background=\"surface\" border=\"neutral-alpha-weak\" radius=\"l\".",
-    "components": ["Card"]
+    "rule": "Card is for interactive surfaces only (href or onClick). Static panels use Column + background=\"surface\" border radius=\"l\".",
+    "components": [
+      "Card"
+    ]
   },
   "Fade.edge": {
     "rule": "Fade is an edge overlay strip on scroll containers, not a content wrapper.",
-    "components": ["Fade"]
+    "components": [
+      "Fade"
+    ]
   },
   "RevealFx.delay": {
-    "rule": "delay is in seconds — stagger with delay={index * 0.1}, never index * 80.",
-    "components": ["RevealFx"]
+    "rule": "delay is in milliseconds — stagger with delay={index * 100}, never index * 0.1 (that was 1.8.x; 2.0 reads 0.1 as a tenth of a millisecond, i.e. no stagger).",
+    "components": [
+      "RevealFx",
+      "ShineFx"
+    ]
   },
   "RevealFx.translateY": {
     "rule": "translateY as a number is in rem. Use translateY={1} or token \"16\" (1rem); 16 means 16rem.",
-    "components": ["RevealFx"]
+    "components": [
+      "RevealFx"
+    ]
   },
   "LogoCloud.columns": {
     "rule": "LogoCloud extends Grid — always set columns and responsive overrides or logos stack in one column.",
-    "components": ["LogoCloud"]
+    "components": [
+      "LogoCloud"
+    ]
   },
   "StatusIndicator.color": {
     "rule": "StatusIndicator uses color=\"green\" | \"red\" | \"orange\" | \"gray\" etc. — not variant or semantic scheme names.",
-    "components": ["StatusIndicator"]
+    "components": [
+      "StatusIndicator"
+    ]
   },
   "Icon.names": {
-    "rule": "Icon names must come from IconName in spec.json — never invent names like more, bell, arrowRight.",
-    "components": ["Icon", "Button", "IconButton"]
+    "rule": "Icon names must come from iconNames in spec.json, which is a real union in 2.0 (an unregistered name is a type error, not a blank space). Do not guess a plausible name, and do not cast one with `as IconName` to silence the check. Brand marks are not in the set — an app registers those itself by augmenting IconLibraryOverrides.",
+    "components": [
+      "Icon",
+      "Button",
+      "IconButton"
+    ]
   },
   "Badge.duplicate": {
     "rule": "Do not pass the same text as both title prop and children — it renders twice.",
-    "components": ["Badge"]
+    "components": [
+      "Badge"
+    ]
   },
   "Tag.duplicate": {
     "rule": "Do not pass the same text as both label prop and children — it renders twice.",
-    "components": ["Tag"]
+    "components": [
+      "Tag"
+    ]
   },
   "color.tokens": {
     "rule": "Colors are semantic tokens ({scheme}-{weight}), never hex/rgb. background also accepts surface | overlay | page | transparent.",
-    "components": ["Column", "Row", "Text", "Button"]
+    "components": [
+      "Column",
+      "Row",
+      "Text",
+      "Button"
+    ]
   },
   "color.background-weak": {
     "rule": "*-background-weak is nearly the page color — invisible as accent. Use alpha tokens (brand-alpha-medium) for glows.",
-    "components": ["Background"]
+    "components": [
+      "Background"
+    ]
   },
   "layout.shorthands": {
     "rule": "Use fill not fillWidth fillHeight; center not horizontal=\"center\" vertical=\"center\"; Row/Column not Flex direction=.",
-    "components": ["Row", "Column", "Flex", "Grid"]
+    "components": [
+      "Row",
+      "Column",
+      "Flex",
+      "Grid"
+    ]
   },
   "layout.defaults": {
-    "rule": "Never write props equal to defaults: position=\"relative\", direction on Row/Column, variant=\"primary\" on Button.",
-    "components": ["Row", "Column", "Button"]
+    "rule": "Never write props equal to defaults or implied by another prop on the element: position=\"relative\", direction on Row/Column, variant=\"primary\" on Button, fillWidth beside maxWidth (maxWidth already fills the width), minWidth={0} beside fillWidth (fillWidth already sets min-width: 0).",
+    "components": [
+      "Row",
+      "Column",
+      "Grid",
+      "Button"
+    ]
+  },
+  "border.default": {
+    "rule": "Bare border (and borderTop, borderBottom, borderX, …) draws the default border. Do not write border=\"neutral-alpha-weak\" to get it; name a colour only to deviate, e.g. border=\"brand-alpha-medium\".",
+    "components": [
+      "Row",
+      "Column",
+      "Card"
+    ]
+  },
+  "zIndex.scope": {
+    "rule": "zIndex is for an isolated stacking group: an absolute decorative layer and its content sibling (zIndex={1}), or a sticky header over its pane. Never on a lone element, never a page-wide ladder of 3 / 5 / 9 — restructure the tree instead.",
+    "components": [
+      "Row",
+      "Column",
+      "Background"
+    ]
   },
   "section.gaps": {
     "rule": "Gap between page sections: 80–160 (typical 104). Inside sections: 24–40.",
-    "components": ["Column"]
+    "components": [
+      "Column"
+    ]
   },
   "heading.scale": {
     "rule": "Hero = display-strong-l/xl; section titles = display-strong-xs/s — never heading-* for section titles.",
-    "components": ["Heading"]
+    "components": [
+      "Heading"
+    ]
   },
   "animation.budget": {
     "rule": "Entry animation budget: hero + at most 1–2 key moments. Animate coherent blocks all-or-none within a sibling set.",
-    "components": ["RevealFx", "CountFx"]
+    "components": [
+      "RevealFx",
+      "CountFx"
+    ]
   },
   "CountFx.trigger": {
     "rule": "CountFx has no trigger prop — drive value from useInViewport latch instead.",
-    "components": ["CountFx"]
+    "components": [
+      "CountFx"
+    ]
   },
   "overflow.hero": {
     "rule": "overflow=\"hidden\" on full-bleed sections clips glows into hard bands — only use when parent has radius.",
-    "components": ["Column", "Background"]
+    "components": [
+      "Column",
+      "Background"
+    ]
   }
 }

package/ai/layouts.md

@@ -0,0 +1,154 @@
+# Once UI — application layouts
+
+Recipes for the shells a product sits inside, as opposed to the decoration in
+`recipes.md`. Each is the shape a working product converged on, not a sketch.
+
+Use them verbatim, then adjust. The values that look arbitrary usually are not —
+the notes say which ones matter and why.
+
+All three compile: they are also `ai/examples/app-shell.tsx`, which `pnpm
+typecheck` covers, so a renamed prop breaks the recipe rather than leaving it
+quietly wrong.
+
+## 1. App shell with a sidebar
+
+The one agents get wrong most often. A dashboard built without this scrolls the
+whole document, so the header and sidebar slide away and the nav has to be
+scrolled back to.
+
+```tsx
+<Column fill horizontal="center" flex={1}>
+  <Header />                                       {/* 56px tall */}
+  <Row fill paddingX="8">
+    <Sidebar s={{ hide: true }} maxWidth={18} fitHeight position="sticky" top="56" />
+    <Row fill horizontal="center" topRadius="l" overflow="hidden">
+      <Row
+        height="calc(100dvh - var(--static-space-56))"
+        overflowY="auto"
+        topRadius="l"
+        horizontal="center"
+        fillWidth
+        background="surface">
+        <Column maxWidth="xl" gap="m" paddingY="32" fitHeight>
+          {children}
+        </Column>
+      </Row>
+    </Row>
+  </Row>
+</Column>
+```
+
+What each part is doing:
+
+- **The pane scrolls, not the page.** `height: calc(100dvh - <header>)` plus
+  `overflowY="auto"` is what keeps the header and sidebar in place. `dvh`, not
+  `vh` — on mobile `vh` ignores the browser chrome and the pane runs off-screen.
+- **`position="sticky" top="56"`** on the sidebar, matching the header height.
+  `fitHeight` so it does not stretch and fight the sticky.
+- **`topRadius="l"` + `background="surface"`** is what makes the content read as
+  a panel sitting on the page rather than the page itself. The radius is on the
+  top only, since the bottom is off-screen.
+- **`s={{ hide: true }}`** rather than a media query. The mobile nav is a
+  separate surface, not this one reflowed.
+- **`maxWidth="xl"`** inside the pane. A dashboard is wider than a document;
+  `"m"` is for reading.
+
+## 2. Data-driven navigation
+
+```tsx
+import { NavGroup, NavItem, selectNavHref } from "@once-ui-system/core";
+
+const current = selectNavHref(pathname, nav.flatMap((i) =>
+  i.items ? i.items.map((s) => s.href) : [i.href],
+));
+
+<Column fill gap="4" paddingX="8">
+  {nav.map((item) =>
+    item.items ? (
+      <NavGroup
+        key={item.key}
+        label={item.label}
+        icon={item.icon}
+        defaultOpen={item.items.some((s) => s.href === current)}>
+        {item.items.map((sub) => (
+          <NavItem
+            key={sub.href}
+            href={sub.href}
+            label={sub.label}
+            badge={sub.badge}
+            selected={sub.href === current}
+          />
+        ))}
+      </NavGroup>
+    ) : (
+      <NavItem
+        key={item.href}
+        href={item.href}
+        icon={item.icon}
+        label={item.label}
+        selected={item.href === current}
+      />
+    ),
+  )}
+</Column>
+```
+
+- **`selectNavHref` over `===` or `startsWith`.** An equality check leaves a
+  nested route (`/settings/billing/invoices/42`) with nothing highlighted; a
+  prefix check lights the parent up alongside its child. It returns the longest
+  href that matches, which is the right one.
+- **Compute `current` once** for the whole tree, not per item — a child needs to
+  know about its siblings to know it is the deepest match.
+- **`defaultOpen` from the match**, so the group holding the current page is open
+  on arrival.
+- Child items take **no icon**. The rail inside `NavGroup` carries the hierarchy;
+  a second column of icons competes with it.
+
+## 3. Editor shell
+
+Two panes and a timeline — the shape of a video editor, a page builder, a
+diff view.
+
+```tsx
+<Column fill>
+  <SplitView
+    fill
+    leftPanel={<Column fill overflowY="auto">{/* layers, blocks, files */}</Column>}
+    rightPanel={<Column fill overflowY="auto">{/* canvas, preview */}</Column>}
+    defaultSplit={0.28}
+    minSplit={0.2}
+    maxSplit={0.6}
+    collapseBelow="s"
+    labels={{ left: "Layers", right: "Canvas" }}
+  />
+  <Scrubber
+    duration={duration}
+    value={time}
+    onChange={setTime}
+    tracks={tracks}
+    onGestureStart={pause}
+  />
+</Column>
+```
+
+- **`overflowY="auto"` on each panel, not on the SplitView.** The divider needs
+  the container to stay put while the panes scroll independently.
+- **`collapseBelow` + `labels`.** Below the breakpoint the split becomes tabs, and
+  `labels` is what they say. Without it the tabs are unlabelled.
+- **`onGestureStart` pauses playback.** Scrubbing while playing fights the
+  playhead — the drag sets a time, playback immediately moves it.
+- **The timeline is a sibling of the split, not inside it.** It spans both panes,
+  and putting it in one makes the divider drag it.
+
+## Anti-patterns
+
+- A dashboard with no scrolling pane — the whole document scrolls and the nav
+  leaves with it.
+- `100vh` in an app shell. Use `100dvh`; `vh` is wrong on mobile the moment the
+  browser chrome shows or hides.
+- A sticky sidebar without `fitHeight` — it stretches to the row and the sticky
+  never engages.
+- `pathname === href` or `startsWith` for nav selection. Use `selectNavHref`.
+- Icons on both a NavGroup and its children — two columns of icons, no hierarchy.
+- `overflow` on the SplitView instead of on its panels — the divider stops
+  tracking the pointer.

package/ai/manifest.json

@@ -1,12 +1,13 @@
 {
- "version": "1.8.5",
- "generated": "2026-09-16",
+ "version": "2.0.0-alpha.1",
+ "generated": "2026-09-17",
  "files": {
   "spec": "spec.json",
   "catalog": "catalog.json",
   "rules": "rules.compact.md",
   "rulesFull": "rules.md",
   "recipes": "recipes.md",
+  "layouts": "layouts.md",
   "gotchas": "gotchas.json",
   "tasks": "tasks/index.json",
   "examples": "examples/",