@k2b/ui 0.46.0 → 0.48.0

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

@@ -19,6 +19,11 @@ export type ChatDecisionProps = {
     remember?: ChatDecisionAnswer;
     /** Turns `confirm` and `remember` off; this reason replaces `reason` in the same place. */
     unavailable?: ChatDecisionReason;
+    /**
+     * Turns every answer off until the reason clears, such as no connection, so no answer is lost on the way; this
+     * reason replaces `reason` and `unavailable` in the same place.
+     */
+    waiting?: ChatDecisionReason;
     /** The result line shown in every state but `open`, usually `Chat.Outcome`. */
     outcome?: JSX.Element;
     /** Receives a rejected promise from an answer's `onSelect`. */

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/inputs/Combobox.d.ts

@@ -5,6 +5,8 @@ export type ComboboxOption = {
     label: string;
     description?: string;
     icon?: string;
+    /** Shown but cannot be picked, such as someone who is already on the list; say why in `description`. */
+    disabled?: boolean;
 };
 export type ComboboxProps = FieldProps & {
     readOnly?: 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

@@ -1,3 +1,5 @@
+import { type AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarItemStatus";
+export type { AppWorkspaceSidebarItemStatusProps } from "./AppWorkspaceSidebarItemStatus";
 import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav";
 import { type JSX } from "solid-js";
 import { type AppWorkspaceLayoutState } from "./app-workspace-state";
@@ -361,34 +363,6 @@ export type AppWorkspaceSidebarItemActionsProps = {
     children: JSX.Element;
     visibility?: AppWorkspaceSidebarAccessoryVisibility;
 };
-/**
- * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
- * so the row keeps its height and the label its start in every state.
- */
-export type AppWorkspaceSidebarItemStatusProps = {
-    /**
-     * A positive number shows a count (above 99 as "99+") and sets the label in
-     * a stronger weight; `true` shows a quiet dot for new activity that should
-     * not draw attention, such as in a muted conversation.
-     */
-    unread?: number | boolean;
-    /** Marks unread items that mention the person with "@". */
-    mention?: boolean;
-    /**
-     * Shows a muted bell, and the item reads as set aside: its label in the muted ink without unread weight, and a
-     * mention count without its fill.
-     */
-    muted?: boolean;
-    /**
-     * Items that wait for the person, such as requests to approve, in the unread slot instead of `unread`. `label` is
-     * the phrase a screen reader hears, for example "3 waiting". `0` stays as a muted count, for a count that dropped
-     * to zero while the row is still shown; leave the prop out when nothing waits.
-     */
-    waiting?: {
-        count: number;
-        label: string;
-    };
-};
 export type AppWorkspaceNavTreeProps = {
     children: JSX.Element;
     ariaLabel: string;

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

@@ -0,0 +1,30 @@
+import { type JSX } from "solid-js";
+/**
+ * Unread state for the trailing `meta` slot. Every mark keeps a fixed width,
+ * so the row keeps its height and the label its start in every state.
+ */
+export type AppWorkspaceSidebarItemStatusProps = {
+    /**
+     * A positive number shows a count (above 99 as "99+") and sets the label in
+     * a stronger weight; `true` shows a quiet dot for new activity that should
+     * not draw attention, such as in a muted conversation.
+     */
+    unread?: number | boolean;
+    /** Marks unread items that mention the person with "@". */
+    mention?: boolean;
+    /**
+     * Shows a muted bell, and the item reads as set aside: its label in the muted ink without unread weight, and a
+     * mention count without its fill.
+     */
+    muted?: boolean;
+    /**
+     * Items that wait for the person, such as requests to approve, in the unread slot instead of `unread`. `label` is
+     * the phrase a screen reader hears, for example "3 waiting". `0` stays as a muted count, for a count that dropped
+     * to zero while the row is still shown; leave the prop out when nothing waits.
+     */
+    waiting?: {
+        count: number;
+        label: string;
+    };
+};
+export declare const AppWorkspaceSidebarItemStatus: (props: AppWorkspaceSidebarItemStatusProps) => JSX.Element;

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

@@ -1,4 +1,5 @@
 import { type JSX } from "solid-js";
+import type { DropdownItem } from "../actions/Dropdown";
 import { type AvatarShape } from "../surfaces/Avatar";
 export type DetailPresencePerson = {
     /** Stable key, such as the account id. */
@@ -99,9 +100,25 @@ export type DetailLinkItem = {
     onClick?: (event: MouseEvent) => void;
     /** Defaults to a document. */
     icon?: string;
+    /** Replaces the icon, such as a site's favicon. */
+    leading?: JSX.Element;
+    /** One quiet line below the title, such as where the item lives. */
+    description?: JSX.Element;
     /** Quiet text at the end, such as the other notebook's name. */
     trailing?: JSX.Element;
-};
+    /** For a link to another site, such as `_blank` with `rel="noreferrer"`. */
+    target?: string;
+    rel?: string;
+    /** An item that cannot be opened right now, such as one the person may no longer read. */
+    disabled?: boolean;
+} & ({
+    menuItems?: never;
+    menuLabel?: never;
+} | {
+    /** Further commands on the item, such as "Unlink", only for people who may run them. */
+    menuItems: readonly DropdownItem[];
+    menuLabel: string;
+});
 export type DetailLinksProps = {
     /** What links here. */
     incoming: readonly DetailLinkItem[];
@@ -112,9 +129,20 @@ export type DetailLinksProps = {
     /** Defaults to "Links". */
     title?: string;
     defaultOpen?: boolean;
+    /**
+     * `loading` while links still load after the first paint: a placeholder row keeps their place. `error` keeps the
+     * loaded rows and says that the rest failed, with `onRetry`.
+     */
+    state?: "ready" | "loading" | "error";
+    onRetry?: () => void;
+    /** Rows after the links, such as "Add link" or "Load more", only for people who may use them. */
+    footer?: JSX.Element;
     class?: string;
 };
-/** "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet". */
+/**
+ * "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet", followed by the
+ * `footer` when there is one.
+ */
 export declare function DetailLinks(props: DetailLinksProps): JSX.Element;
 export type DetailProperty = {
     id: string;
@@ -134,6 +162,8 @@ export type DetailPropertiesProps = {
     summary?: JSX.Element;
     /** Open by default only when the properties are the object's main content. */
     defaultOpen?: boolean;
+    /** Rows after the facts, such as a command that copies the object's ID. */
+    children?: JSX.Element;
     class?: string;
 };
 /** Facts about the object as label and value rows, such as created, edited, size, and the way to its history. */

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

@@ -18,6 +18,12 @@ export type MobileShellProps = {
      * tab's page loads.
      */
     scroll?: boolean;
+    /**
+     * The content is a screen of its own, such as an open chat on a phone: the footer steps aside, so the content
+     * reaches the bottom edge and pads its safe area itself. Content that opens or leaves such a screen in place calls
+     * `MobileShell.setScreen`.
+     */
+    screen?: boolean;
     class?: string;
 };
 export type MobileShellHeaderProps = {
@@ -37,6 +43,11 @@ export type MobileShellHeaderProps = {
     /** Controls after the title, such as a menu. */
     actions?: JSX.Element;
 };
+/**
+ * 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.
+ */
+declare const setMobileShellScreen: (from: Element, screen: boolean) => void;
 /**
  * Keeps a mounted shell working: the footer height on the body, which the portalled toast rail reads, the room a
  * persistent toast takes from the scroll area, the scroll area's edge fade, and immediate feedback for link taps.
@@ -86,5 +97,6 @@ declare function MobileShellSidebar(props: MobileShellSidebarProps): JSX.Element
 export declare const MobileShell: typeof MobileShellRoot & {
     Header: typeof MobileShellHeader;
     Sidebar: typeof MobileShellSidebar;
+    setScreen: typeof setMobileShellScreen;
 };
 export default MobileShell;

package/dist/types/layout/detail-sections-messages.d.ts

@@ -50,6 +50,8 @@ declare const detailSectionMessages: import("@k2b/stdlib").Catalog<{
         names: string;
         more: number;
     }) => string;
+    linksLoading: string;
+    linksFailed: string;
     properties: string;
     tags: string;
 }>;

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

@@ -3,6 +3,7 @@ export type { AppOverviewCardsProps, AppOverviewEmptyStateProps, AppOverviewPane
 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 { appWorkspaceDetailElementId, default as AppWorkspace } from "./AppWorkspace";
+export { AppWorkspaceSidebarItemStatus } from "./AppWorkspaceSidebarItemStatus";
 export { watchAppHostWidth } from "./app-host-width";
 export type { AppWorkspaceControllerOptions } from "./app-workspace-controller";
 export { installAppWorkspaceController, parkWorkspaceDetailDrawers } from "./app-workspace-controller";

package/package.json

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