@charcuterie/ui 1.1.0 → 2.0.1

package/src/index.ts

@@ -59,6 +59,8 @@ export type {
   ColorSchemeToggleProps,
 } from "./ColorSchemeToggle/ColorSchemeToggle.tsx"
 export { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle.tsx"
+export type { ComboboxProps } from "./Combobox/Combobox.tsx"
+export { Combobox } from "./Combobox/Combobox.tsx"
 export type { BadgeSize } from "./controlStyles.ts"
 export {
   BADGE_SIZE_CLASS,
@@ -68,6 +70,11 @@ export {
   MIN_TOUCH_TARGET_CLASS,
   SPINNER_SIZE_CLASS,
 } from "./controlStyles.ts"
+export type {
+  DialogProps,
+  DialogSize,
+} from "./Dialog/Dialog.tsx"
+export { Dialog } from "./Dialog/Dialog.tsx"
 export type {
   EmptyStateProps,
   EmptyStateSize,
@@ -92,6 +99,11 @@ export {
 } from "./intentStyles.ts"
 export type { LightboxProps } from "./Lightbox/Lightbox.tsx"
 export { Lightbox } from "./Lightbox/Lightbox.tsx"
+export type {
+  ListboxItem,
+  ListboxProps,
+} from "./Listbox/Listbox.tsx"
+export { Listbox } from "./Listbox/Listbox.tsx"
 export type {
   LiveStatusIndicatorProps,
   LiveStatusIndicatorSize,
@@ -114,10 +126,7 @@ export type {
   MenuProps,
 } from "./Menu/Menu.tsx"
 export { Menu } from "./Menu/Menu.tsx"
-export type {
-  ModalProps,
-  ModalSize,
-} from "./Modal/Modal.tsx"
+export type { ModalProps } from "./Modal/Modal.tsx"
 export { Modal } from "./Modal/Modal.tsx"
 export type { PopoverProps } from "./Popover/Popover.tsx"
 export { Popover } from "./Popover/Popover.tsx"

package/src/mountStory.testHelpers.ts

@@ -46,12 +46,26 @@ type MountableStory = {
  * The stale tree is removed rather than unmounted because portable
  * stories expose no unmount. Detaching is enough: it takes the node
  * out of the layout, which is the entire problem.
+ *
+ * ### Portalled panels leave the canvas
+ *
+ * Once the overlays portal to `document.body`, their panels are no
+ * longer inside `canvasElement`, and floating-ui's portal roots
+ * (`[data-floating-ui-portal]`) are body children a portable story
+ * never unmounts. A previous test's panel therefore lingers next to
+ * the live one, and `expectAgentDrivable(body, …)` fails with "2
+ * elements match" — the portal analogue of the fixed-position
+ * `ToastRegion` bug above. So the same cleanup that detaches stale
+ * canvases also removes stale portal roots, and `mountStory` now hands
+ * back `body` (scoped to `document.body`) for querying the panels the
+ * triggers still open from inside `canvas`.
  */
 const mountedCanvases: HTMLElement[] = []
 
 export const mountStory = async (
   story: MountableStory,
 ): Promise<{
+  body: Canvas
   canvas: Canvas
   canvasElement: HTMLElement
 }> => {
@@ -59,6 +73,12 @@ export const mountStory = async (
     previous.remove()
   }
 
+  for (const portalRoot of document.querySelectorAll(
+    "[data-floating-ui-portal]",
+  )) {
+    portalRoot.remove()
+  }
+
   const canvasElement = document.createElement("div")
 
   document.body.append(canvasElement)
@@ -67,5 +87,9 @@ export const mountStory = async (
 
   await story.run({ canvasElement })
 
-  return { canvas: within(canvasElement), canvasElement }
+  return {
+    body: within(document.body),
+    canvas: within(canvasElement),
+    canvasElement,
+  }
 }

package/src/sourceRules.test.ts

@@ -293,9 +293,14 @@ test("the barrel is the only place components are re-exported", async () => {
   //
   // 2026-08-03 adds the two colour-scheme controls — `ColorSchemeToggle`
   // (Layer 2, presentational) and `ColorSchemeSwitcher` (Layer 3,
-  // connected) — plus `Lightbox` (landed the same day on its own
-  // branch), taking the count to 28.
-  expect(componentNames.length).toBe(28)
+  // connected) — and `Lightbox`, the thumbnail-over-`Dialog` viewer —
+  // taking the count to 28.
+  //
+  // The M8 overlay rebuild renames the old chrome-bearing `Modal` to
+  // `Dialog` and reintroduces `Modal` as the base layer, so both are
+  // components: +1 → 29. The picker family adds `Listbox` (single-select)
+  // and `Combobox` (searchable/virtualized): +2 → 31.
+  expect(componentNames.length).toBe(31)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)
@@ -394,6 +399,10 @@ const ENTRY_POINT_RUNTIMES: Record<
       "@charcuterie/logic/browser",
       "@charcuterie/tokens",
       "@floating-ui/react",
+      // `Combobox`'s virtualization — the second runtime dependency
+      // this package has ever taken. MIT, US-origin (Tanner Linsley),
+      // tree-shakeable, ~4 KB gz.
+      "@tanstack/react-virtual",
       "react",
     ],
     "./testing": [],

package/src/storyControls.test.ts

@@ -24,21 +24,32 @@ import { expect, test } from "vitest"
 const sourceDirectory = resolve(import.meta.dirname)
 
 const readComponent = async (name: string) => {
-  const [component, story] = await Promise.all([
-    readFile(
+  // A `<Name>/<Name>.tsx` is the component-folder signal. An
+  // uppercase folder without one — `Overlay/`, which holds the shared
+  // portal/backdrop/anchoring infrastructure and no storied component
+  // — is not a component and is skipped, so this rule stays about the
+  // things that have a Controls panel to get wrong. A real component
+  // missing only its *story* still throws below, which is the guard.
+  let component: string
+
+  try {
+    component = await readFile(
       join(sourceDirectory, name, `${name}.tsx`),
       "utf8",
-    ),
-    readFile(
-      join(sourceDirectory, name, `${name}.stories.tsx`),
-      "utf8",
-    ),
-  ])
+    )
+  } catch {
+    return null
+  }
+
+  const story = await readFile(
+    join(sourceDirectory, name, `${name}.stories.tsx`),
+    "utf8",
+  )
 
   return { component, name, story }
 }
 
-const componentNames = (
+const componentDirectories = (
   await readdir(sourceDirectory, { withFileTypes: true })
 )
   .filter(
@@ -48,9 +59,11 @@ const componentNames = (
   .map((entry) => entry.name)
   .sort()
 
-const components = await Promise.all(
-  componentNames.map(readComponent),
-)
+const components = (
+  await Promise.all(componentDirectories.map(readComponent))
+).filter((one) => one !== null)
+
+const componentNames = components.map((one) => one.name)
 
 /**
  * `import type { A, B } from "@scope/pkg"` — bare specifiers only.

package/dist/Modal/lockScrollBehind.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lockScrollBehind.d.ts","sourceRoot":"","sources":["../../src/Modal/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,eAAO,MAAM,gBAAgB,QAAO,CAAC,MAAM,IAAI,CAiC9C,CAAA"}

package/dist/Modal/lockScrollBehind.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lockScrollBehind.js","sourceRoot":"","sources":["../../src/Modal/lockScrollBehind.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,IAAI,SAAS,GAAG,CAAC,CAAA;AAEjB,IAAI,gBAAgB,GAAG,EAAE,CAAA;AAEzB,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAiB,EAAE;IACjD,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QACpC,OAAO,GAAG,EAAE,GAAE,CAAC,CAAA;IACjB,CAAC;IAED,MAAM,EAAE,eAAe,EAAE,GAAG,QAAQ,CAAA;IAEpC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;QACpB,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,QAAQ,CAAA;QAEjD,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC3C,CAAC;IAED,SAAS,IAAI,CAAC,CAAA;IAEd,IAAI,UAAU,GAAG,KAAK,CAAA;IAEtB,OAAO,GAAG,EAAE;QACV,6DAA6D;QAC7D,6DAA6D;QAC7D,qCAAqC;QACrC,IAAI,UAAU,EAAE,CAAC;YACf,OAAM;QACR,CAAC;QAED,UAAU,GAAG,IAAI,CAAA;QAEjB,SAAS,IAAI,CAAC,CAAA;QAEd,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,eAAe,CAAC,KAAK,CAAC,QAAQ,GAAG,gBAAgB,CAAA;QACnD,CAAC;IACH,CAAC,CAAA;AACH,CAAC,CAAA"}