@k2b/ui 0.31.0 → 0.33.0

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

@@ -1,20 +1,38 @@
 import { type JSX } from "solid-js";
+import type { TabBarItem } from "./TabBar";
 export type MobileShellProps = {
     /** Usually `MobileShell.Header`; it sits above the scroll area and pads the top safe area. */
-    header: JSX.Element;
+    header?: JSX.Element;
     /** Usually a `TabBar`; it sits below the scroll area and pads the bottom safe area itself. */
     footer?: JSX.Element;
+    /**
+     * Usually `MobileShell.Sidebar` with the footer's destinations and more. From 48rem of window width it stands at
+     * the start edge and the footer goes; below, it is not shown. The server renders both, so CSS alone decides.
+     */
+    sidebar?: JSX.Element;
     /** The page content, inside the shell's only scroll area. */
     children: JSX.Element;
+    /**
+     * `false` for content that brings its own heads and scroll areas, such as `AppWorkspace.Main` levels: it fills the
+     * main area without the shell's scroll area, and the header shows only as the frame of the next page while a tapped
+     * tab's page loads.
+     */
+    scroll?: boolean;
     class?: string;
 };
 export type MobileShellHeaderProps = {
     title: string;
-    /** A Back control before the title: a link with `href`, otherwise a button. */
+    /** The title while the shell shows its sidebar, which already names the app; `title` by default. */
+    sidebarTitle?: string;
+    /**
+     * A Back control before the title: a link with `href`, otherwise a button. `withSidebar: false` hides it while the
+     * shell shows its sidebar, for a way back to a destination the sidebar lists.
+     */
     back?: {
         href?: string;
         onClick?: () => void;
         label: string;
+        withSidebar?: boolean;
     };
     /** Controls after the title, such as a menu. */
     actions?: JSX.Element;
@@ -29,12 +47,41 @@ export type MobileShellHeaderProps = {
 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;
+};
+export type MobileShellSidebarProps = {
+    /** Accessible name of the navigation landmark; usually the tab bar's. */
+    label: string;
+    /** The app's name in the sidebar's head. */
+    title: string;
+    /** Address of the app's logo before the name; decorative, the name says it. */
+    logo?: string;
+    /** Destinations at the top, such as Start. */
+    items: readonly MobileShellSidebarItem[];
+    /** Named groups below them, such as the apps; a group without items is left out. */
+    sections?: readonly {
+        title: string;
+        items: readonly MobileShellSidebarItem[];
+    }[];
+    /** Destinations at the bottom edge, such as Settings. */
+    footer?: readonly MobileShellSidebarItem[];
+};
+/**
+ * The navigation of a touch app on a wide screen, in `MobileShell`'s `sidebar`: the app's name, then its destinations
+ * as 44 px rows with icon and label, the open one in the action colour. A press shows the item's page frame at once,
+ * as on a tab, and the row of a loading page pulses.
+ */
+declare function MobileShellSidebar(props: MobileShellSidebarProps): JSX.Element;
 /**
- * The full-screen frame of a phone app: a header, one scroll area, and an optional footer such as a `TabBar`. While
- * it is mounted, the document itself never scrolls, pinch zoom and rubber-banding are off, and the toast rail sits
- * above the footer. Mount one per page, as the page's layout.
+ * The full-screen frame of a phone app: a header, one scroll area, and an optional footer such as a `TabBar`. With a
+ * `sidebar`, a window of 48rem and wider shows the sidebar at the start edge instead of the footer, and the toast rail
+ * stays in the area beside it. While it is mounted, the document itself never scrolls, pinch zoom and rubber-banding
+ * are off, and the toast rail sits above the footer. Mount one per page, as the page's layout.
  */
 export declare const MobileShell: typeof MobileShellRoot & {
     Header: typeof MobileShellHeader;
+    Sidebar: typeof MobileShellSidebar;
 };
 export default MobileShell;

package/dist/types/layout/app-workspace-controller.d.ts

@@ -11,6 +11,8 @@ export declare const parkWorkspaceDetailDrawers: (root?: ParentNode) => void;
  * stays application state, so the controller only requests the change.
  */
 export declare const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
+/** Asks the owning Detail to reopen its current available object. */
+export declare const APP_WORKSPACE_DETAIL_OPEN_EVENT = "k2b-app-workspace-detail-open";
 /** Asks the owning `AppWorkspace.Detail` to close; its `onClose` decides. */
 export declare const APP_WORKSPACE_DETAIL_CLOSE_EVENT = "k2b-app-workspace-detail-close";
 /**

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

@@ -16,7 +16,7 @@ export type { DiscussionComposerProps, DiscussionItemProps, DiscussionListProps,
 export { default as Discussion } from "./Discussion";
 export type { FloatingWindowClose, FloatingWindowProps, OpenFloatingWindowOptions, } from "./FloatingWindow";
 export { default as FloatingWindow, type FloatingWindowRect, fitFloatingWindowRect, openFloatingWindow, } from "./FloatingWindow";
-export type { MobileShellHeaderProps, MobileShellProps } from "./MobileShell";
+export type { MobileShellHeaderProps, MobileShellProps, MobileShellSidebarItem, MobileShellSidebarProps } from "./MobileShell";
 export { default as MobileShell, observeMobileShell } from "./MobileShell";
 export { default as Navigation, type NavigationProps } from "./Navigation";
 export { createNavigation, findNavigationItem, type NavigationController, type NavigationItem, type NavigationOptions, type NavigationStatus, } from "./navigation-model";
@@ -44,6 +44,7 @@ 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 { measureScrollFade } from "./scroll-fade";
 export type { TabBarItem, TabBarProps } from "./TabBar";
 export { default as TabBar } from "./TabBar";
 export type { TableOfContentsItem, TableOfContentsProps } from "./TableOfContents";

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

@@ -22,6 +22,8 @@ type NavigationEntry = {
      */
     status?: NavigationStatus | null;
     active?: boolean;
+    /** Current container, independently of its active destination. `false` quiets this row; omitted keeps the default ink. */
+    context?: boolean;
     disabled?: boolean;
     color?: string;
     children?: readonly NavigationItem[];

package/dist/types/layout/resize-separator.d.ts

@@ -10,6 +10,7 @@ export type ResizeSeparatorOptions = {
     collapseBelow?: number;
     onResize: (value: number) => void;
     onResizeEnd?: (value: number) => void;
+    onReset?: () => void;
     onCollapseIntent?: (armed: boolean) => void;
     onCollapse?: () => void;
     onDragChange?: (dragging: boolean) => void;

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

@@ -1,5 +1,10 @@
 /** Self-contained because the sidebar inline script embeds its source. */
 export declare function scrollFadeEdges(body: HTMLElement): "top" | "bottom" | "both" | undefined;
+/**
+ * Measures an observed scrollport's fades now instead of at the end of the frame. Call it before reading the fades in
+ * the same frame as a change of the scrollport's content, as an editor does when it keeps its cursor clear of them.
+ */
+export declare function measureScrollFade(element: HTMLElement): void;
 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/surfaces/NoticeCard.d.ts

@@ -14,11 +14,14 @@ 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;
     class?: string;
     bodyClass?: string;
 };
 export declare const NOTICE_CARD_CLASSES: {
     readonly root: "k2b-notice-card";
+    readonly icon: "k2b-notice-card__icon";
     readonly content: "k2b-notice-card__content";
     readonly head: "k2b-notice-card__head";
     readonly title: "k2b-notice-card__title";

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

@@ -0,0 +1,6 @@
+import type { JSX } from "solid-js";
+export type SkeletonProps = {
+    class?: string;
+};
+/** Decorative loading geometry. The consumer owns dimensions and one accessible loading status. */
+export declare function Skeleton(props: SkeletonProps): JSX.Element;

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

@@ -20,6 +20,7 @@ export type { ProgressRingProps, ProgressRingTone } from "./ProgressRing";
 export { ProgressRing } from "./ProgressRing";
 export type { ResourceCardProps, ResourceCardState } from "./ResourceCard";
 export { ResourceCard } from "./ResourceCard";
+export { Skeleton, type SkeletonProps } from "./Skeleton";
 export type { StatCellAccent, StatCellProps, StatCellTone } from "./StatCell";
 export { StatCell } from "./StatCell";
 export type { StatGridAction, StatGridColumns, StatGridProps, StatGridSize, StatGridSurface, } from "./StatGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -59,13 +59,13 @@
     "qr-scanner": "1.4.2"
   },
   "peerDependencies": {
-    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0",
+    "@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0 || ^0.17.0 || ^0.18.0 || ^0.19.0 || ^0.20.0",
     "solid-js": "^1.9.10"
   },
   "devDependencies": {
     "@babel/core": "8.0.6",
     "@babel/preset-typescript": "8.0.1",
-    "@k2b/ssr": "0.19.0",
+    "@k2b/ssr": "0.20.1",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
     "axe-core": "4.11.0",
@@ -76,7 +76,7 @@
     "hono": "4.13.9",
     "playwright": "1.64.1",
     "seroval": "1.6.7",
-    "solid-js": "1.9.15",
+    "solid-js": "1.9.17",
     "tailwindcss": "4.3.3",
     "typescript": "7.0.2",
     "@typescript/typescript6": "6.0.2",