@notis_ai/cli 0.2.5 → 0.2.7

package/dist/scaffolds/notis-affiliate-prospects/notis.config.ts

@@ -0,0 +1,65 @@
+import { defineNotisApp } from '@notis/sdk/config';
+
+export default defineNotisApp({
+  name: 'affiliate-prospects',
+  title: 'Affiliate Prospects',
+  description:
+    'A campaign control center for sourcing, qualifying, contacting, and activating high-fit Notis affiliates.',
+  icon: 'phosphor:users-three',
+  accent: 'violet',
+  author: { name: 'Florian (Flo) Pariset' },
+  categories: ['Sales & Marketing', 'Operations'],
+  tagline: 'Turn affiliate recruiting into a measurable, repeatable pipeline.',
+  screenshots: [
+    {
+      path: 'metadata/screenshot-1.png',
+      alt: 'Affiliate campaign dashboard with pipeline, priority queue, and segment performance.',
+      route: 'dashboard',
+      scenario: 'affiliate-dashboard',
+      focus: '[data-store-screenshot="dashboard"]',
+      theme: 'light',
+    },
+    {
+      path: 'metadata/screenshot-2.png',
+      alt: 'Affiliate prospect list with status, segment, fit score, source, and next action.',
+      route: 'prospects',
+      scenario: 'affiliate-prospects',
+      focus: '[data-store-screenshot="prospects"]',
+      theme: 'light',
+    },
+    {
+      path: 'metadata/screenshot-3.png',
+      alt: 'Affiliate segment scorecards showing campaign progress and sourcing playbooks.',
+      route: 'segments',
+      scenario: 'affiliate-segments',
+      focus: '[data-store-screenshot="segments"]',
+      theme: 'dark',
+    },
+  ],
+
+  databases: ['affiliate_prospects_1', 'affiliate_outreach_events_1'],
+
+  routes: [
+    {
+      path: '/',
+      slug: 'dashboard',
+      name: 'Dashboard',
+      icon: 'phosphor:squares-four',
+      default: true,
+    },
+    {
+      path: '/prospects',
+      slug: 'prospects',
+      name: 'Prospects',
+      icon: 'phosphor:users',
+    },
+    {
+      path: '/segments',
+      slug: 'segments',
+      name: 'Segments',
+      icon: 'phosphor:circles-three-plus',
+    },
+  ],
+
+  tools: ['LOCAL_NOTIS_DATABASE_QUERY'],
+});

package/dist/scaffolds/notis-affiliate-prospects/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "affiliate-prospects",
+  "version": "0.1.0",
+  "notisAppVersion": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@notis/sdk": "file:./packages/sdk",
+    "@phosphor-icons/react": "^2.1.10",
+    "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",
+    "typescript": "^5.5.0",
+    "vite": "^6.0.0"
+  }
+}

package/dist/scaffolds/notis-affiliate-prospects/packages/sdk/package.json

@@ -0,0 +1,32 @@
+{
+  "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"
+  },
+  "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-affiliate-prospects/packages/sdk/src/components/MultiSelectActionBar.tsx

@@ -0,0 +1,273 @@
+'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 isEditableTarget(target: EventTarget | null): boolean {
+  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 (isEditableTarget(event.target)) 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-affiliate-prospects/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-affiliate-prospects/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} />;
+}

package/dist/scaffolds/notis-affiliate-prospects/packages/sdk/src/config.ts

@@ -0,0 +1,90 @@
+/**
+ * Configuration utilities for notis.config.ts.
+ *
+ * Usage:
+ * ```ts
+ * // notis.config.ts
+ * import { defineNotisApp } from '@notis/sdk/config';
+ *
+ * export default defineNotisApp({
+ *   name: 'My App',
+ *   description: 'Does things',
+ *   icon: 'phosphor:squares-four',
+ *   databases: ['tasks'],
+ *   routes: [
+ *     {
+ *       path: '/',
+ *       slug: 'notes',
+ *       name: 'Notes',
+ *       default: true,
+ *       collection: {
+ *         database: 'notes',
+ *         titleProperty: 'Name',
+ *         parentProperty: 'Parent',
+ *         sidebar: {
+ *           mode: 'tree',
+ *           allowCreate: true,
+ *         },
+ *       },
+ *     },
+ *   ],
+ *   tools: [...],
+ * });
+ * ```
+ */
+
+export interface NotisRouteConfig {
+  path: string;
+  slug: string;
+  name: string;
+  icon?: string;
+  parentSlug?: string | null;
+  default?: boolean;
+  exportName?: string;
+  collection?: {
+    database: string;
+    titleProperty: string;
+    parentProperty?: string | null;
+    sidebar?: {
+      mode: 'flat-list' | 'tree';
+      allowCreate: boolean;
+    };
+  };
+}
+
+export interface NotisAppConfig {
+  name: string;
+  title?: string;
+  description?: string;
+  icon?: string;
+  accent?: 'blue' | 'violet' | 'emerald' | 'amber' | 'rose' | 'sky' | 'fuchsia' | 'teal';
+  author?: {
+    name: string;
+    handle?: string;
+    url?: string;
+  };
+  categories?: Array<
+    'Productivity' | 'Sales & Marketing' | 'Operations' | 'Product & Engineering' | 'Personal'
+  >;
+  tagline?: string;
+  screenshots?: Array<{
+    path: string;
+    alt: string;
+    route?: string;
+    scenario?: string;
+    focus?: string;
+    theme?: 'light' | 'dark';
+  }>;
+  databases?: string[];
+  routes?: NotisRouteConfig[];
+  tools?: string[];
+}
+
+/**
+ * Identity function that provides type checking and autocomplete for the
+ * Notis app configuration. The returned object is read at build time by
+ * `notis apps build` to generate the manifest.
+ */
+export function defineNotisApp(config: NotisAppConfig): NotisAppConfig {
+  return config;
+}

package/dist/scaffolds/notis-affiliate-prospects/packages/sdk/src/hooks/useBackend.ts

@@ -0,0 +1,41 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useNotisRuntime } from '../provider';
+
+interface UseBackendResult {
+  /**
+   * Make an authenticated request to the Notis backend.
+   * The path should be an absolute backend path (e.g. `/portal_composio/actions`).
+   */
+  request: (path: string, options?: {
+    method?: string;
+    headers?: Record<string, string>;
+    body?: unknown;
+  }) => Promise<unknown>;
+}
+
+/**
+ * Raw backend request proxy. Use this for custom server endpoints or
+ * integration APIs not covered by the typed hooks.
+ *
+ * ```tsx
+ * const { request } = useBackend();
+ * const data = await request('/portal_composio/actions', { method: 'POST', body: { ... } });
+ * ```
+ */
+export function useBackend(): UseBackendResult {
+  const runtime = useNotisRuntime();
+
+  const request = useCallback(
+    async (path: string, options?: { method?: string; headers?: Record<string, string>; body?: unknown }) => {
+      if (!runtime) {
+        throw new Error('Notis runtime not available. Ensure NotisProvider is mounted.');
+      }
+      return runtime.request(path, options);
+    },
+    [runtime],
+  );
+
+  return { request };
+}