@k2b/ui 0.33.0 → 0.34.0

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

@@ -8,9 +8,18 @@ export type DetailPanelProps = {
     class?: string;
 };
 type DetailPanelHeaderBaseProps = {
+    /** A short line above the title that names what is shown, such as "Conversation", followed by its state. */
+    kind?: JSX.Element;
     title: JSX.Element;
     subtitle?: JSX.Element;
     meta?: JSX.Element;
+    /**
+     * The resource's "…" menu, shown before `actions`. Pass every less frequent command on the shown resource here,
+     * so each panel opens its menu from the same place; an empty list shows no button.
+     */
+    menu?: readonly DropdownItem[];
+    /** Accessible name of the "…" button. Defaults to "More actions". */
+    menuLabel?: string;
     actions?: JSX.Element;
     primaryActions?: JSX.Element;
     class?: string;
@@ -37,6 +46,11 @@ export type DetailPanelSummaryProps = {
 export type DetailPanelGroupProps = {
     children: JSX.Element;
     label?: string;
+    /**
+     * A visible quiet title, such as "More about this conversation". Its sections then stand flush as rows below
+     * it, which suits collapsed secondary sections with a `summary`.
+     */
+    title?: JSX.Element;
     class?: string;
 };
 export type DetailPanelTone = "accent" | "neutral" | "success" | "warning" | "danger";
@@ -90,6 +104,7 @@ export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
     children?: JSX.Element;
     actions?: JSX.Element;
     collapsible?: false;
+    summary?: never;
     defaultOpen?: never;
     open?: never;
     onOpenChange?: never;
@@ -98,6 +113,8 @@ export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
     children: JSX.Element;
     actions?: never;
     collapsible: true;
+    /** One line that says what the closed section holds, such as its newest entry; hidden while open. */
+    summary?: JSX.Element;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;

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

@@ -48,8 +48,11 @@ export declare function observeMobileShell(root: HTMLElement): () => void;
 declare function MobileShellRoot(props: MobileShellProps): JSX.Element;
 declare function MobileShellHeader(props: MobileShellHeaderProps): JSX.Element;
 export type MobileShellSidebarItem = TabBarItem & {
-    /** A count after the label, such as unread messages; 0 shows nothing. */
-    count?: number;
+    /**
+     * A quiet count after the label, such as open tasks: a number (0 shows nothing) or an element that renders one. The
+     * item's `badge`, which calls for attention, takes its place.
+     */
+    count?: number | JSX.Element;
 };
 export type MobileShellSidebarProps = {
     /** Accessible name of the navigation landmark; usually the tab bar's. */

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

@@ -3,6 +3,8 @@ import { type ButtonVariant } from "../actions/Button";
 import type { MaybeAccessor } from "../inputs/field-contract";
 export type SettingsPageProps = {
     title: JSX.Element;
+    /** False when a surrounding head already shows the title, such as a workspace level; the actions move to the footer. */
+    header?: boolean;
     subtitle?: JSX.Element;
     icon?: string;
     actions?: JSX.Element;
@@ -69,4 +71,24 @@ export type SettingsSaveBarProps = {
 export declare function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element;
 export type SettingsPanelFooterProps = SettingsSaveBarProps;
 export declare function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element;
+export type SaveStatusState = "saved" | "draft" | "saving" | "failed" | "invalid" | "unknown" | "readonly";
+export type SaveStatusProps = {
+    /** What the person's values are now: saved, a draft with changes, being saved, or a problem that kept them unsaved. */
+    state: MaybeAccessor<SaveStatusState>;
+    /** Formatted time of the last save, shown with `saved`. */
+    savedAt?: MaybeAccessor<string | undefined>;
+    /** Fields to check, shown with `invalid`. Default 1. */
+    invalidCount?: MaybeAccessor<number>;
+    /** With both handlers, Discard and Save follow the status while there is something to save. */
+    onDiscard?: () => void;
+    onSave?: () => void;
+    saveLabel?: string;
+    saveDisabled?: MaybeAccessor<boolean>;
+    class?: string;
+};
+/**
+ * The save status of a settings form at one fixed place, usually the head of its column. It reserves its width, so
+ * a change of state never moves the title or the buttons beside it. Problems with one field stay at that field.
+ */
+export declare function SaveStatus(props: SaveStatusProps): JSX.Element;
 export {};

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

@@ -0,0 +1,26 @@
+import { type JSX } from "solid-js";
+/**
+ * True while `element` sits in the collapsed sidebar rail, which shows icons
+ * without labels. The stylesheet sets `--k2b-sidebar-rail` exactly where it
+ * collapses the sidebar, so this follows the same container width and state.
+ */
+export declare const inSidebarRail: (element: Element | undefined) => boolean;
+/**
+ * A sidebar entry's name, or its `title`, in the hint the Cloud app rail uses.
+ * In the collapsed rail it names the icon beside it at once. Elsewhere it
+ * shows above the entry with the usual delay, and only when it says more than
+ * the visible label: a label cut off, or a title with details. A native
+ * `title` on `target` gives way to it, so no hint shows twice.
+ */
+export declare function SidebarRailHint(props: {
+    target: () => HTMLElement | undefined;
+    label: string | undefined;
+    /** The element that holds keyboard focus for the entry, when that is not `target`. */
+    focusTarget?: () => HTMLElement | undefined;
+    /** The visible label text inside `target`. */
+    labelSelector: string;
+    /** The entry renders a native `title`, which the hint replaces from the first hover or focus. */
+    titled?: boolean;
+    /** Called once the hint takes over; the entry stops rendering its native `title`. */
+    onArm?: () => void;
+}): JSX.Element;

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

@@ -9,6 +9,11 @@ export type TabBarItem = {
     title?: string;
     /** The page this item leads to is open. */
     current?: boolean;
+    /**
+     * A mark at the icon's corner that calls for attention, such as an unread count. Its element names the count for
+     * screen readers; an empty one takes no space.
+     */
+    badge?: JSX.Element;
 };
 export type TabBarProps = {
     /** Accessible name of the navigation landmark. */

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

@@ -8,6 +8,7 @@ declare const detailPanelMessages: import("@k2b/stdlib").Catalog<{
         count: number;
     }) => string;
     showLess: string;
+    moreActions: string;
 }>;
 export type DetailPanelMessages = ReturnType<(typeof detailPanelMessages)["resolve"]>["t"];
 export declare const useDetailPanelMessages: () => (() => DetailPanelMessages);

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

@@ -1,3 +1,4 @@
+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";
@@ -37,8 +38,8 @@ export { default as ResizeSeparator, type ResizeSeparatorProps } from "./ResizeS
 export { attachResizeSeparator, type ResizeSeparatorOptions } from "./resize-separator";
 export type { ScrollAreaProps } from "./ScrollArea";
 export { default as ScrollArea } from "./ScrollArea";
-export type { SettingsFieldControlProps, SettingsFieldProps, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
-export { readSettingsError, SettingsField, SettingsGroup, SettingsPage, SettingsPanelFooter, SettingsSaveBar, SettingsSection, sameSettingValue, } from "./Settings";
+export type { SaveStatusProps, SaveStatusState, SettingsFieldControlProps, SettingsFieldProps, SettingsGroupActionProps, SettingsGroupProps, SettingsPageProps, SettingsPanelFooterProps, SettingsSaveBarProps, SettingsSectionProps, } from "./Settings";
+export { readSettingsError, SaveStatus, SettingsField, SettingsGroup, SettingsPage, SettingsPanelFooter, SettingsSaveBar, SettingsSection, sameSettingValue, } from "./Settings";
 export type { SettingsCollectionActionProps, SettingsCollectionItemActionsProps, SettingsCollectionItemProps, SettingsCollectionItemReorderProps, SettingsCollectionItemStatusProps, SettingsCollectionProps, } from "./SettingsCollection";
 export { default as SettingsCollection } from "./SettingsCollection";
 export type { SettingsModalFooterProps, SettingsModalGroupProps, SettingsModalProps, SettingsModalTabProps, SettingsModalTabTone, } from "./SettingsModal";

package/dist/types/layout/settings-messages.d.ts

@@ -11,12 +11,24 @@ declare const settingsMessages: import("@k2b/stdlib").Catalog<{
         label: string;
     }) => string;
     saveChanges: string;
+    save: string;
     saving: string;
     unsaved: string;
     unsavedChangeLabel: ({ count }: {
         count: number;
     }) => string;
     noUnsavedChanges: string;
+    statusSaved: string;
+    statusSavedAt: ({ time }: {
+        time: string;
+    }) => string;
+    statusDraft: string;
+    statusFailed: string;
+    statusInvalid: ({ count }: {
+        count: number;
+    }) => string;
+    statusUnknown: string;
+    statusReadOnly: string;
 }>;
 export type SettingsMessages = ReturnType<(typeof settingsMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -0,0 +1,22 @@
+import { type JSX } from "solid-js";
+/** `accent` = the app colour (it worked), `ai` = came from AI, `muted` = nothing happened. */
+export type DotStripTone = "accent" | "warning" | "danger" | "ai" | "muted";
+export type DotStripProps = {
+    /** Outcomes in order, left to right. */
+    dots: readonly DotStripTone[];
+    /** Total slots. Slots after `dots` show as empty rings, so a growing strip keeps its size. Defaults to `dots.length`. */
+    length?: number;
+    /** Shows every slot as a quiet placeholder, for "nothing checked yet". */
+    waiting?: boolean;
+    /** Index of the dot that belongs to the item shown next to the strip. */
+    selected?: number | null;
+    size?: "md" | "lg";
+    /** Dots per row; more wrap into further rows of the same width. Defaults to one row. */
+    columns?: number;
+    /** Names the strip and its counts, for example "Last 50 mails: 17 matched, 6 skipped, 27 not". */
+    label: string;
+    class?: string;
+};
+/** A fixed-size row of outcome dots: the last runs, checks or mails at a glance. */
+export declare function DotStrip(props: DotStripProps): JSX.Element;
+export default DotStrip;

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

@@ -1,6 +1,7 @@
 import { type JSX } from "solid-js";
 import type { IntentTone } from "../semantics";
-export type ProgressRingTone = Extract<IntentTone, "info" | "warning" | "danger">;
+/** `accent` draws the ring in the app's own colour, for progress that belongs to the app rather than to a state. */
+export type ProgressRingTone = Extract<IntentTone, "info" | "warning" | "danger"> | "accent";
 export type ProgressRingProps = {
     value: number;
     tone?: ProgressRingTone;

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

@@ -1,9 +1,12 @@
 import { type JSX } from "solid-js";
+import type { LinkCardColor } from "./LinkCard";
 /**
  * What a card can show of the element it stands for: the element itself, a placeholder while it is being looked up, or
  * why it cannot be shown.
  */
 export type ResourceCardState = "ok" | "loading" | "no_access" | "deleted" | "unavailable";
+/** The icon chip's colour, from the same palette as `LinkCard`. */
+export type ResourceCardColor = LinkCardColor;
 export type ResourceCardProps = {
     /** Defaults to `"ok"`. Every state has the same size, so a card that changes state moves nothing around it. */
     state?: ResourceCardState;
@@ -11,6 +14,12 @@ export type ResourceCardProps = {
     title?: string;
     /** Icon class of the element's kind, for example `ti ti-notebook`. Shown only in state `"ok"`. */
     icon?: string;
+    /** Colour of the icon chip, usually one per kind of element. Without it the chip stays neutral. Only in state `"ok"`. */
+    color?: ResourceCardColor;
+    /** One line above the title: what and where the element is, for example "Task in IT planning · due 30 Oct". Only in state `"ok"`. */
+    context?: string;
+    /** The element's current state as a short label, for example "Open", shown at the end. Only in state `"ok"`. */
+    status?: string;
     /** What the element belongs to, for example the application or service. Shown only in state `"ok"`. */
     source?: string;
     /** Where the element lives within its source, for example a folder or a project. Shown only in state `"ok"`. */

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

@@ -4,6 +4,8 @@ export type { AvatarStackPerson, AvatarStackProps } from "./AvatarStack";
 export { AvatarStack } from "./AvatarStack";
 export type { DescriptionListItem, DescriptionListProps } from "./DescriptionList";
 export { DescriptionList } from "./DescriptionList";
+export type { DotStripProps, DotStripTone } from "./DotStrip";
+export { DotStrip } from "./DotStrip";
 export type { LinkCardColor, LinkCardProps } from "./LinkCard";
 export { LinkCard } from "./LinkCard";
 export type { NotFoundStateAction, NotFoundStateProps } from "./NotFoundState";
@@ -18,7 +20,8 @@ export type { ProgressBarProps, ProgressBarTone } from "./ProgressBar";
 export { ProgressBar } from "./ProgressBar";
 export type { ProgressRingProps, ProgressRingTone } from "./ProgressRing";
 export { ProgressRing } from "./ProgressRing";
-export type { ResourceCardProps, ResourceCardState } from "./ResourceCard";
+export { PERSON_COLORS, personColor } from "./person-color";
+export type { ResourceCardColor, ResourceCardProps, ResourceCardState } from "./ResourceCard";
 export { ResourceCard } from "./ResourceCard";
 export { Skeleton, type SkeletonProps } from "./Skeleton";
 export type { StatCellAccent, StatCellProps, StatCellTone } from "./StatCell";

package/dist/types/surfaces/person-color.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The colors that stand for a person: the tint behind avatar initials, a collaborator's cursor, and the marks and
+ * comments a person leaves. The palette leaves out cyan, which means AI, and yellow, which reads as a text highlight.
+ * Several people can share a color, so a person's name always appears next to it.
+ */
+export declare const PERSON_COLORS: readonly ["#3b82f6", "#6366f1", "#8b5cf6", "#c026d3", "#ec4899", "#e11d48", "#f97316", "#16a34a"];
+/** The palette index for a name, the order of the `.k2b-avatar[data-tint]` rules. Surrounding spaces do not count. */
+export declare const personTint: (name: string) => number;
+/** A person's color from their display name, the same wherever Cloud shows that person. */
+export declare const personColor: (name: string) => string;

package/dist/types/surfaces/resource-messages.d.ts

@@ -3,6 +3,8 @@ declare const resourceMessages: import("@k2b/stdlib").Catalog<{
     resourceNoAccess: string;
     resourceDeleted: string;
     resourceUnavailable: string;
+    resourceKind: string;
+    resourceNoAccessHint: string;
 }>;
 export type ResourceMessages = ReturnType<(typeof resourceMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

package/dist/types/widgets/Widget.d.ts

@@ -1,7 +1,8 @@
 import { type JSX } from "solid-js";
 /**
- * `standard` is 25rem high and `compact` 14rem; `fill` takes the height its container gives it, such as a grid cell,
- * and `content` has no fixed height. Every size except `content` scrolls body content taller than itself.
+ * `standard` is 25rem high and `compact` 14rem; `fill` takes the height and the width its container gives it, such as
+ * a grid cell, and does not size itself from its content; `content` has no fixed height. Every size except `content`
+ * scrolls body content taller than itself.
  */
 export type WidgetSize = "content" | "compact" | "standard" | "fill";
 export type WidgetProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -31,6 +31,11 @@
       "browser": "./dist/browser/chart-inspection.js",
       "default": "./dist/browser/chart-inspection.js"
     },
+    "./charts": {
+      "types": "./dist/types/charts.d.ts",
+      "browser": "./dist/browser/charts.js",
+      "default": "./dist/ssr/charts.js"
+    },
     "./package.json": "./package.json",
     "./map-glyphs/*": "./map-glyphs/*"
   },