@k2b/ui 0.1.0-rc.0 → 0.1.0

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

@@ -0,0 +1,254 @@
+import { type LinkNavigateEvent, type NavigationScrollMode } from "@k2b/ssr/nav";
+import { type JSX } from "solid-js";
+import { type AppWorkspaceLayoutState } from "./app-workspace-state";
+export type AppWorkspaceProps = {
+    children: JSX.Element;
+    class?: string;
+    resizable?: boolean;
+    /**
+     * Restores a persisted layout when the workspace mounts. Persistence itself
+     * stays app-owned — the package reads and writes nothing on its own — but
+     * the resize handles work without it.
+     */
+    layoutState?: () => AppWorkspaceLayoutState | null | undefined;
+    /** Called with the full layout whenever a resize settles. Persist it here. */
+    onLayoutChange?: (state: AppWorkspaceLayoutState) => void;
+    /**
+     * Opt out of the built-in controller. Only needed when the application calls
+     * `installAppWorkspaceController` itself — installing twice would double up
+     * every listener.
+     */
+    controller?: false;
+};
+export type AppWorkspaceLayoutStateProviderProps = {
+    children: JSX.Element;
+    state: AppWorkspaceLayoutState | null | undefined;
+};
+export type AppWorkspaceContentProps = {
+    children: JSX.Element;
+    class?: string;
+};
+export type AppWorkspaceMainProps = {
+    children: JSX.Element;
+    class?: string;
+    mobilePane?: string;
+    scroll?: boolean;
+    scrollPreserveKey?: string | false;
+    "aria-busy"?: boolean | "true" | "false";
+};
+export type AppWorkspaceMainPaneProps = {
+    id: string;
+    label: string;
+    surface?: "default" | "navigation";
+    open?: boolean;
+    resizable?: boolean;
+    resizeShadow?: boolean;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    class?: string;
+    scroll?: boolean;
+    children: JSX.Element;
+};
+export type AppWorkspaceDetailWidth = "sm" | "md" | "lg" | "xl";
+export type AppWorkspaceDetailProps = {
+    children: JSX.Element;
+    open: boolean;
+    id: string;
+    class?: string;
+    width?: AppWorkspaceDetailWidth;
+    viewTransitionName?: string;
+    resizable?: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+};
+export type AppWorkspaceBottomDrawerHeight = "sm" | "md" | "lg";
+export type AppWorkspaceBottomDrawerProps = {
+    children: JSX.Element;
+    open: boolean;
+    id: string;
+    class?: string;
+    height?: AppWorkspaceBottomDrawerHeight;
+    minHeight?: number;
+    maxHeight?: number;
+    viewTransitionName?: string;
+    resizable?: boolean;
+};
+export type AppWorkspaceSidebarProps = {
+    children: JSX.Element;
+    class?: string;
+    resizable?: boolean;
+    resizeShadow?: boolean;
+    collapsible?: boolean;
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+};
+export type AppWorkspaceSidebarMobileTriggerProps = {
+    label: string;
+};
+export type AppWorkspaceSidebarMobileProps = {
+    children: JSX.Element;
+};
+export type AppWorkspaceSidebarMobileItemsProps = {
+    children: JSX.Element;
+    scrollPreserveKey?: string | false;
+};
+export type AppWorkspaceSidebarVisibility = "always" | "expanded" | "collapsed";
+export type AppWorkspaceSidebarAccessoryVisibility = "always" | "hover";
+export type AppWorkspaceSidebarBodyProps = {
+    children: JSX.Element;
+    class?: string;
+    scrollPreserveKey?: string | false;
+    sidebarMode?: AppWorkspaceSidebarVisibility;
+};
+export type AppWorkspaceSidebarSectionProps = AppWorkspaceSidebarBodyProps & {
+    title?: string;
+    actions?: JSX.Element;
+};
+export type AppWorkspaceSidebarItemTone = "default" | "success" | "danger";
+export type AppWorkspaceSidebarIconActionTone = "default" | "success" | "danger";
+export type AppWorkspaceSidebarItemProps = {
+    children: JSX.Element;
+    href?: string;
+    /** Document navigation by default; opt into enhanced navigation only when the owning island applies the target state. */
+    navigation?: "enhanced" | "document";
+    replace?: boolean;
+    scroll?: NavigationScrollMode;
+    onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
+    onClick?: (event: MouseEvent) => void;
+    active?: boolean;
+    activeClass?: string;
+    disabled?: boolean;
+    icon?: string;
+    meta?: JSX.Element;
+    metaVisibility?: AppWorkspaceSidebarAccessoryVisibility;
+    actions?: JSX.Element;
+    tone?: AppWorkspaceSidebarItemTone;
+    title?: string;
+    viewTransitionName?: string;
+    class?: string;
+    depth?: number;
+    actionIcon?: string;
+    actionLabel?: string;
+    onActionClick?: (event: MouseEvent) => void;
+    data?: Record<string, string | number | boolean | null | undefined>;
+    sidebarMode?: AppWorkspaceSidebarVisibility;
+};
+export type AppWorkspaceSidebarIconGridProps = AppWorkspaceSidebarBodyProps & {
+    title?: string;
+    columns?: 2 | 3;
+};
+export type AppWorkspaceSidebarIconActionProps = {
+    href?: string | null;
+    /** Document navigation by default; opt into enhanced navigation only when the owning island applies the target state. */
+    navigation?: "enhanced" | "document";
+    replace?: boolean;
+    scroll?: NavigationScrollMode;
+    onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
+    icon: string;
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+    tone?: AppWorkspaceSidebarIconActionTone;
+    viewTransitionName?: string;
+    onClick?: (event: MouseEvent) => void;
+    sidebarMode?: AppWorkspaceSidebarVisibility;
+};
+export type AppWorkspaceSidebarItemIconProps = {
+    icon?: string;
+    children?: JSX.Element;
+};
+export type AppWorkspaceSidebarItemLabelProps = {
+    children: JSX.Element;
+    marquee?: boolean;
+};
+export type AppWorkspaceSidebarItemMetaProps = {
+    children: JSX.Element;
+    visibility?: AppWorkspaceSidebarAccessoryVisibility;
+};
+export type AppWorkspaceSidebarItemActionProps = {
+    icon?: string;
+    label: string;
+    /** Hide the action on fine pointers until the row is hovered or keyboard-focused. */
+    visibility?: AppWorkspaceSidebarAccessoryVisibility;
+    href?: string;
+    navigation?: "enhanced" | "document";
+    onSelect?: (event: MouseEvent) => void;
+    children?: JSX.Element;
+};
+export type AppWorkspaceSidebarItemActionsProps = {
+    children: JSX.Element;
+    visibility?: AppWorkspaceSidebarAccessoryVisibility;
+};
+export type AppWorkspaceNavTreeProps = {
+    children: JSX.Element;
+    ariaLabel: string;
+    selectedId?: string | null;
+    expandedIds?: readonly string[];
+    defaultExpandedIds?: readonly string[];
+    onSelectedIdChange?: (id: string) => void;
+    onExpandedIdsChange?: (ids: readonly string[]) => void;
+    indented?: boolean;
+    class?: string;
+};
+export type AppWorkspaceNavTreeItemProps = {
+    id: string;
+    label: JSX.Element;
+    children?: JSX.Element;
+    href?: string;
+    /** Document navigation by default; opt into enhanced navigation only when the owning island applies the target state. */
+    navigation?: "enhanced" | "document";
+    replace?: boolean;
+    scroll?: NavigationScrollMode;
+    onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
+    onSelect?: (event: MouseEvent) => void;
+    disabled?: boolean;
+    icon?: string;
+    /** Replaces `icon` while this branch is expanded and makes the icon the disclosure target. */
+    expandedIcon?: string;
+    meta?: JSX.Element;
+    metaVisibility?: AppWorkspaceSidebarAccessoryVisibility;
+    actions?: JSX.Element;
+    tone?: AppWorkspaceSidebarItemTone;
+    title?: string;
+    viewTransitionName?: string;
+    class?: string;
+    onDragEnter?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
+    onDragOver?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
+    onDragLeave?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
+    onDrop?: JSX.EventHandlerUnion<HTMLDivElement, DragEvent>;
+};
+type AppWorkspaceNavTreeComponent = ((props: AppWorkspaceNavTreeProps) => JSX.Element) & {
+    Item: (props: AppWorkspaceNavTreeItemProps) => JSX.Element;
+};
+type AppWorkspaceComponent = ((props: AppWorkspaceProps) => JSX.Element) & {
+    LayoutStateProvider: (props: AppWorkspaceLayoutStateProviderProps) => JSX.Element;
+    Content: (props: AppWorkspaceContentProps) => JSX.Element;
+    Main: (props: AppWorkspaceMainProps) => JSX.Element;
+    MainPane: (props: AppWorkspaceMainPaneProps) => JSX.Element;
+    Detail: (props: AppWorkspaceDetailProps) => JSX.Element;
+    BottomDrawer: (props: AppWorkspaceBottomDrawerProps) => JSX.Element;
+    Sidebar: (props: AppWorkspaceSidebarProps) => JSX.Element;
+    SidebarMobileTrigger: (props: AppWorkspaceSidebarMobileTriggerProps) => JSX.Element;
+    SidebarMobile: (props: AppWorkspaceSidebarMobileProps) => JSX.Element;
+    SidebarMobileItems: (props: AppWorkspaceSidebarMobileItemsProps) => JSX.Element;
+    SidebarMobileBody: (props: AppWorkspaceSidebarBodyProps) => JSX.Element;
+    SidebarDesktop: (props: {
+        children: JSX.Element;
+    }) => JSX.Element;
+    SidebarSection: (props: AppWorkspaceSidebarSectionProps) => JSX.Element;
+    SidebarBody: (props: AppWorkspaceSidebarBodyProps) => JSX.Element;
+    SidebarFooter: (props: AppWorkspaceSidebarBodyProps) => JSX.Element;
+    SidebarItem: (props: AppWorkspaceSidebarItemProps) => JSX.Element;
+    SidebarItemIcon: (props: AppWorkspaceSidebarItemIconProps) => JSX.Element;
+    SidebarItemLabel: (props: AppWorkspaceSidebarItemLabelProps) => JSX.Element;
+    SidebarItemMeta: (props: AppWorkspaceSidebarItemMetaProps) => JSX.Element;
+    SidebarItemAction: (props: AppWorkspaceSidebarItemActionProps) => JSX.Element;
+    SidebarItemActions: (props: AppWorkspaceSidebarItemActionsProps) => JSX.Element;
+    NavTree: AppWorkspaceNavTreeComponent;
+    SidebarIconGrid: (props: AppWorkspaceSidebarIconGridProps) => JSX.Element;
+    SidebarIconAction: (props: AppWorkspaceSidebarIconActionProps) => JSX.Element;
+};
+declare const AppWorkspace: AppWorkspaceComponent;
+export default AppWorkspace;

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

@@ -0,0 +1,16 @@
+import { type JSX } from "solid-js";
+export type DataPanelProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    actions?: JSX.Element;
+    search?: JSX.Element;
+    filters?: JSX.Element;
+    children?: JSX.Element;
+    error?: string | null;
+    empty?: JSX.Element;
+    isEmpty?: boolean;
+    footer?: JSX.Element;
+    as?: "h1" | "h2";
+    class?: string;
+};
+export declare function DataPanel(props: DataPanelProps): JSX.Element;

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

@@ -0,0 +1,89 @@
+import { type JSX } from "solid-js";
+import { type ButtonLinkProps, type ButtonProps } from "../actions/Button";
+import { type DropdownItem } from "../actions/Dropdown";
+export type DetailPanelProps = {
+    children: JSX.Element;
+    class?: string;
+};
+type DetailPanelHeaderBaseProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    meta?: JSX.Element;
+    actions?: JSX.Element;
+    primaryActions?: JSX.Element;
+    class?: string;
+};
+export type DetailPanelHeaderProps = DetailPanelHeaderBaseProps & ({
+    leading?: JSX.Element;
+    icon?: never;
+} | {
+    leading?: never;
+    icon?: string;
+});
+export type DetailPanelBodyProps = {
+    children: JSX.Element;
+    scrollPreserveKey?: string;
+    class?: string;
+};
+export type DetailPanelSummaryProps = {
+    title: JSX.Element;
+    children: JSX.Element;
+    actions?: JSX.Element;
+    class?: string;
+};
+export type DetailPanelGroupProps = {
+    children: JSX.Element;
+    label?: string;
+    class?: string;
+};
+export type DetailPanelTone = "accent" | "neutral" | "success" | "warning" | "danger";
+type DetailPanelSectionBaseProps = {
+    title: JSX.Element;
+    icon?: string;
+    tone?: DetailPanelTone;
+    description?: JSX.Element;
+    meta?: JSX.Element;
+    class?: string;
+};
+type DetailPanelActionBaseProps = {
+    title: JSX.Element;
+    description?: JSX.Element;
+    leading?: JSX.Element;
+    trailing?: JSX.Element;
+    class?: string;
+};
+type DetailPanelActionMenuProps = {
+    menuItems?: never;
+    menuLabel?: never;
+} | {
+    menuItems: readonly DropdownItem[];
+    menuLabel: string;
+};
+export type DetailPanelActionLinkProps = DetailPanelActionBaseProps & DetailPanelActionMenuProps & Omit<ButtonLinkProps, "children" | "class" | "size" | "title" | "variant"> & {
+    href: string;
+};
+export type DetailPanelActionButtonProps = DetailPanelActionBaseProps & DetailPanelActionMenuProps & Omit<ButtonProps, "children" | "class" | "size" | "title" | "variant"> & {
+    href?: never;
+};
+export type DetailPanelActionProps = DetailPanelActionLinkProps | DetailPanelActionButtonProps;
+export type DetailPanelSectionProps = DetailPanelSectionBaseProps & ({
+    children?: JSX.Element;
+    actions?: JSX.Element;
+    collapsible?: false;
+    defaultOpen?: never;
+} | {
+    children: JSX.Element;
+    actions?: never;
+    collapsible: true;
+    defaultOpen?: boolean;
+});
+type DetailPanelComponent = ((props: DetailPanelProps) => JSX.Element) & {
+    Header: (props: DetailPanelHeaderProps) => JSX.Element;
+    Body: (props: DetailPanelBodyProps) => JSX.Element;
+    Summary: (props: DetailPanelSummaryProps) => JSX.Element;
+    Group: (props: DetailPanelGroupProps) => JSX.Element;
+    Section: (props: DetailPanelSectionProps) => JSX.Element;
+    Action: (props: DetailPanelActionProps) => JSX.Element;
+};
+declare const DetailPanel: DetailPanelComponent;
+export default DetailPanel;

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

@@ -0,0 +1,52 @@
+import { type JSX } from "solid-js";
+export type DiscussionProps = Omit<JSX.HTMLAttributes<HTMLElement>, "children" | "class"> & {
+    label: JSX.Element;
+    children: JSX.Element;
+    icon?: string | false;
+    count?: number;
+    actions?: JSX.Element;
+    as?: "h2" | "h3";
+    surface?: "default" | "bare";
+    class?: string;
+};
+export type DiscussionComposerProps = Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "children" | "class" | "onSubmit"> & {
+    label: string;
+    onSubmit: (message: string) => boolean | void | Promise<boolean | void>;
+    initialValue?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    lines?: number;
+    class?: string;
+};
+export type DiscussionListProps = {
+    children?: JSX.Element;
+    loading?: boolean;
+    loadingLabel?: string;
+    error?: string | null;
+    onRetry?: () => void | Promise<void>;
+    hasMore?: boolean;
+    loadingMore?: boolean;
+    loadMoreLabel?: string;
+    onLoadMore?: () => boolean | void | Promise<boolean | void>;
+    class?: string;
+};
+export type DiscussionItemProps = Omit<JSX.LiHTMLAttributes<HTMLLIElement>, "children" | "class"> & {
+    author: JSX.Element;
+    children: JSX.Element;
+    avatar?: JSX.Element;
+    timestamp?: JSX.Element;
+    meta?: JSX.Element;
+    replyContext?: JSX.Element;
+    actions?: JSX.Element;
+    actionVisibility?: "always" | "progressive";
+    class?: string;
+};
+type DiscussionComponent = ((props: DiscussionProps) => JSX.Element) & {
+    Composer: (props: DiscussionComposerProps) => JSX.Element;
+    List: (props: DiscussionListProps) => JSX.Element;
+    Item: (props: DiscussionItemProps) => JSX.Element;
+};
+declare const Discussion: DiscussionComponent;
+export default Discussion;

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

@@ -0,0 +1,19 @@
+import { type JSX } from "solid-js";
+export { type FloatingWindowRect, fitFloatingWindowRect } from "./floating-window-geometry";
+export type FloatingWindowProps = {
+    title: string;
+    icon?: string;
+    children: JSX.Element;
+    onClose: () => void;
+    initialWidth?: number;
+    initialHeight?: number;
+    minWidth?: number;
+    minHeight?: number;
+    accent?: string;
+    class?: string;
+    resolveScope?: () => HTMLElement | null | undefined;
+};
+export type OpenFloatingWindowOptions = Omit<FloatingWindowProps, "children" | "onClose">;
+export type FloatingWindowClose = () => void;
+export default function FloatingWindow(props: FloatingWindowProps): JSX.Element;
+export declare const openFloatingWindow: (view: (close: FloatingWindowClose) => JSX.Element, options: OpenFloatingWindowOptions) => FloatingWindowClose;

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

@@ -0,0 +1,72 @@
+import { type JSX } from "solid-js";
+export type PanelDialogSurface = "contained" | "floating";
+export type PanelDialogProps = {
+    children: JSX.Element;
+    surface?: PanelDialogSurface;
+};
+export type PanelDialogHeaderProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    icon?: string;
+    actions?: JSX.Element;
+    close?: () => void;
+    closeDisabled?: boolean;
+    closeLabel?: string;
+};
+export type PanelDialogBodyProps = {
+    children: JSX.Element;
+    scrollPreserveKey?: string;
+};
+export type PanelDialogFooterProps = {
+    children: JSX.Element;
+};
+export type PanelDialogSectionProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    icon?: string;
+    actions?: JSX.Element;
+    children: JSX.Element;
+};
+export type PanelDialogTabOption<T extends string = string> = {
+    value: T;
+    label: JSX.Element;
+    icon?: string;
+    disabled?: boolean;
+};
+export type PanelDialogTabsProps<T extends string = string> = {
+    options: readonly PanelDialogTabOption<T>[];
+    value: T | (() => T);
+    onValueChange: (value: T) => void;
+    ariaLabel?: string;
+    label?: string;
+};
+type PanelDialogComponent = ((props: PanelDialogProps) => JSX.Element) & {
+    Header: (props: PanelDialogHeaderProps) => JSX.Element;
+    Body: (props: PanelDialogBodyProps) => JSX.Element;
+    Footer: (props: PanelDialogFooterProps) => JSX.Element;
+    Section: (props: PanelDialogSectionProps) => JSX.Element;
+    Tabs: <T extends string>(props: PanelDialogTabsProps<T>) => JSX.Element;
+};
+export declare const panelDialogPanelClass = "k2b-dialog k2b-panel-dialog-frame is-standard";
+export declare const panelDialogOptions: {
+    panelClassName: string;
+    contentClassName: string;
+};
+export declare const panelDialogWidePanelClass = "k2b-dialog k2b-panel-dialog-frame is-wide";
+export declare const panelDialogWideOptions: {
+    panelClassName: string;
+    contentClassName: string;
+};
+export declare const panelDialogFixedPanelClass = "k2b-dialog k2b-panel-dialog-frame is-fixed";
+export declare const panelDialogFixedOptions: {
+    panelClassName: string;
+    contentClassName: string;
+};
+export declare const panelDialogWorkspacePanelClass = "k2b-dialog k2b-panel-dialog-frame is-workspace";
+export declare const panelDialogWorkspaceOptions: {
+    panelClassName: string;
+    contentClassName: string;
+};
+export declare const confirmDiscardIfDirty: (dirty: boolean | (() => boolean)) => Promise<boolean>;
+declare const PanelDialog: PanelDialogComponent;
+export default PanelDialog;

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

@@ -0,0 +1,10 @@
+import { type JSX } from "solid-js";
+export type PanelHeaderProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    actions?: JSX.Element;
+    as?: "h1" | "h2" | "h3";
+    size?: "sm" | "md";
+    class?: string;
+};
+export declare function PanelHeader(props: PanelHeaderProps): JSX.Element;

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

@@ -0,0 +1,48 @@
+import { type DndDroppableSnapshot } from "@k2b/stdlib/solid";
+import { type JSX } from "solid-js";
+import { type PanesDropTarget, type PanesLayout } from "./panes-layout";
+export type PanesItem = {
+    id: string;
+    title: string;
+    icon?: string;
+    render: () => JSX.Element;
+    onClose?: () => void;
+};
+export type PanesProps = {
+    layout: PanesLayout;
+    onLayoutChange: (layout: PanesLayout) => void;
+    items: readonly PanesItem[];
+    movable?: boolean;
+    resizable?: boolean;
+    split?: false | "horizontal" | "vertical" | "both";
+    onAddItem?: (targetItemId: string | null) => void;
+    ariaLabel?: string;
+    class?: string;
+};
+type DropMeta = {
+    target: PanesDropTarget;
+    label: string;
+};
+type IndexedPanesDropTargets = {
+    tabs: ReadonlyMap<string | null, PanesDropTarget>;
+    body: readonly PanesDropTarget[];
+};
+type PanesSeparatorGeometry = {
+    coordinate: number;
+    crossStart: number;
+    crossEnd: number;
+};
+export declare const resolvePanesResizeSnap: (coordinate: number, source: PanesSeparatorGeometry, candidates: readonly PanesSeparatorGeometry[], options?: {
+    activeCoordinate?: number | null;
+    previousCoordinate?: number;
+}) => {
+    coordinate: number;
+    snappedTo: number | null;
+};
+export declare const indexPanesDropTargets: (targets: readonly PanesDropTarget[]) => ReadonlyMap<string, IndexedPanesDropTargets>;
+export declare const pointerHitsPanesDropTarget: (entry: Pick<DndDroppableSnapshot<DropMeta>, "containsPointer" | "meta" | "rect"> & Partial<Pick<DndDroppableSnapshot<DropMeta>, "element">>, pointer: {
+    x: number;
+    y: number;
+}, hitElement?: Element | null) => boolean;
+export default function Panes(props: PanesProps): JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { type JSX } from "solid-js";
+export type ScrollAreaProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children" | "class"> & {
+    children: JSX.Element;
+    scrollPreserveKey?: string | false;
+    class?: string;
+};
+export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;
+export default ScrollArea;

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

@@ -0,0 +1,72 @@
+import { type JSX } from "solid-js";
+import { type ButtonVariant } from "../actions/Button";
+import type { MaybeAccessor } from "../inputs/field-contract";
+export type SettingsPageProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    icon?: string;
+    actions?: JSX.Element;
+    children: JSX.Element;
+    footer?: JSX.Element;
+    scrollPreserveKey?: string;
+    class?: string;
+    style?: JSX.CSSProperties | string;
+};
+export declare function SettingsPage(props: SettingsPageProps): JSX.Element;
+export type SettingsSectionProps = {
+    title: JSX.Element;
+    subtitle?: JSX.Element;
+    icon?: string;
+    actions?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+};
+/**
+ * A full-page settings group. Dialogs keep using PanelDialog.Section; this
+ * component owns the quieter, observability-style paper used on admin pages.
+ */
+export declare function SettingsSection(props: SettingsSectionProps): JSX.Element;
+export type SettingsGroupProps = {
+    title: JSX.Element;
+    description?: JSX.Element;
+    children: JSX.Element;
+    class?: string;
+};
+export type SettingsGroupActionProps = {
+    children: JSX.Element;
+};
+type SettingsGroupComponent = ((props: SettingsGroupProps) => JSX.Element) & {
+    Action: (props: SettingsGroupActionProps) => JSX.Element;
+};
+export declare const SettingsGroup: SettingsGroupComponent;
+export declare const sameSettingValue: (left: unknown, right: unknown) => boolean;
+export declare const readSettingsError: (response: Response, fallback: string) => Promise<{
+    message: string;
+    fields: Record<string, string>;
+}>;
+export type SettingsFieldProps = {
+    label: string;
+    description: string;
+    error: MaybeAccessor<string | undefined>;
+    changed?: MaybeAccessor<boolean>;
+    children: JSX.Element | ((control: SettingsFieldControlProps) => JSX.Element);
+    class?: string;
+};
+export type SettingsFieldControlProps = {
+    describedBy: () => string;
+};
+export declare function SettingsField(props: SettingsFieldProps): JSX.Element;
+export type SettingsSaveBarProps = {
+    changeCount: MaybeAccessor<number>;
+    loading: MaybeAccessor<boolean>;
+    saveDisabled?: MaybeAccessor<boolean>;
+    onDiscard: () => void;
+    onSave: () => void;
+    saveLabel?: string;
+    saveVariant?: ButtonVariant;
+    class?: string;
+};
+export declare function SettingsSaveBar(props: SettingsSaveBarProps): JSX.Element;
+export type SettingsPanelFooterProps = SettingsSaveBarProps;
+export declare function SettingsPanelFooter(props: SettingsPanelFooterProps): JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { type JSX } from "solid-js";
+export type SettingsCollectionProps = {
+    title: JSX.Element;
+    description?: JSX.Element;
+    empty?: JSX.Element;
+    children?: JSX.Element;
+    class?: string;
+};
+export type SettingsCollectionActionProps = {
+    children: JSX.Element;
+};
+export type SettingsCollectionItemProps = {
+    title: JSX.Element;
+    description?: JSX.Element;
+    icon?: JSX.Element;
+    children?: JSX.Element;
+};
+export type SettingsCollectionItemStatusProps = {
+    children: JSX.Element;
+};
+export type SettingsCollectionItemActionsProps = {
+    children: JSX.Element;
+};
+export type SettingsCollectionItemReorderProps = {
+    label: string;
+    index: number;
+    count: number;
+    disabled?: boolean;
+    onMove: (direction: -1 | 1) => void;
+};
+type SettingsCollectionItemComponent = ((props: SettingsCollectionItemProps) => JSX.Element) & {
+    Status: (props: SettingsCollectionItemStatusProps) => JSX.Element;
+    Actions: (props: SettingsCollectionItemActionsProps) => JSX.Element;
+    Reorder: (props: SettingsCollectionItemReorderProps) => JSX.Element;
+};
+type SettingsCollectionComponent = ((props: SettingsCollectionProps) => JSX.Element) & {
+    Action: (props: SettingsCollectionActionProps) => JSX.Element;
+    Item: SettingsCollectionItemComponent;
+};
+declare const SettingsCollection: SettingsCollectionComponent;
+export default SettingsCollection;