@notis_ai/cli 0.2.0-beta.139.1 → 0.2.0-beta.145.1

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

@@ -1,36 +0,0 @@
-{
-  "name": "@notis-apps/notis-random",
-  "version": "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",
-    "@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",
-    "tailwind-merge": "^2.6.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "autoprefixer": "^10.4.0",
-    "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

@@ -1,36 +0,0 @@
-{
-  "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

@@ -1,93 +0,0 @@
-'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

@@ -1,60 +0,0 @@
-'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

@@ -1,278 +0,0 @@
-'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

@@ -1,91 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-'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} />;
-}