@k2b/ui 0.27.0 → 0.29.0

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

@@ -0,0 +1,18 @@
+export type ResizeSeparatorOptions = {
+    min: number;
+    max: number;
+    value: () => number;
+    /** Pixels per value unit. Defaults to 1. */
+    unit?: number;
+    step?: number;
+    largeStep?: number;
+    grow: "start" | "end";
+    collapseBelow?: number;
+    onResize: (value: number) => void;
+    onResizeEnd?: (value: number) => void;
+    onCollapseIntent?: (armed: boolean) => void;
+    onCollapse?: () => void;
+    onDragChange?: (dragging: boolean) => void;
+};
+/** Adds resizing to a server-rendered separator; orientation comes from aria-orientation. */
+export declare function attachResizeSeparator(element: HTMLElement, options: ResizeSeparatorOptions): () => void;

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

@@ -10,6 +10,7 @@ declare const workspaceMessages: import("@k2b/stdlib").Catalog<{
     resizeNavigation: string;
     resizeWorkspacePane: string;
     resizeDetailPanel: string;
+    details: string;
     detailFullHeight: string;
     resizeBottomDrawer: string;
     showNavigation: string;
@@ -18,6 +19,10 @@ declare const workspaceMessages: import("@k2b/stdlib").Catalog<{
     }) => string;
     path: string;
     moreLevels: string;
+    sidebarAll: string;
+    sidebarAllLabel: ({ label }: {
+        label: string;
+    }) => string;
 }>;
 export type WorkspaceMessages = ReturnType<(typeof workspaceMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -1,5 +1,14 @@
 import { type JSX } from "solid-js";
 export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * A status ring around the avatar: `"success"` for an active state such as someone working on a task, or an explicit
+ * color, for example a collaborator's cursor color.
+ */
+export type AvatarRing = "success" | {
+    color: string;
+};
+/** `square` marks an agent or service account; people stay round. */
+export type AvatarShape = "circle" | "square";
 export type AvatarProps = {
     name: string;
     src?: string | null;
@@ -7,6 +16,9 @@ export type AvatarProps = {
     alt?: string;
     fallback?: string;
     size?: AvatarSize;
+    /** Draws a ring with a small transparent gap inside the avatar's own box, so the avatar keeps its size and no container clips the ring. */
+    ring?: AvatarRing;
+    shape?: AvatarShape;
     loading?: "eager" | "lazy";
     class?: string;
     style?: JSX.CSSProperties | string;

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

@@ -0,0 +1,41 @@
+import { type JSX } from "solid-js";
+import { type AvatarShape } from "./Avatar";
+export type AvatarStackPerson = {
+    /** Stable key, such as the account id. */
+    id: string;
+    name: string;
+    src?: string | null;
+    /** Shown instead of initials when there is no picture. */
+    icon?: string;
+    /** `square` for agents and service accounts. */
+    shape?: AvatarShape;
+    /** A short tag after the name, such as "Agent". */
+    badge?: JSX.Element;
+    /** One line below the name; it ends with an ellipsis instead of wrapping. */
+    detail?: JSX.Element;
+    /** Icon class before `detail`. */
+    detailIcon?: string;
+    /** Short text at the end of the row, such as "2 tabs". */
+    trailing?: JSX.Element;
+    /** The person viewing: listed last, below a gap, and never in the stack. */
+    self?: boolean;
+    /** Makes the row a button. The list closes first. */
+    onSelect?: () => void;
+};
+export type AvatarStackProps = {
+    people: readonly AvatarStackPerson[];
+    /** Title of the list that the stack opens, such as "Here now". */
+    title: string;
+    /** Accessible name of the stack button, such as "Here now: Jana Berger and 2 more". */
+    label: string;
+    /** One quiet line below the list. */
+    hint?: JSX.Element;
+    /** Faces before "+n". Defaults to 3. */
+    max?: number;
+    class?: string;
+};
+/**
+ * A few overlapping faces, then "+n", as one button. It opens the full list of people beside it, or as a bottom sheet
+ * on phones. People with `self` are listed last and never shown in the stack.
+ */
+export declare function AvatarStack(props: AvatarStackProps): JSX.Element;

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

@@ -1,4 +1,5 @@
 import { type JSX } from "solid-js";
+import type { ChartTooltipFormatter } from "../content/chart-inspection-core";
 import type { AccentColor } from "../semantics";
 import { type StatGridSize } from "./StatGrid";
 export type StatCellTone = AccentColor;
@@ -16,6 +17,11 @@ export type StatCellProps = {
     href?: string;
     title?: string;
     trend?: readonly number[];
+    /**
+     * Replaces the default trend tooltip in browser code, for example with a period title or a unit.
+     * `selection.datum.index` is the source index into `trend`.
+     */
+    trendTooltip?: ChartTooltipFormatter;
     size?: StatGridSize;
     /**
      * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing

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

@@ -3,6 +3,9 @@ declare const avatarMessages: import("@k2b/stdlib").Catalog<{
         name: string;
     }) => string;
     unknownUser: string;
+    moreCount: ({ count }: {
+        count: number;
+    }) => string;
 }>;
 export type AvatarMessages = ReturnType<(typeof avatarMessages)["resolve"]>["t"];
 /** Resolved from the inherited render locale. */

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

@@ -1,5 +1,7 @@
-export type { AvatarProps, AvatarSize } from "./Avatar";
+export type { AvatarProps, AvatarRing, AvatarShape, AvatarSize } from "./Avatar";
 export { Avatar } from "./Avatar";
+export type { AvatarStackPerson, AvatarStackProps } from "./AvatarStack";
+export { AvatarStack } from "./AvatarStack";
 export type { DescriptionListItem, DescriptionListProps } from "./DescriptionList";
 export { DescriptionList } from "./DescriptionList";
 export type { LinkCardColor, LinkCardProps } from "./LinkCard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -26,6 +26,11 @@
     "./styles.css": "./dist/styles.css",
     "./fonts/plex.css": "./dist/plex.css",
     "./icons/tabler.css": "./dist/tabler.css",
+    "./chart-inspection": {
+      "types": "./dist/types/chart-inspection.d.ts",
+      "browser": "./dist/browser/chart-inspection.js",
+      "default": "./dist/browser/chart-inspection.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -66,7 +71,7 @@
     "emojibase-data": "17.0.0",
     "happy-dom": "20.14.5",
     "hono": "4.13.9",
-    "playwright": "1.63.0",
+    "playwright": "1.64.1",
     "seroval": "1.6.7",
     "solid-js": "1.9.15",
     "tailwindcss": "4.3.3",