@nxgt/material 3.79.1 → 3.80.0

package/dist/lib/components/ui/layout/thread-layout/thread-layout-parts.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement, ThreadLayoutWidth } from './thread-layout-classes.js';
+/** The centred column: the stepper (named when placed) above or beside the content. */
+export declare function ThreadLayoutColumn({ width, stepper, stepperPlacement, children, }: {
+    width?: ThreadLayoutWidth;
+    stepper?: ReactNode | ((placement: ThreadLayoutStepperPlacement) => ReactNode);
+    stepperPlacement?: ThreadLayoutStepperPlacement;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The sticky action bar in the grid's last row (`below`: its row, 2 or 3). */
+export declare function ThreadLayoutFooter({ below, children, }: {
+    below: 2 | 3;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/thread-layout/thread-layout-stepper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement } from './thread-layout-classes.js';
+/**
+ * The named landmark around a `ThreadLayout`'s stepper: above the column, or a
+ * sticky rail beside it from `xl`. One element, placed by CSS only, so the
+ * server and the client render the same markup.
+ */
+export declare function ThreadLayoutStepper({ placement, children, }: {
+    placement: ThreadLayoutStepperPlacement;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/thread-layout/thread-layout.d.ts

@@ -1,9 +1,36 @@
 import { ComponentProps, ReactNode } from 'react';
+import { ThreadLayoutStepperPlacement, ThreadLayoutWidth } from './thread-layout-classes.js';
+export type { ThreadLayoutStepperPlacement, ThreadLayoutWidth, } from './thread-layout-classes.js';
 export type ThreadLayoutProps = {
     /** Rendered above the content, full width. Typically a back button or title. */
     header?: ReactNode;
-    /** Rendered directly above the content, inside the centered column. */
-    stepper?: ReactNode;
+    /**
+     * The wizard's steps. With `stepperPlacement` unset: rendered directly
+     * above the content, inside the centered column, as given. With a placement
+     * it sits in a `nav` named "Progress" (above the column, or a rail beside
+     * it), and may be a function, called once with the placement, so the
+     * caller picks the `Stepper`'s orientation.
+     */
+    stepper?: ReactNode | ((placement: ThreadLayoutStepperPlacement) => ReactNode);
+    /**
+     * The column's width: `'form'` (32rem), `'reading'` (48rem) or `'wide'`
+     * (72rem), centred, and its content stretched to fill it. Unset keeps the
+     * 14-of-16-column track and children centred at their own width.
+     */
+    width?: ThreadLayoutWidth;
+    /**
+     * A sticky action bar under the column (Back / Next, Save): it stays in
+     * view while the content scrolls and keeps clear of a bottom navigation
+     * bar (`--nxgt-bottom-chrome`) and the phone's home bar.
+     */
+    footer?: ReactNode;
+    /**
+     * With a `stepper`: `'top'` keeps it above the column; `'side'` puts it in
+     * a rail beside the column from 1280px and above it below (one element
+     * placed by CSS, so the function gets `'side'` in both ranges: pass a
+     * vertical `Stepper`). Unset leaves the stepper as it was.
+     */
+    stepperPlacement?: ThreadLayoutStepperPlacement;
 } & ComponentProps<'div'>;
 /**
  * A single centered column over the app background, for focused flows a user
@@ -15,4 +42,4 @@ export type ThreadLayoutProps = {
  * app-local; a flow like this one wants the chrome out of the way anyway, so
  * the `header` slot takes whatever the caller wants there instead.
  */
-export declare function ThreadLayout({ children, header, stepper, className, ...props }: ThreadLayoutProps): import("react").JSX.Element;
+export declare function ThreadLayout({ children, header, stepper, width, footer, stepperPlacement, className, ...props }: ThreadLayoutProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/index.d.ts

@@ -0,0 +1,5 @@
+export type { TopNavItemProps } from './partials/top-nav-item.js';
+export { TopNavItem } from './partials/top-nav-item.js';
+export type { TopNavMenuProps } from './partials/top-nav-menu.js';
+export { TopNavMenu } from './partials/top-nav-menu.js';
+export * from './top-nav.js';

package/dist/lib/components/ui/layout/top-nav/partials/top-nav-item.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent } from '../../app-shell/types.js';
+export type TopNavItemProps = {
+    /** Where the destination goes. */
+    href: string;
+    /** An icon before the label. Optional: the bar reads fine with labels alone. */
+    icon?: IconProps['name'];
+    /** The visible label, already translated. */
+    children: ReactNode;
+    /** Whether this is the current destination: `aria-current="page"` and a tint. */
+    active?: boolean;
+    /** `true` a dot, a number a count ("99+" past 99), a node as it is; ends the pill and is read in the link's name. */
+    badge?: number | boolean | ReactNode;
+    /** Replaces the badge's text in the link's name, already translated. */
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/** The icon, label and badge a pill shows; shared by a link and a trigger. */
+export declare function TopNavEntryContent({ icon, children, badge, badgeLabel, }: Pick<TopNavItemProps, 'icon' | 'children' | 'badge' | 'badgeLabel'>): import("react").JSX.Element;
+/** One destination of the top bar: a pill, `aria-current="page"` when active. */
+export declare function TopNavItem({ href, icon, children, active, badge, badgeLabel, linkComponent, className, }: TopNavItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/partials/top-nav-menu.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { IconProps } from '../../../primitives/icon/icon.js';
+import { AppShellLinkComponent, MenuItem } from '../../app-shell/types.js';
+export type TopNavMenuProps = {
+    /** The trigger's visible label, already translated. */
+    label: ReactNode;
+    icon?: IconProps['name'];
+    /** The links of the dropdown. */
+    items: MenuItem[];
+    /** The `url` of the current link, if it is one of `items`: it gets `aria-current="page"` and its trigger reads as active. */
+    current?: string;
+    badge?: number | boolean | ReactNode;
+    badgeLabel?: string;
+    linkComponent?: AppShellLinkComponent;
+    className?: string;
+};
+/**
+ * An entry that opens a dropdown of links: a trigger (a button, with
+ * `aria-expanded`) and a card under it. Arrow keys, Escape and focus return
+ * follow Radix's navigation menu.
+ */
+export declare function TopNavMenu({ label, icon, items, current, badge, badgeLabel, linkComponent, className, }: TopNavMenuProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/top-nav/top-nav.classes.d.ts

@@ -0,0 +1,10 @@
+/** The list of destinations: a row of pills, never wider than its place. */
+export declare const TOP_NAV_LIST = "flex min-w-0 items-center gap-1";
+/** One destination or trigger: a 48px pill, the whole pill tinted when current (Expressive). */
+export declare const TOP_NAV_ENTRY = "nxgt-plain-link group relative flex h-12 shrink-0 items-center gap-2 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground data-[state=open]:bg-accent/60 focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight]";
+/** The tint behind the pill: the bar's indicator, which grows from the middle. */
+export declare const TOP_NAV_ROW = "absolute inset-0 scale-x-50 rounded-full bg-sidebar-active opacity-0 transition-[opacity,transform] duration-(--nxgt-motion-effects-default-duration) ease-(--nxgt-motion-effects-default) group-data-active:scale-x-100 group-data-active:opacity-100 group-active:scale-x-110 motion-reduce:transition-none forced-colors:border forced-colors:border-[Highlight]";
+/** The dropdown: a rounded card under its trigger, fading and sliding in unless motion is reduced. */
+export declare const TOP_NAV_MENU = "absolute start-0 top-full z-50 mt-2 flex w-64 flex-col gap-1 rounded-[28px] bg-card p-2 text-card-foreground shadow-xl ring-1 ring-border/60 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 motion-reduce:animate-none";
+/** One link of a dropdown: a 48px row, rounder than the pills' corner radius of the card. */
+export declare const TOP_NAV_MENU_LINK = "nxgt-plain-link group relative flex h-12 shrink-0 items-center gap-2 rounded-full px-4 font-medium text-muted-foreground text-sm outline-none transition-colors hover:bg-accent/60 data-active:font-semibold data-active:text-foreground data-[state=open]:bg-accent/60 focus-visible:outline-2 focus-visible:outline-ring forced-colors:focus-visible:outline-[Highlight] w-full rounded-2xl";

package/dist/lib/components/ui/layout/top-nav/top-nav.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { AppShellLinkComponent, MenuItem } from '../app-shell/types.js';
+import { TopNavItem } from './partials/top-nav-item.js';
+import { TopNavMenu } from './partials/top-nav-menu.js';
+export type TopNavProps = {
+    /**
+     * The destinations, in order. An entry with `children` opens a dropdown of
+     * its child links; the others are links. `footer`, `group` and `display`
+     * are not used.
+     */
+    items?: MenuItem[];
+    linkComponent?: AppShellLinkComponent;
+    /** The landmark's accessible name, already translated. @default "Navigation" */
+    label?: string;
+    /** Hand-made entries (`TopNav.Item`, `TopNav.Menu`), after those of `items`. */
+    children?: ReactNode;
+    className?: string;
+};
+/**
+ * The top navigation (Material 3 Expressive): a `nav` of destinations as 48px
+ * pills in a row, the current one tinted with `aria-current="page"`. An entry
+ * with `children` is a trigger that opens a dropdown of its child links; when
+ * the current page is one of them, the trigger reads as active. Badges are
+ * read in the link's name. Built on Radix's navigation menu: arrow keys move
+ * along the bar, Escape closes a dropdown and returns focus to its trigger.
+ *
+ * Needs a React Router context to read the location. `ActivityLayout`'s
+ * `navigation="top"` draws it in the app header from 768px.
+ */
+export declare function TopNav({ items, linkComponent, label, children, className, }: TopNavProps): import("react").JSX.Element;
+export declare namespace TopNav {
+    var Item: typeof TopNavItem;
+    var Menu: typeof TopNavMenu;
+}

package/dist/lib/components/ui/layout/top-nav/top-nav.utils.d.ts

@@ -0,0 +1,10 @@
+import { MenuItem } from '../app-shell/types.js';
+/**
+ * The `url` of the most specific entry (a child counts) covering `pathname`,
+ * and the `url` of the top-level entry that holds it: that entry's trigger
+ * reads as active while the child carries `aria-current`.
+ */
+export declare function findTopNavActive(pathname: string, items: MenuItem[]): {
+    current?: string;
+    parent?: string;
+};

package/dist/lib/components/ui/widgets/kanban/index.d.ts

@@ -1,5 +1,5 @@
 export type { KanbanProps } from './kanban.js';
 export { Kanban } from './kanban.js';
 export { KanbanProvider, useKanbanContext } from './kanban-context.js';
-export type { KanbanAddDraft, KanbanAddHandler, KanbanCardHandler, KanbanChange, KanbanColumn, KanbanGroup, KanbanItem, KanbanRenderCard, } from './types.js';
+export type { KanbanAddDraft, KanbanAddHandler, KanbanCardHandler, KanbanChange, KanbanColumn, KanbanGroup, KanbanItem, KanbanPhoneLayout, KanbanRenderCard, } from './types.js';
 export { useKanban } from './use-kanban.js';

package/dist/lib/components/ui/widgets/kanban/kanban-context.d.ts

@@ -1,8 +1,11 @@
-import { ReactNode } from 'react';
-import { KanbanAddHandler, KanbanCardHandler, KanbanRenderCard } from './types.js';
+import { ReactNode, RefObject } from 'react';
+import { KanbanAddHandler, KanbanCardHandler, KanbanPhoneLayout, KanbanRenderCard } from './types.js';
 import { KanbanModel } from './use-kanban.js';
 export type KanbanContextValue = KanbanModel & {
     reorderableColumns: boolean;
+    /** The board's root: its own width decides the phone layout (below 768px). */
+    boardRef?: RefObject<HTMLElement | null>;
+    phoneLayout?: KanbanPhoneLayout;
     onCardClick?: KanbanCardHandler;
     onAddCard?: KanbanAddHandler;
     renderCard?: KanbanRenderCard;

package/dist/lib/components/ui/widgets/kanban/kanban.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { KanbanAddHandler, KanbanCardHandler, KanbanChange, KanbanColumn, KanbanGroup, KanbanItem, KanbanRenderCard } from './types.js';
+import { KanbanAddHandler, KanbanCardHandler, KanbanChange, KanbanColumn, KanbanGroup, KanbanItem, KanbanPhoneLayout, KanbanRenderCard } from './types.js';
 export type KanbanProps = {
     columns?: KanbanColumn[];
     defaultColumns?: KanbanColumn[];
@@ -16,5 +16,14 @@ export type KanbanProps = {
     label?: ReactNode;
     className?: string;
     renderCard?: KanbanRenderCard;
+    /**
+     * Below 768px (the board's own width): `tabs` shows one column at a time
+     * under a tab list, `swipe` snaps full-width columns sideways. Unset or
+     * `columns` keeps today's peeking columns.
+     */
+    phoneLayout?: KanbanPhoneLayout;
+    /** The column `tabs` shows (controlled); the first one when unset. */
+    phoneColumn?: string;
+    onPhoneColumnChange?: (columnId: string) => void;
 };
-export declare function Kanban({ columns, defaultColumns, items, groups, onColumnsChange, onItemsChange, onChange, onCardClick, onAddCard, searchable, reorderableColumns, disabled, label, className, renderCard, }: KanbanProps): import("react").JSX.Element;
+export declare function Kanban({ columns, defaultColumns, items, groups, onColumnsChange, onItemsChange, onChange, onCardClick, onAddCard, searchable, reorderableColumns, disabled, label, className, renderCard, phoneLayout, phoneColumn, onPhoneColumnChange, }: KanbanProps): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/kanban/kanban.slice.d.ts

@@ -10,6 +10,7 @@ export declare const kanbanSlice: import('@reduxjs/toolkit').Slice<KanbanChromeS
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
     setFocusedId: (state: {
         query: string;
@@ -20,6 +21,7 @@ export declare const kanbanSlice: import('@reduxjs/toolkit').Slice<KanbanChromeS
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string | null>) => void;
     toggleGroupCollapsed: (state: {
         query: string;
@@ -30,6 +32,7 @@ export declare const kanbanSlice: import('@reduxjs/toolkit').Slice<KanbanChromeS
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
     toggleColumnCollapsed: (state: {
         query: string;
@@ -40,7 +43,19 @@ export declare const kanbanSlice: import('@reduxjs/toolkit').Slice<KanbanChromeS
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
+    setPhoneColumnId: (state: {
+        query: string;
+        focusedId: string | null;
+        collapsedGroupIds: string[];
+        collapsedColumnIds: string[];
+        composing: {
+            columnId: string;
+            groupId: string | null;
+        } | null;
+        phoneColumnId: string | null;
+    }, action: PayloadAction<string | null>) => void;
     setComposing: (state: {
         query: string;
         focusedId: string | null;
@@ -50,6 +65,7 @@ export declare const kanbanSlice: import('@reduxjs/toolkit').Slice<KanbanChromeS
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<KanbanChromeState["composing"]>) => void;
 }, "kanban", "kanban", import('@reduxjs/toolkit').SliceSelectors<KanbanChromeState>>;
 export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerActions<{
@@ -62,6 +78,7 @@ export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerAction
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
     setFocusedId: (state: {
         query: string;
@@ -72,6 +89,7 @@ export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerAction
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string | null>) => void;
     toggleGroupCollapsed: (state: {
         query: string;
@@ -82,6 +100,7 @@ export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerAction
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
     toggleColumnCollapsed: (state: {
         query: string;
@@ -92,7 +111,19 @@ export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerAction
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<string>) => void;
+    setPhoneColumnId: (state: {
+        query: string;
+        focusedId: string | null;
+        collapsedGroupIds: string[];
+        collapsedColumnIds: string[];
+        composing: {
+            columnId: string;
+            groupId: string | null;
+        } | null;
+        phoneColumnId: string | null;
+    }, action: PayloadAction<string | null>) => void;
     setComposing: (state: {
         query: string;
         focusedId: string | null;
@@ -102,5 +133,6 @@ export declare const kanbanActions: import('@reduxjs/toolkit').CaseReducerAction
             columnId: string;
             groupId: string | null;
         } | null;
+        phoneColumnId: string | null;
     }, action: PayloadAction<KanbanChromeState["composing"]>) => void;
 }, "kanban">;

package/dist/lib/components/ui/widgets/kanban/kanban.utils.d.ts

@@ -22,3 +22,12 @@ export declare function groupSections(column: KanbanColumn, items: Map<string, K
 export declare function visibleItemIds(column: KanbanColumn, items: Map<string, KanbanItem>, query: string): string[];
 export declare function wouldExceedWip(column: KanbanColumn, itemId: string): boolean;
 export declare function moveKanbanItem(columns: KanbanColumn[], itemId: string, toColumnId: string, beforeId?: string): KanbanColumn[];
+/** The column a phone shows: the asked one when it exists, else the first. */
+export declare function resolvePhoneColumn(columns: {
+    id: string;
+}[], asked: string | null | undefined): string | null;
+/** The column that holds a card, so a phone can follow a card the keyboard moved. */
+export declare function columnOfItem(columns: {
+    id: string;
+    itemIds: string[];
+}[], itemId: string): string | undefined;

package/dist/lib/components/ui/widgets/kanban/partials/kanban-card-preview.d.ts

@@ -1,4 +1,6 @@
 import { KanbanItem } from '../types.js';
-export declare function KanbanCardPreview({ item }: {
+export declare function KanbanCardPreview({ item, columnId, onMoved, }: {
     item: KanbanItem;
+    columnId: string;
+    onMoved: () => void;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/kanban/partials/kanban-column.d.ts

@@ -1,4 +1,10 @@
 import { KanbanColumn as KanbanColumnType } from '../types.js';
+/**
+ * One column. With phone tabs it is also the panel of its tab: every column
+ * stays mounted (the server and the client render the same markup), the
+ * panels of the other tabs are hidden below 768px by their `data-state`, and
+ * from 768px the panel wrapper disappears (`contents`) so the board is today's row of columns.
+ */
 export declare function KanbanColumn({ column }: {
     column: KanbanColumnType;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/kanban/partials/kanban-move-to.d.ts

@@ -0,0 +1,13 @@
+import { KanbanItem } from '../types.js';
+/**
+ * The phone way to move a card: one button per other column, in the card's
+ * popover. Shown when the board itself is narrower than 768px (the width its
+ * one-column layout switches on, read from the board: the popover is portalled
+ * out of it, so a container query would not reach it) and has a phone layout;
+ * the arrow keys and drag keep working everywhere.
+ */
+export declare function KanbanMoveTo({ item, columnId, onMoved, }: {
+    item: KanbanItem;
+    columnId: string;
+    onMoved: () => void;
+}): import("react").JSX.Element | null;

package/dist/lib/components/ui/widgets/kanban/partials/kanban-phone-tabs.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+/**
+ * With `phoneLayout="tabs"`, the board's tab list (name and count of each
+ * column) and the tabs root its columns are panels of. The list is hidden
+ * from 768px up by a container query, so the server and the client render
+ * the same markup at every width. Any other layout renders `children` alone.
+ */
+export declare function KanbanPhoneTabs({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/kanban/types.d.ts

@@ -1,4 +1,10 @@
 import { ReactNode } from 'react';
+/**
+ * How a board reads below 768px (its own width): `tabs` shows one column at
+ * a time under a tab list, `swipe` snaps full-width columns sideways, and
+ * `columns` (or unset) keeps the peeking columns.
+ */
+export type KanbanPhoneLayout = 'tabs' | 'swipe' | 'columns';
 export type KanbanColumn = {
     id: string;
     title: string;
@@ -38,6 +44,7 @@ export type KanbanChromeState = {
         columnId: string;
         groupId: string | null;
     } | null;
+    phoneColumnId: string | null;
 };
 export type KanbanAddDraft = {
     title: string;

package/dist/lib/components/ui/widgets/kanban/use-kanban-board-keys.d.ts

@@ -0,0 +1,7 @@
+import { KeyboardEvent } from 'react';
+/**
+ * The board's arrow-key handler. With phone tabs, a focus or a move that
+ * lands in another column brings that column's tab forward, so the card the
+ * keys act on is always the one on screen.
+ */
+export declare function useKanbanBoardKeys(): (event: KeyboardEvent<HTMLDivElement>) => void;

package/dist/lib/components/ui/widgets/kanban/use-kanban-item-actions.d.ts

@@ -18,3 +18,8 @@ export declare function useKanbanUpdateItem({ disabled, items, itemsById, onItem
     itemsById: Map<string, KanbanItem>;
     onItemsChange?: (items: KanbanItem[]) => void;
 }): (itemId: string, patch: Partial<KanbanItem>) => void;
+export declare function useKanbanReorderColumns({ board, commit, disabled, }: {
+    board: KanbanColumn[];
+    commit: (next: KanbanColumn[]) => void;
+    disabled: boolean;
+}): (activeId: string, overId: string) => void;

package/dist/lib/components/ui/widgets/kanban/use-kanban-phone-column.d.ts

@@ -0,0 +1,18 @@
+import { KanbanChromeState, KanbanColumn } from './types.js';
+/**
+ * The column a phone shows with `phoneLayout="tabs"`: controlled by
+ * `phoneColumn`, else kept in the chrome slice; the first column when the
+ * asked one does not exist.
+ */
+export declare function useKanbanPhoneColumn({ board, chrome, chromeActions, phoneColumn, onPhoneColumnChange, }: {
+    board: KanbanColumn[];
+    chrome: KanbanChromeState;
+    chromeActions: {
+        setPhoneColumnId: (columnId: string | null) => void;
+    };
+    phoneColumn?: string;
+    onPhoneColumnChange?: (columnId: string) => void;
+}): {
+    phoneColumnId: string | null;
+    setPhoneColumn: (columnId: string) => void;
+};

package/dist/lib/components/ui/widgets/kanban/use-kanban.d.ts

@@ -1,5 +1,5 @@
 import { KanbanChange, KanbanColumn, KanbanGroup, KanbanItem } from './types.js';
-export declare function useKanban({ columns, defaultColumns, items, onColumnsChange, onItemsChange, onChange, groups, disabled, }: {
+export declare function useKanban({ columns, defaultColumns, items, onColumnsChange, onItemsChange, onChange, groups, disabled, phoneColumn, onPhoneColumnChange, }: {
     columns?: KanbanColumn[];
     defaultColumns?: KanbanColumn[];
     items: KanbanItem[];
@@ -8,6 +8,8 @@ export declare function useKanban({ columns, defaultColumns, items, onColumnsCha
     onChange?: (change: KanbanChange) => void;
     groups?: KanbanGroup[];
     disabled?: boolean;
+    phoneColumn?: string;
+    onPhoneColumnChange?: (columnId: string) => void;
 }): {
     columns: KanbanColumn[];
     itemsById: Map<string, KanbanItem>;
@@ -18,6 +20,7 @@ export declare function useKanban({ columns, defaultColumns, items, onColumnsCha
         setFocusedId: (payload: string | null) => void;
         toggleGroupCollapsed: (payload: string) => void;
         toggleColumnCollapsed: (payload: string) => void;
+        setPhoneColumnId: (payload: string | null) => void;
         setComposing: (payload: {
             columnId: string;
             groupId: string | null;
@@ -27,5 +30,7 @@ export declare function useKanban({ columns, defaultColumns, items, onColumnsCha
     moveItem: (itemId: string, toColumnId: string, beforeId?: string, toGroupId?: string | null) => void;
     updateItem: (itemId: string, patch: Partial<KanbanItem>) => void;
     reorderColumns: (activeId: string, overId: string) => void;
+    phoneColumnId: string | null;
+    setPhoneColumn: (columnId: string) => void;
 };
 export type KanbanModel = ReturnType<typeof useKanban>;

package/dist/lib/i18n/resources/en/en.d.ts

@@ -1537,6 +1537,14 @@ export declare const en: {
             badge: string;
             "badge-dot": string;
         };
+        "app-header": {
+            back: string;
+            "back-to": string;
+            search: string;
+            "search-close": string;
+            "search-results": string;
+            "result-count": string;
+        };
         "account-menu": {
             trigger: string;
             "sign-out": string;
@@ -2037,6 +2045,8 @@ export declare const en: {
             "card-title": string;
             subtitle: string;
             "wip-full": string;
+            "phone-tabs": string;
+            "move-to": string;
         };
         doc: {
             search: string;
@@ -2052,6 +2062,7 @@ export declare const en: {
             "on-this-page": string;
             menu: string;
             "menu-description": string;
+            browse: string;
             previous: string;
             next: string;
             "see-also": string;
@@ -3027,6 +3038,9 @@ export declare const en: {
         };
         "list-details": {
             back: string;
+            "inspector-back": string;
+            "inspector-close": string;
+            resize: string;
         };
         switcher: {
             search: string;
@@ -3469,5 +3483,41 @@ export declare const en: {
             "delete-description": string;
             "delete-confirm": string;
         };
+        navigation: {
+            more: string;
+            close: string;
+            steps: string;
+            "rail-toggle": string;
+            "panel-collapse": string;
+            "panel-expand": string;
+        };
+        dashboard: {
+            edit: string;
+            done: string;
+            hint: string;
+            move: string;
+            "move-up": string;
+            "move-down": string;
+            grabbed: string;
+            moved: string;
+            dropped: string;
+            cancelled: string;
+        };
+        "editor-layout": {
+            toolbar: string;
+            canvas: string;
+            start: string;
+            properties: string;
+        };
+        "settings-layout": {
+            title: string;
+            search: string;
+            empty: string;
+        };
+        landing: {
+            menu: string;
+            footer: string;
+            "new-tab": string;
+        };
     };
 };