@notis_ai/cli 0.2.0-beta.156.1 → 0.2.0-beta.158.1

package/template/app/page.tsx

@@ -2,8 +2,11 @@
 
 import { getDocumentPreview, useDocuments, useNotis, Skeleton, ViewSkeleton } from '@notis/sdk';
 import { Badge } from '@/components/ui/badge';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { PageHeading } from '@/components/page-heading';
 
+// Reference page for the flat Notis design bar: a plain page header, bare
+// figures, and a hairline-free list. No bordered boxes, no dividers, no
+// palette colors, no loading text. `notis apps build` enforces these rules.
 export default function HomePage() {
   const { app, ready } = useNotis();
   // Documents come back normalized: plain property values, camelCase fields,
@@ -11,51 +14,49 @@ export default function HomePage() {
   const { documents, loading, hasData, error, refetch } = useDocuments('items', { pageSize: 25 });
 
   return (
-    <main className="notis-app-shell space-y-6">
-      <Card>
-        <CardHeader className="space-y-3">
-          <Badge variant="secondary" className="w-fit">Installed app</Badge>
-          <div className="space-y-2">
-            <CardTitle>{ready ? app?.name : <Skeleton style={{ width: 160 }} />}</CardTitle>
-            <CardDescription>
-              {ready ? app?.description : <Skeleton style={{ width: 240 }} />}
-            </CardDescription>
-          </div>
-        </CardHeader>
-      </Card>
+    <main className="notis-app-shell space-y-8">
+      <PageHeading
+        title={ready ? app?.name ?? 'Items' : <Skeleton style={{ width: 160, height: 28 }} />}
+        description={ready ? app?.description ?? undefined : <Skeleton style={{ width: 240 }} />}
+      />
+
+      <section className="grid grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4">
+        <div className="min-w-0">
+          <p className="text-xs font-medium text-muted-foreground">Items</p>
+          <p className="mt-1 text-2xl font-semibold tabular-nums">
+            {hasData ? documents.length : <Skeleton style={{ width: 48, height: 28 }} />}
+          </p>
+        </div>
+      </section>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Items</CardTitle>
-          <CardDescription>Use shadcn surfaces and portal tokens so the app feels native inside Notis.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          {error && <p role="alert" className="mb-3 text-sm text-destructive">{error.message} <button onClick={refetch}>Retry</button></p>}
-          {loading ? (
-            <ViewSkeleton variant="table" rows={4} />
-          ) : !hasData ? null : documents.length === 0 ? (
-            <div className="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
-              No items yet. Create your first item.
-            </div>
-          ) : (
-            <div className="space-y-3">
-              {documents.map((doc) => (
-                <div key={doc.id} className="rounded-xl border border-border bg-background px-4 py-3">
-                  <div className="flex items-center justify-between gap-3">
-                    <p className="font-medium">{doc.title || 'Untitled'}</p>
-                    {typeof doc.properties.status === 'string' ? (
-                      <Badge variant="outline">{doc.properties.status}</Badge>
-                    ) : null}
-                  </div>
-                  <p className="mt-1 line-clamp-1 text-xs text-muted-foreground">
-                    {getDocumentPreview(doc)}
-                  </p>
+      <section className="space-y-3">
+        <h2 className="text-base font-semibold">Recent items</h2>
+        {error ? (
+          <p role="alert" className="rounded-xl bg-destructive/10 px-4 py-3 text-sm text-destructive">
+            {error.message}{' '}
+            <button type="button" className="font-medium underline" onClick={refetch}>Retry</button>
+          </p>
+        ) : null}
+        {loading ? (
+          <ViewSkeleton variant="table" rows={4} />
+        ) : !hasData ? null : documents.length === 0 ? (
+          <p className="px-4 py-10 text-center text-sm text-muted-foreground">No items yet. Create your first item.</p>
+        ) : (
+          <div className="space-y-2 lg:space-y-0">
+            {documents.map((doc) => (
+              <div key={doc.id} className="list-row flex items-center justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium">{doc.title || 'Untitled'}</p>
+                  <p className="mt-0.5 truncate text-xs text-muted-foreground">{getDocumentPreview(doc)}</p>
                 </div>
-              ))}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+                {typeof doc.properties.status === 'string' ? (
+                  <Badge variant="secondary" className="shrink-0">{doc.properties.status}</Badge>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
     </main>
   );
 }

package/template/components/page-heading.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+
+// Mirrors the portal's PortalPageHeader: plain title, one-line description,
+// actions on the right. No eyebrow, no rule underneath.
+export function PageHeading({
+  title,
+  description,
+  actions,
+}: {
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}) {
+  return (
+    <header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div className="min-w-0 flex-1">
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground">{title}</h1>
+        {description ? <p className="mt-1.5 text-sm text-muted-foreground">{description}</p> : null}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2 sm:justify-end">{actions}</div> : null}
+    </header>
+  );
+}

package/template/components/ui/badge.tsx

@@ -4,13 +4,16 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium transition-colors',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary/10 text-primary',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'text-foreground',
+        default: 'bg-primary/10 text-primary',
+        secondary: 'bg-foreground/[0.07] text-foreground',
+        destructive: 'bg-destructive/10 text-destructive',
+        // `outline` is kept for API compatibility and renders as plain text: the
+        // design bar has no outlined badges.
+        outline: 'bg-transparent text-foreground',
       },
     },
     defaultVariants: {

package/template/components/ui/card.tsx

@@ -2,20 +2,33 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
+// Surfaces are flat: a tinted panel on the page, and a plain background panel
+// when nested inside another Card. No borders, no dividers, no shadows.
+const CardDepthContext = React.createContext(0);
+
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-2xl border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  ),
+  ({ className, ...props }, ref) => {
+    const depth = React.useContext(CardDepthContext);
+    return (
+      <CardDepthContext.Provider value={depth + 1}>
+        <div
+          ref={ref}
+          className={cn(
+            'min-w-0 rounded-2xl text-card-foreground',
+            depth === 0 ? 'bg-muted' : 'bg-background',
+            className,
+          )}
+          {...props}
+        />
+      </CardDepthContext.Provider>
+    );
+  },
 );
 Card.displayName = 'Card';
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-5', className)} {...props} />
   ),
 );
 CardHeader.displayName = 'CardHeader';
@@ -24,7 +37,7 @@ const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HT
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
-      className={cn('text-xl font-semibold leading-none tracking-tight', className)}
+      className={cn('text-base font-semibold leading-none tracking-tight', className)}
       {...props}
     />
   ),
@@ -41,14 +54,14 @@ CardDescription.displayName = 'CardDescription';
 
 const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('p-5 pt-0', className)} {...props} />
   ),
 );
 CardContent.displayName = 'CardContent';
 
 const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+    <div ref={ref} className={cn('flex items-center p-5 pt-0', className)} {...props} />
   ),
 );
 CardFooter.displayName = 'CardFooter';

package/template/components/ui/native-select.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { CaretDown } from '@phosphor-icons/react';
+
+import { cn } from '@/lib/utils';
+
+// Borderless native select: a tinted pill with a caret. Keeps the platform
+// dropdown (no portal needed inside the app surface) and the portal focus ring.
+const NativeSelect = React.forwardRef<HTMLSelectElement, React.SelectHTMLAttributes<HTMLSelectElement>>(
+  ({ className, children, ...props }, ref) => (
+    <span className={cn('relative inline-flex', className)}>
+      <select
+        ref={ref}
+        className="h-9 w-full appearance-none rounded-md bg-muted pl-3 pr-8 text-sm text-foreground outline-none transition-colors hover:bg-muted/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+        {...props}
+      >
+        {children}
+      </select>
+      <CaretDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+    </span>
+  ),
+);
+NativeSelect.displayName = 'NativeSelect';
+
+export { NativeSelect };

package/template/notis.config.ts

@@ -2,7 +2,6 @@ import { defineNotisApp } from '@notis/sdk/config';
 
 export default defineNotisApp({
   name: 'my-notis-app',
-  devSlug: 'my-notis-app',
   title: 'My Notis App',
   description: 'A focused Notis app with one route and one database-backed workflow.',
   icon: 'phosphor:squares-four',

package/template/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build"
+    "dev": "vite --configLoader runner",
+    "build": "vite build --configLoader runner"
   },
   "dependencies": {
     "@notis/sdk": "file:./packages/sdk",

package/template/packages/sdk/package.json

@@ -12,8 +12,7 @@
     "./styles.css": "./src/styles.css"
   },
   "files": [
-    "src",
-    "template"
+    "src"
   ],
   "scripts": {
     "type-check": "tsc --noEmit"

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

@@ -9,11 +9,19 @@ import React, {
   type ReactElement,
 } from 'react';
 import type { ResolvedCollectionAction } from '../interactions/actions';
-import { shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import { activateShortcutCollection, shortcutDisplay, useShortcuts, type ShortcutDefinition } from '../interactions/shortcuts';
+import { isInteractionElementVisible } from '../interactions/visibility';
 import type { ShortcutScope } from '../interactions/shortcuts';
 
 export type MultiSelectAction = ResolvedCollectionAction;
 
+/** The Portal owns global launcher positioning; app code only reports its own bar. */
+export const BULK_ACTION_LAYOUT_EVENT = 'notis:bulk-actions-layout';
+export interface BulkActionLayoutDetail {
+  bar: HTMLElement;
+  active: boolean;
+}
+
 export interface MultiSelectActionBarProps {
   selectedCount: number;
   actions: MultiSelectAction[];
@@ -27,6 +35,9 @@ export interface MultiSelectActionBarProps {
   shortcutsEnabled?: boolean;
   /** Override the default collection shortcut scope. */
   shortcutScope?: ShortcutScope;
+  collectionOwnerId?: string;
+  isAvailable?: () => boolean;
+  onClearSelection?: () => void;
 }
 
 const containerBaseStyle: CSSProperties = {
@@ -107,7 +118,7 @@ const iconSlotStyle: CSSProperties = {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
-  opacity: 0.8,
+  color: 'inherit',
 };
 
 export function MultiSelectActionBar({
@@ -118,35 +129,55 @@ export function MultiSelectActionBar({
   style,
   shortcutsEnabled = true,
   shortcutScope = 'collection',
+  collectionOwnerId,
+  isAvailable,
+  onClearSelection,
 }: MultiSelectActionBarProps): ReactElement | null {
   const barRef = useRef<HTMLDivElement>(null);
   const visible = selectedCount > 0;
   useEffect(() => {
     const bar = barRef.current;
     if (!visible || !bar) return;
-    // Also reaches a Portal launcher when an app renders inside a shadow root.
-    const root = document.documentElement;
-    const property = '--notis-bulk-actions-height';
-    const previous = root.style.getPropertyValue(property);
-    const update = () => root.style.setProperty(property, `${bar.getBoundingClientRect().height + 12}px`);
+    // Notify the owning document, including from a shadow root or after unmount.
+    // Only the Portal host may measure this bar and change global layout styles.
+    const report = (active: boolean) => {
+      const owner = bar.ownerDocument;
+      const LayoutEvent = owner.defaultView?.CustomEvent;
+      if (LayoutEvent) {
+        owner.dispatchEvent(new LayoutEvent<BulkActionLayoutDetail>(BULK_ACTION_LAYOUT_EVENT, {
+          detail: { bar, active },
+        }));
+      }
+    };
+    const update = () => report(isAvailable?.() !== false && isInteractionElementVisible(bar));
     update();
     const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
     observer?.observe(bar);
+    const VisibilityObserver = bar.ownerDocument.defaultView?.MutationObserver;
+    const visibilityObserver = VisibilityObserver ? new VisibilityObserver(update) : null;
+    let element: Element | null = bar;
+    while (element) {
+      visibilityObserver?.observe(element, { attributes: true, attributeFilter: element === bar.ownerDocument.documentElement ? ['hidden', 'inert', 'aria-hidden', 'class'] : ['hidden', 'inert', 'aria-hidden', 'style', 'class'] });
+      const root: Node = element.getRootNode();
+      element = element.parentElement ?? ('host' in root ? (root as ShadowRoot).host : null);
+    }
     return () => {
       observer?.disconnect();
-      if (previous) root.style.setProperty(property, previous);
-      else root.style.removeProperty(property);
+      visibilityObserver?.disconnect();
+      report(false);
     };
-  }, [visible]);
+  }, [isAvailable, visible]);
 
   const actionShortcuts = useMemo<ShortcutDefinition[]>(() => {
     return actions.flatMap((action): ShortcutDefinition[] => {
-        if (!action.shortcut || action.disabled || action.pending) return [];
+        if (!action.shortcut) return [];
         return [{
           id: `collection.action.${action.id}`,
           keys: action.shortcut,
           label: action.label,
-          onTrigger: () => action.onRun(),
+          allowRepeat: Boolean(action.disabled || action.pending),
+          // Keep advertised keys owned while disabled/pending; never fall through to another action.
+          onTrigger: () => { if (!action.disabled && !action.pending) action.onRun(); },
         }];
       });
   }, [actions]);
@@ -154,6 +185,8 @@ export function MultiSelectActionBar({
     enabled: shortcutsEnabled && selectedCount > 0,
     scope: shortcutScope,
     priority: 25,
+    collectionOwnerId,
+    isAvailable: () => isAvailable?.() !== false && isInteractionElementVisible(barRef.current),
   });
 
   if (selectedCount === 0) return null;
@@ -173,6 +206,14 @@ export function MultiSelectActionBar({
     <div
       ref={barRef}
       data-notis-bulk-actions
+      onFocusCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onMouseDownCapture={() => { if (collectionOwnerId) activateShortcutCollection(collectionOwnerId); }}
+      onKeyDown={(event) => {
+        if (event.key !== 'Escape' || !shortcutsEnabled || !onClearSelection || isAvailable?.() === false) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClearSelection();
+      }}
       role="toolbar"
       aria-label={`Bulk actions for ${selectedCount} selected ${countWord}`}
       className={className}
@@ -186,10 +227,11 @@ export function MultiSelectActionBar({
           [data-notis-bulk-divider] { display: none; }
           [data-notis-bulk-action-list] { width: 100%; }
           [data-notis-bulk-actions] button { min-height: 48px; font-size: 16px !important; }
+        }
+        @media (hover: none) and (pointer: coarse) {
           [data-notis-bulk-actions] kbd { display: none !important; }
           [data-notis-bulk-action-icon][data-has-shortcut] { display: inline-flex !important; }
         }
-        @media (hover: none) { [data-notis-bulk-actions] kbd { display: none !important; } }
       `}</style>
       <span data-notis-bulk-count style={countStyle}>{countLabel}</span>
       {actions.length > 0 ? <span data-notis-bulk-divider aria-hidden style={dividerStyle} /> : null}

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

@@ -23,7 +23,9 @@ const baseStyle: CSSProperties = {
   width: '16px',
   height: '16px',
   borderRadius: '4px',
-  border: '1px solid hsl(var(--border))',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'hsl(var(--border))',
   background: 'transparent',
   color: 'hsl(var(--primary-foreground))',
   cursor: 'pointer',

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

@@ -198,8 +198,6 @@ export interface NotisAppToolBinding {
 export interface NotisAppConfig {
   /** URL-safe app slug. Existing apps may still use a display name here. */
   name: string;
-  /** Stable local-development slug. Defaults to a slug derived from `name`. */
-  devSlug?: string;
   /** Human display title, Raycast-style. Falls back to `name`. */
   title?: string;
   description?: string;