@jovertical/mise-design-system 1.0.0 → 1.1.0

package/skills/mise/components/overlays.md

@@ -0,0 +1,291 @@
+<!-- Generated by pnpm build:skill. Do not edit by hand. -->
+
+# Overlays
+
+## AlertDialog
+
+`import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from '@jovertical/mise-design-system'`
+
+For a confirmation the operator cannot dismiss by clicking outside it: `Dialog` closes on an outside click, this does not. Reach for it when the action is destructive or hard to undo; everything else wants `Dialog`.
+
+Also takes: bits-ui `AlertDialog.Root` props.
+
+### `AlertDialogAction`
+
+Also takes: bits-ui `AlertDialog.Action` props except `child`; `variant`, `tone`, `size` from `Button`.
+
+### `AlertDialogCancel`
+
+Also takes: bits-ui `AlertDialog.Cancel` props except `child`; `variant`, `size` from `Button`.
+
+### `AlertDialogContent`
+
+The card's 24px radius, a ring and `shadow-xl`: it is a dialog, and was drawn like a menu. `size="sm"` for a short confirmation with no description.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `'default' \| 'sm'` | `'default'` |  |
+| `portalProps` | `AlertDialogPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `AlertDialog.Content` props.
+
+### `AlertDialogDescription`
+
+Also takes: bits-ui `AlertDialog.Description` props.
+
+### `AlertDialogFooter`
+
+Also takes: every `<div>` attribute.
+
+### `AlertDialogHeader`
+
+Also takes: every `<div>` attribute.
+
+### `AlertDialogMedia`
+
+Also takes: every `<div>` attribute.
+
+### `AlertDialogOverlay`
+
+Also takes: bits-ui `AlertDialog.Overlay` props.
+
+### `AlertDialogPortal`
+
+Also takes: bits-ui `AlertDialog.Portal` props.
+
+### `AlertDialogTitle`
+
+Also takes: bits-ui `AlertDialog.Title` props.
+
+### `AlertDialogTrigger`
+
+Also takes: bits-ui `AlertDialog.Trigger` props.
+
+## Dialog
+
+`import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from '@jovertical/mise-design-system'`
+
+Also takes: bits-ui `Dialog.Root` props.
+
+### `DialogClose`
+
+Also takes: bits-ui `Dialog.Close` props.
+
+### `DialogContent`
+
+A ring rather than a border, and `shadow-xl` rather than `shadow-lg`: a dialog sits above everything, so it casts the deeper shadow.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `portalProps` | `WithoutChildrenOrChild<DialogPrimitive.PortalProps>` |  |  |
+| `children` (required) | `Snippet` |  |  |
+| `showCloseButton` | `boolean` | `true` |  |
+| `size` | `DialogSize` | `'lg'` |  |
+
+Also takes: bits-ui `Dialog.Content` props except `children`, `child`.
+
+### `DialogDescription`
+
+Also takes: bits-ui `Dialog.Description` props.
+
+### `DialogFooter`
+
+Also takes: every `<div>` attribute.
+
+### `DialogHeader`
+
+Also takes: every `<div>` attribute.
+
+### `DialogOverlay`
+
+Also takes: bits-ui `Dialog.Overlay` props.
+
+### `DialogPortal`
+
+Also takes: bits-ui `Dialog.Portal` props.
+
+### `DialogTitle`
+
+Also takes: bits-ui `Dialog.Title` props.
+
+### `DialogTrigger`
+
+Also takes: bits-ui `Dialog.Trigger` props.
+
+Types: `DialogSize`.
+
+## Drawer
+
+`import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '@jovertical/mise-design-system'`
+
+A panel dragged in from an edge. Slides from the bottom by default: the phone sheet, for a screen that wants a bottom sheet rather than a centred `Dialog`. `direction="right"` makes it a side panel, though `Sheet` is the usual one there.
+
+Also takes: bits-ui `Drawer.Root` props.
+
+### `DrawerClose`
+
+Also takes: bits-ui `Drawer.Close` props.
+
+### `DrawerContent`
+
+The panel, its overlay and, from the bottom, the drag handle.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `portalProps` | `DrawerPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `Drawer.Content` props.
+
+### `DrawerDescription`
+
+Also takes: bits-ui `Drawer.Description` props.
+
+### `DrawerFooter`
+
+Also takes: every `<div>` attribute.
+
+### `DrawerHeader`
+
+Also takes: every `<div>` attribute.
+
+### `DrawerOverlay`
+
+Also takes: bits-ui `Drawer.Overlay` props.
+
+### `DrawerPortal`
+
+Also takes: bits-ui `Drawer.Portal` props.
+
+### `DrawerTitle`
+
+Also takes: bits-ui `Drawer.Title` props.
+
+### `DrawerTrigger`
+
+Also takes: bits-ui `Drawer.Trigger` props.
+
+## Hint
+
+`import { Hint } from '@jovertical/mise-design-system'`
+
+The `?` that explains the thing it sits beside.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` | `string` |  | Announced in place of the glyph, so name what is being explained ("How stock health is calculated", not "Help"). |
+| `children` (required) | `Snippet` |  | The explanation, shown in the tooltip. |
+
+Also takes: every `<button>` attribute except `children`.
+
+## HoverCard
+
+`import { HoverCard, HoverCardContent, HoverCardTrigger } from '@jovertical/mise-design-system'`
+
+A preview on hover or focus, for a fact worth a glance without leaving the page: a person's details behind their name, a linked record's summary. Reach for `Tooltip` instead when the content is a single short label.
+
+Also takes: bits-ui `HoverCard.Root` props.
+
+### `HoverCardContent`
+
+The floating card. A ring rather than a border, and `rounded-2xl` rather than shadcn's `rounded-md`: 6px was the smallest radius in a system whose cards are 24px.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `portalProps` | `HoverCardPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `HoverCard.Content` props.
+
+### `HoverCardTrigger`
+
+Also takes: bits-ui `HoverCard.Trigger` props.
+
+## Popover
+
+`import { Popover, PopoverContent, PopoverTrigger } from '@jovertical/mise-design-system'`
+
+A positioned panel with no semantics of its own; whatever goes in it brings its meaning. Reach for it when the content is not a list of commands: a filter, a form, a preview, a feed. Commands want `DropdownMenu`.
+
+Also takes: bits-ui `Popover.Root` props.
+
+### `PopoverContent`
+
+The floating panel. It is not a `flex flex-col gap-4` like the reference's settings panel: most popovers are menus, filters or list panels that pass `p-0` and own their layout, and `p-0` cancels padding but not a gap. Add `flex flex-col gap-4` at the call site for the form case.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `matchTriggerWidth` | `boolean` | `false` | The panel takes the trigger's exact width instead of its own `w-72`, and drops the padding: the shape a Select-like popover wants, where the content inside owns its own padding. |
+| `portalProps` | `PopoverPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `Popover.Content` props.
+
+### `PopoverTrigger`
+
+Also takes: bits-ui `Popover.Trigger` props.
+
+## Sheet
+
+`import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@jovertical/mise-design-system'`
+
+A panel anchored to the viewport's edge, `side="right"` by default: the desktop side panel for a quick view without leaving the list.
+
+Also takes: bits-ui `Sheet.Root` props.
+
+### `SheetClose`
+
+Also takes: bits-ui `Sheet.Close` props.
+
+### `SheetContent`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `side` | `SheetSide` | `'right'` |  |
+| `portalProps` | `SheetPrimitive.PortalProps` |  |  |
+| `children` | `Snippet` |  |  |
+
+Also takes: bits-ui `Sheet.Content` props except `children`, `child`.
+
+### `SheetDescription`
+
+Also takes: bits-ui `Sheet.Description` props.
+
+### `SheetFooter`
+
+Also takes: every `<div>` attribute.
+
+### `SheetHeader`
+
+Also takes: every `<div>` attribute.
+
+### `SheetTitle`
+
+Also takes: bits-ui `Sheet.Title` props.
+
+### `SheetTrigger`
+
+Also takes: bits-ui `Sheet.Trigger` props.
+
+Types: `SheetSide`.
+
+## Tooltip
+
+`import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@jovertical/mise-design-system'`
+
+Also takes: bits-ui `Tooltip.Root` props.
+
+### `TooltipContent`
+
+The panel sits on `bg-popover` with the ring and shadow every floating panel here carries, not the inverted `bg-foreground text-background` tooltip idiom. The inversion looks deliberate in light mode and renders a page-bright block over a dark UI in dark mode. The arrow follows the surface and carries no ring of its own.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `portalProps` | `TooltipPrimitive.PortalProps` |  |  |
+
+Also takes: bits-ui `Tooltip.Content` props.
+
+### `TooltipProvider`
+
+Also takes: bits-ui `Tooltip.Provider` props.
+
+### `TooltipTrigger`
+
+Also takes: bits-ui `Tooltip.Trigger` props.

package/skills/mise/components/typography.md

@@ -0,0 +1,36 @@
+<!-- Generated by pnpm build:skill. Do not edit by hand. -->
+
+# Typography
+
+## Heading
+
+`import { Heading } from '@jovertical/mise-design-system'`
+
+A heading that is not a card's, a dialog's or a page's: those have `CardTitle`, `DialogTitle` and `PageHeader`. This is a section inside a page body, so the face, the weight and the step come from one place. A figure is not a heading.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `as` | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h2'` | The level, for the document outline. `h2` by default; a page's `h1` is `PageHeader`'s. Choose it by where the heading sits, never by how big it should look; that is `size`. |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | `sm` 16px (a card's title), `md` 18px (a dialog's), `lg` 20px (a section opening a page body). |
+
+Also takes: every `<h1>`–`<h6>` attribute.
+
+## Text
+
+`import { Text } from '@jovertical/mise-design-system'`
+
+Body text, set by what it is doing rather than by the classes that draw it: the size, the muting, the weight, the figures, and nothing else. No face, no arbitrary size, no colour outside `muted` and the shared `Tone`. `as` rather than `asChild`, because the element is the one semantic choice text makes.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `as` | `'span' \| 'p' \| 'div'` | `'span'` | `span` by default; `p` for a sentence that stands as a paragraph, `div` for text holding a block. |
+| `size` | `'xs' \| 'sm'` |  | `xs` 12px, `sm` 14px. Omit it to inherit the line's size. A larger step is a heading. |
+| `muted` | `boolean` | `false` | De-emphasis, `text-muted-foreground`: a hint, a timestamp. Not a status. |
+| `tone` | `'neutral' \| 'primary' \| 'info' \| 'success' \| 'warning' \| 'critical'` |  | Status ink, for text that carries a state. Wins over `muted`. |
+| `weight` | `'normal' \| 'medium' \| 'semibold'` |  | `medium` for a name or a value, `semibold` for a total, `normal` to undo an inherited weight. |
+| `numeric` | `boolean` | `false` | `tabular-nums`, so a column of figures lines up. |
+| `truncate` | `boolean` | `false` | One line, ellipsised. Needs a width to truncate against. |
+
+Also takes: every HTML attribute.
+
+Types: `TextSize` (`'xs' | 'sm'`), `TextWeight` (`'normal' | 'medium' | 'semibold'`).

package/skills/mise/recipes/dashboard-page.md

@@ -0,0 +1,40 @@
+# Recipe: a dashboard page
+
+A day's dashboard for one location: four headline figures, orders by hour, and sales by
+location ranked against target. The code is [dashboard-page.svelte](dashboard-page.svelte), a
+page component that type-checks against the current mise.
+
+## What it is made of
+
+- `PageLayout` and `PageHeader` ([layout](../components/layout.md)): the page frame, the title,
+  the description and an action on the right.
+- `StatTile` ([data display](../components/data-display.md)), four of them in a plain grid. One
+  figure per tile; `delta` takes a `DeltaBadge`, `visual` a `Sparkline`.
+- `Card` with `ChartContainer` and a LayerChart `AreaChart`
+  ([data display](../components/data-display.md)) for the trend.
+- `Card` with `MetricBar`s, `rank` numbering them, for the ranking.
+
+## Decisions worth copying
+
+- **`StatTile`, not `MetricRow`, for the headline row.** A tile states one figure and qualifies
+  it; `MetricRow` is one subject with several figures and a bar under them.
+- **The grid is the app's one class.** `grid gap-4 sm:grid-cols-2 lg:grid-cols-4` is layout,
+  which is what `class` is for. The tiles bring their own surface; do not wrap them in `Card`.
+- **Figures arrive formatted.** `value="$14,527"` with `exactValue="$14,527.40"` on hover; mise
+  never formats money.
+- **`invert` on a delta where falling is good.** Refunds up 3.1% is bad news, so the refunds
+  delta is `invert` and reads as a warning.
+- **Chart colours come from the config**: `--chart-1` for the series, read back as
+  `--color-orders`. The chart follows the theme and dark mode with no extra work.
+
+## The app shell
+
+The `Sidebar` belongs to the app's layout, not to each page: a layout component renders
+`SidebarProvider`, `Sidebar` and an inset where pages like this one go. See `Sidebar` in
+[navigation](../components/navigation.md) for its parts.
+
+## Dependencies
+
+The chart imports `layerchart`, `d3-scale` and `d3-shape` directly. mise depends on them, but a
+strict package manager (pnpm) only lets the app import what it declares, so add them to the app:
+`pnpm add layerchart d3-scale d3-shape`.

package/skills/mise/recipes/dashboard-page.svelte

@@ -0,0 +1,132 @@
+<!--
+  A day's dashboard for one location: headline figures, the trend, and a
+  ranking. Everything is a mise component; the app's only classes are layout
+  (the tile grid). Figures arrive formatted: mise has no opinion about
+  currencies or locales.
+-->
+<script lang="ts">
+  import {
+    Button,
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+    ChartContainer,
+    type ChartConfig,
+    ChartTooltip,
+    chartAreaFillOpacity,
+    chartGrid,
+    chartLineStrokeWidth,
+    DeltaBadge,
+    MetricBar,
+    PageHeader,
+    PageLayout,
+    Sparkline,
+    StatTile,
+  } from '@jovertical/mise-design-system'
+  import { scalePoint } from 'd3-scale'
+  import { curveMonotoneX } from 'd3-shape'
+  import { AreaChart } from 'layerchart'
+
+  const byHour = [
+    { hour: '8am', orders: 12 },
+    { hour: '10am', orders: 31 },
+    { hour: '12pm', orders: 58 },
+    { hour: '2pm', orders: 44 },
+    { hour: '4pm', orders: 37 },
+    { hour: '6pm', orders: 52 },
+  ]
+
+  const config = {
+    orders: { label: 'Orders', color: 'var(--chart-1)' },
+  } satisfies ChartConfig
+
+  const locations = [
+    { name: 'Riverside', sales: '$4,812', percent: 96 },
+    { name: 'Harbour', sales: '$4,140', percent: 83 },
+    { name: 'North yard', sales: '$3,365', percent: 67 },
+    { name: 'Market street', sales: '$2,210', percent: 44 },
+  ]
+</script>
+
+{#snippet salesDelta()}
+  <DeltaBadge value={12.4} />
+{/snippet}
+{#snippet salesTrend()}
+  <Sparkline data={[18, 22, 21, 27, 25, 31, 34]} tone="success" height={36} />
+{/snippet}
+{#snippet refundsDelta()}
+  <DeltaBadge value={3.1} invert />
+{/snippet}
+{#snippet exportButton()}
+  <Button variant="outline">Export</Button>
+{/snippet}
+{#snippet tooltip()}
+  <ChartTooltip indicator="dot" />
+{/snippet}
+
+<PageLayout>
+  <PageHeader
+    title="Today"
+    description="Riverside, since the register opened at 7:30am."
+    actions={exportButton}
+  />
+
+  <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+    <StatTile
+      label="Sales"
+      value="$14,527"
+      exactValue="$14,527.40"
+      delta={salesDelta}
+      visual={salesTrend}
+    />
+    <StatTile label="Orders" value={234} unit="orders" />
+    <StatTile label="Average basket" value="$62.08" unit="per order" />
+    <StatTile label="Refunds" value="$318" delta={refundsDelta} tone="warning" />
+  </div>
+
+  <Card>
+    <CardHeader>
+      <CardTitle>Orders by hour</CardTitle>
+      <CardDescription>Placed at every register, all channels.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <ChartContainer class="aspect-auto h-[240px] w-full" {config}>
+        <AreaChart
+          data={byHour}
+          x="hour"
+          xScale={scalePoint().padding(0.2)}
+          grid={chartGrid}
+          yNice={4}
+          series={[{ key: 'orders', label: 'Orders', color: 'var(--color-orders)' }]}
+          props={{
+            area: {
+              curve: curveMonotoneX,
+              fillOpacity: chartAreaFillOpacity,
+              line: { strokeWidth: chartLineStrokeWidth },
+            },
+          }}
+          {tooltip}
+        />
+      </ChartContainer>
+    </CardContent>
+  </Card>
+
+  <Card>
+    <CardHeader>
+      <CardTitle>Sales by location</CardTitle>
+      <CardDescription>Against each location's daily target.</CardDescription>
+    </CardHeader>
+    <CardContent class="flex flex-col gap-4">
+      {#each locations as location, index (location.name)}
+        <MetricBar
+          rank={index + 1}
+          label={location.name}
+          value={location.sales}
+          percent={location.percent}
+        />
+      {/each}
+    </CardContent>
+  </Card>
+</PageLayout>

package/skills/mise/recipes/data-table.md

@@ -0,0 +1,39 @@
+# Recipe: a data table
+
+Today's orders, with search, a status filter, sortable columns, row selection for a bulk action,
+and a menu of actions on each row. The code is [data-table.svelte](data-table.svelte), which
+type-checks against the current mise.
+
+## What it is made of
+
+- `DataTable` ([data display](../components/data-display.md)): the card, the table, the empty
+  state and the closing strip with the row count.
+- `dataTableColumns<Order>()` to build typed columns, `DataTableColumnHeader` for a sortable
+  header, and `renderSnippet` or `renderComponent` from `@tanstack/svelte-table` for cells.
+- `DataTableToolbar` above the rows: the search, the faceted status filter, the column toggle,
+  and the app's bulk actions in `actions`.
+- `DataTableRowActions` with `DropdownMenuItem`s ([actions](../components/actions.md)): the ⋯
+  menu at the end of each row.
+- `Badge` with a `tone` per status, and `Empty` for "no orders match".
+
+## Decisions worth copying
+
+- **`getRowId` whenever rows can be selected.** Without it rows are keyed by index, and a
+  selection survives neither a sort nor a new page.
+- **A faceted filter needs a `filterFn`.** The status filter sets a list of values; the column's
+  `filterFn` keeps a row whose status is in it.
+- **Status is data, tone is presentation.** A `STATUS_TONE` map turns each status into a `tone`,
+  in one place.
+- **Name the row in its actions label** ("Actions for order #1042"), so a screen reader moving
+  down the column hears which row the menu belongs to.
+- **The destructive action is last** and uses `variant="destructive"`; it is disabled, not
+  hidden, where it does not apply.
+- **Server data:** for a long list, keep the rows on the server. Pass `filters` and
+  `onFiltersChange` to send the search, filters and sort with the request, and `hasNextPage`
+  with `fetchNextPage` for load-more.
+
+## Dependencies
+
+The columns import `renderSnippet` and `renderComponent` from `@tanstack/svelte-table`. mise
+depends on it, but a strict package manager only lets the app import what it declares:
+`pnpm add @tanstack/svelte-table`.

package/skills/mise/recipes/data-table.svelte

@@ -0,0 +1,130 @@
+<!--
+  Today's orders: search, a status filter, sortable columns, row selection for
+  a bulk action, and a menu of actions on every row. DataTable owns the table
+  (TanStack Table underneath); the app owns the rows, the columns and what each
+  action does.
+-->
+<script lang="ts">
+  import {
+    Badge,
+    Button,
+    DataTable,
+    DataTableColumnHeader,
+    DataTableRowActions,
+    DataTableToolbar,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    dataTableColumns,
+    Empty,
+    EmptyDescription,
+    EmptyHeader,
+    EmptyTitle,
+    type Tone,
+  } from '@jovertical/mise-design-system'
+  import { type RowSelectionState, renderComponent, renderSnippet } from '@tanstack/svelte-table'
+
+  type Order = {
+    id: string
+    number: string
+    location: string
+    status: 'open' | 'ready' | 'collected' | 'refunded'
+    /** Formatted by the app; mise has no opinion about currencies. */
+    total: string
+  }
+
+  const orders: Order[] = [
+    { id: '1', number: '#1042', location: 'Riverside', status: 'open', total: '$48.20' },
+    { id: '2', number: '#1043', location: 'Riverside', status: 'ready', total: '$12.75' },
+    { id: '3', number: '#1044', location: 'Harbour', status: 'collected', total: '$96.00' },
+    { id: '4', number: '#1045', location: 'North yard', status: 'refunded', total: '$22.10' },
+  ]
+
+  const STATUS_TONE: Record<Order['status'], Tone> = {
+    open: 'info',
+    ready: 'success',
+    collected: 'neutral',
+    refunded: 'warning',
+  }
+
+  const STATUS_OPTIONS = [
+    { label: 'Open', value: 'open' },
+    { label: 'Ready', value: 'ready' },
+    { label: 'Collected', value: 'collected' },
+    { label: 'Refunded', value: 'refunded' },
+  ]
+
+  let selection = $state<RowSelectionState>({})
+  const selectedCount = $derived(Object.keys(selection).length)
+
+  const column = dataTableColumns<Order>()
+
+  const columns = column.columns([
+    column.accessor('number', {
+      header: ({ column }) => renderComponent(DataTableColumnHeader, { column, title: 'Order' }),
+    }),
+    column.accessor('location', {
+      header: ({ column }) => renderComponent(DataTableColumnHeader, { column, title: 'Location' }),
+    }),
+    column.accessor('status', {
+      header: ({ column }) => renderComponent(DataTableColumnHeader, { column, title: 'Status' }),
+      cell: ({ row }) => renderSnippet(statusCell, row.original),
+      // The status filter passes a list of values; keep rows whose status is in it.
+      filterFn: (row, id, values: string[]) => values.includes(row.getValue(id)),
+    }),
+    column.accessor('total', { header: 'Total', enableSorting: false }),
+    column.display({
+      id: 'actions',
+      cell: ({ row }) => renderSnippet(actionsCell, row.original),
+    }),
+  ])
+</script>
+
+{#snippet statusCell(order: Order)}
+  <Badge tone={STATUS_TONE[order.status]} class="capitalize">{order.status}</Badge>
+{/snippet}
+
+{#snippet actionsCell(order: Order)}
+  <DataTableRowActions label={`Actions for order ${order.number}`}>
+    <DropdownMenuItem>View order</DropdownMenuItem>
+    <DropdownMenuItem>Print receipt</DropdownMenuItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuItem variant="destructive" disabled={order.status === 'refunded'}>
+      Refund
+    </DropdownMenuItem>
+  </DataTableRowActions>
+{/snippet}
+
+{#snippet noOrders()}
+  <Empty>
+    <EmptyHeader>
+      <EmptyTitle>No orders match</EmptyTitle>
+      <EmptyDescription>Clear the search or the status filter.</EmptyDescription>
+    </EmptyHeader>
+  </Empty>
+{/snippet}
+
+{#snippet bulkActions()}
+  {#if selectedCount > 0}
+    <Button variant="outline" size="sm">Print {selectedCount} receipts</Button>
+  {/if}
+{/snippet}
+
+<DataTable
+  title="Today's orders"
+  {columns}
+  data={orders}
+  defaultSort="-number"
+  getRowId={(order) => order.id}
+  enableRowSelection
+  bind:rowSelection={selection}
+  emptyState={noOrders}
+>
+  {#snippet toolbar(table)}
+    <DataTableToolbar
+      {table}
+      search={{ placeholder: 'Search orders…' }}
+      filters={[{ columnId: 'status', title: 'Status', options: STATUS_OPTIONS }]}
+      actions={bulkActions}
+    />
+  {/snippet}
+</DataTable>