@justanarthur/modo-ui 0.6.0-canary.7 → 0.6.0-canary.8

package/DESIGN.md

@@ -67,6 +67,8 @@ colors:
   image-edge-dark: "rgb(255 255 255 / 0.1)"
   progress-track: "color-mix(in oklab, oklch(0.205 0 0) 10%, transparent)"
   progress-track-dark: "color-mix(in oklab, oklch(0.97 0 0) 10%, transparent)"
+  well: "oklch(0.967 0.001 286.375)"
+  well-dark: "oklch(0 0 0 / 0.25)"
   surface-1: "oklch(0.985 0 0)"
   surface-2: "oklch(0.991 0 0)"
   surface-3: "oklch(1 0 0)"
@@ -284,7 +286,7 @@ components:
     padding: 24px
     width: 400px
   tabs-list:
-    backgroundColor: "{colors.muted}"
+    backgroundColor: "{colors.well}"
     rounded: "{rounded.xl}"
     height: "{spacing.control}"
     padding: 4px
@@ -357,7 +359,11 @@ Two text colors, a greyscale ground, one blue.
   button (until `--primary-foreground` is re-pointed) and the tooltip (`text-background`).
 - **Surfaces (`bg-surface-1` … `bg-surface-8`)** — the elevation ladder (see Elevation & Depth). Prefer a
   surface level over `card`/`background` for anything that floats or nests.
-- **Muted (`bg-muted`)** — a recessed track: the segmented tabs' well, a sunken field at rest.
+- **Muted (`bg-muted`)** — a sunken fill: a field's hover wash, a queued row. In dark it is surface 2, so
+  it never carries a track: it would vanish on a card or the inset.
+- **Well (`bg-well`)** — the recessed track under a segmented control's indicator (the tabs list). Light is
+  muted; dark is black at 25%, which darkens whatever it sits on, so the track reads on the page, a card
+  and the inset alike.
 - **Accent (`bg-accent`)** — the secondary button and the switch's off track. `selected` is a firmer
   grey for persistent selection fills.
 - **Hover / Active (`bg-hover`, `bg-active`)** — translucent overlays (black 4% / 7% in light, white 6% /

package/README.md

@@ -158,7 +158,8 @@ positioning) are ported.
 | `lib/springs.ts` | `lib/springs.ts` | `goo` tier added (the morph engine's goo: 250ms to land, bounce 0.15, a 200ms spring back); `exitFallbackMs` also reads a spring exit's `visualDuration` |
 | `lib/font-weight.ts` | — | not ported: its `fontWeights` became the `--weight-*` tokens in `tokens/typography.css` (the `weight-*` utilities) |
 | `lib/popup.ts` | `lib/popup.ts` | `popupMotionClass` dropped (unused since the popups morph) |
-| `lib/shape-context.tsx` | `lib/shape-context.tsx` | `"use client"` dropped |
+| `lib/shape-context.tsx` | `lib/shape-context.tsx` | `"use client"` dropped; `--shape-input-radius` is published through `claimShapeRadius` and given back on unmount |
+| — (new) | `lib/shape-radius.ts` | Local addition: the stack of `ShapeProvider` claims on `--shape-input-radius` (`<html>`), so an unmounting provider restores the one below it or the page's own value; plain data, tested without a DOM |
 | `lib/size-context.tsx` | `lib/size-context.tsx` | `"use client"` dropped; `SizeProvider` moved to `primitives/sizes` (the documented item), with `SizeContext` exported for it; `sizeMap`, `typeScale` and their types moved to `size-scale.ts` and re-exported |
 | `lib/size-context.tsx` (`sizeMap`, `typeScale`) | `lib/size-scale.ts` | The ladder's plain data, split out so server code can read it (no JSX, hooks or contexts); `sizeMap` text classes → `text-body` / `text-body-compact` |
 | `lib/icon-context.tsx` | `lib/icon-context.tsx` | `"use client"` dropped; `size`/`strokeWidth` widened to `number \| string` for lucide v1 + React 18 types |

package/components/AI/input-message/examples.mdx

@@ -2,7 +2,9 @@ import InputMessage from './index'
 import Button from '../../button'
 import { ChevronDown, Plus } from 'lucide-react'
 
-# Basic
+# Basics
+
+## Basic
 
 No props at all: the composer keeps its own draft, grows as you type and
 clears itself on Enter.
@@ -11,7 +13,31 @@ clears itself on Enter.
   <InputMessage />
 </div>
 
-# Suggestions
+## Send Handler
+
+`onSend` receives the trimmed text and the attached files; an uncontrolled
+composer clears its own draft afterwards. The handler here is an empty
+arrow — in an app it is where the message joins the transcript.
+
+<div className="w-full max-w-xl">
+  <InputMessage
+    onSend={() => {}}
+    placeholder="Press Enter to send. Shift+Enter for newline."
+  />
+</div>
+
+## Disabled
+
+Dims the panel to 50% and drops pointer events — textarea, send button and
+drag-and-drop all go inert.
+
+<div className="w-full max-w-xl">
+  <InputMessage defaultValue="This composer is disabled" disabled />
+</div>
+
+# Content
+
+## Suggestions
 
 The ghost placeholder renders with a Tab keycap — Tab fills it into the
 composer. ArrowDown/ArrowUp walk the list below (focus stays in the
@@ -30,7 +56,7 @@ shows a ↓ hint until a row is highlighted. Typing collapses the list.
   />
 </div>
 
-# Attachments
+## Attachments
 
 `defaultFiles` seeds the composer and turns attachment behavior on: drop a
 PNG, JPEG or PDF anywhere on the panel, or use the render-fn slot's
@@ -52,7 +78,7 @@ for its × button.
   />
 </div>
 
-# Queued messages
+## Queued messages
 
 `defaultStatus="streaming"` plus `defaultQueue` runs the composer as if a
 response were in flight: the send button is a Queue action, so a typed
@@ -71,7 +97,9 @@ response, and that streaming→idle edge dispatches the row at the top.
   />
 </div>
 
-# Left Slot Only
+# Slots
+
+## Left Slot Only
 
 `leftSlot` takes the bottom-left action area — an attach button, a model
 switcher, a mode toggle.
@@ -86,7 +114,7 @@ switcher, a mode toggle.
   />
 </div>
 
-# Right Slot Only
+## Right Slot Only
 
 `rightSlot` sits in the bottom-right, just before the built-in send
 button.
@@ -100,25 +128,3 @@ button.
     }
   />
 </div>
-
-# Send Handler
-
-`onSend` receives the trimmed text and the attached files; an uncontrolled
-composer clears its own draft afterwards. The handler here is an empty
-arrow — in an app it is where the message joins the transcript.
-
-<div className="w-full max-w-xl">
-  <InputMessage
-    onSend={() => {}}
-    placeholder="Press Enter to send. Shift+Enter for newline."
-  />
-</div>
-
-# Disabled
-
-Dims the panel to 50% and drops pointer events — textarea, send button and
-drag-and-drop all go inert.
-
-<div className="w-full max-w-xl">
-  <InputMessage defaultValue="This composer is disabled" disabled />
-</div>

package/components/AI/input-message/index.tsx

@@ -924,6 +924,8 @@ const InputMessage = forwardRef<HTMLDivElement, InputMessageProps>(
         if (!clickToFocus || disabled) return
         const target = e.target as HTMLElement
         if (target === textareaRef.current) return
+        // A press in a popup portalled out of the box reaches it through the React tree only.
+        if (!e.currentTarget.contains(target)) return
         if (target.closest('button, a, input, select, textarea, [contenteditable], [role="button"], [data-im-queue]')) {
           return
         }

package/components/accordion/examples.mdx

@@ -2,7 +2,9 @@ import Accordion from './index'
 import Button from '../button'
 import { ArrowRight } from 'lucide-react'
 
-# Standalone
+# Basics
+
+## Standalone
 
 A single collapsible item with its own hover state.
 
@@ -15,7 +17,7 @@ A single collapsible item with its own hover state.
   </Accordion.Item>
 </Accordion>
 
-# Single Expand
+## Single Expand
 
 Multiple items with fluid hover — only one can be expanded at a time.
 
@@ -50,7 +52,7 @@ Multiple items with fluid hover — only one can be expanded at a time.
   </Accordion.Item>
 </Accordion.Group>
 
-# Multi Expand
+## Multi Expand
 
 Multiple items with fluid hover — several can be expanded at once.
 
@@ -75,34 +77,7 @@ Multiple items with fluid hover — several can be expanded at once.
   </Accordion.Item>
 </Accordion.Group>
 
-# Row highlight
-
-With `highlight="trigger"` an expanded item holds no tint — the fill
-scopes to the row and waits for hover. Suits dense panels, where a block
-per open item reads as a second layer.
-
-<Accordion.Group type="single" collapsible defaultValue="item-1" highlight="trigger">
-  <Accordion.Item value="item-1" index={0}>
-    <Accordion.Trigger>Expanded, but not tinted</Accordion.Trigger>
-    <Accordion.Content>
-      The panel reads as part of the page rather than a filled block.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-2" index={1}>
-    <Accordion.Trigger>Hover any row</Accordion.Trigger>
-    <Accordion.Content>
-      The fill follows your cursor instead of marking a state.
-    </Accordion.Content>
-  </Accordion.Item>
-  <Accordion.Item value="item-3" index={2}>
-    <Accordion.Trigger>Compare with the sections above</Accordion.Trigger>
-    <Accordion.Content>
-      Those hold a block across the row and its panel while open.
-    </Accordion.Content>
-  </Accordion.Item>
-</Accordion.Group>
-
-# Morph
+## Morph
 
 Each panel drips out of the row where it was pressed (its middle, from the keyboard) and widens into the item, its content revealed by the same shape; closing folds it back into the row. The rows below ride its bottom edge.
 
@@ -130,7 +105,36 @@ Each panel drips out of the row where it was pressed (its middle, from the keybo
   </Accordion.Item>
 </Accordion.Group>
 
-# Without the goo
+# Variants
+
+## Row highlight
+
+With `highlight="trigger"` an expanded item holds no tint — the fill
+scopes to the row and waits for hover. Suits dense panels, where a block
+per open item reads as a second layer.
+
+<Accordion.Group type="single" collapsible defaultValue="item-1" highlight="trigger">
+  <Accordion.Item value="item-1" index={0}>
+    <Accordion.Trigger>Expanded, but not tinted</Accordion.Trigger>
+    <Accordion.Content>
+      The panel reads as part of the page rather than a filled block.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-2" index={1}>
+    <Accordion.Trigger>Hover any row</Accordion.Trigger>
+    <Accordion.Content>
+      The fill follows your cursor instead of marking a state.
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="item-3" index={2}>
+    <Accordion.Trigger>Compare with the sections above</Accordion.Trigger>
+    <Accordion.Content>
+      Those hold a block across the row and its panel while open.
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion.Group>
+
+## Without the goo
 
 `effect="morph"` grows the same shape with no liquid neck to its row; `tier="moderate"` runs the goo on the quicker, critically damped spring.
 
@@ -149,7 +153,7 @@ Each panel drips out of the row where it was pressed (its middle, from the keybo
   </Accordion.Item>
 </Accordion.Group>
 
-# Without the chevron
+## Without the chevron
 
 `icon={false}` drops the glyph at the row's end, for a row whose own content says it opens. A component passed as `icon` replaces the chevron and turns a quarter turn on open, so give it a right-pointing glyph.
 
@@ -174,7 +178,9 @@ Each panel drips out of the row where it was pressed (its middle, from the keybo
   </Accordion.Item>
 </Accordion.Group>
 
-# Rich headers
+# Composition
+
+## Rich headers
 
 By default the trigger renders its label twice: a hidden semibold copy reserves the width, so the label gets heavier on open without moving. A header made of components would be duplicated in the DOM, so `weightShift={false}` renders it once and leaves the weight to its content. `contentClassName` is merged over the inner row's inset, padding and muted body text: the first panel below turns its text to full strength, the second takes a wider inset and the caption size. The label lives inside the trigger `<button>`, so build it from phrasing content (spans, as below), never a `div`-based header. Text that fixes its own colour stays that colour when the item opens: the chevron, the highlight and the open tint are what signal the state.
 
@@ -203,7 +209,7 @@ By default the trigger renders its label twice: a hidden semibold copy reserves
   </Accordion.Item>
 </Accordion.Group>
 
-# Your own trigger
+## Your own trigger
 
 `asChild` (or `render`) makes your element the trigger, so a Button, a link-styled control or anything else can open the item. It is rendered as it is: the row's label copy, the chevron and the row padding are not added, so the element brings its own content and look. Base UI still wires `aria-expanded`, `aria-controls`, `data-panel-open` and the keys onto it, so style the open state with `data-[panel-open]`.
 

package/components/badge/examples.mdx

@@ -1,7 +1,9 @@
 import Badge from './index'
 import ChangeDemo from './change-demo'
 
-# Solid
+# Variants
+
+## Solid
 
 The default variant: a tinted background in the badge's color.
 
@@ -13,7 +15,7 @@ The default variant: a tinted background in the badge's color.
   <Badge color="rose">Poetry</Badge>
 </div>
 
-# Dot
+## Dot
 
 `variant="dot"` keeps a neutral bordered badge and shows the color as an
 indicator dot.
@@ -26,7 +28,7 @@ indicator dot.
   <Badge variant="dot" color="rose">Poetry</Badge>
 </div>
 
-# Outline
+## Outline
 
 `variant="outline"` is the dot badge's neutral frame without the dot: a label
 that carries no status.
@@ -37,22 +39,7 @@ that carries no status.
   <Badge variant="outline" size="compact">Archived</Badge>
 </div>
 
-# Status mapping
-
-Hosts with a shadcn-style badge map its variants onto a hue: default and
-secondary → `gray`, destructive → `red`, success → `green`, outline →
-`variant="outline"`. The tint stays a wash with foreground text, never a solid
-fill.
-
-<div className="flex flex-wrap items-center gap-2">
-  <Badge color="gray">Default</Badge>
-  <Badge color="gray">Secondary</Badge>
-  <Badge color="red">Destructive</Badge>
-  <Badge color="green">Success</Badge>
-  <Badge variant="outline">Outline</Badge>
-</div>
-
-# Colors
+## Colors
 
 All seventeen palette colors, solid and dot.
 
@@ -73,18 +60,24 @@ All seventeen palette colors, solid and dot.
   </div>
 </div>
 
-# Compact
+# Usage
 
-`size="compact"` steps the badge down the size ladder (20px tall, 11px
-text) for dense rows and table cells.
+## Status mapping
+
+Hosts with a shadcn-style badge map its variants onto a hue: default and
+secondary → `gray`, destructive → `red`, success → `green`, outline →
+`variant="outline"`. The tint stays a wash with foreground text, never a solid
+fill.
 
 <div className="flex flex-wrap items-center gap-2">
-  <Badge size="compact" color="blue">History</Badge>
-  <Badge size="compact" variant="dot" color="green">Philosophy</Badge>
-  <Badge size="compact">Draft</Badge>
+  <Badge color="gray">Default</Badge>
+  <Badge color="gray">Secondary</Badge>
+  <Badge color="red">Destructive</Badge>
+  <Badge color="green">Success</Badge>
+  <Badge variant="outline">Outline</Badge>
 </div>
 
-# Changes
+## Changes
 
 Press a button. A new label springs the badge to its new width while the
 text crossfades, a new color fades in, and the dot slides in or out with
@@ -118,3 +111,14 @@ the variant. `ChangeDemo` is a docs stage: a Badge that steps through its
     ]}
   />
 </div>
+
+## Compact
+
+`size="compact"` steps the badge down the size ladder (20px tall, 11px
+text) for dense rows and table cells.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Badge size="compact" color="blue">History</Badge>
+  <Badge size="compact" variant="dot" color="green">Philosophy</Badge>
+  <Badge size="compact">Draft</Badge>
+</div>

package/components/button/examples.mdx

@@ -22,7 +22,7 @@ to its container.
   </div>
 </div>
 
-# Destructive and success
+## Destructive and success
 
 A status as an action: its hue as the label on a wash of itself, deepening on
 hover and press. Never a solid fill, so the view keeps one primary.
@@ -34,7 +34,7 @@ hover and press. Never a solid fill, so the view keeps one primary.
   <Button variant="success" size="compact">Accept</Button>
 </div>
 
-# Outline and link
+## Outline and link
 
 `outline` is `tertiary` under its shadcn name. `link` is text on the control
 height: its underline fades in on hover, so the label never moves, and it
@@ -46,20 +46,36 @@ lines up with the buttons beside it.
   <Button variant="link" trailingIcon={ArrowRight}>View all</Button>
 </div>
 
-# With Icons
+# Sizes
 
-`leadingIcon` and `trailingIcon` take an icon component; it sits 4px
-closer to its edge than the label would.
+The size ladder: `default` (36px) and `compact` (28px), plus square
+icon-only steps. There is no third height: `xs` and `sm` resolve to `compact`. Icon-only buttons take the icon as their child and need
+an `aria-label`.
 
-<div className="flex flex-wrap items-center gap-2">
-  <Button leadingIcon={Plus}>Create</Button>
-  <Button variant="secondary" trailingIcon={ArrowRight}>Next</Button>
-  <Button variant="tertiary" leadingIcon={Search} trailingIcon={ArrowRight}>
-    Search
-  </Button>
+<div className="flex flex-col gap-3">
+  <div className="flex flex-wrap items-center gap-2">
+    <Button leadingIcon={Plus}>Default</Button>
+    <Button variant="secondary" size="icon" aria-label="Add">
+      <Plus />
+    </Button>
+    <Button variant="ghost" size="icon" aria-label="Settings">
+      <Settings />
+    </Button>
+  </div>
+  <div className="flex flex-wrap items-center gap-2">
+    <Button size="compact" leadingIcon={Plus}>Compact</Button>
+    <Button variant="secondary" size="icon-compact" aria-label="Add">
+      <Plus />
+    </Button>
+    <Button variant="ghost" size="icon-compact" aria-label="Settings">
+      <Settings />
+    </Button>
+  </div>
 </div>
 
-# Loading & Disabled
+# States
+
+## Loading & Disabled
 
 `loading` folds the surface into a circle around a spinner and disables
 the button; the hidden label keeps its width.
@@ -70,7 +86,7 @@ the button; the hidden label keeps its width.
   <Button disabled>Disabled</Button>
 </div>
 
-# Loading morph
+## Loading morph
 
 Press one. The surface folds into a circle around the spinner while the
 button keeps its box, so its neighbors never move, and springs back when
@@ -91,34 +107,7 @@ Button whose `loading` holds for two seconds after a press.
   <LoadingDemo className="w-full">Create account</LoadingDemo>
 </div>
 
-# Sizes
-
-The size ladder: `default` (36px) and `compact` (28px), plus square
-icon-only steps. There is no third height: `xs` and `sm` resolve to `compact`. Icon-only buttons take the icon as their child and need
-an `aria-label`.
-
-<div className="flex flex-col gap-3">
-  <div className="flex flex-wrap items-center gap-2">
-    <Button leadingIcon={Plus}>Default</Button>
-    <Button variant="secondary" size="icon" aria-label="Add">
-      <Plus />
-    </Button>
-    <Button variant="ghost" size="icon" aria-label="Settings">
-      <Settings />
-    </Button>
-  </div>
-  <div className="flex flex-wrap items-center gap-2">
-    <Button size="compact" leadingIcon={Plus}>Compact</Button>
-    <Button variant="secondary" size="icon-compact" aria-label="Add">
-      <Plus />
-    </Button>
-    <Button variant="ghost" size="icon-compact" aria-label="Settings">
-      <Settings />
-    </Button>
-  </div>
-</div>
-
-# Active
+## Active
 
 `active` forces the pressed visual — for a button whose dropdown or
 popover is currently open.
@@ -130,7 +119,22 @@ popover is currently open.
   <Button variant="ghost" active>Ghost</Button>
 </div>
 
-# As child
+# Composition
+
+## With Icons
+
+`leadingIcon` and `trailingIcon` take an icon component; it sits 4px
+closer to its edge than the label would.
+
+<div className="flex flex-wrap items-center gap-2">
+  <Button leadingIcon={Plus}>Create</Button>
+  <Button variant="secondary" trailingIcon={ArrowRight}>Next</Button>
+  <Button variant="tertiary" leadingIcon={Search} trailingIcon={ArrowRight}>
+    Search
+  </Button>
+</div>
+
+## As child
 
 `asChild` merges the button's styling onto its single child element —
 here a link — instead of rendering a `<button>`.
@@ -141,7 +145,7 @@ here a link — instead of rendering a `<button>`.
   </a>
 </Button>
 
-# Surface classes
+## Surface classes
 
 For an element you can't render through `asChild` (a router's link that
 builds its own anchor, markup from a server template), `buttonVariants`