@k2b/ui 0.5.0 → 0.6.0

package/dist/types/actions/Button.d.ts

@@ -3,9 +3,12 @@ import { type JSX } from "solid-js";
 import { type TooltipPlacement } from "../feedback/Tooltip";
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "text" | "subtle" | "input" | "warning" | "danger" | "success" | "ai";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
+export type ButtonAlign = "center" | "start";
 export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Allow a deliberately long or rich label to wrap. Defaults to false. */
     wrap?: boolean;
+    /** Start-align the content and let the label fill the button, for full-width rows. Defaults to `"center"`. */
+    align?: ButtonAlign;
     loading?: boolean;
     loadingLabel?: string;
     size?: ButtonSize;
@@ -17,6 +20,8 @@ export type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
 export type ButtonLinkProps = Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "onClick"> & {
     /** Allow a deliberately long or rich label to wrap. Defaults to false. */
     wrap?: boolean;
+    /** Start-align the content and let the label fill the button, for full-width rows. Defaults to `"center"`. */
+    align?: ButtonAlign;
     navigation?: "document" | "enhanced";
     onClick?: JSX.EventHandlerUnion<HTMLAnchorElement, MouseEvent>;
     onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;

package/dist/types/actions/SplitButton.d.ts

@@ -1,7 +1,7 @@
 import { type JSX } from "solid-js";
 import { type ButtonProps } from "./Button";
 import { type DropdownItem, type DropdownPosition } from "./Dropdown";
-export type SplitButtonProps = ButtonProps & {
+export type SplitButtonProps = Omit<ButtonProps, "align"> & {
     /** Actions shown from the secondary menu trigger. */
     items: readonly DropdownItem[];
     /** Optional selection menu in place of the primary immediate action. */

package/dist/types/actions/SpotlightSearch.d.ts

@@ -16,6 +16,6 @@ export type SpotlightButtonProps = {
     class?: string;
     onClick: () => void | Promise<void>;
 };
-export declare const openSpotlightSearch: <T = unknown>(options: SpotlightSearchOptions<T>) => Promise<PromptSearchItem<T> | undefined>;
+export declare const openSpotlightSearch: <T extends unknown = unknown>(options: SpotlightSearchOptions<T>) => Promise<PromptSearchItem<T> | undefined>;
 export declare function SpotlightButton(props: SpotlightButtonProps): JSX.Element;
 export default SpotlightButton;

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

@@ -1,4 +1,4 @@
-export type { ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, IconButtonLinkProps, IconButtonProps } from "./Button";
+export type { ButtonAlign, ButtonLinkProps, ButtonProps, ButtonSize, ButtonVariant, IconButtonLinkProps, IconButtonProps } from "./Button";
 export { Button, ButtonLink, IconButton, IconButtonLink } from "./Button";
 export type { ContextMenuProps } from "./ContextMenu";
 export { ContextMenu } from "./ContextMenu";

package/dist/types/content/ZoomPanViewport.d.ts

@@ -0,0 +1,33 @@
+import { type JSX } from "solid-js";
+export type ZoomPanAction = {
+    label: string;
+    icon?: string;
+    /** Runs the action; the button shows a pending state until a returned promise settles. Handle failures here. */
+    onSelect: () => void | Promise<void>;
+};
+export type ZoomPanFullscreen = {
+    /** Heading and accessible name of the fullscreen dialog. */
+    title: string;
+    /** Renders a fresh copy of the content for the dialog. Called once per opening. */
+    content: () => JSX.Element;
+    /** Actions shown in the fullscreen dialog, for example exports. */
+    actions?: readonly ZoomPanAction[];
+};
+export type ZoomPanViewportProps = {
+    /** Accessible name of the focusable viewport. */
+    label: string;
+    /** The zoomable content. Its first element is measured to keep it on screen. */
+    children: JSX.Element;
+    /** Enables the fullscreen control and the `F` shortcut. */
+    fullscreen?: ZoomPanFullscreen;
+    /** `hover` reveals the controls on hover, on focus, and while zoomed in. Touch screens always show them. */
+    controls?: "visible" | "hover";
+    class?: string;
+    style?: JSX.CSSProperties;
+};
+/**
+ * Makes any content zoomable (fit to 8×) and pannable with buttons, Ctrl/Cmd +
+ * wheel, pinch, drag, and keys. It applies a CSS transform, so vector content
+ * stays crisp and is never re-rendered. The view always starts at fit.
+ */
+export declare function ZoomPanViewport(props: ZoomPanViewportProps): JSX.Element;

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

@@ -38,3 +38,5 @@ export type { RangeOption, RangePickerProps } from "./RangePicker";
 export { default as RangePicker } from "./RangePicker";
 export type { StructuredDataPreviewMode, StructuredDataPreviewProps, StructuredDataValue } from "./StructuredDataPreview";
 export { default as StructuredDataPreview, isStructuredDataValue } from "./StructuredDataPreview";
+export type { ZoomPanAction, ZoomPanFullscreen, ZoomPanViewportProps } from "./ZoomPanViewport";
+export { ZoomPanViewport } from "./ZoomPanViewport";

package/dist/types/content/zoom-pan.d.ts

@@ -0,0 +1,29 @@
+/** Screen transform of zoomable content: `translate(x, y) scale(scale)` from the viewport origin. */
+export type ZoomPanTransform = {
+    scale: number;
+    x: number;
+    y: number;
+};
+/** Viewport size and the content's untransformed box inside it, all in CSS pixels. */
+export type ZoomPanGeometry = {
+    width: number;
+    height: number;
+    content: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    };
+};
+/** Fit is the untransformed layout; zoom never goes below it. */
+export declare const ZOOM_PAN_FIT: ZoomPanTransform;
+export declare const ZOOM_PAN_MAX_SCALE = 8;
+/** Button and key steps: six steps of √2 reach the maximum from fit. */
+export declare const ZOOM_PAN_STEP: number;
+export declare const clampZoomPan: (transform: ZoomPanTransform, geometry: ZoomPanGeometry) => ZoomPanTransform;
+/** Zoom to `scale` while the content point under `point` (viewport pixels) stays under it. */
+export declare const zoomZoomPanAt: (transform: ZoomPanTransform, scale: number, point: {
+    x: number;
+    y: number;
+}, geometry: ZoomPanGeometry) => ZoomPanTransform;
+export declare const panZoomPan: (transform: ZoomPanTransform, deltaX: number, deltaY: number, geometry: ZoomPanGeometry) => ZoomPanTransform;

package/dist/types/feedback/prompts.d.ts

@@ -8,7 +8,8 @@ export interface DialogOptions {
     confirmText?: string;
     cancelText?: string | false;
     variant?: "danger" | "primary" | "success";
-    size?: "small" | "medium" | "large" | "wide";
+    /** `full` fills the available viewport and becomes edge-to-edge on narrow screens. */
+    size?: "small" | "medium" | "large" | "wide" | "full";
     surface?: "default" | "bare";
     header?: false;
     cancelBehavior?: OpenDialogOptions["cancelBehavior"];
@@ -159,8 +160,8 @@ export declare const prompts: {
         max?: number;
     }) => Promise<number | null>;
     form: <T extends Record<string, FieldSchema>>(config: PromptFormOptions<T>) => Promise<InferFormValues<T> | null>;
-    dialog: <T = unknown>(component: (close: (result?: T) => void) => JSX.Element, options?: DialogOptions) => Promise<T | undefined>;
-    search: <T = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
+    dialog: <T extends unknown = unknown>(component: (close: (result?: T) => void) => JSX.Element, options?: DialogOptions) => Promise<T | undefined>;
+    search: <T extends unknown = unknown>(resolver: CloudSearchResolver<T>, options?: PromptSearchOptions) => Promise<PromptSearchItem<T> | undefined>;
     error: (content: string | HTMLElement, options?: DialogOptions) => Promise<unknown>;
 };
 export {};

package/dist/types/intl/messages.d.ts

@@ -364,6 +364,9 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     window: string;
     zoomIn: string;
     zoomOut: string;
+    resetZoom: string;
+    openFullscreen: string;
+    zoomPanKeys: string;
     binaryFile: string;
     boldShortcut: string;
     bulletListShortcut: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",
@@ -36,8 +36,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 src scripts && bun run test:dom && bun run scripts/check-packed-consumer.ts",
-    "test:dom": "bun test --isolate --conditions=browser --preload ./test/solid-dom-preload.ts ./test",
+    "test": "bun run build && bun test --path-ignore-patterns '**/*.behavior.test.*' src scripts && bun run scripts/check-packed-consumer.ts",
     "typecheck": "tsc -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"
@@ -45,7 +44,7 @@
   "dependencies": {
     "@fontsource/ibm-plex-mono": "5.3.0",
     "@fontsource/ibm-plex-sans": "5.3.0",
-    "@k2b/stdlib": "0.25.0",
+    "@k2b/stdlib": "0.26.0",
     "@tabler/icons-webfont": "3.46.0",
     "marked": "17.0.6"
   },
@@ -54,17 +53,17 @@
     "solid-js": "^1.9.10"
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
-    "@babel/preset-typescript": "7.29.7",
+    "@babel/core": "8.0.6",
+    "@babel/preset-typescript": "8.0.1",
     "@k2b/ssr": "0.14.0",
     "@types/babel__core": "7.20.5",
     "@types/bun": "1.4.2",
-    "babel-preset-solid": "1.9.12",
+    "babel-preset-solid": "1.9.15",
     "bun-plugin-tailwind": "0.1.2",
     "happy-dom": "20.11.2",
-    "hono": "4.12.32",
-    "seroval": "1.6.0",
-    "solid-js": "1.9.14",
+    "hono": "4.13.8",
+    "seroval": "1.6.7",
+    "solid-js": "1.9.15",
     "tailwindcss": "4.3.3",
     "typescript": "5.9.3"
   },