@duro-app/ui 5.4.0 → 5.6.0

package/dist/shared/ModalContext.d.ts

@@ -10,5 +10,12 @@
  * closes on a nested modal opening; no consumer needs it yet.
  */
 export declare const ModalContext: import('react').Context<boolean>;
+/**
+ * True inside a Dialog or Drawer, false outside. A floating surface that is not
+ * a Duro Popover picks its layer with it, the way a Popover does:
+ * `useInModal() ? layers.popover : layers.floating`, and for one that must
+ * cover another floating surface (a link editor over a format bar)
+ * `useInModal() ? layers.popoverRaised : layers.floatingRaised`.
+ */
 export declare function useInModal(): boolean;
 //# sourceMappingURL=ModalContext.d.ts.map

package/dist/shared/ModalContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../src/shared/ModalContext.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,kCAAuB,CAAA;AAEhD,wBAAgB,UAAU,YAEzB"}
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../src/shared/ModalContext.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,kCAAuB,CAAA;AAEhD;;;;;;GAMG;AACH,wBAAgB,UAAU,IAAI,OAAO,CAEpC"}

package/dist/shared/exports.typecheck.d.ts

@@ -0,0 +1,9 @@
+import { ButtonSize, ControlSize, ToggleSize, useInModal } from '../index';
+type Same<T, U> = [T] extends [U] ? ([U] extends [T] ? true : false) : false;
+export declare const useInModalIsBoolean: Same<ReturnType<typeof useInModal>, boolean>;
+export declare const useInModalTakesNothing: Same<Parameters<typeof useInModal>, []>;
+export declare const controlSizes: Same<ControlSize, 'default' | 'small'>;
+export declare const buttonSizeIsControlSize: Same<ButtonSize, ControlSize>;
+export declare const toggleSizeIsControlSize: Same<ToggleSize, ControlSize>;
+export {};
+//# sourceMappingURL=exports.typecheck.d.ts.map

package/dist/shared/exports.typecheck.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"exports.typecheck.d.ts","sourceRoot":"","sources":["../../src/shared/exports.typecheck.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAC,MAAM,UAAU,CAAA;AAE7E,KAAK,IAAI,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA;AAG5E,eAAO,MAAM,mBAAmB,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,EAAE,OAAO,CAAQ,CAAA;AACrF,eAAO,MAAM,sBAAsB,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,UAAU,CAAC,EAAE,EAAE,CAAQ,CAAA;AAGnF,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,CAAQ,CAAA;AACxE,eAAO,MAAM,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAQ,CAAA;AAC1E,eAAO,MAAM,uBAAuB,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,CAAQ,CAAA"}

package/dist/shared/navigate.d.ts

@@ -0,0 +1,25 @@
+/** The part of a click event a link part reads and hands to `onNavigate`. */
+export interface LinkClickEvent {
+    readonly button: number;
+    readonly metaKey: boolean;
+    readonly ctrlKey: boolean;
+    readonly shiftKey: boolean;
+    readonly altKey: boolean;
+    readonly defaultPrevented: boolean;
+    preventDefault(): void;
+}
+/**
+ * Called for a plain primary click on a link part. Call
+ * `event.preventDefault()`, then your router's navigate; leave the event alone
+ * to let the browser follow the link.
+ */
+export type OnNavigate = (href: string, event: LinkClickEvent) => void;
+/** A primary-button click with no modifier key, not already prevented. */
+export declare function isPlainClick(event: LinkClickEvent): boolean;
+/**
+ * The `onClick` of a link part: hands a plain click on a link with no
+ * `target` to `onNavigate`, and does nothing otherwise, so the browser default
+ * runs. Undefined when there is no `onNavigate` (no handler at all).
+ */
+export declare function linkClickHandler(href: string, onNavigate: OnNavigate | undefined, target?: string | null): ((event: LinkClickEvent) => void) | undefined;
+//# sourceMappingURL=navigate.d.ts.map

package/dist/shared/navigate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigate.d.ts","sourceRoot":"","sources":["../../src/shared/navigate.ts"],"names":[],"mappings":"AAgBA,6EAA6E;AAC7E,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,cAAc,IAAI,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAA;AAEtE,0EAA0E;AAC1E,wBAAgB,YAAY,CAAC,KAAK,EAAE,cAAc,GAAG,OAAO,CAS3D;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,MAAM,EACZ,UAAU,EAAE,UAAU,GAAG,SAAS,EAClC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GACrB,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAM/C"}

package/dist/shared/types.d.ts

@@ -1,2 +1,4 @@
 export type Orientation = 'horizontal' | 'vertical';
+/** The two control sizes shared by Button, Toggle and the Select, Menu and Popover triggers. */
+export type ControlSize = 'default' | 'small';
 //# sourceMappingURL=types.d.ts.map

package/dist/shared/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/shared/types.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAEnD,gGAAgG;AAChG,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAA"}

package/dist/table.js

@@ -1,4 +1,4 @@
-import { M as F, l as xt, R as rt, H as kt, m as pt, n as bt, o as ft, p as mt, j as ht, q as yt, r as St, t as Tt } from "./Table-Cm5cCnZD.js";
+import { M as F, m as xt, R as rt, H as kt, n as pt, o as bt, p as ft, q as mt, k as ht, t as yt, r as St, v as Tt } from "./Table-B1sWL3GA.js";
 import { jsx as u, jsxs as q } from "react/jsx-runtime";
 import { c as H, m as p, d as b } from "./compiler-runtime-B2IcI8_O.js";
 import { flexRender as E, useReactTable as it, getPaginationRowModel as Ct, getFilteredRowModel as vt, getSortedRowModel as at, getCoreRowModel as st } from "@tanstack/react-table";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.6",
-    "@duro-app/tokens": "^5.4.0"
+    "@duro-app/tokens": "^5.6.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/Breadcrumb/Breadcrumb.meta.ts

@@ -0,0 +1,37 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'Where the current page sits in the hierarchy: a labelled nav landmark with an ordered list of links, outermost first. An Item is either a link (href, optional onNavigate) or the current page (current: text with aria-current="page"), never both — the types refuse the mix. The › separators are aria-hidden. Links take href and an optional onNavigate(href, event) for a client router (plain clicks only). Compound component — Root is required.',
+  whenToUse: [
+    'A page deep in a hierarchy — docs › section › page, admin › collection › record',
+    'A detail page whose way back to its collection should be one click',
+  ],
+  whenNotToUse: [
+    'The previous and next pages in reading order — use PageNav',
+    'The sections of the page being read — use TableOfContents',
+    'Primary app navigation — use SideNav',
+  ],
+  anatomy: {
+    required: ['Root', 'Item'],
+  },
+  relatedTo: [
+    {
+      component: 'PageNav',
+      kind: 'contrast',
+      relationship: 'Breadcrumb goes up the hierarchy; PageNav goes along the reading order',
+    },
+    {
+      component: 'admin-detail-page',
+      kind: 'composition',
+      relationship: 'The admin-detail-page recipe heads the record with a Breadcrumb',
+    },
+  ],
+  example: `<Breadcrumb.Root aria-label="Breadcrumb">
+  <Breadcrumb.Item href="/docs" onNavigate={go}>Docs</Breadcrumb.Item>
+  <Breadcrumb.Item href="/docs/architecture" onNavigate={go}>Architecture</Breadcrumb.Item>
+  <Breadcrumb.Item current>AI-ops platform</Breadcrumb.Item>
+</Breadcrumb.Root>
+
+// go = (href, event) => { event.preventDefault(); navigate(href) }`,
+}

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,110 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, waitFor} from 'storybook/test'
+import {Breadcrumb} from './Breadcrumb'
+import {clickLink} from '../../docs/clickLink'
+import {onThemeSurface} from '../../docs/themedSurface'
+import {withCoarsePointer, withFinePointer} from '../../docs/coarsePointer'
+import {SIZES_PX} from '@duro-app/tokens/keys'
+import type {OnNavigate} from '../../shared/navigate'
+
+const meta: Meta = {
+  title: 'Components/Breadcrumb',
+  parameters: {a11y: {test: 'error'}},
+  decorators: [onThemeSurface],
+}
+
+export default meta
+type Story = StoryObj
+
+function Trail({onNavigate}: {onNavigate?: OnNavigate}) {
+  return (
+    <Breadcrumb.Root aria-label="Breadcrumb">
+      <Breadcrumb.Item href="#docs" onNavigate={onNavigate}>
+        Docs
+      </Breadcrumb.Item>
+      <Breadcrumb.Item href="#architecture" onNavigate={onNavigate}>
+        Architecture
+      </Breadcrumb.Item>
+      <Breadcrumb.Item current>AI-ops platform</Breadcrumb.Item>
+    </Breadcrumb.Root>
+  )
+}
+
+export const Default: Story = {
+  render: () => <Trail />,
+  play: async ({canvas}) => {
+    const nav = canvas.getByRole('navigation', {name: 'Breadcrumb'})
+    await expect(nav).toBeInTheDocument()
+    // the list holds the three items only: the separators are aria-hidden
+    await expect(canvas.getAllByRole('listitem')).toHaveLength(3)
+    await expect(canvas.getAllByRole('link').map((a) => a.textContent)).toEqual([
+      'Docs',
+      'Architecture',
+    ])
+    // the current page is text, not a link, and says so
+    const current = canvas.getByText('AI-ops platform')
+    await expect(current).toHaveAttribute('aria-current', 'page')
+    await expect(current.closest('a')).toBeNull()
+  },
+}
+
+export const KeyboardOrder: Story = {
+  render: () => <Trail />,
+  play: async ({canvas, userEvent}) => {
+    await userEvent.tab()
+    await expect(canvas.getByRole('link', {name: 'Docs'})).toHaveFocus()
+    await userEvent.tab()
+    await expect(canvas.getByRole('link', {name: 'Architecture'})).toHaveFocus()
+    // the current page is not a tab stop
+    await userEvent.tab()
+    await expect(canvas.getByRole('link', {name: 'Architecture'})).not.toHaveFocus()
+  },
+}
+
+export const ClientNavigation: StoryObj<{onNavigate: OnNavigate}> = {
+  args: {onNavigate: fn()},
+  render: (args) => <Trail onNavigate={args.onNavigate} />,
+  play: async ({args, canvas}) => {
+    const onNavigate = args.onNavigate as unknown as ReturnType<typeof fn>
+    onNavigate.mockImplementation((_href: string, event: {preventDefault(): void}) =>
+      event.preventDefault(),
+    )
+    const link = canvas.getByRole('link', {name: 'Architecture'})
+
+    // a plain click goes to the router, which prevents the default
+    await expect(clickLink(link).defaultPrevented).toBe(true)
+    await expect(onNavigate).toHaveBeenCalledTimes(1)
+    await expect(onNavigate.mock.calls[0][0]).toBe('#architecture')
+
+    // a modified or non-primary click keeps the browser default
+    for (const init of [{metaKey: true}, {ctrlKey: true}, {shiftKey: true}, {button: 1}]) {
+      await expect(clickLink(link, init).defaultPrevented).toBe(false)
+    }
+    await expect(onNavigate).toHaveBeenCalledTimes(1)
+  },
+}
+
+/**
+ * A touch screen gets 44px links (coarse pointer); a mouse keeps the
+ * artboard's text-height row.
+ * It drives Chrome's touch emulation through Vitest's CDP session, so it runs
+ * as a test and stays out of the dev sidebar (there is no Vitest there).
+ */
+export const TouchTargets: Story = {
+  tags: ['!dev', '!autodocs'],
+  render: () => <Trail />,
+  play: async ({canvas}) => {
+    await withFinePointer()
+    const links = () => canvas.getAllByRole('link')
+    for (const link of links()) {
+      await expect(link.getBoundingClientRect().height).toBeLessThan(SIZES_PX.touchTarget)
+    }
+    await withCoarsePointer(async () => {
+      for (const link of links()) {
+        await waitFor(() =>
+          expect(link.getBoundingClientRect().height).toBeGreaterThanOrEqual(SIZES_PX.touchTarget),
+        )
+      }
+    })
+  },
+}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,95 @@
+import {Children, createContext, Fragment, isValidElement, type ReactNode, useContext} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.css'
+import {linkClickHandler, type OnNavigate} from '../../shared/navigate'
+
+/* Breadcrumb — where the current page sits in the site's hierarchy: a
+ * labelled `nav` holding an ordered list of links, the last one the current
+ * page (`aria-current="page"`, shown as text). The separators between items
+ * are decorative (`aria-hidden`), so a screen reader hears the list alone. */
+
+// Items render list items: outside Root's list they would be invalid markup.
+const BreadcrumbContext = createContext(false)
+
+function useBreadcrumb() {
+  if (!useContext(BreadcrumbContext))
+    throw new Error('Breadcrumb compound components must be used within Breadcrumb.Root')
+}
+
+// --- Root ---
+
+interface RootProps {
+  /** Names the landmark ("Breadcrumb"); required, from your text catalog. */
+  'aria-label': string
+  /** `Breadcrumb.Item`s, outermost first. */
+  children: ReactNode
+}
+
+function Root({'aria-label': ariaLabel, children}: RootProps) {
+  const items = Children.toArray(children).filter(isValidElement)
+  return (
+    <BreadcrumbContext.Provider value={true}>
+      <html.nav aria-label={ariaLabel} style={styles.root}>
+        <html.ol style={styles.list}>
+          {items.map((item, i) => (
+            <Fragment key={item.key ?? i}>
+              {i > 0 ? (
+                <html.li aria-hidden style={styles.separator}>
+                  ›
+                </html.li>
+              ) : null}
+              {item}
+            </Fragment>
+          ))}
+        </html.ol>
+      </html.nav>
+    </BreadcrumbContext.Provider>
+  )
+}
+
+// --- Item ---
+
+/**
+ * A link to an ancestor page, or the current page. The two are exclusive: the
+ * current page has no `href` (it is text) and a link is never `current`.
+ */
+type ItemProps = {children: ReactNode} & (
+  | {
+      /** Where the item links to. */
+      href: string
+      /**
+       * Client-side navigation: called for a plain primary click (no modifier
+       * key). Call `event.preventDefault()`, then your router's navigate.
+       */
+      onNavigate?: OnNavigate
+      current?: never
+    }
+  | {
+      /** The page the user is on: rendered as text with `aria-current="page"`. */
+      current: true
+      href?: never
+      onNavigate?: never
+    }
+)
+
+function Item({href, current, onNavigate, children}: ItemProps) {
+  useBreadcrumb()
+  return (
+    <html.li style={styles.item}>
+      {current ? (
+        <html.span aria-current="page" style={styles.current}>
+          {children}
+        </html.span>
+      ) : (
+        <html.a href={href} onClick={linkClickHandler(href, onNavigate)} style={styles.link}>
+          {children}
+        </html.a>
+      )}
+    </html.li>
+  )
+}
+
+export const Breadcrumb = {
+  Root,
+  Item,
+}

package/src/components/Breadcrumb/styles.css.ts

@@ -0,0 +1,76 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {radii, spacing} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+
+// The picked docs browser (docs/mockups/docs-nav/Reader.dc.html, `.crumbs`):
+// small muted text, accent links, a `›` between items, the current page plain.
+export const styles = css.create({
+  root: {
+    minWidth: 0,
+  },
+  list: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: spacing.xs,
+    margin: 0,
+    padding: 0,
+    listStyleType: 'none',
+    fontFamily: typography.fontFamily,
+    fontSize: typography.fontSizeSm,
+    color: colors.textMuted,
+  },
+  item: {
+    display: 'inline-flex',
+    minWidth: 0,
+  },
+  separator: {
+    display: 'inline-flex',
+    color: colors.textMuted,
+    userSelect: 'none',
+  },
+  // On a touch screen (coarse pointer, as Toggle does) each link is a
+  // touch target; a mouse keeps the artboard's text-height row.
+  link: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minHeight: {default: null, '@media (pointer: coarse)': sizes.touchTarget},
+    color: {
+      default: colors.accent,
+      ':hover': colors.accentHover,
+    },
+    textDecorationLine: {
+      default: 'none',
+      ':hover': 'underline',
+    },
+    borderRadius: radii.xs,
+    transitionProperty: 'color',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+    outlineWidth: {
+      default: 0,
+      ':focus-visible': borders.focusRing,
+    },
+    outlineStyle: {
+      default: 'none',
+      ':focus-visible': 'solid',
+    },
+    outlineColor: {
+      default: 'transparent',
+      ':focus-visible': colors.accent,
+    },
+    outlineOffset: {
+      default: 0,
+      ':focus-visible': borders.focusOffset,
+    },
+  },
+  // the artboard keeps the current page in the list's muted colour; it is
+  // told apart by not being a link (and by aria-current for assistive tech)
+  current: {
+    color: 'inherit',
+  },
+})

package/src/components/Button/Button.tsx

@@ -2,11 +2,12 @@ import type {ReactNode, Ref} from 'react'
 import {html} from 'react-strict-dom'
 import {isNative} from '../../platform'
 import {mergeRefs} from '../../shared/mergeRefs'
+import type {ControlSize} from '../../shared/types'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {styles} from './styles.css'
 
 export type ButtonVariant = 'primary' | 'secondary' | 'inverseSecondary' | 'link' | 'danger'
-export type ButtonSize = 'default' | 'small'
+export type ButtonSize = ControlSize
 
 interface ButtonProps {
   variant?: ButtonVariant

package/src/components/Button/styles.css.ts

@@ -4,6 +4,7 @@ import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
 import {typography} from '@duro-app/tokens/tokens/typography.css'
 import {duration, easing} from '@duro-app/tokens/tokens/motion.css'
 import {borders} from '@duro-app/tokens/tokens/borders.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 
 export const styles = css.create({
   base: {
@@ -62,6 +63,8 @@ export const styles = css.create({
     paddingLeft: spacing.sm,
     paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
+    // Every small control is at least controlSm tall, whatever it holds (5.6).
+    minHeight: sizes.controlSm,
   },
   primary: {
     backgroundColor: {