@notis_ai/cli 0.2.0-beta.167.1 → 0.2.0-beta.175.1

package/dist/base-skills/notis-apps/references/design.md

@@ -15,12 +15,25 @@
 - Let Notis own navigation, folder trees, and search. Use `PageHeading`,
   `NativeSelect`, `.list-row`, and `useTopBarSearch` instead of duplicating chrome.
 - Prefer inline optimistic edits for simple changes, with rollback on failure.
-  Use a dialog for multi-field edits or destructive confirmation.
+  Use SDK `Dialog` for multi-field edits or destructive confirmation; keep its actions app-owned.
 
 Build enforces the existing design rules and reports violations by file/line.
 Use those diagnostics to fix specific problems; passing them does not establish
 that the design is good. See [troubleshooting](troubleshooting.md) when needed.
 
+### Controls and side panels
+
+- **Keep controls with what they control.** Filters, counts, and Create belong
+  above the list; record actions belong inside the detail panel. Only controls
+  that affect both panes belong above both.
+- **Align sibling panes.** Start the list and detail panel at the same height,
+  with consistent header spacing and control sizes.
+- **Keep secondary actions quiet.** Put occasional destructive actions in an
+  overflow menu, retaining their confirmation step.
+
+For example, a ticket view has two side-by-side panes: **Tickets / New ticket →
+filters → list**, and **ticket ID / actions / close → details**.
+
 ### Look at the result
 
 Run build and verification, then inspect screenshots of the affected view at a

package/dist/base-skills/notis-apps/references/sdk.md

@@ -23,6 +23,7 @@ already installs `ShortcutProvider`; app code should not add a second provider.
 | `NotisSelectionBoundary` | `(NotisSelectionBoundaryProps) => ReactElement` | Attach structured, explicitly untrusted app/resource/selection context to selected content and copy operations |
 | `SelectionCheckbox` / `SelectionMarquee` | components | Standard selection controls backed by `useCollectionInteractions` |
 | `MultiSelectActionBar` | component | Standard bulk actions with pending/disabled state and shortcut support |
+| `Dialog` | `{ open, onClose, title, description?, role?, children }` | Themed native modal with top-layer stacking, focus handling and background shortcut isolation. Use `role="alertdialog"` for destructive confirmation; put the safe action first. |
 
 Import headless collection action types and helpers from
 `@notis/sdk/interactions`. Keep an open detail view synchronized with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notis_ai/cli",
-  "version": "0.2.0-beta.167.1",
+  "version": "0.2.0-beta.175.1",
   "description": "Agent-first Notis CLI for apps and generic tool execution",
   "type": "module",
   "bin": {

package/template/packages/sdk/src/components/Dialog.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { useEffect, useId, useRef, type ReactNode } from 'react';
+
+export interface DialogProps {
+  open: boolean;
+  /** Request dismissal. Keep open unchanged to prevent dismissal while saving. */
+  onClose: () => void;
+  title: ReactNode;
+  description?: ReactNode;
+  role?: 'dialog' | 'alertdialog';
+  children: ReactNode;
+}
+
+/** Native top-layer dialog; content and actions remain app-owned. */
+export function Dialog({ open, onClose, title, description, role = 'dialog', children }: DialogProps) {
+  const ref = useRef<HTMLDialogElement>(null);
+  const titleId = useId();
+  const descriptionId = useId();
+
+  useEffect(() => {
+    if (!open) return;
+    const dialog = ref.current!;
+    dialog.showModal();
+    return () => dialog.close();
+  }, [open]);
+
+  return (
+    <dialog
+      ref={ref}
+      className="notis-dialog"
+      role={role}
+      aria-labelledby={titleId}
+      aria-describedby={description == null ? undefined : descriptionId}
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose();
+      }}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <h2 id={titleId} className="notis-dialog-title">{title}</h2>
+      {description != null && <p id={descriptionId} className="notis-dialog-description">{description}</p>}
+      {children}
+    </dialog>
+  );
+}

package/template/packages/sdk/src/index.ts

@@ -72,6 +72,8 @@ export {
 } from './documents';
 
 // Multi-select components
+export { Dialog } from './components/Dialog';
+export type { DialogProps } from './components/Dialog';
 export { MultiSelectActionBar } from './components/MultiSelectActionBar';
 export { MultiSelectCheckbox, MultiSelectCheckbox as SelectionCheckbox } from './components/MultiSelectCheckbox';
 export { MultiSelectDragOverlay, MultiSelectDragOverlay as SelectionMarquee } from './components/MultiSelectDragOverlay';

package/template/packages/sdk/src/interactions/shortcuts.tsx

@@ -215,6 +215,14 @@ function consumeShortcut(event: KeyboardEvent, definition: ShortcutDefinition):
   void definition.onTrigger(event);
 }
 
+// Native dialogs make the background inert, but document capture listeners still
+// receive their keyboard events. Leave those events to the dialog and its controls.
+function isDialogEvent(event: KeyboardEvent): boolean {
+  return event.composedPath().some((target) =>
+    target instanceof HTMLElement && target.matches('dialog.notis-dialog[open]'),
+  );
+}
+
 export function ShortcutProvider({ children }: { children: ReactNode }) {
   const parentRegistry = useContext(ShortcutContext);
   if (parentRegistry) return <>{children}</>;
@@ -280,7 +288,7 @@ function registerFallbackShortcut(input: Omit<ShortcutRegistration, 'id' | 'orde
       registrations,
       nextId: 1,
       dispatch: (event) => {
-        if (event.defaultPrevented) return;
+        if (event.defaultPrevented || isDialogEvent(event)) return;
         const editable = isEditableShortcutEvent(event);
         const token = chordToken(eventChord(event));
         for (const registration of applicableRegistrations(registrations.values())) {
@@ -370,6 +378,7 @@ function ShortcutProviderRoot({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || isDialogEvent(event)) return;
       const editable = isEditableShortcutEvent(event);
       if (!editable && !event.repeat && event.key === '?' && !event.metaKey && !event.ctrlKey && !event.altKey) {
         event.preventDefault();

package/template/packages/sdk/src/styles.css

@@ -8,6 +8,27 @@
  * The portal injects the live Notis theme variables at render time.
  */
 
+/* Top-layer surfaces must remain distinct from the app's flat content panels. */
+dialog.notis-dialog {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  box-sizing: border-box;
+  width: min(28rem, calc(100% - 2rem));
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: 1.25rem;
+  border: 1px solid hsl(var(--border));
+  border-radius: 0.75rem;
+  background: hsl(var(--popover));
+  color: hsl(var(--popover-foreground));
+  box-shadow: 0 16px 48px rgb(0 0 0 / 0.2);
+}
+
+dialog.notis-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
+.notis-dialog-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.5; }
+.notis-dialog-description { margin: 0.5rem 0 0; color: hsl(var(--muted-foreground)); font-size: 0.875rem; line-height: 1.5; }
+
 /* Framework-neutral styles: the app owns its Tailwind entry point. This file
  * is also consumed in shadow roots and by apps on older Tailwind versions. */
 @layer base {