@notis_ai/cli 0.2.6 → 0.2.8

package/dist/scaffolds/notis-notes/packages/sdk/src/styles.css

@@ -0,0 +1,186 @@
+/**
+ * Notis theme CSS variables.
+ *
+ * Import this in your app layout:
+ *
+ *   import '@notis/sdk/styles.css';
+ *
+ * The portal injects the live Notis theme variables at render time.
+ */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  [data-notis-app-root] {
+    color: hsl(var(--foreground));
+    display: block;
+    min-height: 100%;
+  }
+}
+
+@layer components {
+  .notis-app-shell {
+    @apply mx-auto w-full max-w-[var(--portal-page-max-width)] px-4 py-6 md:px-4 md:py-8;
+  }
+
+  .notis-app-surface {
+    @apply rounded-2xl border border-border bg-card text-card-foreground shadow-sm;
+  }
+
+  .notis-app-section {
+    @apply p-5 md:p-6;
+  }
+}
+
+/*
+ * Markdown value-type rendering (see the `Markdown` component). Plain CSS on
+ * theme variables so it works inside the portal shadow root and the dev
+ * harness without depending on the app's Tailwind content scan.
+ */
+.notis-markdown {
+  font-size: 14px;
+  line-height: 1.65;
+  color: hsl(var(--foreground));
+  overflow-wrap: break-word;
+}
+
+.notis-markdown--sm {
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.notis-markdown > :first-child {
+  margin-top: 0;
+}
+
+.notis-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.notis-markdown p {
+  margin: 0.625em 0;
+}
+
+.notis-markdown h1,
+.notis-markdown h2,
+.notis-markdown h3,
+.notis-markdown h4,
+.notis-markdown h5,
+.notis-markdown h6 {
+  margin: 1.25em 0 0.5em;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  color: hsl(var(--foreground));
+}
+
+.notis-markdown h1 { font-size: 1.5em; }
+.notis-markdown h2 { font-size: 1.25em; }
+.notis-markdown h3 { font-size: 1.1em; }
+.notis-markdown h4,
+.notis-markdown h5,
+.notis-markdown h6 { font-size: 1em; }
+
+.notis-markdown ul,
+.notis-markdown ol {
+  margin: 0.625em 0;
+  padding-left: 1.5em;
+}
+
+.notis-markdown ul { list-style-type: disc; }
+.notis-markdown ol { list-style-type: decimal; }
+
+.notis-markdown li {
+  margin: 0.25em 0;
+}
+
+.notis-markdown li > ul,
+.notis-markdown li > ol {
+  margin: 0.25em 0;
+}
+
+.notis-markdown ul.contains-task-list {
+  list-style: none;
+  padding-left: 0.375em;
+}
+
+.notis-markdown li.task-list-item input[type='checkbox'] {
+  margin-right: 0.5em;
+  accent-color: hsl(var(--primary));
+}
+
+.notis-markdown blockquote {
+  margin: 0.75em 0;
+  padding: 0.125em 0 0.125em 0.875em;
+  border-left: 3px solid hsl(var(--border));
+  color: hsl(var(--muted-foreground));
+}
+
+.notis-markdown a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+  text-decoration-color: hsl(var(--primary) / 0.35);
+  text-underline-offset: 2px;
+}
+
+.notis-markdown a:hover {
+  text-decoration-color: hsl(var(--primary));
+}
+
+.notis-markdown code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.875em;
+  padding: 0.125em 0.375em;
+  border-radius: 0.25rem;
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+}
+
+.notis-markdown pre {
+  margin: 0.75em 0;
+  padding: 0.75em 1em;
+  border-radius: 0.5rem;
+  background: hsl(var(--muted));
+  overflow-x: auto;
+}
+
+.notis-markdown pre code {
+  padding: 0;
+  background: transparent;
+  font-size: 0.875em;
+}
+
+.notis-markdown hr {
+  margin: 1.25em 0;
+  border: 0;
+  border-top: 1px solid hsl(var(--border));
+}
+
+.notis-markdown img {
+  max-width: 100%;
+  border-radius: 0.5rem;
+}
+
+.notis-markdown table {
+  margin: 0.75em 0;
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.95em;
+}
+
+.notis-markdown th,
+.notis-markdown td {
+  padding: 0.375em 0.75em;
+  border: 1px solid hsl(var(--border));
+  text-align: left;
+}
+
+.notis-markdown th {
+  background: hsl(var(--muted));
+  font-weight: 600;
+}

package/dist/scaffolds/notis-notes/packages/sdk/src/ui.ts

@@ -0,0 +1,15 @@
+/**
+ * @notis/sdk/ui - Re-exported shadcn components for Notis apps.
+ *
+ * Apps include shadcn via their own `components.json` and `@/components/ui/*`
+ * imports. This entrypoint is provided as a convenience for apps that want to
+ * import directly from the SDK without setting up shadcn locally.
+ *
+ * For now, this is a placeholder. The scaffold template sets up shadcn
+ * directly in the app project, so components come from `@/components/ui/*`.
+ * This file can be expanded later to re-export a curated set of components
+ * pre-themed for Notis.
+ */
+
+// Placeholder -- apps use shadcn directly via their project's components/ui/
+export {};

package/dist/scaffolds/notis-notes/packages/sdk/src/vite.ts

@@ -0,0 +1,56 @@
+/**
+ * Vite config builder for Notis apps.
+ *
+ * Usage:
+ * ```ts
+ * // vite.config.ts
+ * import { notisViteConfig } from '@notis/sdk/vite';
+ * import appConfig from './notis.config';
+ * export default notisViteConfig(appConfig);
+ * ```
+ *
+ * Produces a library-mode ES module bundle with React externalized.
+ * Output: .notis/output/bundle/app.js + app.css
+ */
+
+import type { NotisAppConfig } from './config';
+
+export function notisViteConfig(appConfig: NotisAppConfig) {
+  return {
+    plugins: [
+      // @vitejs/plugin-react is added by the consumer's vite.config.ts
+      // or auto-detected. We provide the config shape only.
+    ],
+    build: {
+      lib: {
+        entry: '.notis/_entry.tsx',
+        formats: ['es'] as const,
+        fileName: () => 'app.js',
+      },
+      rollupOptions: {
+        external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
+        output: {
+          globals: {
+            react: 'window.React',
+            'react-dom': 'window.ReactDOM',
+            'react-dom/client': 'window.ReactDOMClient',
+            'react/jsx-runtime': 'window.React',
+          },
+          assetFileNames: 'app[extname]',
+          inlineDynamicImports: true,
+        },
+      },
+      outDir: '.notis/output/bundle',
+      emptyOutDir: true,
+      cssCodeSplit: false,
+    },
+    resolve: {
+      alias: {
+        '@': process.cwd(),
+      },
+    },
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+  };
+}

package/dist/scaffolds/notis-notes/packages/sdk/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/dist/scaffolds/notis-random/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Random Number Generator Changelog
 
-## [Initial Release] - {PR_MERGE_DATE}
+## [Reliable Range Editing] - 2026-07-29
 
-- First Store release.
+- Keeps empty and negative range drafts intact until they form a valid number.
+
+## [Generator modes and history] - 2026-07-29
+
+- Added integer, decimal, and d4–d20 dice modes with live bounds validation.
+- Added a complete roll history with reliable saving and in-app navigation.
+- Refreshed the generator with native Notis controls and light and dark Store media.
+
+## [Initial Release] - 2026-04-23
+
+- Generated random numbers with configurable bounds and saved recent rolls.

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

@@ -2,6 +2,7 @@
 
 import { useMemo } from 'react';
 import { DiceFiveIcon as Dices, ClockCounterClockwiseIcon as History, HashIcon as Hash, PercentIcon as Percent } from '@phosphor-icons/react';
+import { Card } from '@/components/ui/card';
 import { formatNumber, relativeTime } from '@/lib/utils';
 import type { Mode } from '@/lib/rng';
 import { normalizeRollRecord, sortRollRecordsDesc } from '@/lib/roll-record';
@@ -14,7 +15,7 @@ const MODE_ICONS: Record<Mode, typeof Hash> = {
 };
 
 export default function HistoryPage() {
-  const { documents, loading } = useRollDocuments();
+  const { documents, loading } = useRollDocuments(100, true);
 
   const rows = useMemo(
     () => documents
@@ -24,7 +25,7 @@ export default function HistoryPage() {
   );
 
   return (
-    <main className="notis-random-shell space-y-6">
+    <main data-store-screenshot="history" className="notis-random-shell space-y-6">
       <header className="flex items-center gap-2 text-sm text-muted-foreground">
         <History className="h-4 w-4" strokeWidth={1.5} />
         <span>Roll history</span>
@@ -40,7 +41,7 @@ export default function HistoryPage() {
           Nothing rolled yet. Head back to the generator and press Generate.
         </div>
       ) : (
-        <div className="divide-y divide-border rounded-xl border border-border bg-card">
+        <Card className="divide-y divide-border">
           {rows.map((row) => {
             const Icon = MODE_ICONS[row.mode] ?? Hash;
             return (
@@ -59,7 +60,7 @@ export default function HistoryPage() {
               </div>
             );
           })}
-        </div>
+        </Card>
       )}
     </main>
   );

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

@@ -1,29 +1,35 @@
 '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 { useCallback, useMemo, useState } from 'react';
+import { useNotis, useNotisNavigation } 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, WarningCircleIcon as WarningCircle } from '@phosphor-icons/react';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
 import { cn, formatNumber, relativeTime } from '@/lib/utils';
-import { type Mode, type Roll, roll } from '@/lib/rng';
+import { DICE_SIDES, DEFAULT_DICE_SIDES, type DiceSides, type Mode, type Roll, checkBounds, parseBoundDraft, 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'   },
+  { id: 'dice',    label: 'Dice',    icon: Dices,       hint: 'Standard polyhedral dice' },
 ];
 
 export default function HomePage() {
   const { app, ready } = useNotis();
-  const { documents, loading, refetch } = useRollDocuments();
+  const nav = useNotisNavigation();
+  const { documents, loading, refetch } = useRollDocuments(5);
   const { persist: persistRoll } = usePersistRoll();
 
   const [mode, setMode] = useState<Mode>('integer');
-  const [min, setMin] = useState(1);
-  const [max, setMax] = useState(100);
+  const [minDraft, setMinDraft] = useState('1');
+  const [maxDraft, setMaxDraft] = useState('100');
+  const [sides, setSides] = useState<DiceSides>(DEFAULT_DICE_SIDES);
   const [current, setCurrent] = useState<Roll | null>(null);
   const [rolling, setRolling] = useState(false);
+  const [saveError, setSaveError] = useState<string | null>(null);
 
   const recent = useMemo(
     () => documents
@@ -33,32 +39,43 @@ export default function HomePage() {
     [documents],
   );
 
-  const persist = useCallback(async (next: Roll) => {
-    await persistRoll(next);
-    refetch();
-  }, [persistRoll, refetch]);
+  // Dice mode draws from 1..sides; the manual range inputs drive the other modes.
+  const bounds = useMemo(
+    () => (
+      mode === 'dice'
+        ? { min: 1, max: sides }
+        : {
+            min: parseBoundDraft(minDraft),
+            max: parseBoundDraft(maxDraft),
+          }
+    ),
+    [mode, sides, minDraft, maxDraft],
+  );
+  const check = useMemo(
+    () => checkBounds(bounds.min, bounds.max, mode),
+    [bounds.min, bounds.max, mode],
+  );
 
   const generate = useCallback(async () => {
-    if (rolling) return;
+    if (rolling || !check.ok) return;
     setRolling(true);
-    const next = roll(min, max, mode);
-    setCurrent(next);
+    setSaveError(null);
     try {
-      await persist(next);
+      // roll() throws on unusable bounds, and persist() can fail on the network.
+      // Both have to leave `rolling` false or the button would stay stuck.
+      const next = roll(bounds.min, bounds.max, mode);
+      setCurrent(next);
+      await persistRoll(next);
+      refetch();
+    } catch (err) {
+      setSaveError(err instanceof Error ? err.message : 'Could not save this roll.');
     } finally {
       setRolling(false);
     }
-  }, [rolling, min, max, mode, persist]);
-
-  useEffect(() => {
-    if (mode === 'dice') {
-      setMin(1);
-      setMax(6);
-    }
-  }, [mode]);
+  }, [rolling, check.ok, bounds.min, bounds.max, mode, persistRoll, refetch]);
 
   return (
-    <main className="notis-random-shell space-y-8">
+    <main data-store-screenshot="generator" className="notis-random-shell space-y-6">
       <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">
@@ -70,22 +87,26 @@ export default function HomePage() {
             Pick a mode, set the range, and press generate. Every roll is saved to the History view.
           </p>
         </div>
-        <button
+        <Button
           type="button"
+          variant="outline"
+          size="sm"
           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"
+          className="gap-2 border-border text-muted-foreground hover:text-foreground"
         >
           <RefreshCw className={cn('h-3.5 w-3.5', loading && 'animate-spin')} />
           Refresh
-        </button>
+        </Button>
       </header>
 
-      <section className="rounded-2xl border border-border bg-card p-8">
-        <div className="flex flex-col items-center gap-6">
+      {/* The dial and the controls sit side by side so the whole generator —
+          result, mode, range, and recent rolls — stays above the fold. */}
+      <section className="grid gap-6 lg:grid-cols-[1.05fr_1fr]">
+        <Card className="flex flex-col items-center justify-center gap-5 rounded-2xl p-6">
           <div
             className={cn(
               'flex items-center justify-center rounded-full border border-border bg-background',
-              'h-48 w-48 transition-transform',
+              'h-40 w-40 transition-transform',
               rolling && 'animate-pulse',
             )}
           >
@@ -97,38 +118,49 @@ export default function HomePage() {
               <InfinityIcon className="h-10 w-10 text-muted-foreground" strokeWidth={1.2} />
             )}
           </div>
-          <button
+          <Button
             type="button"
+            size="lg"
+            data-action="generate"
             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',
-            )}
+            disabled={rolling || !check.ok}
+            className="gap-2 rounded-full px-6"
           >
             <Dices className="h-4 w-4" />
             {rolling ? 'Rolling…' : current ? 'Roll again' : 'Generate'}
-          </button>
-          {current && (
+          </Button>
+          {check.issue ? (
+            <p className="flex items-center gap-1.5 text-xs text-destructive">
+              <WarningCircle className="h-3.5 w-3.5 shrink-0" />
+              {check.issue.message}
+            </p>
+          ) : current ? (
             <p className="text-xs text-muted-foreground">
               <span className="font-mono">[{formatNumber(current.min)}, {formatNumber(current.max)}]</span>
               {' · '}{current.mode}
             </p>
+          ) : null}
+          {saveError && (
+            <p className="flex items-center gap-1.5 text-xs text-destructive">
+              <WarningCircle className="h-3.5 w-3.5 shrink-0" />
+              {saveError}
+            </p>
           )}
-        </div>
-      </section>
+        </Card>
 
-      <section className="grid gap-6 md:grid-cols-2">
-        <div className="rounded-xl border border-border bg-card p-5">
+        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
+        <Card className="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
+              <Button
                 key={id}
                 type="button"
+                variant="outline"
+                data-mode={id}
                 onClick={() => setMode(id)}
                 className={cn(
-                  'flex items-center gap-3 rounded-md border px-3 py-2.5 text-left transition',
+                  'h-auto w-full justify-start gap-3 px-3 py-2.5 text-left whitespace-normal',
                   mode === id
                     ? 'border-foreground bg-accent text-accent-foreground'
                     : 'border-border hover:bg-accent/50',
@@ -139,35 +171,72 @@ export default function HomePage() {
                   <div className="text-sm font-medium">{label}</div>
                   <div className="text-xs text-muted-foreground">{hint}</div>
                 </div>
-              </button>
+              </Button>
             ))}
           </div>
-        </div>
+        </Card>
 
-        <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>
+        <Card className="space-y-4 p-5">
+          <h2 className="text-sm font-medium text-foreground">
+            {mode === 'dice' ? 'Die' : 'Range'}
+          </h2>
+          {mode === 'dice' ? (
+            <>
+              <div className="flex flex-wrap gap-2">
+                {DICE_SIDES.map((n) => (
+                  <Button
+                    key={n}
+                    type="button"
+                    variant="outline"
+                    data-die={n}
+                    onClick={() => setSides(n)}
+                    className={cn(
+                      'h-10 min-w-[3.25rem] px-3 font-mono',
+                      sides === n
+                        ? 'border-foreground bg-accent text-accent-foreground'
+                        : 'border-border hover:bg-accent/50',
+                    )}
+                  >
+                    d{n}
+                  </Button>
+                ))}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Rolls a whole number from 1 to {sides}, each equally likely.
+              </p>
+            </>
+          ) : (
+            <>
+              <div className="grid grid-cols-2 gap-3">
+                <RangeInput label="Minimum" name="min" value={minDraft} onChange={setMinDraft} />
+                <RangeInput label="Maximum" name="max" value={maxDraft} onChange={setMaxDraft} />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {mode === 'decimal'
+                  ? 'Decimal draws include the minimum but never reach the maximum.'
+                  : 'Integer draws include both ends of the range.'}
+              </p>
+            </>
           )}
+        </Card>
         </div>
       </section>
 
-      <section className="rounded-xl border border-border bg-card p-5">
+      <Card className="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"
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => nav.toRoute('/history')}
+            className="h-auto gap-1 px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
           >
             View all <ArrowRight className="h-3 w-3" />
-          </a>
+          </Button>
         </header>
         {loading && recent.length === 0 ? (
           <p className="text-sm text-muted-foreground">Loading…</p>
@@ -188,34 +257,32 @@ export default function HomePage() {
             ))}
           </ul>
         )}
-      </section>
+      </Card>
     </main>
   );
 }
 
 function RangeInput({
   label,
+  name,
   value,
   onChange,
-  disabled,
 }: {
   label: string;
-  value: number;
-  onChange: (v: number) => void;
-  disabled?: boolean;
+  name: string;
+  value: string;
+  onChange: (v: string) => void;
 }) {
   return (
-    <label className={cn('block space-y-1.5', disabled && 'opacity-50')}>
+    <label className="block space-y-1.5">
       <span className="text-xs font-medium text-muted-foreground">{label}</span>
-      <input
-        type="number"
+      <Input
+        type="text"
+        inputMode="decimal"
+        data-bound={name}
         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"
+        onChange={(e) => onChange(e.target.value)}
+        className="border-border font-mono"
       />
     </label>
   );