@notis_ai/cli 0.2.0 → 0.2.2

package/template/components/ui/badge.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+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',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary/10 text-primary',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/template/components/ui/button.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/template/components/ui/card.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+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}
+    />
+  ),
+);
+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} />
+  ),
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+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} />
+  ),
+);
+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} />
+  ),
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/template/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/template/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/notis.config.ts

@@ -0,0 +1,37 @@
+import { defineNotisApp } from '@notis/sdk/config';
+
+export default defineNotisApp({
+  name: 'my-notis-app',
+  title: 'My Notis App',
+  description: 'A focused Notis app with one route and one database-backed workflow.',
+  icon: 'phosphor:squares-four',
+  author: { name: 'Notis User' },
+  categories: ['Productivity'],
+  tagline: 'A clean starting point for a focused workflow.',
+  versionNotes: 'Initial release.',
+
+  databases: ['items'],
+
+  routes: [
+    { path: '/', slug: 'home', name: 'Home', icon: 'phosphor:house', default: true },
+    // Example collection tree route:
+    // {
+    //   path: '/notes',
+    //   slug: 'notes',
+    //   name: 'Notes',
+    //   collection: {
+    //     database: 'notes',
+    //     titleProperty: 'Name',
+    //     parentProperty: 'Parent',
+    //     sidebar: {
+    //       mode: 'tree',
+    //       allowCreate: true,
+    //     },
+    //   },
+    // },
+  ],
+
+  tools: [
+    'notis-default-query',
+  ],
+});

package/template/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "my-notis-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "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",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "postcss": "^8.0.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/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/template/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/template/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/template/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} />;
+}