@k2b/ui 0.10.0 → 0.12.0

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

@@ -4,6 +4,7 @@
  * without it every renderer is read-only. IDE-style chrome: editors reuse
  * the markdown editor's surface (toolbar with an in-toolbar save, Ctrl/Cmd+S),
  * previews are quiet paper panels with icon-only actions overlaid top-right.
+ * A plain preview drops the panel and sits on its host's surface instead.
  * Custom renderers are passed per instance, which keeps SSR requests and
  * independently mounted applications isolated.
  */
@@ -17,8 +18,17 @@ export type FileViewContent = {
     mediaType: string;
 };
 export type FileViewProps = {
-    /** Plain previews inherit the surrounding surface without a frame or inset padding. */
+    /**
+     * Plain previews inherit the surrounding surface without a frame or inset padding. They keep their natural height,
+     * so the host scrolls them and owns the actions around them; a host that stretches one gets its scrolling back.
+     */
     variant?: "default" | "plain";
+    /**
+     * Lifts a leading Markdown level-one heading into the host, for example a dialog title. Reports its plain text and
+     * leaves that heading out of the preview, or reports null when the shown file has none, the heading holds a link or
+     * image or is the whole document, or the file fails to load.
+     */
+    onDocumentTitle?: (title: string | null) => void;
     /** Read-only excerpt limit; omitted renders the complete preview. */
     previewLines?: number;
     onExpandPreview?: () => void;

package/dist/types/content/markdown-title.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The document title of Markdown that starts with a level-one heading: its plain text, and the Markdown after it.
+ * Null when the first block is anything else, the heading has no text or holds a link or image, or nothing follows
+ * it; the heading then stays in the document.
+ */
+export declare function leadingMarkdownTitle(markdown: string): {
+    title: string;
+    body: string;
+} | null;

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

@@ -8,5 +8,5 @@ export type { ConfirmOptions, DialogOptions, FieldSchema, PromptFieldBase, Promp
 export { createFormState, DialogHeader, prompts } from "./prompts";
 export type { TooltipAnchorProps, TooltipPlacement, TooltipProps, TooltipTriggerProps } from "./Tooltip";
 export { Tooltip } from "./Tooltip";
-export type { ToastAction, ToastFn, ToastHandle, ToastOptions, ToastVariant } from "./toast";
+export type { ToastAction, ToastFn, ToastHandle, ToastOptions, ToastSlot, ToastVariant } from "./toast";
 export { isPointInsideToast, toast } from "./toast";

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

@@ -8,8 +8,10 @@ export type ToastAction = {
 });
 export type ToastOptions = {
     variant?: ToastVariant;
+    /** Milliseconds until the toast closes; `0` keeps it until it is closed. Omit it for the default by variant, length, and action. */
     duration?: number;
     iconClass?: string;
+    /** A short line of context above the message. There is no default title. */
     title?: string;
     action?: ToastAction | null;
     /** Fraction from 0 to 1, or an indeterminate activity indicator. null removes it. */
@@ -20,10 +22,15 @@ export type ToastHandle = {
     dismiss: () => void;
     update: (description: string, options?: ToastOptions) => void;
 };
+export type ToastSlot = {
+    dismiss: () => void;
+};
 export interface ToastFn {
     (description: string, options?: ToastOptions): ToastHandle;
     success: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
     error: (description: string, options?: Omit<ToastOptions, "variant">) => ToastHandle;
+    /** Places an application-owned element in the toast rail, in toast chrome; the caller owns its content and lifetime. */
+    custom: (content: HTMLElement) => ToastSlot;
     dismissAll: () => void;
 }
 export declare const K2B_TOAST_CONTAINER_ID = "k2b-ui-toast-container";

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

@@ -2,6 +2,7 @@ import { type DateContext } from "@k2b/stdlib";
 import { type JSX } from "solid-js";
 import { type DateRangeValue } from "./date-picker";
 import type { MaybeAccessor, ValueFieldProps } from "./field-contract";
+import type { ChoiceAppearance } from "./Select";
 export type { DateRangeValue } from "./date-picker";
 export type DatePreset<T> = {
     label: string;
@@ -17,9 +18,17 @@ export type DatePickerBaseProps<T> = Omit<ValueFieldProps<T>, "value"> & {
     presets?: readonly DatePreset<T>[];
     dateConfig?: DateContext;
     clearable?: boolean;
+    /** `plain` shows the value as text for property rows; a clearable picker offers clearing in its panel. */
+    appearance?: ChoiceAppearance;
+};
+export type DatePickerProps = DatePickerBaseProps<string | null> & {
+    /** Trigger content for a set value, for example the date with a relative hint. */
+    renderValue?: (value: string) => JSX.Element;
+};
+export type DateTimePickerProps = DatePickerBaseProps<string | null> & {
+    /** Trigger content for a set value, for example the date and time with a relative hint. */
+    renderValue?: (value: string) => JSX.Element;
 };
-export type DatePickerProps = DatePickerBaseProps<string | null>;
-export type DateTimePickerProps = DatePickerBaseProps<string | null>;
 export type DateRangePickerProps = DatePickerBaseProps<DateRangeValue> & {
     withTime?: boolean;
     datePresets?: readonly DatePreset<string | null>[];

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

@@ -1,7 +1,7 @@
 import { type JSX } from "solid-js";
 import { type ChoiceOption } from "./choice";
 import type { ValueFieldProps } from "./field-contract";
-import type { SelectGroup } from "./Select";
+import type { ChoiceAppearance, SelectGroup } from "./Select";
 export type MultiSelectOption = string | {
     id: string;
     label?: string;
@@ -36,6 +36,10 @@ export type MultiSelectInputProps = ValueFieldProps<string[]> & {
     emptyLabel?: string;
     retryLabel?: string;
     clearLabel?: string;
+    /** `plain` shows the selection as wrapping pills without a box; options are removed in the list. */
+    appearance?: ChoiceAppearance;
+    /** Icon class shown before the placeholder while nothing is selected. */
+    placeholderIcon?: string;
 };
 export declare function MultiSelectInput(props: MultiSelectInputProps): JSX.Element;
 export default MultiSelectInput;

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

@@ -1,5 +1,6 @@
 import { type JSX } from "solid-js";
 import type { ValueFieldProps } from "./field-contract";
+import type { ChoiceAppearance } from "./Select";
 export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "max" | "min" | "onChange" | "onInput" | "prefix" | "step" | "type" | "value" | keyof ValueFieldProps<number | null>> & ValueFieldProps<number | null> & {
     max?: number;
     min?: number;
@@ -21,6 +22,19 @@ export type NumberInputProps = Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "
     activeIcon?: string;
     prefix?: JSX.Element;
     suffix?: JSX.Element;
+    /**
+     * `plain` edits the value in place for property rows: no box and no steppers
+     * or clear button. The field sizes to its text, Enter commits, Escape
+     * restores the current value, and clearing the text clears the value. Focus
+     * stays in the field.
+     */
+    appearance?: ChoiceAppearance;
+    /**
+     * Text for a set value while a plain field is not being edited, such as
+     * `90` as "1 h 30 min". It also names the value for assistive technology.
+     * The suffix then shows only while editing.
+     */
+    formatValue?: (value: number) => string;
 };
 export declare function NumberInput(props: NumberInputProps): JSX.Element;
 export default NumberInput;

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

@@ -8,6 +8,13 @@ export type SelectGroup = {
 };
 export type SelectView = "list" | "grid";
 export type SelectGridSize = "sm" | "md" | "lg";
+/**
+ * `field` draws the boxed form control. `plain` shows the value as text for
+ * property rows: no box, no chevron, and a quiet surface on hover or while
+ * open. Its surface and hit area cover the nearest positioned ancestor, such as
+ * a `DescriptionList` row, so the whole row opens the picker.
+ */
+export type ChoiceAppearance = "field" | "plain";
 export type SelectSourceOption = string | {
     id: string;
     label?: string;
@@ -45,6 +52,9 @@ export type SelectProps = ValueFieldProps<string | null> & {
     searchPlaceholder?: string;
     clearable?: boolean;
     name?: string;
+    appearance?: ChoiceAppearance;
+    /** Icon class shown before the placeholder while nothing is selected. */
+    placeholderIcon?: string;
 };
 export declare function Select(props: SelectProps): JSX.Element;
 export default Select;

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

@@ -27,7 +27,7 @@ export type { MarkdownEditorProps } from "./markdown/MarkdownEditor";
 export { MarkdownEditor } from "./markdown/MarkdownEditor";
 export type { NumberInputProps } from "./NumberInput";
 export { NumberInput } from "./NumberInput";
-export type { SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
+export type { ChoiceAppearance, SelectGridSize, SelectGroup, SelectOption, SelectProps, SelectSourceOption, SelectView } from "./Select";
 export { Select } from "./Select";
 export type { SelectChipOption, SelectChipProps } from "./SelectChip";
 export { SelectChip } from "./SelectChip";

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

@@ -18,6 +18,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     add: string;
     addTag: string;
     addImage: string;
+    apply: string;
     attachments: string;
     assistant: string;
     avatarLabel: ({ name }: {
@@ -250,6 +251,7 @@ declare const uiMessages: import("@k2b/stdlib").Catalog<{
     filterActions: string;
     info: string;
     dismissNotification: string;
+    notifications: string;
     interactiveLineChart: string;
     interactiveChart: string;
     chartFields: ({ key }: {

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

@@ -82,6 +82,8 @@ export type AppWorkspaceBottomDrawerProps = {
     resizable?: boolean;
 };
 export type AppWorkspaceSidebarProps = {
+    /** Stable element id, for a toggle elsewhere that names the sidebar in `aria-controls`. */
+    id?: string;
     label?: string;
     children: JSX.Element;
     class?: string;
@@ -97,6 +99,18 @@ export type AppWorkspaceSidebarProps = {
     defaultSize?: number;
     minSize?: number;
     maxSize?: number;
+    /**
+     * Hides the desktop navigation completely: the sidebar renders none of its
+     * children and no resize handle, and main panes with `surface="navigation"`
+     * hide with it. The state is application-owned, like a persisted layout.
+     */
+    hidden?: boolean;
+    /**
+     * Makes the sidebar hideable by dragging its resize handle below half its
+     * minimum width. The controller then requests `true`; showing it again is
+     * the application's control.
+     */
+    onHiddenChange?: (hidden: boolean) => void;
 };
 export type AppWorkspaceSidebarVisibility = "always" | "expanded" | "collapsed";
 export type AppWorkspaceSidebarAccessoryVisibility = "always" | "hover";

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

@@ -22,8 +22,8 @@ export type SettingsSectionProps = {
     class?: string;
 };
 /**
- * A full-page settings group. Dialogs keep using PanelDialog.Section; this
- * component owns the quieter, observability-style paper used on admin pages.
+ * A full-page settings group: a heading, optional actions and its fields on the
+ * page surface without a card. Dialogs keep using PanelDialog.Section.
  */
 export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
 export type SettingsGroupProps = {

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

@@ -4,4 +4,9 @@ export type AppWorkspaceControllerOptions = {
     readState?: () => AppWorkspaceLayoutState | null | undefined;
     writeState?: (state: AppWorkspaceLayoutState) => void;
 };
+/**
+ * Asks the owning `AppWorkspace.Sidebar` to hide. The sidebar's `hidden` prop
+ * stays application state, so the controller only requests the change.
+ */
+export declare const APP_WORKSPACE_SIDEBAR_HIDE_EVENT = "k2b-app-workspace-sidebar-hide";
 export declare const installAppWorkspaceController: (options?: AppWorkspaceControllerOptions) => (() => void);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k2b/ui",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Production-ready components for SolidJS applications.",
   "repository": {
     "type": "git",