@volter/world-console 2.0.12 → 2.0.14

package/dist/client/kit/kit.css

@@ -185,6 +185,10 @@ section > h2:first-child, section > h3:first-child { margin-top: 0; }
 /* ── the shared conventions: dialogs, confirmations, toasts, skeletons, menus, meters, tabs, the phone's drawer ── */
 dialog.dialog { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--volter-shadow-dialog); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
 dialog.dialog.wide { width: min(720px, calc(100vw - 32px)); }
+dialog.dialog.window { width: min(1040px, calc(100vw - 48px)); height: min(720px, calc(100vh - 48px)); overflow: hidden; }
+dialog.dialog.window[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+dialog.dialog.window .dialog-head { padding: 14px 20px; border-bottom: 1px solid var(--line); }
+dialog.dialog.window .dialog-body { padding: 0; min-height: 0; display: block; }
 dialog.dialog::backdrop { background: var(--volter-overlay-scrim); }
 dialog.dialog[open] { animation: dialog-in var(--volter-motion-fast, 140ms) ease-out; }
 @keyframes dialog-in { from { opacity: 0; transform: translateY(6px) scale(0.99); } to { opacity: 1; transform: none; } }

package/dist/client/kit/kit.tsx

@@ -127,7 +127,7 @@ export function MenuDismiss(): null {
 // ── dialogs, confirmations and toasts: the conventions every page shares ─────────────────────────────────────────────
 /** A modal dialog: the browser's own (`<dialog>` shown modal), so focus stays in it, Esc closes it and the page behind is
  *  inert; labelled by its title. A press on the backdrop closes it too. */
-export function Dialog({ open, onClose, title, children, footer, wide }: { open: boolean; onClose: () => void; title: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; wide?: boolean }): React.JSX.Element {
+export function Dialog({ open, onClose, title, children, footer, wide }: { open: boolean; onClose: () => void; title: React.ReactNode; children: React.ReactNode; footer?: React.ReactNode; /** wider for a table; `window`: an app's settings window, its tabs beside its pane */ wide?: boolean | 'window' }): React.JSX.Element {
   const ref = useRef<HTMLDialogElement>(null); const id = useId();
   // opening moves focus to the dialog's first control (its Close); the first field of its body is where a person types
   useEffect(() => {
@@ -142,7 +142,7 @@ export function Dialog({ open, onClose, title, children, footer, wide }: { open:
     if (!open && d.open) d.close();
   }, [open]);
   return (
-    <dialog ref={ref} className={wide ? 'dialog wide' : 'dialog'} aria-labelledby={id} onClose={onClose} onCancel={(e) => { e.preventDefault(); onClose(); }} onMouseDown={(e) => { if (e.target === ref.current) onClose(); }}>
+    <dialog ref={ref} className={wide === 'window' ? 'dialog window' : wide ? 'dialog wide' : 'dialog'} aria-labelledby={id} onClose={onClose} onCancel={(e) => { e.preventDefault(); onClose(); }} onMouseDown={(e) => { if (e.target === ref.current) onClose(); }}>
       {open ? <>
         <div className="dialog-head"><h2 id={id}>{title}</h2><button type="button" className="icon-button" aria-label="Close" onClick={onClose}>✕</button></div>
         <div className="dialog-body">{children}</div>