@elytracms/studio 0.0.54 → 0.0.55

package/dist/router/root.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRootRoute, HeadContent, Navigate, Outlet, Scripts, useLocation, } from '@tanstack/react-router';
+import { AuthProvider, useAuth } from '@elytracms/studio/components/auth-context';
+import { DeploymentSetupGate } from '@elytracms/studio/components/deployment-setup-gate';
+import { StudioProvider } from '@elytracms/studio/components/studio-context';
+import { ThemeProvider } from '@elytracms/studio/components/theme-context';
+import { Text } from '@elytracms/studio/ui';
+import { SIGN_IN_PATH, resolveRouteGuard } from '@elytracms/studio/lib/auth';
+import { activeSlugForLocation, setActiveProjectSlug } from '@elytracms/studio/lib/workspace';
+import { THEME_INIT_SCRIPT } from '@elytracms/studio/lib/theme';
+export function createStudioRootRoute(options) {
+    const { appCssUrl, title = 'Elytra', htmlLang = 'en', meta = [], links = [], providers } = options;
+    function RootComponent() {
+        const location = useLocation();
+        // EC-179: the active project selects its Convex backend. Resolve it from the
+        // URL (or the sign-in redirect target) and bind it *before* the auth and
+        // persistence adapters are selected, so the initial sign-in authenticates
+        // against the project the user is heading for. Keying the auth/studio subtree
+        // by the active project remounts it on a project switch, so the adapters
+        // re-select against the new backend and the session is restored per-backend.
+        const activeSlug = activeSlugForLocation(location.pathname, location.search.redirect);
+        setActiveProjectSlug(activeSlug);
+        return (_jsx(RootDocument, { htmlLang: htmlLang, children: _jsx(ThemeProvider, { children: _jsx(DeploymentSetupGate, { children: _jsx(AuthProvider, { children: _jsx(AuthGate, { children: _jsx(StudioProvider, { children: providers ? providers(_jsx(Outlet, {})) : _jsx(Outlet, {}) }) }) }, activeSlug ?? '__launcher__') }) }) }));
+    }
+    return createRootRoute({
+        head: () => ({
+            meta: [
+                { charSet: 'utf-8' },
+                { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+                { title },
+                ...meta,
+            ],
+            links: [{ rel: 'stylesheet', href: appCssUrl }, ...links],
+        }),
+        component: RootComponent,
+    });
+}
+/**
+ * Route guard (EC-150): one chokepoint in the root layout. Unauthenticated
+ * visitors on protected paths are redirected to the sign-in screen (with the
+ * intended target preserved); signed-in users never see the sign-in screen.
+ * The decision logic is the pure, unit-tested `resolveRouteGuard`.
+ */
+function AuthGate({ children }) {
+    const { status } = useAuth();
+    const { pathname } = useLocation();
+    const decision = resolveRouteGuard(pathname, status);
+    if (decision.kind === 'pending')
+        return _jsx(SessionLoading, {});
+    if (decision.kind === 'redirect-to-sign-in') {
+        return _jsx(Navigate, { to: SIGN_IN_PATH, search: { redirect: decision.redirect }, replace: true });
+    }
+    if (decision.kind === 'redirect-home')
+        return _jsx(Navigate, { to: "/", replace: true });
+    return children;
+}
+/** Deterministic session-restore state (also the SSR output for protected paths). */
+function SessionLoading() {
+    return (_jsx("div", { className: "grid min-h-dvh place-items-center bg-background", children: _jsx(Text, { size: "sm", tone: "muted", children: "Checking session\u2026" }) }));
+}
+function RootDocument({ children, htmlLang }) {
+    // Dark-first SSR baseline; THEME_INIT_SCRIPT flips the class pre-hydration
+    // from the stored preference, and ThemeProvider keeps it reactive thereafter.
+    // suppressHydrationWarning: the script intentionally mutates the class before
+    // React hydrates, so a className mismatch on <html> is expected, not a bug.
+    // The app stylesheet is emitted via head().links and rendered by <HeadContent />.
+    return (_jsxs("html", { lang: htmlLang, className: "dark", suppressHydrationWarning: true, children: [_jsxs("head", { children: [_jsx(HeadContent, {}), _jsx("script", { dangerouslySetInnerHTML: { __html: THEME_INIT_SCRIPT } })] }), _jsxs("body", { className: "min-h-screen bg-background font-sans text-foreground antialiased", children: [children, _jsx(Scripts, {})] })] }));
+}
+//# sourceMappingURL=root.js.map

package/dist/router/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","sourceRoot":"","sources":["../../src/router/root.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from 'react'\nimport {\n  createRootRoute,\n  HeadContent,\n  Navigate,\n  Outlet,\n  Scripts,\n  useLocation,\n} from '@tanstack/react-router'\nimport { AuthProvider, useAuth } from '@elytracms/studio/components/auth-context'\nimport { DeploymentSetupGate } from '@elytracms/studio/components/deployment-setup-gate'\nimport { StudioProvider } from '@elytracms/studio/components/studio-context'\nimport { ThemeProvider } from '@elytracms/studio/components/theme-context'\nimport { Text } from '@elytracms/studio/ui'\nimport { SIGN_IN_PATH, resolveRouteGuard } from '@elytracms/studio/lib/auth'\nimport { activeSlugForLocation, setActiveProjectSlug } from '@elytracms/studio/lib/workspace'\nimport { THEME_INIT_SCRIPT } from '@elytracms/studio/lib/theme'\n\n/**\n * Studio root-route boot factory (EC-375; consolidated from the copy-pasted\n * consumer `__root.tsx` by EC-369 finding #7). It assembles the ONE canonical\n * provider/gate stack — ThemeProvider → DeploymentSetupGate → AuthProvider(keyed)\n * → AuthGate → StudioProvider → Outlet — plus the `RootDocument` shell\n * (html/head with the pre-hydration theme script + the chrome stylesheet).\n *\n * Its whole purpose is to make the NEXT required-gate addition automatic on\n * package upgrade: when EC-258 added `DeploymentSetupGate`, every hand-copied\n * `__root.tsx` had to be manually re-synced, and Konditorei's silently missed\n * it for five releases (EC-367). Owning the composition here means a consumer's\n * `__root.tsx` shrinks to a thin shell and picks up new gates for free.\n *\n * The consumer re-exports the returned route as `Route` (the generated route\n * tree imports `Route` from `./routes/__root`):\n *\n * ```tsx\n * import { createStudioRootRoute } from '@elytracms/studio/router/root'\n * import appCss from '../styles/app.css?url'\n * export const Route = createStudioRootRoute({ appCssUrl: appCss })\n * ```\n */\nexport interface StudioRootRouteOptions {\n  /**\n   * URL of the studio chrome stylesheet, from the consumer's Vite `?url` import\n   * (`import appCss from '../styles/app.css?url'`). The one option every consumer\n   * must pass — the sheet is project-owned (it carries the delivery theme).\n   */\n  appCssUrl: string\n  /** Document `<title>`. Default: `'Elytra'`. */\n  title?: string\n  /** `<html lang>`. Default: `'en'`. */\n  htmlLang?: string\n  /**\n   * Extra `<head>` meta entries appended after the defaults (charset, viewport,\n   * title). Same shape TanStack Router's `head().meta` takes.\n   */\n  meta?: Array<Record<string, string>>\n  /** Extra `<head>` link entries appended after the app stylesheet. */\n  links?: Array<Record<string, string>>\n  /**\n   * Escape hatch: wrap additional project-specific providers around the routed\n   * subtree. Rendered INSIDE `StudioProvider` and around `<Outlet />`, so nested\n   * providers see the full studio/auth/theme context and remount with the active\n   * project. Return the passed `children` wrapped in your providers.\n   */\n  providers?: (children: ReactNode) => ReactNode\n}\n\nexport function createStudioRootRoute(options: StudioRootRouteOptions) {\n  const { appCssUrl, title = 'Elytra', htmlLang = 'en', meta = [], links = [], providers } = options\n\n  function RootComponent() {\n    const location = useLocation()\n    // EC-179: the active project selects its Convex backend. Resolve it from the\n    // URL (or the sign-in redirect target) and bind it *before* the auth and\n    // persistence adapters are selected, so the initial sign-in authenticates\n    // against the project the user is heading for. Keying the auth/studio subtree\n    // by the active project remounts it on a project switch, so the adapters\n    // re-select against the new backend and the session is restored per-backend.\n    const activeSlug = activeSlugForLocation(\n      location.pathname,\n      (location.search as { redirect?: string }).redirect,\n    )\n    setActiveProjectSlug(activeSlug)\n\n    return (\n      <RootDocument htmlLang={htmlLang}>\n        <ThemeProvider>\n          {/* EC-258: one deployment-setup gate runs before auth — a misconfigured or\n              unreachable backend, an invalid workspace config, or any failing readiness\n              precondition (missing auth signing key, required collections, …) is a\n              single visible boot screen with copy-pasteable fixes, never a silent\n              in-memory fallback or a misleading downstream error. All checks passing\n              renders children as before. */}\n          <DeploymentSetupGate>\n            <AuthProvider key={activeSlug ?? '__launcher__'}>\n              <AuthGate>\n                <StudioProvider>{providers ? providers(<Outlet />) : <Outlet />}</StudioProvider>\n              </AuthGate>\n            </AuthProvider>\n          </DeploymentSetupGate>\n        </ThemeProvider>\n      </RootDocument>\n    )\n  }\n\n  return createRootRoute({\n    head: () => ({\n      meta: [\n        { charSet: 'utf-8' },\n        { name: 'viewport', content: 'width=device-width, initial-scale=1' },\n        { title },\n        ...meta,\n      ],\n      links: [{ rel: 'stylesheet', href: appCssUrl }, ...links],\n    }),\n    component: RootComponent,\n  })\n}\n\n/**\n * Route guard (EC-150): one chokepoint in the root layout. Unauthenticated\n * visitors on protected paths are redirected to the sign-in screen (with the\n * intended target preserved); signed-in users never see the sign-in screen.\n * The decision logic is the pure, unit-tested `resolveRouteGuard`.\n */\nfunction AuthGate({ children }: { children: ReactNode }) {\n  const { status } = useAuth()\n  const { pathname } = useLocation()\n  const decision = resolveRouteGuard(pathname, status)\n\n  if (decision.kind === 'pending') return <SessionLoading />\n  if (decision.kind === 'redirect-to-sign-in') {\n    return <Navigate to={SIGN_IN_PATH} search={{ redirect: decision.redirect }} replace />\n  }\n  if (decision.kind === 'redirect-home') return <Navigate to=\"/\" replace />\n  return children\n}\n\n/** Deterministic session-restore state (also the SSR output for protected paths). */\nfunction SessionLoading() {\n  return (\n    <div className=\"grid min-h-dvh place-items-center bg-background\">\n      <Text size=\"sm\" tone=\"muted\">\n        Checking session…\n      </Text>\n    </div>\n  )\n}\n\nfunction RootDocument({ children, htmlLang }: { children: ReactNode; htmlLang: string }) {\n  // Dark-first SSR baseline; THEME_INIT_SCRIPT flips the class pre-hydration\n  // from the stored preference, and ThemeProvider keeps it reactive thereafter.\n  // suppressHydrationWarning: the script intentionally mutates the class before\n  // React hydrates, so a className mismatch on <html> is expected, not a bug.\n  // The app stylesheet is emitted via head().links and rendered by <HeadContent />.\n  return (\n    <html lang={htmlLang} className=\"dark\" suppressHydrationWarning>\n      <head>\n        <HeadContent />\n        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />\n      </head>\n      <body className=\"min-h-screen bg-background font-sans text-foreground antialiased\">\n        {children}\n        <Scripts />\n      </body>\n    </html>\n  )\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.54",
+  "version": "0.0.55",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -20,6 +20,10 @@
       "types": "./dist/router/index.d.ts",
       "default": "./dist/router/index.js"
     },
+    "./router/root": {
+      "types": "./dist/router/root.d.ts",
+      "default": "./dist/router/root.js"
+    },
     "./router/*": {
       "types": "./dist/router/*.d.ts",
       "default": "./dist/router/*.js"
@@ -137,7 +141,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.54"
+    "@elytracms/core": "^0.0.55"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",