@graph8/sdk 0.362.0 → 0.373.0

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

@@ -5,6 +5,8 @@ import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState, type ReactNode } from "react";
 import { ChevronsLeft, ChevronsRight, Menu, Search } from "lucide-react";
 import { Kbd, Sheet, SheetContent, SheetDescription, SheetTitle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, cn } from "@graph8/sdk/ui";
+import { BrandProvider } from "@/components/g8/_foundation/brand-provider";
+import { brand as appBrand } from "@/g8.config";
 import { nav } from "@/lib/nav";
 import { ConnectionStatus } from "./shell/connection-status";
 import { currentNavEntry, groupNav, isActivePath, isEditableTarget, type NavEntry } from "./shell/nav-model";
@@ -14,7 +16,8 @@ import { ThemeToggle } from "./shell/theme-toggle";
 /**
  * The app frame: a grouped sidebar (icons, active state, collapsible, remembered), a workspace header
  * (title, current screen, quick jump, connection status, theme), a mobile drawer, and the content.
- * Edit freely: add your logo, a user menu (`userMenu`), more header tools (`headerSlot`).
+ * The name and logo come from g8.config.ts (`npx @graph8/sdk brand --name ... --logo ...`), which also gives every
+ * block its link-out label and URL through <BrandProvider>. Edit freely: a user menu, more header tools (`headerSlot`).
  *
  * Keyboard: Cmd/Ctrl+K jumps to a screen, Cmd/Ctrl+B collapses the sidebar.
  */
@@ -146,104 +149,117 @@ export function AppShell({ children, headerSlot, status, sidebarFooter, contentP
 
   const brand = (
     <div className={cn("flex h-14 shrink-0 items-center gap-2.5 border-b border-sidebar-border", collapsed ? "justify-center px-0" : "px-4")}>
-      <span aria-hidden className="flex size-7 shrink-0 items-center justify-center rounded-md bg-foreground text-[11px] font-medium uppercase text-background">
-        {String({{titleJson}}).charAt(0)}
-      </span>
-      <div className={cn("min-w-0 truncate text-sm font-medium text-foreground", collapsed && "sr-only")}>{{{titleJson}}}</div>
+      {appBrand.logo ? (
+        // eslint-disable-next-line @next/next/no-img-element -- a small static logo; next/image needs width/height config
+        <img src={appBrand.logo} alt="" aria-hidden className="size-7 shrink-0 rounded-md object-contain" />
+      ) : (
+        <span aria-hidden className="flex size-7 shrink-0 items-center justify-center rounded-md bg-foreground text-[11px] font-medium uppercase text-background">
+          {appBrand.name.charAt(0)}
+        </span>
+      )}
+      <div className={cn("min-w-0 truncate text-sm font-medium text-foreground", collapsed && "sr-only")}>{appBrand.name}</div>
     </div>
   );
 
   return (
-    <TooltipProvider delayDuration={100}>
-      <div className="flex h-dvh w-full overflow-hidden bg-background text-foreground">
-        <aside
-          aria-label="Sidebar"
-          data-collapsed={collapsed ? "true" : "false"}
-          className={cn("hidden h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-150 md:flex", collapsed ? "w-14" : "w-60")}
+    <BrandProvider brand={appBrand}>
+      <TooltipProvider delayDuration={100}>
+        <a
+          href="#main"
+          className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-50 focus:rounded-md focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-foreground focus:shadow-md focus:outline-none focus:ring-2 focus:ring-ring"
         >
-          {brand}
-          <SidebarNav pathname={pathname} collapsed={collapsed} />
-          <div className={cn("flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2", collapsed ? "flex-col" : "")}>
-            {sidebarFooter ? <div className={cn("min-w-0 flex-1", collapsed && "hidden")}>{sidebarFooter}</div> : null}
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  onClick={toggleCollapsed}
-                  aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
-                  aria-expanded={!collapsed}
-                  className={cn("inline-flex size-8 shrink-0 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", !collapsed && !sidebarFooter && "ml-auto")}
-                >
-                  {collapsed ? <ChevronsRight className="size-4" strokeWidth={1.5} aria-hidden /> : <ChevronsLeft className="size-4" strokeWidth={1.5} aria-hidden />}
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="right" className="text-xs">
-                {collapsed ? "Expand" : "Collapse"} <Kbd className="ml-1">⌘B</Kbd>
-              </TooltipContent>
-            </Tooltip>
-          </div>
-        </aside>
-
-        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-          <SheetContent side="left" hideCloseButton className="w-72 gap-0 bg-sidebar p-0 sm:max-w-72">
-            <SheetTitle className="sr-only">Navigation</SheetTitle>
-            <SheetDescription className="sr-only">Screens of this app</SheetDescription>
-            <div className="flex h-full flex-col">
-              {brand}
-              <SidebarNav pathname={pathname} collapsed={false} onNavigate={() => setMobileOpen(false)} />
-              {sidebarFooter ? <div className="border-t border-sidebar-border p-2">{sidebarFooter}</div> : null}
+          Skip to content
+        </a>
+        <div className="flex h-dvh w-full overflow-hidden bg-background text-foreground">
+          <aside
+            aria-label="Sidebar"
+            data-collapsed={collapsed ? "true" : "false"}
+            className={cn("hidden h-full shrink-0 flex-col border-r border-sidebar-border bg-sidebar transition-[width] duration-150 md:flex", collapsed ? "w-14" : "w-60")}
+          >
+            {brand}
+            <SidebarNav pathname={pathname} collapsed={collapsed} />
+            <div className={cn("flex shrink-0 items-center gap-1 border-t border-sidebar-border p-2", collapsed ? "flex-col" : "")}>
+              {sidebarFooter ? <div className={cn("min-w-0 flex-1", collapsed && "hidden")}>{sidebarFooter}</div> : null}
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    onClick={toggleCollapsed}
+                    aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+                    aria-expanded={!collapsed}
+                    className={cn("inline-flex size-8 shrink-0 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", !collapsed && !sidebarFooter && "ml-auto")}
+                  >
+                    {collapsed ? <ChevronsRight className="size-4" strokeWidth={1.5} aria-hidden /> : <ChevronsLeft className="size-4" strokeWidth={1.5} aria-hidden />}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="right" className="text-xs">
+                  {collapsed ? "Expand" : "Collapse"} <Kbd className="ml-1">⌘B</Kbd>
+                </TooltipContent>
+              </Tooltip>
             </div>
-          </SheetContent>
-        </Sheet>
+          </aside>
 
-        <div className="flex min-w-0 flex-1 flex-col">
-          <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background px-3 sm:px-4">
-            <button
-              type="button"
-              onClick={() => setMobileOpen(true)}
-              aria-label="Open navigation"
-              className="inline-flex size-8 items-center justify-center rounded-md text-text-color-muted hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
-            >
-              <Menu className="size-4" strokeWidth={1.5} aria-hidden />
-            </button>
-            <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
-              <span className="hidden truncate font-medium text-foreground sm:inline">{{{titleJson}}}</span>
-              {current ? (
-                <>
-                  <span aria-hidden className="hidden text-text-color-muted/60 sm:inline">/</span>
-                  {current.group ? (
-                    <>
-                      <span className="hidden truncate text-text-color-muted lg:inline">{current.group}</span>
-                      <span aria-hidden className="hidden text-text-color-muted/60 lg:inline">/</span>
-                    </>
-                  ) : null}
-                  <span aria-current="page" className="truncate font-medium text-foreground sm:font-normal sm:text-text-color-muted">{current.label}</span>
-                </>
-              ) : null}
-            </nav>
-            <div className="ml-auto flex shrink-0 items-center gap-1.5">
+          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+            <SheetContent side="left" hideCloseButton className="w-72 gap-0 bg-sidebar p-0 sm:max-w-72">
+              <SheetTitle className="sr-only">Navigation</SheetTitle>
+              <SheetDescription className="sr-only">Screens of this app</SheetDescription>
+              <div className="flex h-full flex-col">
+                {brand}
+                <SidebarNav pathname={pathname} collapsed={false} onNavigate={() => setMobileOpen(false)} />
+                {sidebarFooter ? <div className="border-t border-sidebar-border p-2">{sidebarFooter}</div> : null}
+              </div>
+            </SheetContent>
+          </Sheet>
+
+          <div className="flex min-w-0 flex-1 flex-col">
+            <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border bg-background px-3 sm:px-4">
               <button
                 type="button"
-                onClick={() => setJumpOpen(true)}
-                aria-label="Jump to a screen"
-                aria-keyshortcuts="Meta+K Control+K"
-                className="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-background px-2.5 text-sm 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"
+                onClick={() => setMobileOpen(true)}
+                aria-label="Open navigation"
+                className="inline-flex size-8 items-center justify-center rounded-md text-text-color-muted hover:bg-surface-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring md:hidden"
               >
-                <Search className="size-4" strokeWidth={1.5} aria-hidden />
-                <span className="hidden md:inline">Jump to</span>
-                <Kbd className="hidden md:inline-flex">⌘K</Kbd>
+                <Menu className="size-4" strokeWidth={1.5} aria-hidden />
               </button>
-              {status === undefined ? <ConnectionStatus /> : status}
-              {headerSlot}
-              <ThemeToggle />
-            </div>
-          </header>
-          <main id="main" className={cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentPadding && "p-6")}>
-            {children}
-          </main>
+              <nav aria-label="Breadcrumb" className="flex min-w-0 items-center gap-1.5 text-sm">
+                <span className="hidden truncate font-medium text-foreground sm:inline">{appBrand.name}</span>
+                {current ? (
+                  <>
+                    <span aria-hidden className="hidden text-text-color-muted/60 sm:inline">/</span>
+                    {current.group ? (
+                      <>
+                        <span className="hidden truncate text-text-color-muted lg:inline">{current.group}</span>
+                        <span aria-hidden className="hidden text-text-color-muted/60 lg:inline">/</span>
+                      </>
+                    ) : null}
+                    <span aria-current="page" className="truncate font-medium text-foreground sm:font-normal sm:text-text-color-muted">{current.label}</span>
+                  </>
+                ) : null}
+              </nav>
+              <div className="ml-auto flex shrink-0 items-center gap-1.5">
+                <button
+                  type="button"
+                  onClick={() => setJumpOpen(true)}
+                  aria-label="Jump to a screen"
+                  aria-keyshortcuts="Meta+K Control+K"
+                  className="inline-flex h-8 items-center gap-2 rounded-md border border-border bg-background px-2.5 text-sm 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"
+                >
+                  <Search className="size-4" strokeWidth={1.5} aria-hidden />
+                  <span className="hidden md:inline">Jump to</span>
+                  <Kbd className="hidden md:inline-flex">⌘K</Kbd>
+                </button>
+                {status === undefined ? <ConnectionStatus /> : status}
+                {headerSlot}
+                <ThemeToggle />
+              </div>
+            </header>
+            <main id="main" className={cn("min-h-0 min-w-0 flex-1 overflow-y-auto", contentPadding && "p-6")}>
+              {children}
+            </main>
+          </div>
         </div>
-      </div>
-      <QuickJump items={items} open={jumpOpen} onOpenChange={setJumpOpen} />
-    </TooltipProvider>
+        <QuickJump items={items} open={jumpOpen} onOpenChange={setJumpOpen} />
+      </TooltipProvider>
+    </BrandProvider>
   );
 }

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

@@ -125,6 +125,10 @@ export function QuickJump({ items, open, onOpenChange, extra = [] }: { items: re
             })
           )}
         </ul>
+        <div aria-hidden className="flex items-center gap-3 border-t border-border bg-surface-subtle px-3 py-2 text-[11px] text-text-color-muted">
+          <span className="inline-flex items-center gap-1"><Kbd>↑</Kbd><Kbd>↓</Kbd> to move</span>
+          <span className="inline-flex items-center gap-1"><Kbd>↵</Kbd> to open</span>
+        </div>
       </DialogContent>
     </Dialog>
   );

package/templates/next-app/dot-gitignore.tmpl

@@ -5,3 +5,5 @@ next-env.d.ts
 *.tsbuildinfo
 .env*.local
 .DS_Store
+# The graph8 key pasted in the Connect screen (local preview). Never commit it.
+.g8/

package/templates/next-app/package.json.tmpl

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --hostname 127.0.0.1",
     "build": "next build",
     "start": "next start",
     "typecheck": "tsc --noEmit"