@k2b/ui 0.25.0 → 0.27.0

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

@@ -5,11 +5,51 @@ export type ChatCommandContext = {
     submit: () => void;
     focus: () => void;
 };
+/** An action can cancel and restore its token, or report a short completion message. */
+export type ChatCommandResult = void | "cancelled" | {
+    done: string;
+};
+/** A fixed place in the slash list. Sections keep the given order, also while searching. */
+export type ChatCommandSection = {
+    id: string;
+    label: string;
+    /** Rows come from `searchCommands`: loading keeps a heading spinner; empty placeholders reserve the first search or retained rows. */
+    searched?: boolean;
+    /** Only while searching or narrowed: absent from the overview (empty query), including its loading placeholder. */
+    searchOnly?: boolean;
+};
+/** First-word narrowing; Tab writes `words[0]` followed by a space. */
+export type ChatCommandScope = {
+    id: string;
+    title: string;
+    words: readonly string[];
+};
+/** Passed as the third argument to `searchCommands`. */
+export type ChatCommandSearch = {
+    scope?: string;
+};
 export type ChatCommand = {
+    /** Section id; unknown or missing ids render in a trailing part without a heading. */
+    section?: string;
+    /** Tab writes this scope's first word; a row without an action or mention also narrows on Enter. */
+    scope?: string;
+    /** Absent from the overview; appears when searched, including its unavailable reason. */
+    hiddenUntilSearch?: boolean;
+    /** Application name, searchable but not displayed. */
+    app?: string;
+    /** Stable row key for option ids, marking and de-duplication. Defaults to `name`. */
+    id?: string;
     name: string;
     description: string;
     icon?: string;
-    action?: (context: ChatCommandContext) => void | Promise<void>;
+    /** Extra search words, for example in German and English. */
+    keywords?: readonly string[];
+    /** Unavailable now; this short reason replaces the description. */
+    reason?: string;
+    /** Shown in the status line while the action runs. */
+    busyLabel?: string;
+    /** Failures restore an unchanged draft and appear once in the status line, without calling `onError`. */
+    action?: (context: ChatCommandContext) => ChatCommandResult | Promise<ChatCommandResult>;
     /** Selecting a reference inserts its display name and retains its opaque payload. */
     mention?: ChatAttachment;
     label?: string;
@@ -54,7 +94,9 @@ export type ChatComposerProps = {
     /** Compact application-owned details immediately after the model selector. */
     modelDetails?: JSX.Element;
     commands?: readonly ChatCommand[];
-    searchCommands?: (query: string, signal: AbortSignal) => Promise<readonly ChatCommand[]>;
+    commandSections?: readonly ChatCommandSection[];
+    commandScopes?: readonly ChatCommandScope[];
+    searchCommands?: (query: string, signal: AbortSignal, search: ChatCommandSearch) => Promise<readonly ChatCommand[]>;
     mentions?: readonly ChatMention[];
     onMentionsChange?: (mentions: readonly ChatMention[]) => void;
     /** Shared surface above the editor; suggestions temporarily replace this content. */

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

@@ -1,3 +1,4 @@
+import type { ChatCommand } from "./ChatComposer";
 import type { ChatAction } from "./types";
 export declare const nextChatCommandIndex: (index: number, length: number, direction: 1 | -1) => number;
 export declare const isChatNearBottom: (scrollHeight: number, scrollTop: number, clientHeight: number, threshold?: number) => boolean;
@@ -39,3 +40,6 @@ export declare const conversationEnterAction: (key: ChatEnterKey, context: {
     touchOnly: boolean;
     inCodeBlock: boolean;
 }) => "send" | "newline";
+/** Case- and accent-insensitive text for command discovery. */
+export declare const foldChatSearchText: (text: string) => string;
+export declare const chatCommandKey: (command: ChatCommand) => string;

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

@@ -1,4 +1,5 @@
 declare const chatMessages: import("@k2b/stdlib").Catalog<{
+    commandFailed: string;
     attachments: string;
     assistant: string;
     addToChat: string;
@@ -7,6 +8,12 @@ declare const chatMessages: import("@k2b/stdlib").Catalog<{
     chat: string;
     chooseModel: string;
     commands: string;
+    commandsNothingFound: ({ query }: {
+        query: string;
+    }) => string;
+    commandSuggestions: ({ count }: {
+        count: number;
+    }) => string;
     dropFilesToAttach: string;
     conversation: string;
     jumpToLatest: string;

package/dist/types/chat/command-search.d.ts

@@ -0,0 +1,39 @@
+import type { ChatCommand, ChatCommandScope, ChatCommandSection } from "./ChatComposer";
+type Rank = {
+    rank: number;
+    highlight?: readonly [number, number];
+};
+export declare const rankChatCommand: (command: ChatCommand, query: string) => Rank | null;
+export declare function resolveChatCommandScope(word: string, scopes: readonly ChatCommandScope[]): ChatCommandScope | undefined;
+export declare function parseChatCommandQuery(query: string, scopes: readonly ChatCommandScope[]): {
+    scope?: ChatCommandScope;
+    query: string;
+};
+export type ChatCommandRow = {
+    command: ChatCommand;
+    server: boolean;
+    highlight?: readonly [number, number];
+};
+type Group = {
+    section?: ChatCommandSection;
+    scopeTitle?: string;
+    rows: ChatCommandRow[];
+    loading: boolean;
+    placeholder: boolean;
+};
+export declare function chatCommandListModel(input: {
+    query: string;
+    scopes?: readonly ChatCommandScope[];
+    sections?: readonly ChatCommandSection[];
+    commands: readonly ChatCommand[];
+    searchResults: readonly ChatCommand[];
+    searchResultsFresh: boolean;
+    searchSettled: boolean;
+    searching: boolean;
+}): {
+    scope?: ChatCommandScope;
+    groups: Group[];
+    rows: ChatCommandRow[];
+    empty: boolean;
+};
+export {};

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

@@ -6,7 +6,7 @@ import { ChatComposer } from "./ChatComposer";
 import { ChatActivity, ChatContextUsage, ChatMessage } from "./ChatPrimitives";
 import { ChatRoot } from "./ChatRoot";
 import { ChatTimeline } from "./ChatTimeline";
-export type { ChatCommand, ChatCommandContext, ChatComposerProps, ChatFileSelection, ChatPasteHandler } from "./ChatComposer";
+export type { ChatCommand, ChatCommandContext, ChatCommandResult, ChatCommandScope, ChatCommandSearch, ChatCommandSection, ChatComposerProps, ChatFileSelection, ChatPasteHandler, } from "./ChatComposer";
 export type { ChatActivityProps, ChatContextUsageProps, ChatMessageProps } from "./ChatPrimitives";
 export { formatChatTokens } from "./ChatPrimitives";
 export type { ChatRootProps } from "./ChatRoot";

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

@@ -67,7 +67,6 @@ export type BodyHit = {
     minute: number;
 };
 export declare const eventAccent: (event: Pick<CalendarEvent, "color" | "colorHex">) => string;
-export declare const reducedMotion: () => boolean;
 /** Swallows the click a browser sends right after a gesture ends, never the next one. */
 export declare const swallowNextClick: () => void;
 export declare const createTimeView: (props: TimeViewProps) => {

package/dist/types/index.d.ts

@@ -6,6 +6,7 @@ export * from "./inputs";
 export { suppressTextSelection } from "./internal/text-selection";
 export * from "./intl";
 export * from "./layout";
+export { prefersReducedMotion } from "./motion";
 export type { AccentColor, IntentTone } from "./semantics";
 export * from "./surfaces";
 export * from "./widgets";

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

@@ -7,6 +7,7 @@ export type ComboboxOption = {
     icon?: string;
 };
 export type ComboboxProps = FieldProps & {
+    readOnly?: boolean;
     query?: MaybeAccessor<string>;
     onQueryChange?: (query: string) => void;
     placeholder?: string;

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

@@ -21,6 +21,10 @@ export type SelectChipProps<T extends string | number = string> = ValueFieldProp
     /** Exact menu width as a CSS length. Without it the menu sizes to its options, at least `10rem`. */
     menuWidth?: string;
     name?: string;
+    /** Shows that a change from this chip is saving: the chip stays in place with
+     *  its size, cannot be opened, is marked busy, and shows a spinner where its
+     *  chevron (or, icon-only, its icon) is. */
+    loading?: boolean;
 };
 export declare function SelectChip<T extends string | number = string>(props: SelectChipProps<T>): JSX.Element;
 export default SelectChip;

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

@@ -9,7 +9,7 @@ export type AppWorkspaceProps = {
     /** A host with its own phone chrome can use the full canvas below 48rem (768 px). */
     mobileSurface?: "contained" | "flush";
     /** Removes the workspace's own border, radius, and shadow for an overview that is the page itself.
-     * A host may frame the outermost workspace as its app card, as Cloud does from 1536 px on signed-in pages. */
+     * A host may frame the outermost workspace as its app card, as Cloud does from 1024 px on signed-in pages. */
     flat?: boolean;
     resizable?: boolean;
     /**
@@ -41,6 +41,10 @@ export type AppWorkspaceMainProps = {
     /** `"content"` centers the children as one reading column with the shared page width on large screens. */
     width?: "full" | "content";
     mobilePane?: string;
+    /** Levels in DOM order, shallowest first. The URL selects the deepest level by id. */
+    level?: string;
+    /** Enhanced navigation for the back step; otherwise it is a document link. */
+    onLevelNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
     scroll?: boolean;
     scrollFade?: boolean;
     scrollPreserveKey?: string | false;
@@ -49,6 +53,12 @@ export type AppWorkspaceMainProps = {
 export type AppWorkspaceMainPaneProps = {
     id: string;
     label: string;
+    /** Levels mode: URL selecting this level. Required except on the last level. */
+    href?: string;
+    /** Quiet one-line text below the level title. */
+    description?: JSX.Element;
+    /** Controls at the end of the level head. */
+    actions?: JSX.Element;
     surface?: "default" | "navigation";
     open?: boolean;
     resizable?: boolean;
@@ -68,6 +78,8 @@ export type AppWorkspaceDetailProps = {
     id: string;
     class?: string;
     width?: AppWorkspaceDetailWidth;
+    /** Below 48rem, a full page without sheet gestures for a destination such as chat info; defaults to "sheet". */
+    phone?: "sheet" | "page";
     viewTransitionName?: string;
     resizable?: boolean;
     minWidth?: number;

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

@@ -9,6 +9,14 @@ export declare const bottomSheetOptions: {
     contentClassName: string;
     initialFocus: typeof sheetInitialFocus;
 };
+/** A sheet on phones and a centered dialog from 48rem up, for decisions and forms; menus keep
+ * `bottomSheetOptions`. The stylesheet picks the mode with the phone media query, so the first
+ * frame is already right and a rotation or resize switches it in place, without a remount. */
+export declare const bottomSheetAdaptiveOptions: {
+    contentClassName: string;
+    initialFocus: typeof sheetInitialFocus;
+    panelClassName: string;
+};
 export type BottomSheetProps = {
     children: JSX.Element;
     /** Pass dialogCore's render context requestDismiss, never the completion callback. */

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

@@ -6,7 +6,7 @@ export type { AppWorkspaceControllerOptions } from "./app-workspace-controller";
 export { installAppWorkspaceController } from "./app-workspace-controller";
 export type { AppWorkspaceLayoutState, AppWorkspaceResizeKind, } from "./app-workspace-state";
 export { APP_WORKSPACE_DETAIL_DEFAULT, APP_WORKSPACE_DETAIL_MAX, APP_WORKSPACE_DETAIL_MIN, APP_WORKSPACE_DRAWER_DEFAULT, APP_WORKSPACE_DRAWER_MAX, APP_WORKSPACE_DRAWER_MIN, APP_WORKSPACE_MAIN_MIN, APP_WORKSPACE_MAIN_MIN_HEIGHT, APP_WORKSPACE_PANE_DEFAULT, APP_WORKSPACE_PANE_MAX, APP_WORKSPACE_PANE_MIN, APP_WORKSPACE_SIDEBAR_COLLAPSE_THRESHOLD, APP_WORKSPACE_SIDEBAR_COLLAPSED, APP_WORKSPACE_SIDEBAR_DEFAULT, APP_WORKSPACE_SIDEBAR_MAX, APP_WORKSPACE_SIDEBAR_MIN, appWorkspaceLayoutStyle, appWorkspacePanelVariable, appWorkspaceResizeLimits, normalizeAppWorkspaceLayoutState, parseAppWorkspaceLayoutState, resolveAppWorkspaceSidebarWidth, safeAppWorkspacePanelId, serializeAppWorkspaceLayoutState, shouldCollapseAppWorkspaceSidebar, } from "./app-workspace-state";
-export { type BottomSheetProps, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
+export { type BottomSheetProps, bottomSheetAdaptiveOptions, bottomSheetOptions, default as BottomSheet } from "./BottomSheet";
 export type { DataPanelProps } from "./DataPanel";
 export { DataPanel } from "./DataPanel";
 export type { DetailPanelActionButtonProps, DetailPanelActionLinkProps, DetailPanelActionProps, DetailPanelActionSecondary, DetailPanelBodyProps, DetailPanelGroupProps, DetailPanelHeaderProps, DetailPanelProps, DetailPanelSectionProps, DetailPanelSummaryProps, DetailPanelTone, } from "./DetailPanel";

package/dist/types/layout/scroll-fade.d.ts

@@ -1,3 +1,5 @@
+/** Self-contained because the sidebar inline script embeds its source. */
+export declare function scrollFadeEdges(body: HTMLElement): "top" | "bottom" | "both" | undefined;
 export declare function createScrollFade(element: () => HTMLElement | undefined, enabled: () => boolean): void;
 /** Enrich only explicitly marked UI scrollports, including SSR and later navigation. */
 export declare function installScrollFades(root: Document | HTMLElement): () => void;

package/dist/types/layout/sidebar-scroll-memory.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Runs at parse time and on client mount. Keep this function self-contained:
+ * the inline script embeds its source with String(rememberSidebarScroll).
+ * Memory uses the body's scroll-preserve key, or the page path, and position.
+ */
+export declare function rememberSidebarScroll(body: HTMLElement | null, fadeEdges: (body: HTMLElement) => string | undefined): () => void;

package/dist/types/motion.d.ts

@@ -0,0 +1,6 @@
+/**
+ * True when the person asked for less motion: through the operating system's
+ * setting or through `data-k2b-motion="reduced"` on `<html>`. Both are read at
+ * call time, so a change applies to the next call; on the server it is false.
+ */
+export declare const prefersReducedMotion: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.25.0",
+  "version": "0.27.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "check:declarations": "bun run scripts/check-declarations.ts",
     "fixture:build": "bun run build && NODE_ENV=production bun run fixture/scripts/build.ts",
     "fixture:typecheck": "tsc -p fixture/tsconfig.json --noEmit --pretty false",
-    "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts && bun run scripts/check-packed-consumer.ts",
+    "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts test/browser.browser.test.ts && bun run scripts/check-packed-consumer.ts",
     "typecheck": "tsc --checkers 2 -p tsconfig.json --noEmit --pretty false && bun run check:declarations && bun run typecheck:dom",
     "typecheck:dom": "tsc -p test/tsconfig.json --noEmit --pretty false",
     "prepack": "bun run build"
@@ -51,13 +51,13 @@
     "qr-scanner": "1.4.2"
   },
   "peerDependencies": {
-    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0",
+    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0",
     "solid-js": "^1.9.10"
   },
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.16.0",
+    "@k2b/ssr": "0.17.0",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",