@notis_ai/cli 0.2.6 → 0.2.8

package/dist/scaffolds/notis-random/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@notis-apps/notis-random",
   "version": "0.1.0",
-  "notisAppVersion": "0.1.0",
+  "notisAppVersion": "0.2.1",
   "private": true,
   "type": "module",
   "scripts": {
     "build": "vite build",
     "dev": "vite",
+    "test": "tsx --test lib/rng.test.ts lib/roll-record.test.ts",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@notis/sdk": "file:../../packages/sdk",
+    "@notis/sdk": "file:./packages/sdk",
     "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -26,6 +29,7 @@
     "postcss": "^8.4.0",
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.21.0",
     "typescript": "^5.5.0",
     "vite": "^6.0.0"
   }

package/dist/scaffolds/notis-random/packages/sdk/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@notis/sdk",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./config": "./src/config.ts",
+    "./vite": "./src/vite.ts",
+    "./ui": "./src/ui.ts",
+    "./styles.css": "./src/styles.css"
+  },
+  "files": [
+    "src",
+    "template"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vite": ">=5.0.0",
+    "@vitejs/plugin-react": ">=4.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/dist/scaffolds/notis-random/packages/sdk/src/components/DocumentEditor.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import type { CSSProperties, ReactElement } from 'react';
+import { useNotisRuntime } from '../provider';
+import { useDocument } from '../hooks/useDocument';
+import { Markdown } from './Markdown';
+import type { NotisDocumentEditorProps } from '../runtime';
+
+const fallbackNoticeStyle: CSSProperties = {
+  marginTop: '0.75rem',
+  fontSize: '12px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackFrameStyle: CSSProperties = {
+  borderRadius: '0.5rem',
+  border: '1px dashed hsl(var(--border))',
+  padding: '1rem',
+  fontSize: '13px',
+  color: 'hsl(var(--muted-foreground))',
+};
+
+const fallbackTitleStyle: CSSProperties = {
+  margin: '0 0 0.75rem',
+  fontSize: '1.5rem',
+  fontWeight: 700,
+  letterSpacing: '-0.01em',
+  color: 'hsl(var(--foreground))',
+};
+
+/**
+ * Read-only stand-in used when no host editor is available (standalone dev
+ * harness, snapshots). Markdown content renders via `Markdown`; other content
+ * types get a typed placeholder.
+ */
+function DocumentEditorFallback({ documentId, variant = 'full', className }: NotisDocumentEditorProps) {
+  const runtime = useNotisRuntime();
+  const { document, loading, error } = useDocument(documentId);
+  // Listing screenshots should show the app as it looks in the portal, so the
+  // harness-only editing notice stays out of scenario captures.
+  const isScreenshot = Boolean(runtime?.context?.screenshotScenario);
+
+  if (loading) {
+    return <div className={className} style={fallbackFrameStyle}>Loading document…</div>;
+  }
+  if (error || !document) {
+    return (
+      <div className={className} style={fallbackFrameStyle}>
+        {error?.message ?? 'Document not found.'}
+      </div>
+    );
+  }
+
+  const isMarkdown = document.contentType !== 'file';
+  return (
+    <div className={className}>
+      {variant === 'full' ? <h1 style={fallbackTitleStyle}>{document.title}</h1> : null}
+      {isMarkdown ? (
+        <>
+          <Markdown value={document.contentMarkdown ?? ''} />
+          {isScreenshot ? null : (
+            <p style={fallbackNoticeStyle}>Read-only preview — editing is available inside the Notis portal.</p>
+          )}
+        </>
+      ) : (
+        <div style={fallbackFrameStyle}>
+          {document.fileType ? `${document.fileType.toUpperCase()} document` : 'File document'} — open it in
+          the Notis portal to view.
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Embeds the document editor for a document anywhere in an app view. The host
+ * (portal) provides the implementation through `runtime.ui.DocumentEditor` and
+ * dispatches on the document's content type (markdown -> rich text editor,
+ * files -> matching viewer). Outside the portal this falls back to a read-only
+ * preview.
+ *
+ * ```tsx
+ * <DocumentEditor documentId={entry.id} variant="body" className="min-h-[320px]" />
+ * ```
+ */
+export function DocumentEditor(props: NotisDocumentEditorProps): ReactElement {
+  const runtime = useNotisRuntime();
+  const HostEditor = runtime?.ui?.DocumentEditor;
+  if (HostEditor) {
+    return <HostEditor {...props} />;
+  }
+  return <DocumentEditorFallback {...props} />;
+}

package/dist/scaffolds/notis-random/packages/sdk/src/components/Markdown.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import type { AnchorHTMLAttributes, ReactElement } from 'react';
+import ReactMarkdown, { type Components } from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+export interface MarkdownProps {
+  /** Markdown source to render. */
+  value: string;
+  /** Typography scale. 'sm' suits dense surfaces (cards, list rows). */
+  size?: 'sm' | 'base';
+  className?: string;
+  /** Per-element overrides, passed through to react-markdown. */
+  components?: Components;
+}
+
+function MarkdownLink({
+  href,
+  children,
+  node: _node,
+  ...rest
+}: AnchorHTMLAttributes<HTMLAnchorElement> & { node?: unknown }) {
+  const isExternal = typeof href === 'string' && /^https?:\/\//i.test(href);
+  return (
+    <a
+      href={href}
+      {...(isExternal ? { target: '_blank', rel: 'noreferrer noopener' } : {})}
+      {...rest}
+    >
+      {children}
+    </a>
+  );
+}
+
+const defaultComponents: Components = {
+  a: MarkdownLink,
+};
+
+/**
+ * Renders a markdown value with Notis typography. Markdown is a value type:
+ * use this anywhere markdown appears — document content, database fields,
+ * generated text. Styling comes from `.notis-markdown` rules in the SDK
+ * stylesheet and follows the portal theme variables.
+ */
+export function Markdown({ value, size = 'base', className, components }: MarkdownProps): ReactElement {
+  const classes = ['notis-markdown', size === 'sm' ? 'notis-markdown--sm' : null, className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={classes}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={components ? { ...defaultComponents, ...components } : defaultComponents}
+      >
+        {value}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/dist/scaffolds/notis-random/packages/sdk/src/components/MultiSelectActionBar.tsx

@@ -0,0 +1,278 @@
+'use client';
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+export interface MultiSelectAction {
+  id: string;
+  label: string;
+  icon: ReactNode;
+  /** Single-key (e.g. "E", "#") or "Mod+K" shortcut. Bound while the bar is mounted with count > 0. */
+  shortcut?: string;
+  onRun: () => void | Promise<void>;
+  /** Hint for future destructive styling. Currently unused visually. */
+  destructive?: boolean;
+}
+
+export interface MultiSelectActionBarProps {
+  selectedCount: number;
+  actions: MultiSelectAction[];
+  /** Override the "{count} selected" label units. Default: "selected" with no item word. */
+  itemLabel?: { singular: string; plural: string };
+  /** Optional extra class on the outer container (composed alongside the inline styles). */
+  className?: string;
+  /** Optional override for the bar's positioning style. Defaults to bottom-center floating. */
+  style?: CSSProperties;
+}
+
+interface ParsedShortcut {
+  key: string;
+  needsMod: boolean;
+  needsShift: boolean;
+}
+
+function parseShortcut(raw: string): ParsedShortcut | null {
+  const parts = raw.split('+').map((p) => p.trim()).filter(Boolean);
+  if (parts.length === 0) return null;
+  let needsMod = false;
+  let needsShift = false;
+  let key = '';
+  for (const part of parts) {
+    const lower = part.toLowerCase();
+    if (lower === 'mod' || lower === 'cmd' || lower === 'ctrl' || lower === 'meta') {
+      needsMod = true;
+    } else if (lower === 'shift') {
+      needsShift = true;
+    } else {
+      key = lower;
+    }
+  }
+  if (!key) return null;
+  return { key, needsMod, needsShift };
+}
+
+function shortcutMatches(shortcut: ParsedShortcut, event: KeyboardEvent): boolean {
+  const eventKey = event.key.toLowerCase();
+  // Special-case "#" so Shift+3 matches without the consumer specifying Shift.
+  if (shortcut.key === '#') {
+    if (eventKey === '#') return true;
+    if (event.shiftKey && eventKey === '3') return true;
+    return false;
+  }
+  if (eventKey !== shortcut.key) return false;
+  if (shortcut.needsMod !== Boolean(event.metaKey || event.ctrlKey)) return false;
+  if (shortcut.needsShift !== event.shiftKey) return false;
+  if (event.altKey) return false;
+  return true;
+}
+
+function isEditableEvent(event: Event): boolean {
+  // Notis apps mount inside a Shadow DOM, so a document-level listener sees
+  // `event.target` retargeted to the shadow host. `composedPath()[0]` pierces
+  // the shadow boundary to the real focused element, so action-bar shortcuts
+  // don't fire while the user is typing in an app input.
+  const target = event.composedPath?.()[0] ?? event.target;
+  if (!(target instanceof HTMLElement)) return false;
+  if (target.isContentEditable) return true;
+  const tag = target.tagName;
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
+
+function shortcutDisplay(raw: string): string {
+  const parts = raw.split('+').map((p) => p.trim()).filter(Boolean);
+  return parts
+    .map((part) => {
+      const lower = part.toLowerCase();
+      if (lower === 'mod' || lower === 'cmd' || lower === 'meta') return '⌘';
+      if (lower === 'ctrl') return '⌃';
+      if (lower === 'shift') return '⇧';
+      if (lower === 'alt' || lower === 'option') return '⌥';
+      return part.length === 1 ? part.toUpperCase() : part;
+    })
+    .join('');
+}
+
+const containerBaseStyle: CSSProperties = {
+  position: 'fixed',
+  bottom: '1rem',
+  left: '50%',
+  transform: 'translateX(-50%)',
+  zIndex: 60,
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.25rem',
+  padding: '0.375rem 0.5rem',
+  borderRadius: '0.5rem',
+  background: 'color-mix(in srgb, hsl(var(--foreground)) 95%, transparent)',
+  color: 'hsl(var(--background))',
+  boxShadow: '0 10px 25px -10px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08)',
+  backdropFilter: 'blur(6px)',
+  WebkitBackdropFilter: 'blur(6px)',
+  pointerEvents: 'auto',
+  fontSize: '13px',
+  lineHeight: 1.2,
+};
+
+const countStyle: CSSProperties = {
+  padding: '0 0.5rem',
+  fontSize: '12px',
+  fontWeight: 500,
+  fontVariantNumeric: 'tabular-nums',
+  color: 'color-mix(in srgb, hsl(var(--background)) 70%, transparent)',
+};
+
+const dividerStyle: CSSProperties = {
+  width: '1px',
+  height: '1rem',
+  margin: '0 0.125rem',
+  background: 'color-mix(in srgb, hsl(var(--background)) 20%, transparent)',
+};
+
+const baseButtonStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  padding: '0.25rem 0.5rem',
+  border: 0,
+  background: 'transparent',
+  color: 'color-mix(in srgb, hsl(var(--background)) 90%, transparent)',
+  borderRadius: '0.375rem',
+  cursor: 'pointer',
+  fontSize: '13px',
+  fontFamily: 'inherit',
+  transition: 'background-color 120ms ease, color 120ms ease',
+};
+
+const keycapStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  minWidth: '20px',
+  height: '20px',
+  padding: '0 4px',
+  borderRadius: '4px',
+  border: '1px solid color-mix(in srgb, hsl(var(--background)) 20%, transparent)',
+  background: 'color-mix(in srgb, hsl(var(--background)) 15%, transparent)',
+  color: 'inherit',
+  fontSize: '11px',
+  fontWeight: 500,
+  lineHeight: 1,
+  fontFamily: 'inherit',
+};
+
+const iconSlotStyle: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  opacity: 0.8,
+};
+
+export function MultiSelectActionBar({
+  selectedCount,
+  actions,
+  itemLabel,
+  className,
+  style,
+}: MultiSelectActionBarProps): ReactElement | null {
+  const actionsRef = useRef(actions);
+  actionsRef.current = actions;
+
+  const parsedShortcuts = useMemo(() => {
+    return actions
+      .map((action) => {
+        if (!action.shortcut) return null;
+        const parsed = parseShortcut(action.shortcut);
+        return parsed ? { action, parsed } : null;
+      })
+      .filter((entry): entry is { action: MultiSelectAction; parsed: ParsedShortcut } => entry !== null);
+  }, [actions]);
+
+  useEffect(() => {
+    if (selectedCount === 0 || parsedShortcuts.length === 0) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isEditableEvent(event)) return;
+      for (const { action, parsed } of parsedShortcuts) {
+        if (shortcutMatches(parsed, event)) {
+          event.preventDefault();
+          event.stopPropagation();
+          if (typeof event.stopImmediatePropagation === 'function') {
+            event.stopImmediatePropagation();
+          }
+          void action.onRun();
+          return;
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown, true);
+    };
+  }, [parsedShortcuts, selectedCount]);
+
+  if (selectedCount === 0) return null;
+
+  const countWord = itemLabel
+    ? selectedCount === 1
+      ? itemLabel.singular
+      : itemLabel.plural
+    : 'selected';
+  const countLabel = itemLabel
+    ? `${selectedCount} ${countWord} selected`
+    : `${selectedCount} selected`;
+
+  const composedStyle: CSSProperties = { ...containerBaseStyle, ...(style || {}) };
+
+  return (
+    <div
+      role="toolbar"
+      aria-label={`Bulk actions for ${selectedCount} selected ${countWord}`}
+      className={className}
+      style={composedStyle}
+    >
+      <span style={countStyle}>{countLabel}</span>
+      {actions.length > 0 ? <span aria-hidden style={dividerStyle} /> : null}
+      {actions.map((action) => (
+        <ActionButton key={action.id} action={action} />
+      ))}
+    </div>
+  );
+}
+
+function ActionButton({ action }: { action: MultiSelectAction }) {
+  const [hover, setHover] = useState(false);
+  const display = action.shortcut ? shortcutDisplay(action.shortcut) : null;
+  const buttonStyle: CSSProperties = {
+    ...baseButtonStyle,
+    background: hover
+      ? 'color-mix(in srgb, hsl(var(--background)) 12%, transparent)'
+      : 'transparent',
+    color: hover
+      ? 'hsl(var(--background))'
+      : baseButtonStyle.color,
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={() => void action.onRun()}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onFocus={() => setHover(true)}
+      onBlur={() => setHover(false)}
+      style={buttonStyle}
+    >
+      <span aria-hidden style={iconSlotStyle}>{action.icon}</span>
+      {display ? <kbd aria-hidden style={keycapStyle}>{display}</kbd> : null}
+      <span>{action.label}</span>
+    </button>
+  );
+}

package/dist/scaffolds/notis-random/packages/sdk/src/components/MultiSelectCheckbox.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { type CSSProperties, type MouseEvent as ReactMouseEvent, type ReactElement } from 'react';
+
+export interface MultiSelectCheckboxProps {
+  isSelected: boolean;
+  onClick: (event: ReactMouseEvent) => void;
+  /** When true, the checkbox is always visible. Default false (hover/focus reveal via the parent's :hover state). */
+  alwaysVisible?: boolean;
+  /** Optional aria-label override. Defaults to "Select item" / "Deselect item". */
+  ariaLabel?: string;
+  className?: string;
+  /** Optional inline-style override merged with the defaults. */
+  style?: CSSProperties;
+}
+
+const baseStyle: CSSProperties = {
+  flexShrink: 0,
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '16px',
+  height: '16px',
+  borderRadius: '4px',
+  border: '1px solid hsl(var(--border))',
+  background: 'transparent',
+  color: 'hsl(var(--primary-foreground))',
+  cursor: 'pointer',
+  padding: 0,
+  transition: 'background-color 120ms ease, border-color 120ms ease, opacity 150ms ease',
+};
+
+const selectedStyle: CSSProperties = {
+  background: 'hsl(var(--primary))',
+  borderColor: 'hsl(var(--primary))',
+};
+
+const checkPath = 'M3.5 7.5l2.5 2.5 6.5-6.5';
+
+export function MultiSelectCheckbox({
+  isSelected,
+  onClick,
+  alwaysVisible = false,
+  ariaLabel,
+  className,
+  style,
+}: MultiSelectCheckboxProps): ReactElement {
+  const merged: CSSProperties = {
+    ...baseStyle,
+    ...(isSelected ? selectedStyle : null),
+    ...(alwaysVisible || isSelected ? { opacity: 1 } : null),
+    ...(style || null),
+  };
+
+  // When alwaysVisible is false and the row isn't selected, defer the
+  // hover-reveal to the parent — consumers wrap the checkbox in a `.group`
+  // hover scope and pass `data-notis-hover-reveal` styles via className.
+  // Out of the box, we render the checkbox at full opacity if selected,
+  // otherwise inherit the parent's reveal state.
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isSelected}
+      aria-label={ariaLabel ?? (isSelected ? 'Deselect item' : 'Select item')}
+      onClick={onClick}
+      onMouseDown={(e) => e.stopPropagation()}
+      data-notis-multiselect-checkbox=""
+      data-selected={isSelected ? 'true' : 'false'}
+      className={className}
+      style={merged}
+    >
+      {isSelected ? (
+        <svg
+          width="10"
+          height="10"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={3}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+          focusable="false"
+        >
+          <path d={checkPath} />
+        </svg>
+      ) : null}
+    </button>
+  );
+}

package/dist/scaffolds/notis-random/packages/sdk/src/components/MultiSelectDragOverlay.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { type CSSProperties, type ReactElement } from 'react';
+import type { DragRect } from '../hooks/useMultiSelect';
+
+export interface MultiSelectDragOverlayProps {
+  rect: DragRect | null;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const overlayBaseStyle: CSSProperties = {
+  position: 'fixed',
+  borderRadius: '3px',
+  border: '1px solid rgba(35, 131, 226, 0.3)',
+  background: 'rgba(35, 131, 226, 0.08)',
+  pointerEvents: 'none',
+  zIndex: 50,
+};
+
+export function MultiSelectDragOverlay({
+  rect,
+  className,
+  style,
+}: MultiSelectDragOverlayProps): ReactElement | null {
+  if (!rect) return null;
+  if (rect.width === 0 && rect.height === 0) return null;
+
+  const merged: CSSProperties = {
+    ...overlayBaseStyle,
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height,
+    ...(style || null),
+  };
+
+  return <div aria-hidden className={className} style={merged} />;
+}