@graph8/sdk 0.361.0 → 0.362.0

package/templates/next-app/components/shell/quick-jump.tsx.tmpl

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { ArrowRight, Search } from "lucide-react";
+import { Dialog, DialogContent, DialogDescription, DialogTitle, Kbd, cn } from "@graph8/sdk/ui";
+import { groupNav, matchesNav, type NavEntry } from "./nav-model";
+
+/**
+ * Quick jump (Cmd/Ctrl+K): type to filter the screens, arrows to move, Enter to go. No extra
+ * dependency: a Dialog, an input and a list. Add your own entries (records, actions) to `extra`.
+ */
+export function QuickJump({ items, open, onOpenChange, extra = [] }: { items: readonly NavEntry[]; open: boolean; onOpenChange: (open: boolean) => void; extra?: readonly NavEntry[] }) {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [cursor, setCursor] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  const results = useMemo(() => {
+    const all = [...items, ...extra].filter((i) => matchesNav(i, query));
+    return groupNav(all).flatMap((g) => g.items.map((item) => ({ item, group: g.label })));
+  }, [items, extra, query]);
+
+  useEffect(() => {
+    if (open) {
+      setQuery("");
+      setCursor(0);
+    }
+  }, [open]);
+
+  useEffect(() => {
+    setCursor((c) => Math.min(c, Math.max(results.length - 1, 0)));
+  }, [results.length]);
+
+  useEffect(() => {
+    const el = listRef.current?.querySelector<HTMLElement>(`[data-index="${cursor}"]`);
+    el?.scrollIntoView({ block: "nearest" });
+  }, [cursor]);
+
+  const go = (item: NavEntry | undefined) => {
+    if (!item) return;
+    onOpenChange(false);
+    router.push(item.path);
+  };
+
+  const listboxId = "g8-quick-jump-results";
+  const activeId = results[cursor] ? `g8-quick-jump-${cursor}` : undefined;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="top-[18%] max-w-lg translate-y-0 gap-0 overflow-hidden rounded-xl border border-border bg-popover p-0 shadow-xl sm:max-w-lg"
+        onOpenAutoFocus={(e) => {
+          e.preventDefault();
+          inputRef.current?.focus();
+        }}
+      >
+        <DialogTitle className="sr-only">Jump to a screen</DialogTitle>
+        <DialogDescription className="sr-only">Type to filter, use the arrow keys, press Enter to open.</DialogDescription>
+        <div className="flex items-center gap-2 border-b border-border px-3">
+          <Search className="size-4 shrink-0 text-text-color-muted" strokeWidth={1.5} aria-hidden />
+          <input
+            ref={inputRef}
+            role="combobox"
+            aria-expanded="true"
+            aria-controls={listboxId}
+            aria-activedescendant={activeId}
+            aria-label="Jump to a screen"
+            autoComplete="off"
+            spellCheck={false}
+            value={query}
+            placeholder="Jump to a screen"
+            onChange={(e) => {
+              setQuery(e.target.value);
+              setCursor(0);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setCursor((c) => (results.length ? (c + 1) % results.length : 0));
+              } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setCursor((c) => (results.length ? (c - 1 + results.length) % results.length : 0));
+              } else if (e.key === "Enter") {
+                e.preventDefault();
+                go(results[cursor]?.item);
+              }
+            }}
+            className="h-12 w-full min-w-0 bg-transparent text-sm text-foreground outline-none placeholder:text-text-color-muted"
+          />
+          <Kbd>esc</Kbd>
+        </div>
+        <ul ref={listRef} id={listboxId} role="listbox" aria-label="Screens" className="max-h-80 overflow-y-auto p-1.5">
+          {results.length === 0 ? (
+            <li className="px-3 py-8 text-center text-sm text-text-color-muted">No screen matches "{query}".</li>
+          ) : (
+            results.map(({ item, group }, index) => {
+              const Icon = item.icon;
+              const active = index === cursor;
+              return (
+                <li
+                  key={`${index}:${item.path}`}
+                  id={`g8-quick-jump-${index}`}
+                  data-index={index}
+                  role="option"
+                  aria-selected={active}
+                  onMouseEnter={() => setCursor(index)}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => go(item)}
+                  className={cn("flex h-9 cursor-pointer items-center gap-2.5 rounded-md px-2.5 text-sm", active ? "bg-surface-selected text-foreground" : "text-foreground")}
+                >
+                  <span className="flex size-5 shrink-0 items-center justify-center text-text-color-muted">
+                    {Icon ? <Icon className="size-4" strokeWidth={1.5} aria-hidden /> : <span className="text-[10px] font-medium uppercase">{item.label.charAt(0)}</span>}
+                  </span>
+                  <span className="min-w-0 flex-1 truncate">
+                    {item.label}
+                    {item.description ? <span className="ml-2 text-xs text-text-color-muted">{item.description}</span> : null}
+                  </span>
+                  {group ? <span className="shrink-0 text-xs text-text-color-muted">{group}</span> : null}
+                  {active ? <ArrowRight className="size-3.5 shrink-0 text-text-color-muted" strokeWidth={1.5} aria-hidden /> : null}
+                </li>
+              );
+            })
+          )}
+        </ul>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/next-app/components/shell/theme-toggle.tsx.tmpl

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+import { cn } from "@graph8/sdk/ui";
+
+const KEY = "g8.theme";
+
+/** Light or dark, remembered in localStorage and applied as the `dark` class on <html> (see app/layout.tsx). */
+export function ThemeToggle({ className }: { className?: string }) {
+  const [dark, setDark] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    setDark(document.documentElement.classList.contains("dark"));
+  }, []);
+
+  const toggle = () => {
+    const next = !document.documentElement.classList.contains("dark");
+    document.documentElement.classList.toggle("dark", next);
+    try {
+      localStorage.setItem(KEY, next ? "dark" : "light");
+    } catch {
+      // Private mode: the choice lasts for this page only.
+    }
+    setDark(next);
+  };
+
+  const Icon = dark ? Sun : Moon;
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-label={dark ? "Switch to light mode" : "Switch to dark mode"}
+      aria-pressed={dark ?? false}
+      className={cn("inline-flex size-8 items-center justify-center rounded-md text-text-color-muted transition-colors hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className)}
+    >
+      <Icon className="size-4" strokeWidth={1.5} aria-hidden />
+    </button>
+  );
+}

package/templates/next-app/lib/nav.ts.tmpl

@@ -1,2 +1,2 @@
 // Generated by `graph8-sdk create {{stackId}}`. One entry per screen; edit freely.
-export const nav: { label: string; path: string }[] = {{navJson}};
+{{navImports}}export const nav: {{navType}} = {{navJson}};