@tailor-platform/app-shell 1.7.0 → 1.9.0

package/dist/app-shell.d.ts

@@ -2,9 +2,12 @@ import { AuthClient } from '@tailor-platform/auth-public-client';
 import { Autocomplete as Autocomplete_2 } from '@base-ui/react/autocomplete';
 import { AutocompleteRootProps } from '@base-ui/react/autocomplete';
 import { Avatar as Avatar_2 } from '@base-ui/react/avatar';
+import { CalendarDate } from '@internationalized/date';
+import { CalendarDateTime } from '@internationalized/date';
 import { ClassProp } from 'class-variance-authority/types';
 import { Combobox as Combobox_2 } from '@base-ui/react/combobox';
 import { CSSProperties } from 'react';
+import { DateValue } from '@internationalized/date';
 import { Dialog as Dialog_2 } from '@base-ui/react/dialog';
 import { Drawer } from '@base-ui/react/drawer';
 import { FC } from 'react';
@@ -12,15 +15,22 @@ import { Field as Field_2 } from '@base-ui/react/field';
 import { Fieldset as Fieldset_2 } from '@base-ui/react/fieldset';
 import { Form as Form_2 } from '@base-ui/react/form';
 import { getFilter } from '@base-ui/react/internals/filter';
+import { getLocalTimeZone } from '@internationalized/date';
 import { JSX } from 'react/jsx-runtime';
 import { Link } from 'react-router';
 import { LoaderFunctionArgs } from 'react-router';
 import { Menu as Menu_2 } from '@base-ui/react/menu';
+import { parseAbsolute } from '@internationalized/date';
+import { parseDate } from '@internationalized/date';
+import { parseDateTime } from '@internationalized/date';
+import { parseZonedDateTime } from '@internationalized/date';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { Select as Select_2 } from '@base-ui/react/select';
 import { StandardSchemaV1 } from '@standard-schema/spec';
 import { Tabs as Tabs_2 } from '@base-ui/react/tabs';
+import { Time } from '@internationalized/date';
 import { toast } from 'sonner';
 import { Tooltip as Tooltip_2 } from '@base-ui/react/tooltip';
 import { useLocation } from 'react-router';
@@ -29,6 +39,7 @@ import { useParams } from 'react-router';
 import { useRouteError } from 'react-router';
 import { useSearchParams } from 'react-router';
 import { VariantProps } from 'class-variance-authority';
+import { ZonedDateTime } from '@internationalized/date';
 
 /**
  * A single action row in the ActionPanel (icon + label, triggered by onClick).
@@ -215,7 +226,6 @@ export declare type AIGatewayChatMessage = {
 export declare interface AIGatewayChatRequest {
     model: string;
     messages: AIGatewayChatMessage[];
-    stream?: boolean;
     signal?: AbortSignal;
 }
 
@@ -238,6 +248,8 @@ export declare const alertVariants: (props?: ({
     variant?: "error" | "neutral" | "success" | "warning" | "info" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+declare type Anchor = "start" | "center" | "end";
+
 /**
  * Appearance menu. The end-user controls **color theme** (light / dark / system);
  * the color palette/brand is a developer configuration, so it is not shown here.
@@ -786,7 +798,7 @@ export declare const Avatar: {
 export declare type AvatarProps = React_2.ComponentProps<typeof Avatar_2.Root> & VariantProps<typeof avatarVariants>;
 
 export declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare function Badge({ className, variant, children, ...props }: BadgeProps): JSX.Element;
@@ -876,6 +888,49 @@ export declare const buttonVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "icon" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+/**
+ * A standalone inline calendar — no popover, suitable for reporting filters
+ * or date selection within a larger layout.
+ *
+ * @example
+ * ```tsx
+ * import { Calendar } from "@tailor-platform/app-shell";
+ *
+ * <Calendar aria-label="Select date" value={value} onChange={setValue} />
+ * ```
+ */
+export declare function Calendar<T extends DateValue = DateValue>({ value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, isDisabled, isReadOnly, focusedValue, defaultFocusedValue, onFocusChange, firstDayOfWeek, timeZone: timeZoneProp, locale: localeProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: CalendarProps<T>): JSX.Element;
+
+export { CalendarDate }
+
+export { CalendarDateTime }
+
+/**
+ * Public, closed-API standalone calendar — the @internationalized/date + Base UI
+ * implementation. Same surface as the react-aria variant; only the internals
+ * differ. Consumers never see Base UI or the calendar engine.
+ */
+export declare interface CalendarProps<T extends DateValue = DateValue> {
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T) => void;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    focusedValue?: DateValue;
+    defaultFocusedValue?: DateValue;
+    onFocusChange?: (date: CalendarDate) => void;
+    firstDayOfWeek?: FirstDayOfWeek;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    timeZone?: string;
+    className?: string;
+    /** BCP-47 locale override; defaults to the AppShell formatting locale. */
+    locale?: string;
+}
+
 /**
  * Internal type for tracking OAuth callback handling status.
  */
@@ -1636,8 +1691,9 @@ declare namespace Content_4 {
 }
 
 /** The tooltip popup that displays additional information. */
-declare function Content_5({ className, position, side: _side, align: _align, sideOffset: _sideOffset, children, ...restProps }: React_2.ComponentProps<typeof Tooltip_2.Popup> & {
+declare function Content_5({ className, position, side: _side, align: _align, sideOffset: _sideOffset, noArrow, children, ...restProps }: React_2.ComponentProps<typeof Tooltip_2.Popup> & {
     position?: PositionProps;
+    noArrow?: boolean;
     /** @deprecated Use `position={{ side }}` instead. */
     side?: PositionProps["side"];
     /** @deprecated Use `position={{ align }}` instead. */
@@ -2091,6 +2147,34 @@ declare namespace DataTableToolbar {
     var displayName: string;
 }
 
+declare interface DateBehaviorProps<T extends DateValue> {
+    value?: T | null;
+    defaultValue?: T | null;
+    onChange?: (value: T | null) => void;
+    granularity?: Granularity;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    autoFocus?: boolean;
+    hourCycle?: HourCycle;
+    hideTimeZone?: boolean;
+    placeholderValue?: DateValue;
+    /**
+     * First day of the week (0 = Sunday … 6 = Saturday); defaults to the locale.
+     * Only affects the `w`/`k` (start/end of week) keyboard shortcuts here.
+     */
+    firstDayOfWeek?: FirstDayOfWeek;
+    name?: string;
+    /** Accessible name when no visible `label` is provided (e.g. a compact filter input). */
+    "aria-label"?: string;
+    /** BCP-47 locale override; defaults to the AppShell formatting locale. */
+    locale?: string;
+}
+
 /** Options for `type: "date"` cells. */
 declare interface DateCellOptions {
     /**
@@ -2102,11 +2186,106 @@ declare interface DateCellOptions {
     locale?: string;
 }
 
+/**
+ * A segmented date/time input field with no popover.
+ *
+ * @example
+ * ```tsx
+ * import { DateField } from "@tailor-platform/app-shell";
+ *
+ * <DateField label="Invoice date" />
+ * <DateField label="Created at" granularity="minute" />
+ * ```
+ */
+export declare function DateField<T extends DateValue = DateValue>({ label, description, errorMessage, className, locale: localeProp, value, defaultValue, onChange, granularity, hourCycle, placeholderValue, minValue, maxValue, isDateUnavailable, isDisabled, isReadOnly, isInvalid, isRequired, autoFocus, firstDayOfWeek, name, "aria-label": ariaLabel, }: DateFieldProps<T>): JSX.Element;
+
+declare interface DateFieldMetaProps {
+    label?: LocalizedString;
+    description?: LocalizedString;
+    errorMessage?: LocalizedString;
+    className?: string;
+}
+
+export declare type DateFieldProps<T extends DateValue = DateValue> = DateFieldMetaProps & DateBehaviorProps<T>;
+
 /**
  * Date format options
  */
 declare type DateFormat = "short" | "medium" | "long" | "relative";
 
+/**
+ * A date/time input with a popover calendar.
+ *
+ * Value type is driven by `granularity`:
+ * - `"day"` (default) → `CalendarDate`
+ * - `"hour" | "minute" | "second"` → `CalendarDateTime` (or `ZonedDateTime` when a `timeZone` is set)
+ *
+ * @example
+ * ```tsx
+ * import { DatePicker, today, getLocalTimeZone, type CalendarDate } from "@tailor-platform/app-shell";
+ *
+ * const [date, setDate] = useState<CalendarDate | null>(null);
+ * <DatePicker label="Ship date" value={date} onChange={setDate} />
+ * ```
+ */
+export declare function DatePicker<T extends DateValue = DateValue>({ label, description, errorMessage, className, locale: localeProp, timeZone: timeZoneProp, value, defaultValue, onChange, granularity, hourCycle, placeholderValue, minValue, maxValue, isDateUnavailable, isDisabled, isReadOnly, isInvalid, isRequired, autoFocus, firstDayOfWeek, name, "aria-label": ariaLabel, }: DatePickerProps<T>): JSX.Element;
+
+export declare type DatePickerProps<T extends DateValue = DateValue> = DateFieldProps<T> & {
+    /** IANA timezone; defaults to the AppShell `timeZone`. */
+    timeZone?: string;
+};
+
+export { DateValue }
+
+/**
+ * DefaultHeader — the built-in `SidebarLayout` top bar.
+ *
+ * Renders the sidebar trigger and breadcrumb trail on the left, and the
+ * `actions` cluster (defaulting to the appearance switcher) on the right.
+ *
+ * Use it via the `SidebarLayout.DefaultHeader` namespace to slightly extend the
+ * built-in header without reconstructing it:
+ *
+ * @example
+ * ```tsx
+ * <SidebarLayout
+ *   header={
+ *     <SidebarLayout.DefaultHeader
+ *       actions={[<NotificationBell key="bell" />, <AppearanceSwitcher key="appearance" />]}
+ *     />
+ *   }
+ * />
+ * ```
+ */
+export declare const DefaultHeader: {
+    ({ actions }: DefaultHeaderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type DefaultHeaderProps = {
+    /**
+     * The right-hand cluster of the header. Rendered in a horizontal,
+     * vertically-centered row with consistent spacing — you don't wrap it
+     * yourself. Accepts a single node or an array of nodes.
+     *
+     * **`actions` replaces the entire right-hand cluster, including the
+     * appearance switcher.** When omitted, it defaults to just the
+     * `<AppearanceSwitcher />`. If you pass your own actions and still want the
+     * switcher, include `<AppearanceSwitcher />` in the array (it is a public
+     * export). Passing `actions={[]}` renders an empty right side.
+     *
+     * @default [<AppearanceSwitcher />]
+     * @example
+     * ```tsx
+     * // Add a notification bell, keeping the appearance switcher:
+     * <SidebarLayout.DefaultHeader
+     *   actions={[<NotificationBell key="bell" />, <AppearanceSwitcher key="appearance" />]}
+     * />
+     * ```
+     */
+    actions?: React.ReactNode | React.ReactNode[];
+};
+
 /**
  * Default sidebar component with auto-generated navigation items.
  *
@@ -2914,6 +3093,13 @@ declare type FilterInputForFieldType<TFilterConfigType extends FilterConfig["typ
  */
 export declare type FilterOperator = OperatorForFilterType[FilterConfig["type"]];
 
+/**
+ * Week-start override for the `weekStart`/`weekEnd` shortcuts (and the calendar
+ * grid). Defined here — with the resolver that consumes it — so the field and
+ * calendar engines share one source of truth.
+ */
+declare type FirstDayOfWeek = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+
 /** The table footer section (`<tfoot>`). */
 declare function Footer({ className, ...props }: React_2.ComponentProps<"tfoot">): JSX.Element;
 
@@ -3025,6 +3211,20 @@ export declare type FormProps<FormValues extends Record<string, any> = Record<st
 
 declare type FormSubmitEventDetails = NonNullable<React_2.ComponentProps<typeof Form_2>["onFormSubmit"]> extends (values: any, details: infer D) => any ? D : never;
 
+export { getLocalTimeZone }
+
+/**
+ * Hand-rolled segmented-date-field state.
+ *
+ * This is the logic react-aria's `useDateFieldState` would otherwise provide.
+ * We own it here: locale-driven segment ordering (via `DateFormatter`), per-
+ * segment spinbutton semantics (increment/decrement with context-aware limits),
+ * numeric type-to-fill with auto-advance, and value-type discrimination by
+ * `granularity`. No `Date` ever escapes — `onChange` emits `@internationalized/date`
+ * values (or `null`).
+ */
+declare type Granularity = "day" | "hour" | "minute" | "second";
+
 export declare const Grid: React_2.ForwardRefExoticComponent<Omit<GridProps, "ref"> & React_2.RefAttributes<HTMLDivElement>> & {
     Item: React_2.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
@@ -3237,6 +3437,8 @@ declare type HeadProps = React_2.ComponentProps<"th"> & {
  */
 export declare const hidden: () => GuardResult;
 
+declare type HourCycle = 12 | 24;
+
 export declare type I18nLabels<Def extends Record<string, LabelValue> = Record<string, LabelValue>, L extends string = never> = {
     en: Def;
 } & {
@@ -3286,6 +3488,15 @@ export declare function Input({ className, type, ...props }: InputProps): JSX.El
 
 export declare type InputProps = React_2.ComponentProps<"input">;
 
+/**
+ * Positions content across a time range inside a row.
+ */
+declare function Interval({ start, end, children, id, insetY, className, style, }: TimelineIntervalProps): JSX.Element;
+
+declare namespace Interval {
+    var displayName: string;
+}
+
 /**
  * Check if an object type has no keys.
  */
@@ -3388,7 +3599,7 @@ declare type LabelValue = string | ((props: any) => string);
  * </Layout>
  * ```
  */
-export declare function Layout({ columns, className, style, gap, title, actions, children }: LayoutProps): JSX.Element;
+export declare function Layout({ columns, className, style, gap, title, actions, fill, children, }: LayoutProps): JSX.Element;
 
 export declare namespace Layout {
     var Column: React_2.ForwardRefExoticComponent<ColumnProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -3439,6 +3650,24 @@ export declare interface LayoutProps {
      * @deprecated Use `<Layout.Header actions={...}>` instead.
      */
     actions?: ReactNode[];
+    /**
+     * Fill the available height instead of growing with content.
+     *
+     * When set, the layout stretches to the height of its container
+     * (`flex-1 min-h-0`) and bounds its column row (`minmax(0, 1fr)`), so
+     * children such as `DataTable` can scroll internally while the
+     * `Layout.Header` stays pinned. Without it, the layout grows naturally
+     * and the surrounding content area scrolls.
+     *
+     * Intended for single-row (one `Layout.Column` per breakpoint row) pages;
+     * on stacked mobile layouts with multiple columns the content area
+     * scrolls as usual.
+     *
+     * A `fill` layout also renders a `data-layout-fill` attribute on its root,
+     * which the AppShell content area targets via `:has([data-layout-fill])` to
+     * disable its own scrolling (the fill layout bounds everything internally).
+     */
+    fill?: boolean;
     /** Child elements - Layout.Header and/or Layout.Column components */
     children: ReactNode;
 }
@@ -3452,6 +3681,17 @@ declare namespace Legend {
 
 export { Link }
 
+/**
+ * Draws an orthogonal connector between two row items.
+ *
+ * If either referenced `Timeline.Interval` id is unresolved, nothing is rendered.
+ */
+declare function Link_2({ from, to, fromAnchor, toAnchor, arrow, gap, className, style, strokeWidth, }: TimelineLinkProps): React_2.ReactPortal | null;
+
+declare namespace Link_2 {
+    var displayName: string;
+}
+
 /** Options for `type: "link"` cells. `href` is required. */
 declare interface LinkCellOptions<TRow extends Record<string, unknown>> {
     /**
@@ -3643,6 +3883,11 @@ declare interface NumberCellOptions {
     locale?: string;
 }
 
+export declare type OpenCommandPaletteOptions = {
+    /** Optional initial text to prefill into the palette input. */
+    search?: string;
+};
+
 /**
  * Resolve the operator union for a specific field within a filter type.
  */
@@ -3740,6 +3985,12 @@ declare namespace Panel {
     var displayName: string;
 }
 
+export { parseAbsolute }
+
+export { parseDate }
+
+export { parseDateTime }
+
 /** The row data passed to `onValidate`, after transforms have been applied. */
 export declare type ParsedRow = {
     /** 0-based row index, stable across edits. */
@@ -3748,6 +3999,8 @@ export declare type ParsedRow = {
     data: Record<string, unknown>;
 };
 
+export { parseZonedDateTime }
+
 /**
  * Allow access to the route. Continue to next guard or render component.
  *
@@ -3916,7 +4169,7 @@ declare namespace Root_10 {
  * </Tabs.Root>
  * ```
  */
-declare function Root_11({ className, children, variant, ...props }: RootProps_3): JSX.Element;
+declare function Root_11({ className, children, variant, size, ...props }: RootProps_3): JSX.Element;
 
 declare namespace Root_11 {
     var displayName: string;
@@ -3941,6 +4194,26 @@ declare namespace Root_12 {
     var displayName: string;
 }
 
+/**
+ * Provides the shared time range used by all timeline primitives.
+ *
+ * Example:
+ * ```tsx
+ * <Timeline.Root start={projectStart} end={projectEnd}>
+ *   <Timeline.Viewport axis={axis}>
+ *     <Timeline.Row height={40}>
+ *       <Timeline.Interval start={task.start} end={task.end}>…</Timeline.Interval>
+ *     </Timeline.Row>
+ *   </Timeline.Viewport>
+ * </Timeline.Root>
+ * ```
+ */
+declare function Root_13({ start, end, children, className, style }: TimelineRootProps): JSX.Element;
+
+declare namespace Root_13 {
+    var displayName: string;
+}
+
 declare function Root_2<T extends ActivityCardBaseItem>({ items, title, maxVisible, overflowLabel, groupBy, className, children, }: ActivityCardRootProps<T>): JSX.Element;
 
 declare namespace Root_2 {
@@ -4116,6 +4389,10 @@ declare type RootConfiguration = {
     basePath?: string;
     errorBoundary: ErrorBoundaryComponent;
     locale: string;
+    /** Full BCP-47 tag (e.g. "en-GB") for Intl / date formatting. Falls back to `locale`. */
+    resolvedLocale?: string;
+    /** IANA timezone (e.g. "America/Los_Angeles"). Used by date/time components. */
+    timeZone?: string;
 };
 
 declare type RootProps = React_2.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
@@ -4133,6 +4410,12 @@ declare type RootProps_3 = Pick<React_2.ComponentProps<typeof Tabs_2.Root>, "def
     children: React_2.ReactNode;
     className?: string;
     variant?: TabsVariant;
+    /**
+     * Minimum size of the tabs, mirroring Button's height tiers. Only affects the
+     * `capsule` variant, keeping its track aligned with a sibling Button and its
+     * icon-only tabs square.
+     */
+    size?: TabsSize;
 };
 
 /**
@@ -4151,6 +4434,25 @@ declare namespace Row {
     var displayName: string;
 }
 
+/**
+ * A single body row.
+ *
+ * Rows control vertical sizing and can optionally provide a background layer:
+ * ```tsx
+ * <Timeline.Row
+ *   height={40}
+ *   background={{ style: { background: "var(--muted)" } }}
+ * >
+ *   <Timeline.Interval start={task.start} end={task.end}>…</Timeline.Interval>
+ * </Timeline.Row>
+ * ```
+ */
+declare function Row_2({ children, className, style, height, background }: TimelineRowProps): JSX.Element;
+
+declare namespace Row_2 {
+    var displayName: string;
+}
+
 /**
  * A single row action definition for the actions column.
  */
@@ -4470,6 +4772,13 @@ declare type SharedAppShellProps = React.PropsWithChildren<{
      * No browser locale information avilable, "en" used as default.
      */
     locale?: string;
+    /**
+     * IANA timezone (e.g. "America/Los_Angeles") used by date/time components
+     * as the default for resolving "today" and for `ZonedDateTime` values.
+     *
+     * If not provided, date/time components fall back to the user's local timezone.
+     */
+    timeZone?: string;
     /**
      * Global error boundary component applied to all routes.
      *
@@ -4728,7 +5037,15 @@ declare type SidebarItemRenderProps = {
     isActive: boolean;
 };
 
-export declare const SidebarLayout: (props: SidebarLayoutProps) => JSX.Element;
+export declare function SidebarLayout(props: SidebarLayoutProps): JSX.Element;
+
+export declare namespace SidebarLayout {
+    var DefaultSidebar: (props: DefaultSidebarProps) => JSX.Element;
+    var DefaultHeader: {
+        ({ actions }: DefaultHeaderProps): JSX.Element;
+        displayName: string;
+    };
+}
 
 export declare type SidebarLayoutProps = {
     /**
@@ -4751,15 +5068,39 @@ export declare type SidebarLayoutProps = {
         Outlet: () => React.ReactNode;
     }) => React.ReactNode;
     /**
-     * Custom sidebar content.
+     * Custom sidebar content. Replaces the whole sidebar region.
      *
-     * @default DefaultSidebar
+     * @default <SidebarLayout.DefaultSidebar />
      * @example
      * ```tsx
      * <SidebarLayout sidebar={<MyCustomSidebar />} />
      * ```
      */
     sidebar?: React.ReactNode;
+    /**
+     * Custom header content. Replaces the whole top-bar region.
+     *
+     * Omit it for the built-in header. To slightly extend the built-in header
+     * (e.g. add a notification bell), pass `<SidebarLayout.DefaultHeader />` with
+     * its `actions` slot rather than reconstructing the header from scratch.
+     *
+     * @default <SidebarLayout.DefaultHeader />
+     * @example
+     * ```tsx
+     * // Extend the built-in header:
+     * <SidebarLayout
+     *   header={
+     *     <SidebarLayout.DefaultHeader
+     *       actions={[<NotificationBell key="bell" />, <AppearanceSwitcher key="appearance" />]}
+     *     />
+     *   }
+     * />
+     *
+     * // Or replace it entirely:
+     * <SidebarLayout header={<MyCustomHeader />} />
+     * ```
+     */
+    header?: React.ReactNode;
     /**
      * Whether the sidebar is open by default on desktop.
      *
@@ -4914,8 +5255,362 @@ export declare const Tabs: {
     Panel: typeof Panel;
 };
 
+declare type TabsSize = "xs" | "sm" | "default" | "lg";
+
 declare type TabsVariant = "default" | "line" | "capsule";
 
+export { Time }
+
+/**
+ * Timeline primitives for building app-specific schedule, trace, and dependency UIs.
+ *
+ * Typical usage:
+ * ```tsx
+ * <Timeline.Root start={start} end={end}>
+ *   <Timeline.Viewport axis={axis} decorations={decorations}>
+ *     <Timeline.Row height={40} background={{ style: { background: "var(--muted)" } }}>
+ *       <Timeline.Interval id="task-1" start={task.start} end={task.end}>…</Timeline.Interval>
+ *     </Timeline.Row>
+ *     <Timeline.Link from="task-1" to="task-2" />
+ *   </Timeline.Viewport>
+ * </Timeline.Root>
+ * ```
+ */
+export declare const Timeline: {
+    Root: typeof Root_13;
+    Viewport: typeof Viewport;
+    Row: typeof Row_2;
+    Interval: typeof Interval;
+    Link: typeof Link_2;
+};
+
+/**
+ * Axis configuration owned by `Timeline.Viewport`.
+ *
+ * Example:
+ * ```tsx
+ * axis={{
+ *   guides: boundaries.map((at) => ({
+ *     at,
+ *     axisStyle: { background: "var(--border)" },
+ *     bodyStyle: { background: "var(--border)" },
+ *   })),
+ *   levels: [
+ *     {
+ *       kind: "spans",
+ *       items: timeboxes,
+ *     },
+ *   ],
+ * }}
+ * ```
+ */
+export declare interface TimelineAxis {
+    /** Boundary lines rendered in the axis and/or body. */
+    guides?: TimelineGuide[];
+    /** Stacked header levels rendered above the body. Defaults to `[]` when omitted. */
+    levels?: TimelineAxisLevel[];
+    /** Optional class applied to the axis container. */
+    className?: string;
+}
+
+/**
+ * One stacked axis level.
+ *
+ * Levels let an app compose multi-level headers such as year → month or a
+ * single timebox row such as half-hour slots.
+ */
+export declare type TimelineAxisLevel = (TimelineAxisLevelBase & {
+    /** Interval labels rendered across a time range. */
+    kind: "spans";
+    /** Span items to render in this level. */
+    items: TimelineAxisSpan[];
+    /** Optional class applied to every span in the level. */
+    itemClassName?: string;
+    /** Optional style applied to every span in the level. */
+    itemStyle?: React_2.CSSProperties;
+}) | (TimelineAxisLevelBase & {
+    /** Point labels rendered at specific times. */
+    kind: "ticks";
+    /** Tick items to render in this level. */
+    items: TimelineAxisTick[];
+    /** Horizontal anchor used when placing each tick label. */
+    labelAlign?: Anchor;
+});
+
+declare type TimelineAxisLevelBase = {
+    /** Height of this axis level in pixels. Defaults to `28`. */
+    height?: number;
+    /** Optional class applied to the level container. */
+    className?: string;
+};
+
+/**
+ * A labeled time range rendered inside an axis level.
+ *
+ * Use spans for "timeboxes" such as months, half-hours, sprints, or any
+ * other interval that should be labeled between boundary guides.
+ */
+export declare interface TimelineAxisSpan {
+    /** Stable React key. Falls back to a start/end-based key when omitted. */
+    key?: React_2.Key;
+    /** Start of the timebox. Accepts a `Date` or a millisecond timestamp. */
+    start: TimeValue;
+    /** End of the timebox. Accepts a `Date` or a millisecond timestamp. */
+    end: TimeValue;
+    /** Label rendered inside the span. */
+    label?: React_2.ReactNode;
+    /** Optional class applied to the positioned span element. */
+    className?: string;
+    /** Optional inline style applied to the positioned span element. */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * A labeled point in an axis level.
+ *
+ * Ticks are useful for point-in-time labels such as milestones or specific
+ * timestamps. For boxed labels between boundaries, prefer `TimelineAxisSpan`.
+ */
+export declare interface TimelineAxisTick {
+    /** Stable React key. Falls back to an `at`-based key when omitted. */
+    key?: React_2.Key;
+    /** Point in time represented by this tick. */
+    at: TimeValue;
+    /** Label rendered for the tick. */
+    label?: React_2.ReactNode;
+    /**
+     * Optional custom label position.
+     *
+     * Defaults to `at`. Use this when the tick represents one time but its label
+     * should be positioned elsewhere.
+     */
+    labelAt?: TimeValue;
+    /** Optional class applied to the tick container. */
+    className?: string;
+    /** Optional inline style applied to the tick container. */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * A decorative band rendered behind the timeline body.
+ *
+ * Useful for blackout windows, maintenance ranges, release freezes, or any
+ * other highlighted interval.
+ */
+export declare interface TimelineBand {
+    /** Stable React key. Falls back to a start/end-based key when omitted. */
+    key?: React_2.Key;
+    /** Start of the band. */
+    start: TimeValue;
+    /** End of the band. */
+    end: TimeValue;
+    /** Optional background color convenience prop. */
+    color?: string;
+    /** Optional class applied to the band element. */
+    className?: string;
+    /** Optional inline style applied to the band element. */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * Decorative layers rendered by `Timeline.Viewport`.
+ */
+export declare interface TimelineDecorations {
+    /** Background range highlights rendered behind rows. */
+    bands?: TimelineBand[];
+    /** Vertical markers rendered in the axis and/or body. */
+    markers?: TimelineMarker[];
+}
+
+/**
+ * A vertical guide line projected onto the axis and/or the timeline body.
+ *
+ * Guides are the timeline's "boundaries". Apps usually derive them from their
+ * own scale logic, then pair them with axis spans to label the ranges between
+ * those boundaries.
+ */
+export declare interface TimelineGuide {
+    /** Stable React key. Falls back to an `at`-based key when omitted. */
+    key?: React_2.Key;
+    /** Time position for the guide line. */
+    at: TimeValue;
+    /** Optional class applied to the guide inside the axis area. */
+    axisClassName?: string;
+    /** Optional inline style applied to the guide inside the axis area. */
+    axisStyle?: React_2.CSSProperties;
+    /** Optional class applied to the guide inside the body area. */
+    bodyClassName?: string;
+    /** Optional inline style applied to the guide inside the body area. */
+    bodyStyle?: React_2.CSSProperties;
+}
+
+export declare type TimelineIntervalProps = {
+    /** Start of the interval. */
+    start: TimeValue;
+    /** End of the interval. */
+    end: TimeValue;
+    /** Rendered content for the interval. */
+    children: React_2.ReactNode;
+    /** Optional stable id used by `Timeline.Link`. */
+    id?: string;
+    /** Top and bottom inset in pixels within the row. Defaults to `0`. */
+    insetY?: number;
+    /** Optional class applied to the positioned interval container. */
+    className?: string;
+    /** Optional inline style applied to the positioned interval container. */
+    style?: React_2.CSSProperties;
+};
+
+/**
+ * Shared defaults for `Timeline.Link` instances inside one viewport.
+ */
+export declare interface TimelineLinkDefaults {
+    /** Link routing strategy. Only orthogonal routing is currently supported. */
+    routing?: "orthogonal";
+    /** Whether links end with an arrow marker. Defaults to `true`. */
+    arrow?: boolean;
+    /** Horizontal gap used when routing out of and into items. Defaults to `16`. */
+    gap?: number;
+    /** Optional class applied to each link SVG when the link does not override it. */
+    className?: string;
+    /**
+     * Optional inline style applied to each link SVG when the link does not override it.
+     *
+     * Prefer an opaque `color` here over alpha-based text colors when overlapping links
+     * should not appear darker.
+     */
+    style?: React_2.CSSProperties;
+    /** Optional stroke width used by each link when the link does not override it. */
+    strokeWidth?: number;
+}
+
+export declare type TimelineLinkProps = {
+    /** Source `Timeline.Interval` id. */
+    from: string;
+    /** Target `Timeline.Interval` id. */
+    to: string;
+    /** Source anchor used for routing. Defaults to `"end"`. */
+    fromAnchor?: Anchor;
+    /** Target anchor used for routing. Defaults to `"start"`. */
+    toAnchor?: Anchor;
+    /** Overrides the viewport default arrow visibility. */
+    arrow?: boolean;
+    /** Overrides the viewport default routing gap. */
+    gap?: number;
+    /** Optional class applied to the link SVG. */
+    className?: string;
+    /** Optional inline style applied to the link SVG. */
+    style?: React_2.CSSProperties;
+    /** Optional stroke width for the link path. */
+    strokeWidth?: number;
+};
+
+/**
+ * A decorative vertical marker rendered in the axis and/or body.
+ */
+export declare interface TimelineMarker {
+    /** Stable React key. Falls back to an `at`-based key when omitted. */
+    key?: React_2.Key;
+    /** Time position for the marker. */
+    at: TimeValue;
+    /** Optional line color convenience prop. */
+    color?: string;
+    /** Optional marker label. */
+    label?: React_2.ReactNode;
+    /** Optional class applied to the outer marker wrapper. */
+    className?: string;
+    /** Optional inline style applied to the outer marker wrapper. */
+    style?: React_2.CSSProperties;
+    /** Optional class applied to the marker line. */
+    lineClassName?: string;
+    /** Optional inline style applied to the marker line. */
+    lineStyle?: React_2.CSSProperties;
+    /** Optional class applied to the marker label. */
+    labelClassName?: string;
+    /** Optional inline style applied to the marker label. */
+    labelStyle?: React_2.CSSProperties;
+    /** Controls where the marker is rendered. Defaults to `"body"`. */
+    placement?: "axis" | "body" | "both";
+}
+
+export declare type TimelineRootProps = {
+    /** Inclusive start of the overall timeline range. */
+    start: TimeValue;
+    /** Inclusive end of the overall timeline range. */
+    end: TimeValue;
+    /** Timeline subtree. Usually contains one `Timeline.Viewport`. */
+    children: React_2.ReactNode;
+    /** Optional class applied to the root container. */
+    className?: string;
+    /** Optional inline style applied to the root container. */
+    style?: React_2.CSSProperties;
+};
+
+/**
+ * Background content rendered for a `Timeline.Row` in a dedicated layer.
+ *
+ * Use this when a row background should sit behind guides but in front of body
+ * bands. This is different from `Timeline.Row`'s own `style`, which affects the
+ * row content container itself.
+ */
+export declare interface TimelineRowBackground {
+    /** Optional class applied to the background layer element. */
+    className?: string;
+    /** Optional inline style applied to the background layer element. */
+    style?: React_2.CSSProperties;
+}
+
+export declare type TimelineRowProps = {
+    /** Row contents, typically intervals. */
+    children: React_2.ReactNode;
+    /** Optional class applied to the row content container. */
+    className?: string;
+    /** Optional inline style applied to the row content container. */
+    style?: React_2.CSSProperties;
+    /** Row height in pixels. Defaults to `32`. */
+    height?: number;
+    /**
+     * Optional background rendered in a dedicated layer.
+     *
+     * Use this instead of `style.background` when guides should remain visible in
+     * front of the row background.
+     */
+    background?: TimelineRowBackground | null;
+};
+
+export declare type TimelineViewportProps = {
+    /** Timeline content. Rows and links can be passed in any order. */
+    children: React_2.ReactNode;
+    /** Optional fixed canvas width in pixels for horizontally scrollable timelines. */
+    canvasWidth?: number;
+    /** Keeps the axis pinned to the top of the viewport when scrolling vertically. */
+    stickyAxis?: boolean;
+    /** Axis configuration for guides and header levels. */
+    axis?: TimelineAxis;
+    /** Decorative layers such as bands and markers. */
+    decorations?: TimelineDecorations;
+    /** Shared defaults applied to `Timeline.Link` nodes inside this viewport. */
+    linkDefaults?: TimelineLinkDefaults;
+    /** Optional class applied to the scroll viewport. */
+    className?: string;
+    /** Optional inline style applied to the scroll viewport. */
+    style?: React_2.CSSProperties;
+};
+
+declare type TimeValue = Date | number;
+
+/**
+ * Resolved timezone object with helpers bound to the configured timezone.
+ */
+export declare interface TimeZone {
+    /** Raw IANA timezone string (e.g. "America/Los_Angeles"). */
+    value: string;
+    /** Today's date in this timezone. */
+    today: () => CalendarDate;
+    /** Current instant in this timezone. */
+    now: () => ZonedDateTime;
+}
+
 declare function Title({ className, ...props }: React_2.ComponentProps<"div">): JSX.Element;
 
 declare namespace Title {
@@ -5018,7 +5713,6 @@ declare type TypedPaths<TRoutes extends Record<string, Record<string, string>>>
 export declare function useAIChat(config: {
     client: AIGatewayClient;
     model: string;
-    stream?: boolean;
 }): {
     messages: AIChatMessage[];
     status: AIChatStatus;
@@ -5056,6 +5750,41 @@ export declare const useAppShellConfig: () => AppShellConfigContextType;
  */
 export declare const useAppShellData: () => AppShellDataContextType;
 
+/**
+ * Ref to the AppShell **content scroll container** — the element that owns
+ * vertical scrolling for page content.
+ *
+ * The shell is viewport-bounded (`h-svh`), so the document itself no longer
+ * scrolls; the content area does. Use this wherever you would previously have
+ * reached for `window`/document scroll — reading `scrollTop`, calling
+ * `scrollTo`, attaching a `scroll` listener, or passing `root` to an
+ * `IntersectionObserver`:
+ *
+ * ```tsx
+ * const scrollRef = useAppShellScrollContainer();
+ * useEffect(() => {
+ *   const el = scrollRef.current;
+ *   if (!el) return;
+ *   const onScroll = () =>
+ *     setProgress(el.scrollTop / (el.scrollHeight - el.clientHeight));
+ *   el.addEventListener("scroll", onScroll, { passive: true });
+ *   return () => el.removeEventListener("scroll", onScroll);
+ * }, [scrollRef]);
+ * ```
+ *
+ * The element mounts with the layout, above your page, so read `ref.current`
+ * inside an effect (it is populated by the time effects run), not during
+ * render.
+ *
+ * Notes:
+ * - On a `<Layout fill>` page this element does not scroll — its children
+ *   (e.g. a `DataTable`) manage their own scrolling.
+ * - Outside a `SidebarLayout` the returned ref's `current` is always `null`.
+ * - The same element carries a `data-appshell-scroll-container` attribute for
+ *   non-React access (CSS, tests, `document.querySelector`).
+ */
+export declare function useAppShellScrollContainer(): RefObject<HTMLElement | null>;
+
 /**
  * Hook that encapsulates the async select pattern — fetching on open,
  * request cancellation via `AbortController`, and loading/error state.
@@ -5769,6 +6498,14 @@ export { useLocation }
 
 export { useNavigate }
 
+/**
+ * Returns a function that opens the CommandPalette.
+ *
+ * Optionally accepts an initial search string, including prefix-activated
+ * search modes such as `PO: alice`.
+ */
+export declare function useOpenCommandPalette(): (options?: OpenCommandPaletteOptions) => void;
+
 /**
  * Override the breadcrumb title for the current page.
  *
@@ -5829,6 +6566,17 @@ export { useParams }
  */
 export declare function useRegisterCommandPaletteActions(group: string, actions: CommandPaletteAction[]): void;
 
+/**
+ * Returns the full BCP-47 locale (e.g. "en-GB") for Intl / date formatting.
+ * Also returns the language code (e.g. "en") used for label resolution.
+ *
+ * Falls back to browser detection when used outside an AppShell.
+ */
+export declare const useResolvedLocale: () => {
+    locale: string;
+    language: string;
+};
+
 export { useRouteError }
 
 export { useSearchParams }
@@ -5856,6 +6604,12 @@ export declare const useTheme: () => {
     setTheme: (colorTheme: ColorTheme) => void;
 };
 
+/**
+ * Returns the configured timezone with bound `today()` and `now()` helpers.
+ * Falls back to the user's local timezone when not configured.
+ */
+export declare const useTimeZone: () => TimeZone;
+
 export declare const useToast: () => typeof toast;
 
 /**
@@ -5940,6 +6694,28 @@ declare namespace Validity {
     var displayName: string;
 }
 
+/**
+ * Owns scrolling, axis rendering, decoration layers, and link layering.
+ *
+ * Example:
+ * ```tsx
+ * <Timeline.Viewport
+ *   canvasWidth={1200}
+ *   axis={{ guides, levels }}
+ *   decorations={{ bands }}
+ *   linkDefaults={{ style: { color: "var(--muted-foreground)" }, strokeWidth: 1.5 }}
+ * >
+ *   {rows}
+ *   {links}
+ * </Timeline.Viewport>
+ * ```
+ */
+declare function Viewport({ children, canvasWidth, stickyAxis, axis, decorations, linkDefaults, className, style, }: TimelineViewportProps): JSX.Element;
+
+declare namespace Viewport {
+    var displayName: string;
+}
+
 /**
  * Conditionally render children based on guard evaluation.
  *
@@ -6019,4 +6795,6 @@ export declare function withURLCollectionState(options: UseCollectionOptions & {
     tableMetadata?: never;
 }, [searchParams, setSearchParams]: SearchParamsBinding): UseCollectionOptions;
 
+export { ZonedDateTime }
+
 export { }