@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/workbench-dialog.d.ts

@@ -0,0 +1,97 @@
+import * as kerfjs from 'kerfjs';
+import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
+import { CssLength } from './css-values.js';
+import { WorkbenchMainBottomToolbar, WorkbenchPanel } from './workbench.js';
+import { DialogSurfaceSize, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfaceRootAttributes } from './surface-scaffold.js';
+export { DialogCloseSource, DialogRequestCloseDetail, closeDialog, openDialog } from './surface-scaffold.js';
+import './nav-stack-CU_0dKtI.js';
+import './pane.js';
+import './scroll-clearance-BikHljTc.js';
+import './list.js';
+import './extension-attributes-mu8MFUl0.js';
+import './flex-alignment-4ms8ZbV8.js';
+import './sides-BPSWde0A.js';
+import './panel-toolbar-vg6Ir5Dy.js';
+import './toolbar.js';
+import './lucide-icon.js';
+import 'lucide';
+import './toolbar-text.js';
+import './resizable-region.js';
+
+/**
+ * Application `data-*` identity on the dialog root, such as `data-key`; the
+ * dialog's own configuration attributes stay protected.
+ */
+type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;
+interface WorkbenchDialogProps {
+    /**
+     * The dialog's id, for `openDialog(document.getElementById(id))`. The
+     * Workbench inside is `<id>-workbench`, so its rails are
+     * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.
+     */
+    id: string;
+    /** The dialog's accessible name. */
+    label: string;
+    /** The dialog's primary title: an xl heading in the work area's toolbar. */
+    title: string;
+    /** A short supporting line under the title. */
+    description?: string;
+    /** Groups after the title in the work area's toolbar. */
+    leading?: KerfUiContent;
+    /** Header controls before the close control, such as a `ToolbarControlGroup`. */
+    actions?: KerfUiContent;
+    /** The work area. */
+    main: KerfUiContent;
+    /** Fixed content over the work area's bottom toolbar, such as a status line. */
+    mainFooter?: KerfUiContent;
+    /** The work area's bottom toolbar, usually the dialog's buttons. */
+    mainBottomToolbar?: WorkbenchMainBottomToolbar;
+    /**
+     * Side rails with their own toolbars. On compact devices each presents as
+     * an overlay over the work area; the app starts it collapsed and its
+     * `toolbar.toggle` shows it.
+     */
+    leftRail?: WorkbenchPanel;
+    rightRail?: WorkbenchPanel;
+    /** A bottom drawer under the work area. */
+    bottomDrawer?: WorkbenchPanel;
+    /**
+     * Fill the screen with the rails as overlays: derive from
+     * `deviceClass().value.compact`.
+     */
+    compact?: boolean;
+    /** The close control's accessible name (default `Close`). */
+    closeLabel?: string;
+    /** Close on a press on the backdrop; otherwise the panel pulses. */
+    lightDismiss?: boolean;
+    /** Roomy preferred width preset (default `large`). */
+    size?: DialogSurfaceSize;
+    /** Roomy preferred width; takes precedence over `size`. */
+    preferredWidth?: CssLength;
+    /** Roomy definite height (default 560px), bounded by the viewport. */
+    height?: DialogSurfaceHeight;
+    /** Roomy height cap in place of a definite height. */
+    maxHeight?: DialogSurfaceMaxHeight;
+    /** Roomy edge clearance from the viewport. */
+    viewportGutter?: CssLength;
+    /** Minimum work-area width beside inline rails, in px (Workbench default 320). */
+    mainMinSize?: number;
+    rootAttributes?: WorkbenchDialogRootAttributes;
+    className?: string;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
+}
+/**
+ * A workbench dialog: a modal whose body is a `Workbench`. The work area's
+ * toolbar carries the dialog's primary title, its actions, and the close
+ * control; side rails keep their own toolbars and run the dialog's full
+ * height. On compact devices it fills the screen and its rails become
+ * overlays over the work area, shown by their toolbar toggles, so the work
+ * area keeps its width. Open it with `openDialog()`; the app owns each
+ * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on
+ * Escape or a press outside it before the dialog sees the Escape. Built from
+ * `DialogSurface` and `Workbench`.
+ */
+declare function WorkbenchDialog({ id, label, title, description, leading, actions, main, mainFooter, mainBottomToolbar, leftRail, rightRail, bottomDrawer, compact, closeLabel, lightDismiss, size, preferredWidth, height, maxHeight, viewportGutter, mainMinSize, rootAttributes, className, slot, }: WorkbenchDialogProps): kerfjs.SafeHtml;
+
+export { WorkbenchDialog, type WorkbenchDialogProps, type WorkbenchDialogRootAttributes };

package/dist/workbench-dialog.js

@@ -0,0 +1,124 @@
+import { DialogSurface } from './chunk-TAHR457X.js';
+export { closeDialog, openDialog } from './chunk-ATGAJVZ6.js';
+
+import { Workbench } from './chunk-DDSCVEO5.js';
+
+
+
+import { ToolbarText } from './chunk-EKHDLBRP.js';
+
+
+
+
+import { ToolbarControlGroup } from './chunk-2PXZBFEC.js';
+
+
+
+
+
+
+
+
+import { LucideIcon } from './chunk-HJXVVFBT.js';
+import { remify } from './chunk-IQSRHXZR.js';
+
+import { X } from 'lucide';
+import { jsx } from 'kerfjs/jsx-runtime';
+
+function compactRail(panel, compact) {
+  return panel && compact ? { ...panel, presentation: "overlay" } : panel;
+}
+function WorkbenchDialog({
+  id,
+  label,
+  title,
+  description,
+  leading,
+  actions,
+  main,
+  mainFooter,
+  mainBottomToolbar,
+  leftRail,
+  rightRail,
+  bottomDrawer,
+  compact = false,
+  closeLabel = "Close",
+  lightDismiss = false,
+  size = "large",
+  preferredWidth,
+  height,
+  maxHeight,
+  viewportGutter,
+  mainMinSize,
+  rootAttributes,
+  className = "",
+  slot
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogSurface,
+    {
+      id,
+      label,
+      withoutHeader: true,
+      lightDismiss,
+      closeLabel,
+      size,
+      presentation: compact ? "fullscreen" : "modal",
+      preferredWidth,
+      height: compact ? void 0 : maxHeight === void 0 ? height ?? remify(560) : height,
+      maxHeight: compact ? void 0 : maxHeight,
+      viewportGutter: compact ? void 0 : viewportGutter,
+      bodyInset: "none",
+      bodyLayout: "fill",
+      rootAttributes: {
+        ...rootAttributes,
+        "data-dialog-layout": "workbench"
+      },
+      className,
+      slot,
+      children: /* @__PURE__ */ jsx(
+        Workbench,
+        {
+          id: `${id}-workbench`,
+          label,
+          mainToolbar: {
+            label: title,
+            title: /* @__PURE__ */ jsx(
+              ToolbarText,
+              {
+                text: title,
+                description,
+                size: "xlarge",
+                id: `${id}-title`,
+                headingLevel: 2
+              }
+            ),
+            leading,
+            trailing: actions,
+            // After any hidden right rail's toggle, so Close stays outermost.
+            end: /* @__PURE__ */ jsx(ToolbarControlGroup, { appearance: "borderless", single: true, children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": closeLabel,
+                "data-dialog-close": "",
+                children: /* @__PURE__ */ jsx(LucideIcon, { icon: X, name: "x" })
+              }
+            ) })
+          },
+          main,
+          mainFooter,
+          mainBottomToolbar,
+          leftRail: compactRail(leftRail, compact),
+          rightRail: compactRail(rightRail, compact),
+          bottomDrawer,
+          mainMinSize
+        }
+      )
+    }
+  );
+}
+
+export { WorkbenchDialog };
+
+//# sourceMappingURL=workbench-dialog.js.map

package/dist/workbench-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surfaces/workbench-dialog/workbench-dialog.tsx"],"names":[],"mappings":"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","file":"workbench-dialog.js","sourcesContent":["import { X } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { remify } from '../../../shared/styles/css-values.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport { ToolbarText } from '../../actions/toolbar-text/toolbar-text.js';\nimport {\n  Workbench,\n  type WorkbenchMainBottomToolbar,\n  type WorkbenchPanel,\n} from '../../layout/workbench/workbench.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport {\n  DialogSurface,\n  type DialogSurfaceHeight,\n  type DialogSurfaceMaxHeight,\n  type DialogSurfaceRootAttributes,\n  type DialogSurfaceSize,\n} from '../surface-scaffold/surface-scaffold.js';\n\n// Open and close it like any DialogSurface, from the same import.\nexport {\n  closeDialog,\n  type DialogCloseSource,\n  type DialogRequestCloseDetail,\n  openDialog,\n} from '../surface-scaffold/surface-scaffold.js';\n\n/**\n * Application `data-*` identity on the dialog root, such as `data-key`; the\n * dialog's own configuration attributes stay protected.\n */\nexport type WorkbenchDialogRootAttributes = DialogSurfaceRootAttributes;\n\nexport interface WorkbenchDialogProps {\n  /**\n   * The dialog's id, for `openDialog(document.getElementById(id))`. The\n   * Workbench inside is `<id>-workbench`, so its rails are\n   * `<id>-workbench-left-rail` and `<id>-workbench-right-rail`.\n   */\n  id: string;\n  /** The dialog's accessible name. */\n  label: string;\n  /** The dialog's primary title: an xl heading in the work area's toolbar. */\n  title: string;\n  /** A short supporting line under the title. */\n  description?: string;\n  /** Groups after the title in the work area's toolbar. */\n  leading?: KerfUiContent;\n  /** Header controls before the close control, such as a `ToolbarControlGroup`. */\n  actions?: KerfUiContent;\n  /** The work area. */\n  main: KerfUiContent;\n  /** Fixed content over the work area's bottom toolbar, such as a status line. */\n  mainFooter?: KerfUiContent;\n  /** The work area's bottom toolbar, usually the dialog's buttons. */\n  mainBottomToolbar?: WorkbenchMainBottomToolbar;\n  /**\n   * Side rails with their own toolbars. On compact devices each presents as\n   * an overlay over the work area; the app starts it collapsed and its\n   * `toolbar.toggle` shows it.\n   */\n  leftRail?: WorkbenchPanel;\n  rightRail?: WorkbenchPanel;\n  /** A bottom drawer under the work area. */\n  bottomDrawer?: WorkbenchPanel;\n  /**\n   * Fill the screen with the rails as overlays: derive from\n   * `deviceClass().value.compact`.\n   */\n  compact?: boolean;\n  /** The close control's accessible name (default `Close`). */\n  closeLabel?: string;\n  /** Close on a press on the backdrop; otherwise the panel pulses. */\n  lightDismiss?: boolean;\n  /** Roomy preferred width preset (default `large`). */\n  size?: DialogSurfaceSize;\n  /** Roomy preferred width; takes precedence over `size`. */\n  preferredWidth?: CssLength;\n  /** Roomy definite height (default 560px), bounded by the viewport. */\n  height?: DialogSurfaceHeight;\n  /** Roomy height cap in place of a definite height. */\n  maxHeight?: DialogSurfaceMaxHeight;\n  /** Roomy edge clearance from the viewport. */\n  viewportGutter?: CssLength;\n  /** Minimum work-area width beside inline rails, in px (Workbench default 320). */\n  mainMinSize?: number;\n  rootAttributes?: WorkbenchDialogRootAttributes;\n  className?: string;\n  /** Native named-slot assignment when composed inside a web component. */\n  slot?: string;\n}\n\n/** A rail presents as an overlay in a compact dialog, as the app left it otherwise. */\nfunction compactRail(\n  panel: WorkbenchPanel | undefined,\n  compact: boolean,\n): WorkbenchPanel | undefined {\n  return panel && compact ? { ...panel, presentation: 'overlay' } : panel;\n}\n\n/**\n * A workbench dialog: a modal whose body is a `Workbench`. The work area's\n * toolbar carries the dialog's primary title, its actions, and the close\n * control; side rails keep their own toolbars and run the dialog's full\n * height. On compact devices it fills the screen and its rails become\n * overlays over the work area, shown by their toolbar toggles, so the work\n * area keeps its width. Open it with `openDialog()`; the app owns each\n * rail's `collapsed` state, and `wireWorkbench` closes an overlay rail on\n * Escape or a press outside it before the dialog sees the Escape. Built from\n * `DialogSurface` and `Workbench`.\n */\nexport function WorkbenchDialog({\n  id,\n  label,\n  title,\n  description,\n  leading,\n  actions,\n  main,\n  mainFooter,\n  mainBottomToolbar,\n  leftRail,\n  rightRail,\n  bottomDrawer,\n  compact = false,\n  closeLabel = 'Close',\n  lightDismiss = false,\n  size = 'large',\n  preferredWidth,\n  height,\n  maxHeight,\n  viewportGutter,\n  mainMinSize,\n  rootAttributes,\n  className = '',\n  slot,\n}: WorkbenchDialogProps) {\n  return (\n    <DialogSurface\n      id={id}\n      label={label}\n      withoutHeader\n      lightDismiss={lightDismiss}\n      closeLabel={closeLabel}\n      size={size}\n      presentation={compact ? 'fullscreen' : 'modal'}\n      preferredWidth={preferredWidth}\n      height={\n        compact\n          ? undefined\n          : maxHeight === undefined\n            ? (height ?? remify(560))\n            : height\n      }\n      maxHeight={compact ? undefined : maxHeight}\n      viewportGutter={compact ? undefined : viewportGutter}\n      bodyInset=\"none\"\n      bodyLayout=\"fill\"\n      rootAttributes={{\n        ...rootAttributes,\n        'data-dialog-layout': 'workbench',\n      }}\n      className={className}\n      slot={slot}\n    >\n      <Workbench\n        id={`${id}-workbench`}\n        label={label}\n        mainToolbar={{\n          label: title,\n          title: (\n            <ToolbarText\n              text={title}\n              description={description}\n              size=\"xlarge\"\n              id={`${id}-title`}\n              headingLevel={2}\n            />\n          ),\n          leading,\n          trailing: actions,\n          // After any hidden right rail's toggle, so Close stays outermost.\n          end: (\n            <ToolbarControlGroup appearance=\"borderless\" single>\n              <button\n                type=\"button\"\n                aria-label={closeLabel}\n                data-dialog-close=\"\"\n              >\n                <LucideIcon icon={X} name=\"x\" />\n              </button>\n            </ToolbarControlGroup>\n          ),\n        }}\n        main={main}\n        mainFooter={mainFooter}\n        mainBottomToolbar={mainBottomToolbar}\n        leftRail={compactRail(leftRail, compact)}\n        rightRail={compactRail(rightRail, compact)}\n        bottomDrawer={bottomDrawer}\n        mainMinSize={mainMinSize}\n      />\n    </DialogSurface>\n  );\n}\n"]}

package/dist/workbench.d.ts

@@ -42,6 +42,11 @@ interface WorkbenchMainToolbar extends ToolbarConfig {
     center?: KerfUiContent;
     /** Groups at the trailing edge, before a collapsed right rail's groups. */
     trailing?: KerfUiContent;
+    /**
+     * Groups after a collapsed right rail's groups, so they stay outermost,
+     * such as a dialog's close control.
+     */
+    end?: KerfUiContent;
 }
 /**
  * The work area's bottom toolbar; a collapsed drawer adds its groups to it.

package/dist/workbench.js

@@ -1,4 +1,4 @@
-export { Workbench } from './chunk-YBWQR2OK.js';
+export { Workbench } from './chunk-DDSCVEO5.js';