@sableui/react 0.18.0 → 0.19.0

package/dist/components/workspace/workspace.js

@@ -7,6 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Workspace({
   toolbar,
   statusBar,
+  bottomNav,
   density = "compact",
   skipLinkLabel = "Skip to canvas",
   className,
@@ -24,7 +25,7 @@ function Workspace({
       {
         "data-density": density,
         className: cn(
-          "grid h-dvh grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden bg-canvas text-canvas-foreground",
+          "flex h-dvh flex-col overflow-hidden bg-canvas text-canvas-foreground",
           className
         ),
         ...props,
@@ -38,8 +39,16 @@ function Workspace({
             }
           ),
           toolbar,
-          /* @__PURE__ */ jsx("div", { className: "grid min-h-0 grid-cols-1", children }),
-          statusBar
+          /* @__PURE__ */ jsx("div", { "data-workspace-body": "", className: "grid min-h-0 flex-1 grid-cols-1 grid-rows-[minmax(0,1fr)]", children }),
+          statusBar,
+          bottomNav ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-workspace-bottom-nav": "",
+              className: "h-[calc(var(--nav-height,56px)+env(safe-area-inset-bottom,0px))] shrink-0 lg:hidden",
+              children: bottomNav
+            }
+          ) : null
         ]
       }
     ) })
@@ -62,6 +71,7 @@ function WorkspaceBar({ className, children, ...props }) {
   return /* @__PURE__ */ jsx(
     "header",
     {
+      "data-workspace-bar": "",
       className: cn(
         "flex h-(--chrome-bar-height) shrink-0 items-center gap-1 border-b border-hairline bg-panel px-2",
         className

package/dist/components/workspace/workspace.meta.js

@@ -12,7 +12,18 @@ var workspaceMeta = {
     "chrome",
     "panels",
     "density",
-    "viewport"
+    "viewport",
+    "issue tracker",
+    "tracker",
+    "inspector",
+    "reading view",
+    "mobile",
+    "responsive",
+    "bottom nav",
+    "media query",
+    "breakpoint",
+    "top bar",
+    "topbar"
   ],
   usage: {
     description: 'Use Workspace as the outer frame for a tool \u2014 an editor, a console, a canvas app. It owns the viewport, scopes the compact control density, and guarantees a skip link plus a main landmark on the canvas. Reach for AppShell instead for page-register products: it is built around a scrolling document, where a workspace is built around a fixed one. Workspace fills the viewport (h-dvh) by design; to embed one in a page (a docs preview, a modal-sized demo), wrap it in a bounded container and pass className="h-full".',
@@ -29,6 +40,18 @@ var workspaceMeta = {
         guidance: "do",
         description: "Keep the density scope at compact unless you have a specific reason; the workspace register's measured control ladder is what makes tool chrome read as tool chrome."
       },
+      {
+        guidance: "do",
+        description: "Put a WorkspaceBar inside a column when the bar belongs to that column only. An issue tracker's bar (breadcrumb, view tabs, filters) sits above the list, while the sidebar and the inspector beside it run the full height: put the WorkspaceBar first inside the WorkspaceCanvas, not in the `toolbar` slot, which spans every panel. Don't hand-build a fixed-height header for it."
+      },
+      {
+        guidance: "do",
+        description: 'Wrap a reading view inside the workspace (a project overview, an update, a doc, release notes) in <Density value="comfortable">. The compact scope maps body text to the 11\u201312px UI tiers, which is right for chrome and too small for paragraphs; the comfortable scope gives prose its page size again while the chrome around it stays compact.'
+      },
+      {
+        guidance: "do",
+        description: 'Plan the phone layout with the shell rather than around it: pass a BottomNav to `bottomNav`, and give docked Panels `narrow="sheet"` (an inspector, a navigation rail) or `narrow="hidden"`. Don\'t measure the viewport with a resize listener, render the inspector twice, or subtract the nav\'s height from 100dvh.'
+      },
       {
         guidance: "dont",
         description: "Nest a Region or Page inside it to set a width. Region caps are a page-register idea; a workspace is edge-to-edge and its panels are fixed-width chrome outside the content grid."
@@ -66,6 +89,11 @@ var workspaceMeta = {
         name: "StatusBar",
         required: false,
         description: "Bottom chrome for ambient document facts."
+      },
+      {
+        name: "BottomNav",
+        required: false,
+        description: "Phone navigation in the `bottomNav` slot. Its row is reserved below lg and gone above it, so the body ends where the nav begins."
       }
     ]
   },
@@ -80,6 +108,11 @@ var workspaceMeta = {
       description: "Top chrome, normally a WorkspaceBar."
     },
     { name: "statusBar", type: "ReactNode", description: "Bottom chrome, normally a StatusBar." },
+    {
+      name: "bottomNav",
+      type: "ReactNode",
+      description: "Phone navigation, normally a BottomNav. Below lg (BottomNav's own breakpoint) the shell reserves the nav's height as its last row, so the body and the status bar end above the nav instead of under it; above lg the row is gone. Every slot is optional: the body is the shell's one growing row whichever of toolbar, statusBar and bottomNav are present."
+    },
     {
       name: "density",
       type: '"compact" | "comfortable"',
@@ -103,6 +136,16 @@ var workspaceMeta = {
       name: "WorkspaceCanvas",
       type: "ComponentProps<'main'>",
       description: "The work surface: renders main#main-content, fills the body, clips its overflow."
+    },
+    {
+      name: "useMediaQuery",
+      type: "(query: string, options?: { serverValue?: boolean }) => boolean",
+      description: "True while a media query matches, read through useSyncExternalStore: no resize listener, no setState in an effect, no hydration mismatch (the server reports serverValue, default false). Use it to branch structure a class cannot express; style-only changes stay as lg: classes."
+    },
+    {
+      name: "useBelowBreakpoint",
+      type: '(breakpoint?: "sm" | "md" | "lg" | "xl" | "2xl", options?: { serverValue?: boolean }) => boolean',
+      description: "True below a named breakpoint (default lg), flipping at the width where that breakpoint's classes start to apply (Tailwind's sm 40 / md 48 / lg 64 / xl 80 / 2xl 96rem). Panel's `narrow` uses it; reach for it instead of a hand-rolled window.innerWidth check."
     }
   ],
   a11y: [
@@ -164,6 +207,71 @@ var workspaceMeta = {
       <div className="p-3 text-ui-num text-muted-foreground">log output\u2026</div>
     </WorkspaceCanvas>
   </PanelGroup>
+</Workspace>`
+    },
+    {
+      label: "Issue tracker: column bar, docked inspector, phone sheet",
+      code: `function Tracker() {
+  const [selected, setSelected] = useState<string | null>("AES-104")
+  return (
+    <Workspace
+      bottomNav={
+        <BottomNav>
+          <BottomNavItem showLabel label="Issues" icon={<Icon name="list" />} active />
+          <BottomNavItem showLabel label="Inbox" icon={<Icon name="inbox" />} />
+        </BottomNav>
+      }
+      statusBar={<StatusBar><span>12 issues</span></StatusBar>}
+    >
+      <PanelGroup>
+        <Panel label="Navigation" width={220} narrow="hidden">
+          <PanelSection title="Workspace">
+            <PropertyRow label="Team"><Input defaultValue="Studio" /></PropertyRow>
+          </PanelSection>
+        </Panel>
+        <WorkspaceCanvas className="flex flex-col">
+          <WorkspaceBar>
+            <Breadcrumbs>
+              <BreadcrumbItem><BreadcrumbLink href="#">Studio</BreadcrumbLink></BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem><BreadcrumbPage>Digital flagship</BreadcrumbPage></BreadcrumbItem>
+            </Breadcrumbs>
+          </WorkspaceBar>
+          <div className="min-h-0 flex-1 overflow-y-auto scrollbar-quiet">
+            <Button size="xs" variant="ghost" onClick={() => setSelected("AES-104")}>AES-104 Refine product page</Button>
+          </div>
+        </WorkspaceCanvas>
+        <Panel
+          label="Issue details"
+          width={320}
+          narrow="sheet"
+          open={selected !== null}
+          onOpenChange={(open) => !open && setSelected(null)}
+        >
+          <PanelSection title={selected ?? ""}>
+            <PropertyRow label="Status"><Input defaultValue="In progress" /></PropertyRow>
+          </PanelSection>
+        </Panel>
+      </PanelGroup>
+    </Workspace>
+  )
+}`
+    },
+    {
+      label: "Reading view inside a workspace",
+      code: `<Workspace>
+  <PanelGroup>
+    <WorkspaceCanvas className="overflow-y-auto scrollbar-quiet">
+      <Density value="comfortable">
+        <article className="max-w-prose p-6">
+          <h2 className="text-heading-3">Project overview</h2>
+          <p className="mt-3 text-body-md text-muted-foreground">
+            Paragraphs keep their page size here, while the chrome around the canvas stays compact.
+          </p>
+        </article>
+      </Density>
+    </WorkspaceCanvas>
+  </PanelGroup>
 </Workspace>`
     },
     {

package/dist/file-hashes.json

@@ -1,5 +1,5 @@
 {
-	"dist/_contract-CDa9-NdB.d.ts": "062fb08b461ea845",
+	"dist/_contract-DlklV0Im.d.ts": "62902c1191994acb",
 	"dist/activity-DT8VK9fx.d.ts": "528ef87bbc766d76",
 	"dist/adapters/github.d.ts": "7e30b303e1daa370",
 	"dist/adapters/github.js": "3a2c4593e2ad1e18",
@@ -29,7 +29,7 @@
 	"dist/blocks/goal-progress-block.meta.js": "3e5b376bf58bdb4b",
 	"dist/blocks/hero-block.js": "ac74e80d4d7d2ad9",
 	"dist/blocks/hero-block.meta.js": "2dd2e5be2472a563",
-	"dist/blocks/index.d.ts": "5f4a38dda1460f56",
+	"dist/blocks/index.d.ts": "6ce6abc6734dbd72",
 	"dist/blocks/index.js": "690417c222dc4d2a",
 	"dist/blocks/invite-team-block.js": "be4df15518252535",
 	"dist/blocks/invite-team-block.meta.js": "fd57b632f0f32276",
@@ -112,9 +112,9 @@
 	"dist/components/attachment/attachment.meta.js": "bd6839318c806693",
 	"dist/components/attachment/attachment.variants.js": "6435e477e7fab33e",
 	"dist/components/attachment/index.js": "133c4711cb724f18",
-	"dist/components/avatar/avatar.js": "4d6e3af8d615054f",
-	"dist/components/avatar/avatar.meta.js": "7f60515562e66607",
-	"dist/components/avatar/avatar.variants.js": "55007c724a59bf1f",
+	"dist/components/avatar/avatar.js": "07b29a9c1a0c83a8",
+	"dist/components/avatar/avatar.meta.js": "22eee8ca57dbc0fd",
+	"dist/components/avatar/avatar.variants.js": "97468d4f1b308d70",
 	"dist/components/avatar/index.js": "12b7af50f0f54b67",
 	"dist/components/badge/badge.js": "d4244f501b1ed90f",
 	"dist/components/badge/badge.meta.js": "4cccd768874c1ad8",
@@ -178,8 +178,8 @@
 	"dist/components/code-block/code-block.js": "b66aed579438bca7",
 	"dist/components/code-block/code-block.meta.js": "d7e869100f45e650",
 	"dist/components/code-block/index.js": "e40982950359204b",
-	"dist/components/collapsible/collapsible.js": "fecb96bdc056e7bb",
-	"dist/components/collapsible/collapsible.meta.js": "5d677ef03ee2f7e9",
+	"dist/components/collapsible/collapsible.js": "d7c1dc37baa02104",
+	"dist/components/collapsible/collapsible.meta.js": "dae49ec2983fb629",
 	"dist/components/collapsible/index.js": "072c3578300f205e",
 	"dist/components/color-field/color-field.js": "05aa083444586cfb",
 	"dist/components/color-field/color-field.meta.js": "a5815df99fdca4a2",
@@ -201,11 +201,11 @@
 	"dist/components/context-menu/context-menu.js": "9a5f899f1fd5aa84",
 	"dist/components/context-menu/context-menu.meta.js": "6915409a31be6ef0",
 	"dist/components/context-menu/index.js": "b4a609ee13e4bdd5",
-	"dist/components/data-table/data-table.js": "be6e1011624d580b",
-	"dist/components/data-table/data-table.meta.js": "e8df5d8910630c0a",
+	"dist/components/data-table/data-table.js": "11d62363b90271a9",
+	"dist/components/data-table/data-table.meta.js": "cdca28cc23d28c45",
 	"dist/components/data-table/index.js": "181835d5e3b6c366",
-	"dist/components/date-picker/date-picker.js": "7dd1d41202bede97",
-	"dist/components/date-picker/date-picker.meta.js": "fbd9d0e31affe527",
+	"dist/components/date-picker/date-picker.js": "974fb092a642138d",
+	"dist/components/date-picker/date-picker.meta.js": "bb48e03dbf11b074",
 	"dist/components/date-picker/index.js": "44e1227972891934",
 	"dist/components/date-tile/date-tile.js": "7458bf733bc64ab2",
 	"dist/components/date-tile/date-tile.meta.js": "0bc0081c8cb73535",
@@ -286,8 +286,8 @@
 	"dist/components/media-tile/media-tile.meta.js": "a1323b8f1f945e58",
 	"dist/components/media-tile/media-tile.variants.js": "e22c08004b4a55ad",
 	"dist/components/menu/index.js": "c368589e92d3a189",
-	"dist/components/menu/menu.js": "d31a3cd0d737447d",
-	"dist/components/menu/menu.meta.js": "533a215b9ff28d85",
+	"dist/components/menu/menu.js": "162648914d1182eb",
+	"dist/components/menu/menu.meta.js": "3587ac2db429fe37",
 	"dist/components/menubar/index.js": "4e0c7717fa9f2a4d",
 	"dist/components/menubar/menubar.js": "7177568e95c22fd1",
 	"dist/components/menubar/menubar.meta.js": "2d313681a64a7bfd",
@@ -338,8 +338,8 @@
 	"dist/components/pagination/pagination.js": "1220c9e09285601e",
 	"dist/components/pagination/pagination.meta.js": "d4b190da016cf9c8",
 	"dist/components/panel-group/index.js": "8589d6450207f608",
-	"dist/components/panel-group/panel-group.js": "c720c80c554d89b6",
-	"dist/components/panel-group/panel-group.meta.js": "b699a78c93e63911",
+	"dist/components/panel-group/panel-group.js": "bee8719d8826c020",
+	"dist/components/panel-group/panel-group.meta.js": "c2c80330b0b36724",
 	"dist/components/panel-section/index.js": "055470e0a68862e6",
 	"dist/components/panel-section/panel-section.js": "04b12c7e507083df",
 	"dist/components/panel-section/panel-section.meta.js": "148a7bbe63d7e58f",
@@ -419,10 +419,10 @@
 	"dist/components/side-nav/index.js": "fa4e5f5e7232de1e",
 	"dist/components/side-nav/side-nav.js": "4327344d1e8ce8bc",
 	"dist/components/side-nav/side-nav.meta.js": "82637ce04cbd2b88",
-	"dist/components/side-nav/side-nav.variants.js": "54086fe23a4f679f",
-	"dist/components/sidebar/index.js": "eac0c8742dcaae4d",
-	"dist/components/sidebar/sidebar.js": "5a2ce3bc89528fbf",
-	"dist/components/sidebar/sidebar.meta.js": "84718479850faceb",
+	"dist/components/side-nav/side-nav.variants.js": "0b94d077067544d1",
+	"dist/components/sidebar/index.js": "570bd667f5f64241",
+	"dist/components/sidebar/sidebar.js": "afe8fcfb35f05d5f",
+	"dist/components/sidebar/sidebar.meta.js": "28cad3311519b366",
 	"dist/components/skeleton/index.js": "4e01c345b14d42f1",
 	"dist/components/skeleton/skeleton.js": "5ca6d75e81a048ee",
 	"dist/components/skeleton/skeleton.meta.js": "9b7014b97385d773",
@@ -453,11 +453,11 @@
 	"dist/components/switch/switch.js": "5f7b31327500f893",
 	"dist/components/switch/switch.meta.js": "a18e8a74430cb644",
 	"dist/components/table/index.js": "690a2dcf36ac85f6",
-	"dist/components/table/table.js": "b84e3ad4a2c01c07",
+	"dist/components/table/table.js": "cd8aa7b71696532b",
 	"dist/components/table/table.meta.js": "161e701f7e719851",
 	"dist/components/tabs/index.js": "a48e84d7f04203f9",
-	"dist/components/tabs/tabs.js": "26a15a1cda1d7a39",
-	"dist/components/tabs/tabs.meta.js": "9622b77b090361a0",
+	"dist/components/tabs/tabs.js": "8dee06138a436780",
+	"dist/components/tabs/tabs.meta.js": "74c1da8d70dcb31a",
 	"dist/components/textarea/index.js": "09897d89dd4083dd",
 	"dist/components/textarea/textarea.js": "f6b0a934cacdb35b",
 	"dist/components/textarea/textarea.meta.js": "2ae567e1d704c52d",
@@ -495,8 +495,8 @@
 	"dist/components/video/video.js": "d916305d298d6f30",
 	"dist/components/video/video.meta.js": "3c3035022b1f5d90",
 	"dist/components/workspace/index.js": "bace33b15a746d71",
-	"dist/components/workspace/workspace.js": "1d676d32bc632e30",
-	"dist/components/workspace/workspace.meta.js": "b2f9dc7be0d6a6be",
+	"dist/components/workspace/workspace.js": "54d938b4954b309e",
+	"dist/components/workspace/workspace.meta.js": "173277771d6e38f3",
 	"dist/foundations/accessibility.js": "3d5a26dac7b1d821",
 	"dist/foundations/index.d.ts": "34f9553827230412",
 	"dist/foundations/index.js": "37e83ca8063a4282",
@@ -506,20 +506,21 @@
 	"dist/foundations/spacing.js": "49fd401256835447",
 	"dist/foundations/surfaces.js": "2791d0b950ba2c42",
 	"dist/foundations/types.js": "e3b0c44298fc1c14",
-	"dist/foundations/typography.js": "a682867ef56c208c",
-	"dist/icon/Icon.js": "bb0869322d3a61b2",
+	"dist/foundations/typography.js": "d1a324eed0feb558",
+	"dist/icon/Icon.js": "68d5200af511744d",
 	"dist/icon/IconProvider.js": "35a60f03b55f92ae",
 	"dist/icon/compose.js": "d9d4445aa33f867d",
-	"dist/icon/index.d.ts": "88a0a84a2313196d",
-	"dist/icon/index.js": "12fcd896bfc51d3e",
+	"dist/icon/index.d.ts": "044dbd3a068471b0",
+	"dist/icon/index.js": "51f70bcb1219b9a6",
+	"dist/icon/names.js": "1fec5b3136d91fa1",
 	"dist/icon/registry.js": "e3b0c44298fc1c14",
 	"dist/icon-sets/brands.d.ts": "c413ccbdd078d8b4",
 	"dist/icon-sets/brands.generated.js": "901e198df0563b0b",
 	"dist/icon-sets/brands.js": "9a37d8739f14f2a9",
 	"dist/icon-sets/reicon.d.ts": "52f6e41dc8137b4e",
-	"dist/icon-sets/reicon.js": "9cac6fee5ad95a62",
-	"dist/index.d.ts": "ad94845a460a1df4",
-	"dist/index.js": "fe1322803fff6cf8",
+	"dist/icon-sets/reicon.js": "6d3302cc2ed5a58e",
+	"dist/index.d.ts": "e5a512f3a1ad8bb5",
+	"dist/index.js": "ca9bc8552d36f795",
 	"dist/ios/chrome.css": "a7ca9e3735d8658e",
 	"dist/ios/chrome.js": "37091fef7b68bd28",
 	"dist/ios/frame.css": "dd2703c944ce575a",
@@ -564,12 +565,12 @@
 	"dist/lib/chart/dim.js": "e67e46858379174a",
 	"dist/lib/chart/format.js": "f0256bbe226a0967",
 	"dist/lib/chart/geometry.js": "10acd4c2626b0969",
-	"dist/lib/chart/heat.js": "ca6d47e6d28d4428",
+	"dist/lib/chart/heat.js": "2de024b5f50cbaff",
 	"dist/lib/chart/motion.js": "8edb50cf54b30a1a",
 	"dist/lib/chart/scale.js": "b4b329322bfdd17a",
 	"dist/lib/chart/types.js": "5665ade26e2b21a7",
 	"dist/lib/chart/use-arrival.js": "9c38f37cf12146f9",
-	"dist/lib/cn.js": "d16165e3f2f3c488",
+	"dist/lib/cn.js": "35c2afae2a2e5753",
 	"dist/lib/component-guidance.js": "add930d690472d31",
 	"dist/lib/density.js": "304cdaf6733fbad1",
 	"dist/lib/field-shell.js": "cd47989e26b4f1ce",
@@ -596,10 +597,11 @@
 	"dist/lib/use-edge-fade.js": "392e8c33f072fd21",
 	"dist/lib/use-isomorphic-layout-effect.js": "8b93c47e9f069454",
 	"dist/lib/use-match-highlight.js": "4ab41f3a82446ebf",
+	"dist/lib/use-media-query.js": "9998712dac227f59",
 	"dist/lib/use-resize-observer.js": "4f08e280d64be22c",
 	"dist/lib/use-scroll-activity.js": "793394a8c952e697",
 	"dist/lib/use-smooth-wheel.js": "735e0e004c7204fb",
-	"dist/meta-DX5r5wQL.d.ts": "b15f63123088709a",
+	"dist/meta-Dfm9AExe.d.ts": "cbc99ba174d4aae3",
 	"dist/motion/Burst.js": "cede90200e958908",
 	"dist/motion/MotionProvider.js": "624f5502828e7fd0",
 	"dist/motion/Presence.js": "21fc6f1c68207718",
@@ -618,48 +620,50 @@
 	"dist/patterns/brand-landing-page.meta.js": "4483ca25391e53cd",
 	"dist/patterns/chat-panel.js": "f4597a28521c26df",
 	"dist/patterns/chat-panel.meta.js": "a435a08964f40f79",
-	"dist/patterns/dashboard-page.js": "82a56a2d61381ff0",
+	"dist/patterns/dashboard-page.js": "0b34d8ed44b4e29d",
 	"dist/patterns/dashboard-page.meta.js": "afa1ab16823686d0",
 	"dist/patterns/feed-page.js": "6c34ebf590eb51df",
 	"dist/patterns/feed-page.meta.js": "d87a18be1d0eebca",
-	"dist/patterns/index.d.ts": "07bf94356dd329a8",
-	"dist/patterns/index.js": "3ff5fabb1afbf8dc",
+	"dist/patterns/index.d.ts": "31c319650574425f",
+	"dist/patterns/index.js": "e6d7654a7cd9141b",
 	"dist/patterns/landing-page.js": "d27227dbb74021bf",
 	"dist/patterns/landing-page.meta.js": "95d34273ee999eea",
 	"dist/patterns/list-detail-page.js": "7c124da100befd14",
 	"dist/patterns/list-detail-page.meta.js": "df01b058381bd67a",
 	"dist/patterns/settings-page.js": "61277b5e00a76244",
 	"dist/patterns/settings-page.meta.js": "68d34a8d2ecf417a",
-	"dist/presets/index.d.ts": "454f6f809cc08d6a",
+	"dist/patterns/tracker-page.js": "7d92a8f05f6aa044",
+	"dist/patterns/tracker-page.meta.js": "e0fe9b7416b1ace0",
+	"dist/presets/index.d.ts": "87fa4c7ffd7c0da8",
 	"dist/presets/index.js": "fe9c4f8231bf18b2",
 	"dist/registry-CyL28OzJ.d.ts": "b068fc89571517d8",
-	"dist/styles.css": "d02c108604a72bb5",
-	"dist/theme-provider-BydfM5Z0.d.ts": "71808ed18b268496",
-	"dist/themes/_contract.js": "f566700602557a22",
+	"dist/styles.css": "f42ee1b4773f49b0",
+	"dist/theme-provider-BUBealk_.d.ts": "3b8c1368c3a39296",
+	"dist/themes/_contract.js": "c37c09de82106fe8",
 	"dist/themes/atelier/atelier.css": "ca476ee9fe980307",
-	"dist/themes/atelier/index.d.ts": "941ec7d11a9ea429",
+	"dist/themes/atelier/index.d.ts": "1e0aefad2c32bb56",
 	"dist/themes/atelier/index.js": "909453609097c7f7",
 	"dist/themes/contrast.js": "65b057ac2613a364",
 	"dist/themes/ember/ember.css": "ca5e2e60ecb52464",
-	"dist/themes/ember/index.d.ts": "74d05c575e106131",
+	"dist/themes/ember/index.d.ts": "266ea5636ed7bbc9",
 	"dist/themes/ember/index.js": "cffa33f1bef32147",
-	"dist/themes/index.d.ts": "8ee47b37d061d88a",
+	"dist/themes/index.d.ts": "73e82f4cf28dd622",
 	"dist/themes/index.js": "7f33a54fb5c24748",
-	"dist/themes/meridian/index.d.ts": "f108ee2888fcd002",
+	"dist/themes/meridian/index.d.ts": "8f3d193836383ddb",
 	"dist/themes/meridian/index.js": "56462cce4dca41ca",
 	"dist/themes/meridian/meridian.css": "a76f7d8f8105d19d",
-	"dist/themes/poppy/index.d.ts": "40caf47c32b61be8",
+	"dist/themes/poppy/index.d.ts": "c8323cd277c07f2d",
 	"dist/themes/poppy/index.js": "f2e535806e5a2bf7",
 	"dist/themes/poppy/poppy.css": "da551a8b7bdd30c1",
-	"dist/themes/prism/index.d.ts": "ce69006adb495d25",
+	"dist/themes/prism/index.d.ts": "68650a1e59d78cf6",
 	"dist/themes/prism/index.js": "ec2cee6b1265ffa1",
 	"dist/themes/prism/prism.css": "51c7bfbf7dfab6ca",
 	"dist/themes/registry.js": "933de6f608db253f",
-	"dist/themes/sable/index.d.ts": "c2c7e2009c0fca7e",
+	"dist/themes/sable/index.d.ts": "1613fafeb268466e",
 	"dist/themes/sable/index.js": "28eaf45ae57577b6",
 	"dist/themes/sable/sable.css": "b0cfb24b9519f20f",
 	"dist/themes/theme-provider.js": "05ad5f1f820e7dd5",
-	"dist/themes/verdant/index.d.ts": "1832116ef671f45f",
+	"dist/themes/verdant/index.d.ts": "0c887c715f9b1b14",
 	"dist/themes/verdant/index.js": "f7427c153f1fa913",
 	"dist/themes/verdant/verdant.css": "84746574d124472f",
 	"dist/themes.css": "994aa4e048ed1cd9"

package/dist/foundations/typography.js

@@ -73,6 +73,14 @@ var typography = {
       rule: "text-wrap: balance on headings, pretty on ledes, neither on long prose.",
       why: "balance evens short headlines; pretty only refuses a one-word last line. Both cost layout work that long prose does not repay."
     },
+    {
+      rule: "To make all the type smaller or larger, set the base: --type-base: 14 (a unitless px number; 16 is the default). Never retune tiers one by one for it.",
+      why: 'Every tier is authored on a 16px base and keeps its ratio to it, so one number rebuilds the whole scale, headings to captions, and the baseline step and spacing follow the body. Shrinking tiers individually breaks the ratios between them. Set it on :root, a theme scope or a preset (tokens.shared["type-base"]) so the rhythm follows too.'
+    },
+    {
+      rule: `Inside a Workspace, a panel's title is text-ui-title (14px \xB7 600); compact text-title-lg resolves to it. A reading view inside the tool (an overview, a document, a long form) is wrapped in <Density value="comfortable"> and gets the page tiers back.`,
+      why: "The compact register remaps page tiers onto the 10-12px chrome ramp, which is right for chrome and wrong for prose: an issue overview set in a tool rendered its paragraphs at 11px. The remap stops at a comfortable boundary, so the wrapper is the whole fix."
+    },
     {
       rule: "A mark attached to a line of type (a dot, a bullet, a timeline marker, a leading icon) sits in a box one line tall (h-[1lh] items-center) and is sized in em.",
       why: "1lh is the line-height of the text beside it, so the mark centres on that line in every tier, density and theme. A px size with a mt-[3px] nudge is right for one font at one size and wrong everywhere else."
@@ -106,6 +114,11 @@ var typography = {
       instead: "Ragged-right at body-md; body-xs only for dense data.",
       why: "Justification opens rivers on the web, which has no hyphenation control; 12px prose fails people with low vision."
     },
+    {
+      never: "Changing the root font-size (html { font-size: 14px }) to make a product denser.",
+      instead: '--type-base: 14, with Workspace or <Density value="compact"> for denser controls.',
+      why: "The root also sizes every rem the app wrote: widths, insets, media queries. --type-base moves only the type and the rhythm built on it, and density moves the controls, so each can be chosen on its own."
+    },
     {
       never: "A new font family, or raw font-feature-settings / font-variation-settings.",
       instead: "The theme's sans, mono and optional display; font-variant-numeric and font-weight.",

package/dist/icon/Icon.js

@@ -1,11 +1,16 @@
 // src/icon/Icon.tsx
 import { useIconSet } from "./IconProvider.js";
+import { nearestIconNames, resolveIconAlias } from "./names.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 var MISSING_ICON_PROVIDER = (
   // design-lint-disable-next-line self-import -- the warning text names the consumer's import, not an import
   'Sable: <Icon> has no icon set, so icons render nothing. Wrap your app in <IconProvider set={reiconIconSet}> from "@sableui/react/icons/reicon".'
 );
 var warned = false;
+var missingWarned = /* @__PURE__ */ new Set();
+function missingIconMessage(name) {
+  return `Sable: <Icon name="${name}"> resolved to nothing in the active icon set, so it renders nothing. Nearest contract names: ${nearestIconNames(name).join(", ")}. The full list is registry.json \u2192 iconContract.names; an app's own names go in a set composed with composeIconSets.`;
+}
 function isDevelopment() {
   try {
     return process.env.NODE_ENV !== "production";
@@ -22,9 +27,23 @@ function Icon({ name, variant, spin, className, title }) {
     }
     return null;
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: set({ name, variant: variant ?? defaultVariant, spin, className, title }) });
+  const props = { variant: variant ?? defaultVariant, spin, className, title };
+  let rendered = set({ name, ...props });
+  if (rendered == null) {
+    const alias = resolveIconAlias(name);
+    if (alias) rendered = set({ name: alias, ...props });
+  }
+  if (rendered == null) {
+    if (!missingWarned.has(name) && isDevelopment()) {
+      missingWarned.add(name);
+      console.warn(missingIconMessage(name));
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: rendered });
 }
 export {
   Icon,
-  MISSING_ICON_PROVIDER
+  MISSING_ICON_PROVIDER,
+  missingIconMessage
 };

package/dist/icon/index.d.ts

@@ -21,6 +21,13 @@ interface IconProps {
  * There is no built-in fallback: an app that brings its own icons ships none
  * of Reicon's artwork. Without a provider, icons render nothing, and a
  * development build says so once per page.
+ *
+ * A name the set does not have is tried once more as another library's
+ * spelling (`check-circle`, `settings`, `x` → the contract's `circle-check`,
+ * `gear`, `xmark`; see ICON_ALIASES). Still nothing, and a development build
+ * names the nearest contract names, once per name: a missing glyph renders as
+ * an empty gap that reads like a layout choice, and through an app's own
+ * wrapper (`<Glyph name={n} />`) no lint can see the literal.
  */
 declare function Icon({ name, variant, spin, className, title }: IconProps): react.JSX.Element | null;
 
@@ -44,6 +51,34 @@ declare function Icon({ name, variant, spin, className, title }: IconProps): rea
  */
 declare function composeIconSets(...sets: IconSet[]): IconSet;
 
+/**
+ * The icon contract: every semantic name an app can pass to `<Icon name>` and
+ * expect a glyph from Sable's bundled set, plus the names other icon libraries
+ * use for the same glyphs.
+ *
+ * `ICON_NAMES` is the same list as `registry.json → iconContract.names`
+ * (asserted in reicon.test.tsx), kept here so `<Icon>` can point at the nearest
+ * real name when one resolves to nothing — the core graph never imports an icon
+ * set, so it cannot ask Reicon what it has.
+ */
+declare const ICON_NAMES: readonly ["heart", "comment", "share", "gem", "image-stack", "home", "bell", "gear", "user", "search", "plus", "minus", "check", "xmark", "chevron-down", "chevron-up", "chevron-left", "chevron-right", "arrow-up", "arrow-up-right", "expand", "eye", "eye-off", "external", "spinner", "ellipsis", "info", "warning", "circle-check", "calendar", "copy", "file", "folder", "sun", "moon", "desktop", "lock", "list", "bars", "grid", "layout", "book", "component", "sparkles", "play", "pause", "next", "previous", "arrow-down", "arrow-left", "arrow-right", "clock", "send", "trash", "edit", "download", "upload", "link", "inbox", "mail", "logout", "star", "refresh", "filter", "bold", "italic", "eyedropper", "stop", "key", "wallet", "thumbs-up", "thumbs-down", "shuffle", "repeat", "repeat-one", "volume", "volume-low", "volume-off", "queue", "music", "tag", "paperclip", "chart", "flag", "at-sign", "replay", "motion", "emoji", "briefcase", "layers", "microphone", "video", "broadcast", "newspaper", "palette", "gamepad", "users", "archive", "kanban", "sliders", "help", "sidebar", "chevron-up-down"];
+type IconName = (typeof ICON_NAMES)[number];
+/**
+ * Other libraries' names for glyphs the contract already has. Agents and
+ * people reach for Lucide's and Heroicons' spellings first (`check-circle`,
+ * `settings`, `x`, `more-horizontal`, `cog-6-tooth`); `<Icon>` resolves these
+ * to the contract name before it gives up, so a guessed name still draws.
+ * Write the contract name in new code — lint says which one.
+ */
+declare const ICON_ALIASES: Readonly<Record<string, IconName>>;
+/** The contract name an alias stands for, or `undefined` when it is not one. */
+declare function resolveIconAlias(name: string): IconName | undefined;
+/**
+ * Up to three contract names closest to `name`: ones that share a word with it
+ * first (`user-avatar` → user), then by edit distance.
+ */
+declare function nearestIconNames(name: string, limit?: number): string[];
+
 interface IconContextValue {
     set: IconSet | null;
     defaultVariant: IconVariant;
@@ -65,4 +100,4 @@ interface IconProviderProps {
 declare function IconProvider({ set, defaultVariant, children, }: IconProviderProps): react.JSX.Element;
 declare function useIconSet(): IconContextValue;
 
-export { Icon, type IconContextValue, type IconProps, IconProvider, type IconProviderProps, IconSet, IconVariant, composeIconSets, useIconSet };
+export { ICON_ALIASES, ICON_NAMES, Icon, type IconContextValue, type IconName, type IconProps, IconProvider, type IconProviderProps, IconSet, IconVariant, composeIconSets, nearestIconNames, resolveIconAlias, useIconSet };

package/dist/icon/index.js

@@ -1,13 +1,18 @@
 // src/icon/index.ts
 import { Icon } from "./Icon.js";
 import { composeIconSets } from "./compose.js";
+import { ICON_ALIASES, ICON_NAMES, nearestIconNames, resolveIconAlias } from "./names.js";
 import {
   IconProvider,
   useIconSet
 } from "./IconProvider.js";
 export {
+  ICON_ALIASES,
+  ICON_NAMES,
   Icon,
   IconProvider,
   composeIconSets,
+  nearestIconNames,
+  resolveIconAlias,
   useIconSet
 };