@notis_ai/cli 0.2.1 → 0.2.3

package/dist/scaffolds/notis-random/app/page.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNotis } from '@notis/sdk';
+import { DiceFiveIcon as Dices, SparkleIcon as Sparkles, ClockCounterClockwiseIcon as History, ArrowRightIcon as ArrowRight, HashIcon as Hash, PercentIcon as Percent, InfinityIcon, ArrowClockwiseIcon as RefreshCw } from '@phosphor-icons/react';
+import { cn, formatNumber, relativeTime } from '@/lib/utils';
+import { type Mode, type Roll, roll } from '@/lib/rng';
+import { normalizeRollRecord, sortRollRecordsDesc } from '@/lib/roll-record';
+import { usePersistRoll, useRollDocuments } from '@/lib/notis-tools';
+
+const MODES: Array<{ id: Mode; label: string; icon: typeof Hash; hint: string }> = [
+  { id: 'integer', label: 'Integer', icon: Hash,        hint: 'Whole numbers only' },
+  { id: 'decimal', label: 'Decimal', icon: Percent,     hint: 'Continuous range'   },
+  { id: 'dice',    label: 'Dice',    icon: Dices,       hint: 'Classic 1–N roll'   },
+];
+
+export default function HomePage() {
+  const { app, ready } = useNotis();
+  const { documents, loading, refetch } = useRollDocuments();
+  const { persist: persistRoll } = usePersistRoll();
+
+  const [mode, setMode] = useState<Mode>('integer');
+  const [min, setMin] = useState(1);
+  const [max, setMax] = useState(100);
+  const [current, setCurrent] = useState<Roll | null>(null);
+  const [rolling, setRolling] = useState(false);
+
+  const recent = useMemo(
+    () => documents
+      .map(normalizeRollRecord)
+      .sort(sortRollRecordsDesc)
+      .slice(0, 5),
+    [documents],
+  );
+
+  const persist = useCallback(async (next: Roll) => {
+    await persistRoll(next);
+    refetch();
+  }, [persistRoll, refetch]);
+
+  const generate = useCallback(async () => {
+    if (rolling) return;
+    setRolling(true);
+    const next = roll(min, max, mode);
+    setCurrent(next);
+    try {
+      await persist(next);
+    } finally {
+      setRolling(false);
+    }
+  }, [rolling, min, max, mode, persist]);
+
+  useEffect(() => {
+    if (mode === 'dice') {
+      setMin(1);
+      setMax(6);
+    }
+  }, [mode]);
+
+  return (
+    <main className="notis-random-shell space-y-8">
+      <header className="flex items-start justify-between gap-6">
+        <div className="space-y-1.5">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-3.5 w-3.5" />
+            <span>{ready ? app?.name : 'Loading…'}</span>
+          </div>
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">Generator</h1>
+          <p className="text-sm text-muted-foreground max-w-md">
+            Pick a mode, set the range, and press generate. Every roll is saved to the History view.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => refetch()}
+          className="inline-flex h-9 items-center gap-2 rounded-md border border-border px-3 text-sm text-muted-foreground hover:text-foreground hover:bg-accent transition"
+        >
+          <RefreshCw className={cn('h-3.5 w-3.5', loading && 'animate-spin')} />
+          Refresh
+        </button>
+      </header>
+
+      <section className="rounded-2xl border border-border bg-card p-8">
+        <div className="flex flex-col items-center gap-6">
+          <div
+            className={cn(
+              'flex items-center justify-center rounded-full border border-border bg-background',
+              'h-48 w-48 transition-transform',
+              rolling && 'animate-pulse',
+            )}
+          >
+            {current ? (
+              <span className="font-mono text-5xl font-semibold tabular-nums text-foreground">
+                {formatNumber(current.value)}
+              </span>
+            ) : (
+              <InfinityIcon className="h-10 w-10 text-muted-foreground" strokeWidth={1.2} />
+            )}
+          </div>
+          <button
+            type="button"
+            onClick={generate}
+            disabled={rolling}
+            className={cn(
+              'inline-flex h-11 items-center gap-2 rounded-full px-6 text-sm font-medium',
+              'bg-primary text-primary-foreground hover:opacity-90 disabled:opacity-50 transition',
+            )}
+          >
+            <Dices className="h-4 w-4" />
+            {rolling ? 'Rolling…' : current ? 'Roll again' : 'Generate'}
+          </button>
+          {current && (
+            <p className="text-xs text-muted-foreground">
+              <span className="font-mono">[{formatNumber(current.min)}, {formatNumber(current.max)}]</span>
+              {' · '}{current.mode}
+            </p>
+          )}
+        </div>
+      </section>
+
+      <section className="grid gap-6 md:grid-cols-2">
+        <div className="rounded-xl border border-border bg-card p-5">
+          <h2 className="mb-3 text-sm font-medium text-foreground">Mode</h2>
+          <div className="grid gap-2">
+            {MODES.map(({ id, label, icon: Icon, hint }) => (
+              <button
+                key={id}
+                type="button"
+                onClick={() => setMode(id)}
+                className={cn(
+                  'flex items-center gap-3 rounded-md border px-3 py-2.5 text-left transition',
+                  mode === id
+                    ? 'border-foreground bg-accent text-accent-foreground'
+                    : 'border-border hover:bg-accent/50',
+                )}
+              >
+                <Icon className="h-4 w-4 shrink-0" strokeWidth={1.5} />
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium">{label}</div>
+                  <div className="text-xs text-muted-foreground">{hint}</div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-border bg-card p-5 space-y-4">
+          <h2 className="text-sm font-medium text-foreground">Range</h2>
+          <div className="grid grid-cols-2 gap-3">
+            <RangeInput label="Minimum" value={min} onChange={setMin} disabled={mode === 'dice'} />
+            <RangeInput label="Maximum" value={max} onChange={setMax} disabled={mode === 'dice'} />
+          </div>
+          {mode === 'dice' && (
+            <p className="text-xs text-muted-foreground">Dice mode locks to 1–6.</p>
+          )}
+        </div>
+      </section>
+
+      <section className="rounded-xl border border-border bg-card p-5">
+        <header className="mb-4 flex items-center justify-between gap-3">
+          <h2 className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <History className="h-4 w-4 text-muted-foreground" strokeWidth={1.5} />
+            Recent rolls
+          </h2>
+          <a
+            href="/history"
+            className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          >
+            View all <ArrowRight className="h-3 w-3" />
+          </a>
+        </header>
+        {loading && recent.length === 0 ? (
+          <p className="text-sm text-muted-foreground">Loading…</p>
+        ) : recent.length === 0 ? (
+          <div className="rounded-md border border-dashed border-border px-4 py-8 text-center text-sm text-muted-foreground">
+            Nothing rolled yet. Press Generate to see history here.
+          </div>
+        ) : (
+          <ul className="divide-y divide-border">
+            {recent.map((r) => (
+              <li key={r.id} className="flex items-center justify-between py-2.5">
+                <div className="flex items-center gap-3">
+                  <span className="font-mono text-lg tabular-nums text-foreground">{formatNumber(r.value)}</span>
+                  <span className="text-xs text-muted-foreground">{r.mode}</span>
+                </div>
+                <span className="text-xs text-muted-foreground">{relativeTime(r.at)}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </main>
+  );
+}
+
+function RangeInput({
+  label,
+  value,
+  onChange,
+  disabled,
+}: {
+  label: string;
+  value: number;
+  onChange: (v: number) => void;
+  disabled?: boolean;
+}) {
+  return (
+    <label className={cn('block space-y-1.5', disabled && 'opacity-50')}>
+      <span className="text-xs font-medium text-muted-foreground">{label}</span>
+      <input
+        type="number"
+        value={value}
+        disabled={disabled}
+        onChange={(e) => {
+          const parsed = Number(e.target.value);
+          if (Number.isFinite(parsed)) onChange(parsed);
+        }}
+        className="h-10 w-full rounded-md border border-border bg-background px-3 font-mono text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40"
+      />
+    </label>
+  );
+}

package/dist/scaffolds/notis-random/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Random Number Generator (dev preview)</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/dev-main.tsx"></script>
+  </body>
+</html>

package/dist/scaffolds/notis-random/lib/notis-tools.ts

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { useTool } from '@notis/sdk';
+import type { RollDocument } from '@/lib/roll-record';
+import type { Roll } from '@/lib/rng';
+import { formatNumber } from '@/lib/utils';
+
+type QueryRollsArgs = {
+  database_slug: 'rolls';
+  query?: {
+    page_size?: number;
+  };
+  offset?: number;
+};
+
+type QueryRollsResult = {
+  documents?: RollDocument[];
+  message?: string;
+  error?: string;
+};
+
+type UpsertRollArgs = {
+  title: string;
+  Value: number;
+  Mode: Roll['mode'];
+  Min: number;
+  Max: number;
+  'Rolled At': string;
+};
+
+type UpsertRollResult = {
+  status?: string;
+  document?: RollDocument;
+  message?: string;
+  error?: string;
+};
+
+export function useRollDocuments(pageSize?: number) {
+  const queryRolls = useTool<QueryRollsArgs, QueryRollsResult>('LOCAL_NOTIS_DATABASE_QUERY');
+  const [documents, setDocuments] = useState<RollDocument[]>([]);
+  const [error, setError] = useState<Error | null>(null);
+  const [fetchKey, setFetchKey] = useState(0);
+
+  const refetch = useCallback(() => {
+    setFetchKey((key) => key + 1);
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setError(null);
+
+    queryRolls
+      .call({ database_slug: 'rolls', query: { page_size: pageSize } })
+      .then((result) => {
+        if (cancelled) return;
+        const message = result.error ?? result.message;
+        if (message && !result.documents) {
+          throw new Error(message);
+        }
+        setDocuments(result.documents ?? []);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setDocuments([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [fetchKey, pageSize, queryRolls.call]);
+
+  return {
+    documents,
+    loading: queryRolls.loading,
+    error: queryRolls.error ?? error,
+    refetch,
+  };
+}
+
+export function usePersistRoll() {
+  const upsertRoll = useTool<UpsertRollArgs, UpsertRollResult>('LOCAL_NOTIS_DATABASE_UPSERT_ROLLS');
+
+  const persist = useCallback(
+    async (roll: Roll) => {
+      const result = await upsertRoll.call({
+        title: formatNumber(roll.value),
+        Value: roll.value,
+        Mode: roll.mode,
+        Min: roll.min,
+        Max: roll.max,
+        'Rolled At': roll.at,
+      });
+      const message = result.error ?? result.message;
+      if (message && result.status === 'error') {
+        throw new Error(message);
+      }
+      return result.document ?? null;
+    },
+    [upsertRoll.call],
+  );
+
+  return {
+    persist,
+    loading: upsertRoll.loading,
+    error: upsertRoll.error,
+  };
+}

package/dist/scaffolds/notis-random/lib/rng.ts

@@ -0,0 +1,42 @@
+export type Mode = 'integer' | 'decimal' | 'dice';
+
+export interface Roll {
+  value: number;
+  mode: Mode;
+  min: number;
+  max: number;
+  at: string;
+}
+
+function cryptoRandom(): number {
+  const array = new Uint32Array(1);
+  crypto.getRandomValues(array);
+  return (array[0] ?? 0) / 0xffffffff;
+}
+
+export function roll(min: number, max: number, mode: Mode): Roll {
+  const lo = Math.min(min, max);
+  const hi = Math.max(min, max);
+  let value: number;
+  if (mode === 'integer' || mode === 'dice') {
+    value = Math.floor(cryptoRandom() * (hi - lo + 1)) + lo;
+  } else {
+    value = cryptoRandom() * (hi - lo) + lo;
+  }
+  return {
+    value,
+    mode,
+    min: lo,
+    max: hi,
+    at: new Date().toISOString(),
+  };
+}
+
+export const DICE_FACES: Record<number, string> = {
+  1: 'dice-1',
+  2: 'dice-2',
+  3: 'dice-3',
+  4: 'dice-4',
+  5: 'dice-5',
+  6: 'dice-6',
+};

package/dist/scaffolds/notis-random/lib/roll-record.ts

@@ -0,0 +1,102 @@
+import type { Mode } from '@/lib/rng';
+
+export interface RollDocument {
+  id: string;
+  title: string;
+  properties?: Record<string, unknown>;
+  createdAt?: string | null;
+  created_at?: string | null;
+  created_time?: string | null;
+  lastEditedTime?: string | null;
+  last_edited_time?: string | null;
+  updated_at?: string | null;
+}
+
+function readString(value: unknown): string | null {
+  if (typeof value === 'string') {
+    const trimmed = value.trim();
+    return trimmed.length ? trimmed : null;
+  }
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return String(value);
+  }
+  if (value && typeof value === 'object') {
+    const record = value as Record<string, unknown>;
+    if (typeof record.name === 'string') {
+      return record.name;
+    }
+    if (typeof record.start === 'string') {
+      return record.start;
+    }
+  }
+  return null;
+}
+
+function readNumber(value: unknown): number | null {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value;
+  }
+  const stringValue = readString(value);
+  if (!stringValue) {
+    return null;
+  }
+  const parsed = Number(stringValue);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function readMode(value: unknown): Mode {
+  const raw = readString(value)?.toLowerCase();
+  if (raw === 'integer' || raw === 'decimal' || raw === 'dice') {
+    return raw;
+  }
+  return 'integer';
+}
+
+function readTimestamp(doc: RollDocument): string {
+  return (
+    readString(doc.properties?.['Rolled At']) ||
+    doc.createdAt ||
+    doc.created_at ||
+    doc.created_time ||
+    doc.lastEditedTime ||
+    doc.last_edited_time ||
+    doc.updated_at ||
+    ''
+  );
+}
+
+function sortTimestamp(value: string): number {
+  if (!value) return 0;
+  const parsed = Date.parse(value);
+  return Number.isFinite(parsed) ? parsed : 0;
+}
+
+export interface RollRecord {
+  id: string;
+  value: number;
+  mode: Mode;
+  min: number | null;
+  max: number | null;
+  at: string;
+}
+
+export function normalizeRollRecord(doc: RollDocument): RollRecord {
+  const value =
+    readNumber(doc.properties?.['Value']) ??
+    readNumber(doc.properties?.['Name']) ??
+    readNumber(doc.title) ??
+    0;
+
+  return {
+    id: doc.id,
+    value,
+    mode: readMode(doc.properties?.['Mode']),
+    min: readNumber(doc.properties?.['Min']),
+    max: readNumber(doc.properties?.['Max']),
+    at: readTimestamp(doc),
+  };
+}
+
+export function sortRollRecordsDesc(a: RollRecord, b: RollRecord): number {
+  return sortTimestamp(b.at) - sortTimestamp(a.at);
+}

package/dist/scaffolds/notis-random/lib/utils.ts

@@ -0,0 +1,25 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+export function formatNumber(value: number): string {
+  if (Number.isInteger(value)) return value.toString();
+  return value.toFixed(4).replace(/0+$/, '').replace(/\.$/, '');
+}
+
+export function relativeTime(iso: string | null | undefined): string {
+  if (!iso) return '';
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return '';
+  const diffSeconds = Math.round((Date.now() - then) / 1000);
+  if (diffSeconds < 5) return 'just now';
+  if (diffSeconds < 60) return `${diffSeconds}s ago`;
+  const diffMinutes = Math.round(diffSeconds / 60);
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  const diffHours = Math.round(diffMinutes / 60);
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return new Date(iso).toLocaleDateString();
+}

package/dist/scaffolds/notis-random/notis.config.ts

@@ -0,0 +1,43 @@
+import { defineNotisApp } from '@notis/sdk/config';
+
+export default defineNotisApp({
+  name: 'notis-random',
+  title: 'Random Number Generator',
+  description: 'Generate random numbers with configurable bounds, and keep a history of everything you rolled.',
+  icon: 'phosphor:dice-five',
+  author: { name: 'Notis' },
+  categories: ['Personal'],
+  tagline: 'Roll dice, keep history.',
+  versionNotes: 'Initial scaffold release.',
+
+  databases: ['rolls'],
+
+  routes: [
+    {
+      path: '/',
+      slug: 'home',
+      name: 'Generator',
+      icon: 'phosphor:sparkle',
+      default: true,
+    },
+    {
+      path: '/history',
+      slug: 'history',
+      name: 'History',
+      icon: 'phosphor:clock-counter-clockwise',
+      collection: {
+        database: 'rolls',
+        titleProperty: 'Value',
+        sidebar: {
+          mode: 'flat-list',
+          allowCreate: false,
+        },
+      },
+    },
+  ],
+
+  tools: [
+    'LOCAL_NOTIS_DATABASE_QUERY',
+    'LOCAL_NOTIS_DATABASE_UPSERT_ROLLS',
+  ],
+});

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

@@ -0,0 +1,32 @@
+{
+  "name": "@notis-apps/notis-random",
+  "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-random/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/dist/scaffolds/notis-random/src/dev-main.tsx

@@ -0,0 +1,70 @@
+// Dev entrypoint: mounts the app pages with a tiny hash-router and the mock
+// runtime. Not used in production — `vite build` uses .notis/_entry.tsx.
+import { StrictMode, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { NotisProvider } from '@notis/sdk';
+import AppShell from '../app/layout';
+import HomePage from '../app/page';
+import HistoryPage from '../app/history/page';
+import { installMockRuntime, setMockRoute } from './mock-runtime';
+
+const runtime = installMockRuntime(hashRoute());
+
+function hashRoute(): 'home' | 'history' {
+  return window.location.hash === '#/history' ? 'history' : 'home';
+}
+
+function DevApp() {
+  const [route, setRoute] = useState<'home' | 'history'>(hashRoute());
+
+  useEffect(() => {
+    const onChange = () => {
+      const next = hashRoute();
+      setRoute(next);
+      setMockRoute(next);
+    };
+    window.addEventListener('hashchange', onChange);
+    return () => window.removeEventListener('hashchange', onChange);
+  }, []);
+
+  const Page = route === 'history' ? HistoryPage : HomePage;
+
+  return (
+    <AppShell>
+      <div className="mx-auto max-w-4xl px-4 pt-4">
+        <nav className="flex items-center gap-2 rounded-full border border-border bg-card p-1 text-sm w-fit">
+          <a
+            href="#/"
+            className={
+              (route === 'home' ? 'bg-accent text-accent-foreground ' : 'text-muted-foreground hover:text-foreground ') +
+              'rounded-full px-3 py-1 transition'
+            }
+          >
+            Generator
+          </a>
+          <a
+            href="#/history"
+            className={
+              (route === 'history' ? 'bg-accent text-accent-foreground ' : 'text-muted-foreground hover:text-foreground ') +
+              'rounded-full px-3 py-1 transition'
+            }
+          >
+            History
+          </a>
+          <span className="pl-2 pr-3 text-[10px] uppercase tracking-wide text-muted-foreground">dev preview</span>
+        </nav>
+      </div>
+      <Page />
+    </AppShell>
+  );
+}
+
+const root = document.getElementById('root');
+if (!root) throw new Error('#root element missing from index.html');
+createRoot(root).render(
+  <StrictMode>
+    <NotisProvider runtime={runtime}>
+      <DevApp />
+    </NotisProvider>
+  </StrictMode>,
+);