Version Packages

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@tailor-platform/app-shell@1.17.0

Minor Changes

• 31e0524: Add semantic colour roles (--{info|success|warning|danger|neutral}-{surface|surface-hover|border|solid|solid-hover|text|contrast|indicator}), available as Tailwind colours. --status-* and --alert-* now alias these roles, and Badge reads them, so text on surface and contrast on solid are at least 4.5:1 in the default palette, in light and dark mode.

  <span className="rounded-md bg-success-surface px-2 py-0.5 text-success-text">Paid</span>

  A gray scale (--primitive-gray-{50..950}, Tailwind neutral) is also added; the default palette's text and line tokens read it, with no value change.

  Visible changes in the default palette:

  • --status-* and --alert-* are deprecated and will be removed in the next major. bg-status-* and bg-alert-* keep working; new code uses the roles.
  • bg-status-* and bg-alert-* change values. --status-default now follows --muted-foreground (it was a fixed #737373), so it is theme-dependent and translucent in the cream and bloom palettes.
  • --status-* are fill colours; do not use them as text (below 4.5:1 in dark mode). Use text-{intent}-text instead (for example text-status-completed becomes text-success-text).
  • Badge, Alert, CsvImporter and MetricCard read the semantic roles. To recolour them, override --{intent}-*; overriding --status-* or --alert-* no longer changes these components.
  • Badge error and subtle-error, and Alert error, follow --danger-* instead of --destructive. Button and text-destructive still follow --destructive.
  • The warning Badge text is dark instead of white. Alert description text now has the same colour as the Alert title.

• ce4bcf9: Add padding="none" to Card.Content for edge-to-edge content such as a Table, DataTable or divided list.

  <Card.Root>
    <Card.Header title="Line items" />
    <Card.Content padding="none">
      <DataTable.Root value={table}>
        <DataTable.Table />
      </DataTable.Root>
    </Card.Content>
  </Card.Root>

  Cells keep their own 24px inset, so the first column lines up with the card title. Row backgrounds stay inside the card's rounded corners, and a nested DataTable drops its own border. This replaces the className="px-0!" workaround.

• ecc2f57: Add SidebarSection for grouping flat sidebar navigation items under a static heading. Unlike SidebarGroup, a section is neither collapsible nor navigable, and its items keep top-level styling. In the icon rail the heading is hidden. Combine it with SidebarSeparator to add dividers.

  SidebarSeparator now adds 4px of space above the line and 8px below it, so the items after a separator read as a new section. Sidebars that already use SidebarSeparator get this extra spacing.

  <DefaultSidebar>
    <SidebarItem to="/overview" />
    <SidebarSeparator />
    <SidebarSection title="Services">
      <SidebarItem to="/ai-gateways" />
      <SidebarItem to="/applications" />
    </SidebarSection>
  </DefaultSidebar>

• 94f6a5a: Add bulk actions to DataTable. Pass selectionActions to useDataTable and, while rows are selected, DataTable.Footer becomes a bulk-action bar: the selection count, your actions, and a Clear button, with pagination kept alongside. Give an action canApply to scope it to the selected rows it can act on — the bar shows that count, disables the action at zero, and hands only those rows to onClick. Return the promise from onClick and the bar waits for it: actions are disabled with a spinner meanwhile, and the selection clears once it resolves (set keepSelection for actions such as an export). An action that confirms first can hand its later request back through the run helper — run(deleteRows(rows)) from the dialog's confirm button — and get the same handling. Clear is disabled while a request is pending.

  const table = useDataTable({
    columns,
    data,
    control,
    selectionActions: [
      {
        id: "activate",
        label: "Activate",
        canApply: (vendor) => vendor.status === "inactive",
        onClick: (vendors) => activate(vendors),
      },
    ],
  });

  RowAction and SelectionAction now share a base type, DataTableAction (id, label, icon, variant, canApply), so one definition can be spread into both rowActions and selectionActions. RowAction gains canApply; its isDisabled, which reads the other way round, is deprecated but still honoured.

  Selection now also remembers the rows it holds across pages (selectedRows), and a non-empty selectionActions enables selection on its own. The first three actions render as buttons and the rest collapse into a "More actions" menu. On a page-scrolling table the bar sticks to the bottom of the viewport until the table's end scrolls into view.

  Behavior change: the header checkbox is now page-scoped in both directions. Checking it adds the current page's rows to the selection instead of replacing it, and unchecking it removes only the current page's rows instead of clearing every page. clearSelection still empties everything (and is now a no-op when nothing is selected), and the new deselectAllRows is the page-scoped counterpart of selectAllRows.

  The interaction/multi-select pattern in the bundled app-shell-patterns skill is rewritten around selectionActions, replacing the floating bar on a hand-built table.

• 403eebe: Add typography role tokens. A role sets font size, line height, font weight, and letter spacing together. Ten text-* utilities are available after you import @tailor-platform/app-shell/styles: text-heading-lg, text-heading-md, text-heading-sm, text-body-md, text-body-sm, text-label-md, text-label-sm, text-code-sm, text-body-md-relaxed, and text-body-sm-relaxed.

  <h2 className="text-heading-md">Purchase orders</h2>
  <p className="text-body-md text-muted-foreground">Orders sent to suppliers this month.</p>

  Each role reads four CSS variables named --app-shell-type-<role>-<size|line-height|weight|letter-spacing>, which you can override on :root. AppShell's cn() now keeps a role together with a text color class, for example in className="text-label-md text-muted-foreground" passed to an AppShell component. If your app has its own tailwind-merge setup, see the Typography section of the styling guide.

• 95bc8f2: Add showDayOfWeek to DateField, DatePicker, and DateRangePicker. It appends the locale's short day of the week where the locale places it (2025/12/19(金), Fri, 12/19/2025). It is read-only and derived from the entered date. While a date segment is mid-entry it keeps showing the previous day of the week, so typing 25 never flashes the 2nd's. Screen readers hear the full day name with each date segment's value.

  <DatePicker aria-label="Closing date" showDayOfWeek />

Patch Changes

• 529b3ac: Fix the form/modal pattern in the docs and the bundled app-shell-patterns skill. Both examples built the dialog body on a native <form onSubmit> with new FormData(event.currentTarget), which skips Form validation and server-error routing and contradicts the pattern's own rules. They now use Form with onFormSubmit(values), plain <Field.Control />, and a type="button" Cancel. Refs tailor-inc/platform-planning#2000.

• 8bf9540: Fix DataTable.Filters datetime values to serialize as RFC 3339 instants and display existing instants in the configured timezone (or the user's local timezone when unset).

  Document that apps should set AppShell.timeZone for shared business-day filtering; locale does not determine the timezone. Clarify date-only versus datetime fields and the handling of programmatic and persisted filter values.

• 8bf9540: Normalize datetime filters in metadata-backed collection hooks before initial queries and filter updates, including URL and saved-view restoration. Interpret timezone-less values in the AppShell timezone and reject invalid datetime values without dropping filter constraints; hooks without metadata remain unchanged.

  Use the AppShell timezone consistently for built-in DataTable date cells and cell-menu filters, while preserving date-only calendar values. Reuse date formatters per column across rows and unchanged-column renders instead of constructing them for every cell.

• 4c366d1: Fix 12-hour time display in DateField, DatePicker and DateRangePicker. With granularity set to hour, minute or second and a 12-hour cycle (hourCycle={12}, or a 12-hour locale such as en-US), afternoon values showed as e.g. "18:00 AM", and editing any segment saved them 12 hours early (06:xx). PM values now show as "06:00 PM", midnight and noon as 12 AM / 12 PM, and edits keep the correct hour. Changing hourCycle (or a locale change that flips the default cycle) on a mounted field now re-encodes the time segments instead of misreading them. Refs tailor-inc/platform-planning#2039.

• 430fd6a: DatePicker and DateRangePicker now open their calendar on the current field value. Previously a date typed into the segments (or set from outside while closed) was ignored, so the popover opened on today's month — or on whatever month was last viewed — and arrow-key + Enter selected relative to that. The calendar now focuses the selected/typed date on every open (the range start, else a typed end), falling back to today when empty.

• 5481215: Fix the hook documentation and the bundled app-shell-patterns skill where the examples did not match the real return types. Both useAppShell() and useAppShellData() expose a contextData property (not context, and not the data object itself); useAppShell() also returns the configuration. useAppShellConfig() returns { title, icon, favicon, appInfo, configurations } with modules under configurations, and useToast() returns the sonner toast function (toast("Saved"), toast.success(...)) rather than { toast } with a { title, description, variant } object. Copying the old examples produced TS2339 and TS2353 errors.

• d8d4ec3: Fix the selected sidebar item ignoring --sidebar-accent-foreground. SidebarItem, linked SidebarGroup headers, and the auto-generated sidebar now mark the current page's button as active (data-active="true"), so its background, weight, and text colour all follow the sidebar accent tokens. Built-in themes look the same; themes that set a distinct --sidebar-accent-foreground now show it without a custom render workaround. Refs tailor-inc/platform-planning#1946.

• 8e58b98: Fix localized breadcrumb overrides by recognizing translation functions created by labels.t() and resolving callback-returned LocalizedString values using the current AppShell locale. This applies to modules, resources, and file-based page metadata while preserving existing URL-segment callbacks.

  Use breadcrumbTitle: labels.t("orders") directly, or breadcrumbTitle: (segment) => labels.t("order", { id: segment }) for dynamic labels, without as string. The existing () => labels.t(key) form remains supported.

[github-actions]

Code Metrics Report

	main (d8d4ec3)	#579 (5cf1d06)	+/-
Coverage	88.6%	88.6%	0.0%
Test Execution Time	1m53s	2m12s	+19s

Details

  |                     | main (d8d4ec3) | #579 (5cf1d06) | +/-  |
  |---------------------|----------------|----------------|------|
  | Coverage            |          88.6% |          88.6% | 0.0% |
  |   Files             |            208 |            208 |    0 |
  |   Lines             |           6263 |           6263 |    0 |
  |   Covered           |           5552 |           5552 |    0 |
- | Test Execution Time |          1m53s |          2m12s | +19s |

Code coverage of files in pull request scope (100.0% → 100.0%, patch 100.0%)

Files	Coverage	+/-	Patch Coverage	Status
packages/core/package.json	100.0%	0.0%	100.0%	modified

---

Reported by octocov