@k2b/ui 0.23.0 → 0.24.0

package/dist/types/content/Calendar.d.ts

@@ -240,7 +240,10 @@ export type CalendarSelectionControls = {
 export type CalendarQuickCreateControls = {
     /** What the person asked to create through `quickCreate`; absent after a click, a drag, or the keyboard. */
     create?: string;
-    /** Closes the quick create and returns the focus to the selected day; once another quick create replaced it, nothing. */
+    /**
+     * Closes the quick create, returns the focus to the selected day only while the focus is still in the quick create, and
+     * leaves a newer selection in place; once another quick create replaced it, nothing.
+     */
     close: () => void;
 };
 export type CalendarEventTimeChange = {

package/dist/types/content/CalendarWeekView.d.ts

@@ -2,6 +2,6 @@ import { type TimeViewProps } from "./calendar-time-view";
 /**
  * The week view with `dayHours`: the loaded days side by side in one strip, seven on a wide screen and three on a
  * phone. A trackpad, Shift with the wheel, or a finger scroll it sideways day by day; each gesture keeps the axis it
- * started on, and the strip settles on a day start. The arrows move by whole weeks.
+ * started on, and the strip settles on a day edge. The arrows move by whole weeks.
  */
 export declare const CalendarWeekView: (props: TimeViewProps) => import("solid-js").JSX.Element;

package/dist/types/content/DataTable.d.ts

@@ -14,6 +14,15 @@ export type DataTableColumn<T> = {
     cellClass?: string;
     /** Defaults to right for numeric values and left for everything else. */
     align?: "left" | "center" | "right";
+    /**
+     * Keeps each value on one line, so the column is at least as wide as its
+     * longest value. For dates, times, numbers, amounts, and short codes.
+     * Defaults to true when the column's first value is a number or date. The
+     * default cell wrapper already keeps every value on one line; this option
+     * decides wrapping for content under a custom `cellContentClass`, and a
+     * `white-space` that class sets itself wins.
+     */
+    nowrap?: boolean;
     /**
      * Marks the column sortable. Pass a string when the server's sort key
      * differs from the column id — they often do, because one column can show a

package/dist/types/content/calendar-day-scroll.d.ts

@@ -3,8 +3,9 @@
  *
  * The day view runs down through the days and stops gently at each day start: within `STOP_ZONE` pixels of one the
  * wheel slows down, and a scroll that rests close to one glides onto it. The week view scrolls sideways through the
- * days; a wheel or trackpad gesture keeps the axis it started on, and a scroll that rests between two days glides to
- * the nearer day.
+ * days; a wheel or trackpad gesture keeps the axis it started on, and a resting scroll glides to the nearest day start
+ * or, with end space, day end at the edge of the visible room. A scroll no gesture made, such as a reveal, glides on in
+ * its own direction, so what it brought into view stays there.
  */
 /** Pixels before and after a day start in which the wheel slows down. */
 export declare const STOP_ZONE = 72;
@@ -38,5 +39,9 @@ export type WheelAxis = "x" | "y";
 export declare const wheelAxis: (deltaX: number, deltaY: number, shiftKey: boolean) => WheelAxis;
 /** The sideways part of a wheel event on an axis, Shift turning the vertical delta into a sideways one. */
 export declare const wheelDelta: (axis: WheelAxis, deltaX: number, deltaY: number, shiftKey: boolean) => number;
-/** The scroll position of the nearest day start in a strip of equal columns. */
-export declare const snapToColumn: (position: number, width: number) => number;
+/**
+ * The day start nearest to `position` in a strip of equal columns, or with `room` the nearer day edge at either end of
+ * the visible room; ties keep the start. A `heading` of 1 or -1 only looks ahead or back, for a scroll that brought
+ * something into view and must not slide back over it.
+ */
+export declare const snapToColumn: (position: number, width: number, room?: number, heading?: number) => number;

package/dist/types/layout/AppWorkspace.d.ts

@@ -2,6 +2,7 @@ import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav"
 import { type JSX } from "solid-js";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
 import type { ScrollAreaProps } from "./ScrollArea";
+import { type AppWorkspaceSidebarSwitcherProps } from "./SidebarSwitcher";
 export type AppWorkspaceProps = {
     children: JSX.Element;
     class?: string;
@@ -354,6 +355,7 @@ type AppWorkspaceComponent = ((props: AppWorkspaceProps) => JSX.Element) & {
     SidebarDesktop: (props: {
         children: JSX.Element;
     }) => JSX.Element;
+    SidebarSwitcher: (props: AppWorkspaceSidebarSwitcherProps) => JSX.Element;
     SidebarSection: (props: AppWorkspaceSidebarSectionProps) => JSX.Element;
     SidebarBody: (props: AppWorkspaceSidebarBodyProps) => JSX.Element;
     SidebarFooter: (props: AppWorkspaceSidebarContentProps) => JSX.Element;

package/dist/types/layout/SidebarSwitcher.d.ts

@@ -0,0 +1,65 @@
+import { type JSX } from "solid-js";
+/** One container a person can switch to, such as a notebook, a space, or a mailbox. */
+export type AppWorkspaceSwitcherOption = {
+    id: string;
+    label: string;
+    /** One secondary fact, such as a mailbox's address. */
+    description?: string;
+    /** Tabler icon class; without it the row takes the switcher's icon. */
+    icon?: string;
+    /** Tints the icon; without it the app accent does. */
+    color?: string;
+    href: string;
+};
+/** A row below the containers, such as "New notebook" or "All notebooks". */
+export type AppWorkspaceSwitcherAction = {
+    id: string;
+    label: string;
+    icon: string;
+    disabled?: boolean;
+} & ({
+    href: string;
+    action?: never;
+} | {
+    action: () => void;
+    href?: never;
+});
+export type AppWorkspaceSidebarSwitcherProps = {
+    /** The current container's ID among `options`. */
+    currentId: string;
+    /** The current container's name. */
+    label: string;
+    /** One secondary fact under the name, such as a mailbox's address. */
+    description?: string;
+    icon: string;
+    /** Tints the icon; without it the app accent does. */
+    color?: string;
+    /** Names the button's purpose and its panel, such as "Switch notebook". */
+    switchLabel: string;
+    /** Every container the person can switch to, the current one included; `undefined` until they are loaded. */
+    options?: readonly AppWorkspaceSwitcherOption[];
+    /** Shown in place of the options when loading them failed; the panel offers to try again through `onLoad`. */
+    error?: string;
+    /**
+     * Asks for `options` while they are `undefined`: when a pointer or the focus first reaches the button, so the list
+     * is usually there when the panel opens, on every opening, and from the panel's retry. Ignore repeated calls while a
+     * request runs.
+     */
+    onLoad?: () => void;
+    actions?: readonly AppWorkspaceSwitcherAction[];
+    /**
+     * A host menu around the switcher, such as the phone menu, finishes dismissing itself before a chosen container
+     * opens or an action runs; `false` cancels the choice. Navigation passes its own.
+     */
+    beforeSelect?: () => boolean | void | Promise<boolean | void>;
+    /** Sizes the switcher in its place, such as `flex-1` beside a button in one row. */
+    class?: string;
+};
+/** From this many containers the panel scrolls, so it offers a search field. */
+export declare const APP_WORKSPACE_SWITCHER_SEARCH_FROM = 8;
+/**
+ * The current container at the top of a sidebar: its icon, name, and an optional fact, with a chevron that opens the
+ * other containers, a search field when there are many, and actions such as "New …" and "All …". The rows are links,
+ * so a container also opens in a new tab. In a collapsed rail it shows only the icon and opens beside the rail.
+ */
+export declare function AppWorkspaceSidebarSwitcher(props: AppWorkspaceSidebarSwitcherProps): JSX.Element;

package/dist/types/layout/index.d.ts

@@ -40,5 +40,6 @@ export type { SettingsCollectionActionProps, SettingsCollectionItemActionsProps,
 export { default as SettingsCollection } from "./SettingsCollection";
 export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalProps, SettingsModalTabProps, SettingsModalTabTone, } from "./SettingsModal";
 export { default as SettingsModal } from "./SettingsModal";
+export { APP_WORKSPACE_SWITCHER_SEARCH_FROM, type AppWorkspaceSidebarSwitcherProps, type AppWorkspaceSwitcherAction, type AppWorkspaceSwitcherOption, } from "./SidebarSwitcher";
 export type { TabBarItem, TabBarProps } from "./TabBar";
 export { default as TabBar } from "./TabBar";

package/dist/types/layout/navigation-model.d.ts

@@ -1,6 +1,7 @@
 import type { LinkNavigateEvent, NavigationScrollMode } from "@k2b/ssr/nav";
 import type { Accessor } from "solid-js";
 import type { IntentTone } from "../semantics";
+import type { AppWorkspaceSidebarSwitcherProps } from "./SidebarSwitcher";
 /** A status icon at a row's end, such as "running". `label` names it for screen readers and as its tooltip. */
 export type NavigationStatus = {
     icon: string;
@@ -72,6 +73,8 @@ export type NavigationItem = NavigationEntry & ({
 });
 export type NavigationOptions = {
     items: Accessor<readonly NavigationItem[]>;
+    /** The container the navigation works in, shown above the items with the same switcher as the sidebar's head. */
+    switcher?: Accessor<AppWorkspaceSidebarSwitcherProps>;
     onAction?: (action: string) => void | Promise<void>;
     onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
     /** Receives disclosure toggles of items that carry `expanded`; the owner decides the next state. */
@@ -81,6 +84,7 @@ export declare function findNavigationItem(items: readonly NavigationItem[], id:
 /** One live source for renderers; no router, registry, fetching or persisted state. */
 export declare function createNavigation(options: NavigationOptions): {
     items: Accessor<readonly NavigationItem[]>;
+    switcher: Accessor<AppWorkspaceSidebarSwitcherProps> | undefined;
     onNavigate: ((event: LinkNavigateEvent) => void | Promise<void>) | undefined;
     onExpandedChange: ((id: string, expanded: boolean) => void) | undefined;
     activate(id: string): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -45,7 +45,7 @@
   "dependencies": {
     "@fontsource/ibm-plex-mono": "5.3.0",
     "@fontsource/ibm-plex-sans": "5.3.0",
-    "@k2b/stdlib": "0.28.0",
+    "@k2b/stdlib": "0.29.0",
     "@tabler/icons-webfont": "3.48.0",
     "marked": "18.0.14",
     "qr-scanner": "1.4.2"
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.15.0",
+    "@k2b/ssr": "0.15.1",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",