@k2b/ui 0.47.0 → 0.49.0

package/dist/types/chat/chat-messages.d.ts

@@ -134,6 +134,9 @@ export declare const chatMessages: import("@k2b/stdlib").Catalog<{
     openInNewTab: ({ name }: {
         name: string;
     }) => string;
+    uploading: ({ name }: {
+        name: string;
+    }) => string;
     retryOlderMessages: string;
     sendMessage: string;
     startConversation: string;

package/dist/types/chat/types.d.ts

@@ -88,6 +88,11 @@ export type ChatAttachment = {
     data?: unknown;
     /** Optional application-owned action presented below the attachment label. */
     action?: ChatAction;
+    /**
+     * Upload progress in percent while the attachment uploads, such as a draft that saves its files before sending. The
+     * line below the label shows a ring and the percentage instead of `action`.
+     */
+    progress?: number;
 };
 export type ChatUsage = {
     input?: number;

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

@@ -13,12 +13,23 @@ export type CalendarEvent = {
     color?: CalendarEventColor;
     colorHex?: string;
     href?: string;
-    dataSpaceItemId?: string;
+    /**
+     * Host data for the entry's element: each key becomes a `data-*` attribute, `spaceItemId` as `data-space-item-id`.
+     * Keys must be camelCase letters and digits; keys that start with `calendar` belong to the calendar and are left out.
+     */
+    data?: Record<string, string>;
+    /** A Tabler icon class such as `"ti ti-truck"`, drawn before the title in the color of the entry's edge. */
+    icon?: string;
+    /**
+     * Links that belong to the entry, such as an order or a video room. They show in the entry's detail, and week, day,
+     * and the day list show how many there are; an entry never nests them, since it is a link or button itself.
+     */
+    links?: CalendarEventLink[];
     meta?: string;
     description?: string;
     /**
-     * `marker` draws a point in time, such as a deadline, as a colored marker
-     * beside its title instead of a filled band.
+     * `marker` draws a point in time, such as a deadline, with a dashed edge in
+     * its color instead of a filled band.
      */
     display?: "event" | "background" | "marker";
     /**
@@ -27,20 +38,33 @@ export type CalendarEvent = {
      */
     accessibleDetail?: string;
     /**
-     * Day and week views with `dayHours`: the state of the entry's checkbox, such as a to-do's. Leave it out for entries
-     * without one. With `onEventCheck` the reader can change it.
+     * The state of a to-do or deadline, such as a task's. Leave it out for entries without one. `true` strikes the title
+     * through in every view; `false` turns the entry red once it lies in the past. The day and week views with
+     * `dayHours` draw a checkbox, and with `onEventCheck` the reader can change it.
      */
     checked?: boolean;
     location?: string;
     calendarName?: string;
+    /**
+     * The people of the entry. Week and day show up to three faces and then "+n", the day list one, and the compact
+     * month none; the detail lists them all. Without `src` a face shows initials.
+     */
     attendees?: CalendarAttendee[];
     resources?: CalendarResource[];
     recurrence?: CalendarRecurrence;
 };
 export type CalendarAttendee = {
     name: string;
+    /** A picture of the person; without it the face shows initials. */
+    src?: string;
     status?: "accepted" | "declined" | "tentative" | "needs-action";
 };
+export type CalendarEventLink = {
+    label: string;
+    href: string;
+    /** A Tabler icon class before the label; a link icon by default. */
+    icon?: string;
+};
 export type CalendarResource = {
     name: string;
     kind?: "room" | "equipment" | "link" | "other";

package/dist/types/content/calendar-event-detail.d.ts

@@ -0,0 +1,21 @@
+import type { JSX } from "solid-js";
+import type { CalendarEvent } from "./Calendar";
+import { type CalendarOwner } from "./calendar-shared";
+/** The entry the calendar's own detail shows, and the element that opened it, where the focus returns. */
+export type CalendarDetailState = {
+    event: CalendarEvent & {
+        sourceStartDate?: Date;
+        sourceEndDate?: Date;
+    };
+    anchor: HTMLElement;
+};
+/**
+ * The calendar's own detail of an entry, for hosts without `onEventActivate`: its time, place, people, and links, and
+ * "Open" for its `href`. It lies beside the entry, and on a phone it rises from the bottom. Escape and a click outside
+ * close it, and the focus goes back to the entry.
+ */
+export declare const CalendarEventDetail: (props: {
+    owner: CalendarOwner;
+    state: CalendarDetailState | null;
+    onClose: () => void;
+}) => JSX.Element;

package/dist/types/content/calendar-messages.d.ts

@@ -151,6 +151,22 @@ declare const calendarMessages: import("@k2b/stdlib").Catalog<{
     calendarGoToHint: string;
     calendarGoToUnknown: string;
     calendarGoToGo: string;
+    calendarStateDone: string;
+    calendarStateOverdue: string;
+    calendarOverdue: string;
+    calendarDoneState: string;
+    calendarPeopleCount: ({ count }: {
+        count: number;
+    }) => string;
+    calendarLinkCount: ({ count }: {
+        count: number;
+    }) => string;
+    calendarPeople: string;
+    calendarLinks: string;
+    calendarOpenEvent: string;
+    calendarEventDetail: ({ title }: {
+        title: string;
+    }) => string;
 }>;
 export type CalendarMessages = ReturnType<(typeof calendarMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale, like the rest of @k2b/ui. */

package/dist/types/content/calendar-shared.d.ts

@@ -16,7 +16,18 @@ export type CalendarStop = {
     minute: number;
 };
 /** What the built-in views read from the props: they only ever link to built-in views. */
-export type CalendarOwner = Omit<CalendarProps, "view" | "customViews" | "children">;
+export type CalendarOwner = Omit<CalendarProps, "view" | "customViews" | "children"> & {
+    /** The calendar's clock, which ticks every minute; an open entry in the past is overdue. */
+    calendarNow?: () => Date;
+    /** Without `onEventActivate`: opens the calendar's own detail of an entry beside the element that opened it. */
+    openEventDetail?: (event: CalendarEvent, anchor: HTMLElement) => void;
+};
+export declare const eventDataAttributes: (data: CalendarEvent["data"]) => Record<string, string>;
+/** An open to-do or deadline whose time has passed. */
+export declare const isOverdue: (event: CalendarEvent & {
+    sourceStartDate?: Date;
+    sourceEndDate?: Date;
+}, now: Date | undefined) => boolean;
 export declare const ownerDateConfig: (owner: CalendarOwner) => DateContext;
 export declare const parseDate: (value: Date | string, context?: DateContext) => Date;
 export declare const validDate: (value: Date) => boolean;
@@ -64,6 +75,10 @@ export declare const EventChip: (props: {
     /** Day and week views: Space on the chip checks the box the calendar draws beside it, as on the box itself. */
     onCheck?: () => void;
     onMovePointerDown?: (event: PointerEvent, onActivate: () => void) => void;
+    /** How many faces of the attendees fit: up to three in a band, one in the day list, none by default. */
+    faces?: number;
+    /** Shows how many links the entry has, where there is room beside the title or time. */
+    linkCount?: boolean;
 }) => JSX.Element;
 /** The width of a text in a font, from a canvas, so a bar can tell whether its title leaves room for a date hint. */
 export declare const textWidth: (text: string, font: string) => number;

package/dist/types/content/calendar-time-view.d.ts

@@ -156,7 +156,7 @@ export declare const compactGermanDate: (text: string, locale: string | undefine
 export declare const shortDay: (view: TimeView, key: string, withMonth?: boolean) => string;
 /** A long day such as "Friday, October 9", with the year when it is not this year's. */
 export declare const longDay: (view: TimeView, key: string) => string;
-/** A to-do's checkbox: it draws its check, and the title beside it strikes through. */
+/** A to-do's check: a small ring in the entry's color before its title that fills when done; the title strikes through. */
 export declare const TimeCheck: (props: {
     view: TimeView;
     event: CalendarEvent;

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

@@ -1,4 +1,4 @@
-export type { CalendarAttendee, CalendarCommand, CalendarController, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventRenderContext, CalendarEventTimeChange, CalendarExternalDrag, CalendarLabels, CalendarProps, CalendarQuickCreateControls, CalendarRange, CalendarRecurrence, CalendarResource, CalendarSelectionControls, CalendarView, } from "./Calendar";
+export type { CalendarAttendee, CalendarCommand, CalendarController, CalendarCustomView, CalendarDayBadge, CalendarEvent, CalendarEventColor, CalendarEventLink, CalendarEventRenderContext, CalendarEventTimeChange, CalendarExternalDrag, CalendarLabels, CalendarProps, CalendarQuickCreateControls, CalendarRange, CalendarRecurrence, CalendarResource, CalendarSelectionControls, CalendarView, } from "./Calendar";
 export { default as Calendar } from "./Calendar";
 export type { ChartKind, ChartLabels, ChartProps, ChartRenderOptions } from "./Chart";
 export { default as Chart } from "./Chart";

package/dist/types/feedback/prompt-confirm.d.ts

@@ -2,8 +2,10 @@ import { type JSX } from "solid-js";
 import { type DialogTone } from "./dialog-tone";
 import type { ConfirmOptions, DialogOptions } from "./prompts";
 export type PromptContent = string | HTMLElement | JSX.Element;
-/** A prompt's `variant` is its tone too: a success or danger prompt carries the dialog tone of that name. */
+/** A prompt's `variant` is its tone too: a success, warning or danger prompt carries the dialog tone of that name. */
 export declare const promptTone: (variant: DialogOptions["variant"]) => DialogTone | undefined;
+/** A warning asks for care, not for a destructive act: its confirm button stays primary. */
+export declare const promptButtonVariant: (variant: DialogOptions["variant"]) => "danger" | "primary" | "success";
 export declare const DialogHeader: (props: {
     close: () => void;
     title?: string;

package/dist/types/feedback/prompts.d.ts

@@ -9,7 +9,7 @@ export interface DialogOptions {
     icon?: string;
     confirmText?: string;
     cancelText?: string | false;
-    variant?: "danger" | "primary" | "success";
+    variant?: "danger" | "primary" | "success" | "warning";
     /** `full` fills the available viewport and becomes edge-to-edge on narrow screens. */
     size?: "small" | "medium" | "large" | "wide" | "full";
     surface?: "default" | "bare";
@@ -143,7 +143,7 @@ type PromptFormOptions<T extends Record<string, FieldSchema>> = {
     fields: T;
     confirmText?: string;
     cancelText?: string | false;
-    variant?: "danger" | "primary" | "success";
+    variant?: "danger" | "primary" | "success" | "warning";
     size?: DialogOptions["size"];
     cancelBehavior?: DialogOptions["cancelBehavior"];
 };

package/dist/types/inputs/NumberInput.d.ts

@@ -6,7 +6,7 @@ export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "
     min?: number;
     /** Stepper increment and commit grid; defaults to `1`. A fractional step also sets the default `decimalPlaces`. */
     step?: number;
-    /** Accepted fraction digits. Defaults to the fraction digits of `step` (`0.01` → `2`, `1` → `0`); an explicit value wins. */
+    /** Accepted and displayed fraction digits. Defaults to the fraction digits of `step` (`0.01` → `2`, `1` → `0`); an explicit value wins. */
     decimalPlaces?: number;
     allowNegative?: boolean;
     clearable?: boolean;

package/dist/types/inputs/dictation/dictation-messages.d.ts

@@ -31,6 +31,7 @@ export declare const dictationMessages: import("@k2b/stdlib").Catalog<{
     blockedBody: string;
     blockedStep1: string;
     blockedStep2: string;
+    blockedApp: string;
     retry: string;
     quotaTitle: string;
     quotaBody: ({ time }: {

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

@@ -2,6 +2,7 @@ import { type AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarIt
 export type { AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarItemStatus";
 import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav";
 import { type JSX } from "solid-js";
+import { type DropdownItem, type DropdownSearch } from "../actions/Dropdown";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
 import { type AppWorkspaceWidthShare } from "./app-workspace-width";
 import type { ScrollAreaProps } from "./ScrollArea";
@@ -118,6 +119,12 @@ export type AppWorkspaceMainPaneProps = {
     };
     /** Controls at the end of the level head. */
     actions?: JSX.Element;
+    /**
+     * Levels mode: the title opens a menu of places to switch to, such as the person's work and each Space; on a phone
+     * it opens as a sheet. The title stays the level's heading and gains a chevron; the server HTML already says that
+     * it opens a menu.
+     */
+    switcher?: AppWorkspaceLevelSwitcher;
     /**
      * Levels mode: `"page"` marks the level that holds the page itself, such as a settings form or the list of an
      * area, rather than a column that leads there or a detail beside it. Its title takes the page step of the type
@@ -141,6 +148,13 @@ export type AppWorkspaceMainPaneProps = {
     scrollFade?: boolean;
     children: JSX.Element;
 };
+/** The places a level title switches between; `label` names the menu, such as "Switch Space". */
+export type AppWorkspaceLevelSwitcher = {
+    label: string;
+    items: readonly DropdownItem[];
+    /** A search field above the places, for a long list. */
+    search?: DropdownSearch;
+};
 export type AppWorkspaceDetailWidth = "sm" | "md" | "lg" | "xl";
 export type AppWorkspaceDetailProps = {
     children: JSX.Element;
@@ -295,7 +309,8 @@ export type AppWorkspaceSidebarItemProps = {
     /**
      * Marks the current page (`aria-current="page"`). On a page deeper than the
      * sidebar lists, pass `"ancestor"` for the item that contains it: it keeps
-     * the highlight, and the page keeps its back link.
+     * the highlight and, while the sidebar shows, is the way up, so the head
+     * drops its back link as beside the current page.
      */
     active?: boolean | "ancestor";
     activeClass?: string;

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

@@ -43,6 +43,11 @@ export type MobileShellHeaderProps = {
     /** Controls after the title, such as a menu. */
     actions?: JSX.Element;
 };
+/**
+ * The height the on-screen keyboard covers at the bottom of the layout viewport, from the visual viewport; zero
+ * without a keyboard or without `visualViewport`.
+ */
+export declare const keyboardInset: (view: Pick<Window, "innerHeight" | "visualViewport">) => number;
 /**
  * Marks the shell around `from` as showing a screen of its own, or not, after the first paint; the server renders
  * the first state with the `screen` prop. Does nothing outside a shell.

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

@@ -1,7 +1,7 @@
 export { AnchoredPopover, type AnchoredPopoverProps } from "./AnchoredPopover";
 export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPanelProps, AppOverviewProps, } from "./AppOverview";
 export { default as AppOverview } from "./AppOverview";
-export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceHeadProps, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, AppWorkspaceWidthShare, } from "./AppWorkspace";
+export type { AppWorkspaceBottomDrawerHeight, AppWorkspaceBottomDrawerProps, AppWorkspaceContentProps, AppWorkspaceDetailProps, AppWorkspaceDetailWidth, AppWorkspaceHeadProps, AppWorkspaceLevelSwitcher, AppWorkspaceMainPaneProps, AppWorkspaceMainProps, AppWorkspaceNavTreeItemProps, AppWorkspaceNavTreeMove, AppWorkspaceNavTreeProps, AppWorkspaceProps, AppWorkspaceSidebarAccessoryVisibility, AppWorkspaceSidebarBodyProps, AppWorkspaceSidebarIconActionProps, AppWorkspaceSidebarIconActionTone, AppWorkspaceSidebarIconGridProps, AppWorkspaceSidebarItemActionProps, AppWorkspaceSidebarItemActionsProps, AppWorkspaceSidebarItemIconProps, AppWorkspaceSidebarItemLabelProps, AppWorkspaceSidebarItemMetaProps, AppWorkspaceSidebarItemProps, AppWorkspaceSidebarItemStatusProps, AppWorkspaceSidebarItemTone, AppWorkspaceSidebarProps, AppWorkspaceSidebarSectionProps, AppWorkspaceSidebarVisibility, AppWorkspaceWidthShare, } from "./AppWorkspace";
 export { appWorkspaceDetailElementId, default as AppWorkspace } from "./AppWorkspace";
 export { AppWorkspaceSidebarItemStatus } from "./AppWorkspaceSidebarItemStatus";
 export { watchAppHostWidth } from "./app-host-width";
@@ -50,6 +50,7 @@ export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalPr
 export { default as SettingsModal } from "./SettingsModal";
 export { APP_WORKSPACE_SWITCHER_SEARCH_FROM, type AppWorkspaceSidebarSwitcherProps, type AppWorkspaceSwitcherAction, type AppWorkspaceSwitcherOption, } from "./SidebarSwitcher";
 export { measureScrollFade } from "./scroll-fade";
+export { attachSheetHandle, type SheetHandleOptions } from "./sheet-handle";
 export type { TabBarItem, TabBarProps } from "./TabBar";
 export { default as TabBar } from "./TabBar";
 export type { TableOfContentsItem, TableOfContentsProps } from "./TableOfContents";

package/dist/types/layout/sheet-handle.d.ts

@@ -0,0 +1,21 @@
+export type SheetHandleOptions = {
+    /** The sheet the handle sits on. It carries the current detent in `data-sheet-detent`. */
+    sheet: HTMLElement;
+    /** The detents' names, lowest first. The stylesheet gives each `[data-sheet-detent="…"]` its height. */
+    detents: readonly string[];
+    /** The detent the stylesheet draws while the sheet has no `data-sheet-detent`, such as in the server's markup. */
+    initial: string;
+    /** After a drag or a press moved the sheet to another detent, for example to rename the handle. */
+    onChange?: (detent: string) => void;
+    /** Without it, a drag stops at the lowest detent; with it, a drag well below that detent asks to close. */
+    onDismiss?: () => void;
+};
+/**
+ * Lets a sheet's handle drag it between detents. The handle stays a button: a press, by pointer, Enter or Space,
+ * moves the sheet to the next detent up, and from the highest back to the lowest. A drag follows the pointer with an
+ * inline height and, on release, snaps to the detent nearest to where the pointer's speed would carry it. The snap
+ * animates with the sheet's own height transition, so reduced motion makes it instant. The stylesheet owns every
+ * resting height, which keeps the server's first frame and a rotation correct without script; the handle measures
+ * them when a drag starts.
+ */
+export declare function attachSheetHandle(handle: HTMLElement, options: SheetHandleOptions): () => void;

package/dist/types/surfaces/NoticeCard.d.ts

@@ -14,8 +14,11 @@ type NoticeCardContentProps = {
 };
 export type NoticeCardProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class" | "title"> & NoticeCardContentProps & {
     tone?: NoticeTone;
-    /** A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. */
-    icon?: string;
+    /**
+     * A Tabler icon class. Turns the notice into a compact status line whose icon and text take the tone colour. `true`
+     * takes the tone's own icon, the one a toned dialog shows, and names the tone for screen readers.
+     */
+    icon?: string | true;
     class?: string;
     bodyClass?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.47.0",
+  "version": "0.49.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",