@alfakit/react 0.0.0-stage → 0.1.0

package/dist/standalone/runtime.js

@@ -0,0 +1,94 @@
+import { createDefaultRegistry } from "../registry.js";
+import { getStandaloneDefaults } from "./configure.js";
+import { showToast } from "../components/notifications/flash-toasts.js";
+import { ActionRunner, ComponentRegistry, FlashNotificationTracker, Translator, reloadOnExpiredPage, resolveRequestErrorNotification } from "@alfakit/core";
+import { router } from "@inertiajs/react";
+//#region src/standalone/runtime.ts
+const isServer = typeof window === "undefined";
+const browserTranslator = isServer ? null : new Translator();
+let browserReady = false;
+/** Browser-wide listeners every panel app installs; once per page load. */
+function ensureStandaloneRuntime() {
+	if (isServer || browserReady) return;
+	browserReady = true;
+	reloadOnExpiredPage();
+}
+/**
+* The registry of a standalone component: the built-in renderers, the `configureAlfakit()`
+* defaults (or the surrounding panel's registry), then the component's own overrides.
+*/
+function createStandaloneRegistry(overrides, base) {
+	if (!base) return createDefaultRegistry().registerMany(getStandaloneDefaults().components ?? {}).registerMany(overrides ?? {});
+	if (!overrides || Object.keys(overrides).length === 0) return base;
+	const registry = new ComponentRegistry();
+	for (const type of base.types()) {
+		const component = base.resolve(type);
+		if (component) registry.register(type, component);
+	}
+	return registry.registerMany(overrides);
+}
+/**
+* The context value of one `<AlfakitComponent>` rendered outside `createAlfakit()`: its
+* own registry and action runner (so its modals are its own), the shared translator.
+*/
+function createStandaloneContext(endpoints, overrides, poll) {
+	const translator = browserTranslator ?? new Translator();
+	return {
+		registry: createStandaloneRegistry(overrides),
+		pages: {},
+		translator,
+		actions: new ActionRunner({
+			endpoints: { ...endpoints },
+			onError: (error) => {
+				const notification = resolveRequestErrorNotification(error, null, (key, replacements, fallback) => translator.t(key, replacements, fallback));
+				if (notification) showToast(notification);
+			}
+		}),
+		poll
+	};
+}
+let toasters = 0;
+/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */
+function claimToaster() {
+	toasters++;
+	return () => {
+		toasters--;
+	};
+}
+function hasToaster() {
+	return toasters > 0;
+}
+const flashTracker = new FlashNotificationTracker();
+let flashRegistry = null;
+let flashListening = false;
+/**
+* Show the notifications the server flashed (`Notification::make()->send()`), from the
+* `flash` Inertia event after each visit and from the initial page (whose event fired
+* before the app mounted). One listener per page load, so it survives layouts that remount
+* between visits; the registry of the last mounted toaster renders custom toast views.
+*/
+function ensureFlashToasts(registry) {
+	flashRegistry = registry;
+	if (isServer || flashListening) return;
+	flashListening = true;
+	const show = (flash) => {
+		const flashed = flash?.alfakitNotifications;
+		for (const notification of flashTracker.fresh(flashed)) showToast(notification, flashRegistry?.resolve(notification.view ?? ""));
+	};
+	show(initialFlash());
+	router.on("flash", (event) => show(event.detail.flash));
+}
+/** The initial page's flash data (fired as an event before the app mounted). */
+function initialFlash() {
+	if (isServer) return void 0;
+	try {
+		const page = document.querySelector("[data-page]")?.dataset.page;
+		return page ? JSON.parse(page).flash : void 0;
+	} catch {
+		return;
+	}
+}
+//#endregion
+export { claimToaster, createStandaloneContext, createStandaloneRegistry, ensureFlashToasts, ensureStandaloneRuntime, hasToaster, initialFlash };
+
+//# sourceMappingURL=runtime.js.map

package/dist/standalone/runtime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.js","names":[],"sources":["../../src/standalone/runtime.ts"],"sourcesContent":["import {\n  ActionRunner,\n  ComponentRegistry,\n  FlashNotificationTracker,\n  Translator,\n  reloadOnExpiredPage,\n  resolveRequestErrorNotification,\n  type NotificationSchema,\n} from '@alfakit/core'\nimport { router } from '@inertiajs/react'\nimport { showToast } from '../components/notifications/flash-toasts'\nimport type { AlfakitContextValue, AnyComponent } from '../context'\nimport { createDefaultRegistry } from '../registry'\nimport { getStandaloneDefaults } from './configure'\n\nconst isServer = typeof window === 'undefined'\n\n// Translations are the same for every component of a page, so the browser shares one\n// translator; a server render gets its own so concurrent requests never share a locale.\nconst browserTranslator = isServer ? null : new Translator()\n\nlet browserReady = false\n\n/** Browser-wide listeners every panel app installs; once per page load. */\nexport function ensureStandaloneRuntime(): void {\n  if (isServer || browserReady) return\n\n  browserReady = true\n  reloadOnExpiredPage()\n}\n\n/**\n * The registry of a standalone component: the built-in renderers, the `configureAlfakit()`\n * defaults (or the surrounding panel's registry), then the component's own overrides.\n */\nexport function createStandaloneRegistry(\n  overrides?: Record<string, AnyComponent>,\n  base?: ComponentRegistry<AnyComponent>,\n): ComponentRegistry<AnyComponent> {\n  if (!base) {\n    return createDefaultRegistry()\n      .registerMany(getStandaloneDefaults().components ?? {})\n      .registerMany(overrides ?? {})\n  }\n\n  if (!overrides || Object.keys(overrides).length === 0) {\n    return base\n  }\n\n  const registry = new ComponentRegistry<AnyComponent>()\n\n  for (const type of base.types()) {\n    const component = base.resolve(type)\n\n    if (component) registry.register(type, component)\n  }\n\n  return registry.registerMany(overrides)\n}\n\n/**\n * The context value of one `<AlfakitComponent>` rendered outside `createAlfakit()`: its\n * own registry and action runner (so its modals are its own), the shared translator.\n */\nexport function createStandaloneContext(\n  endpoints: { action: string; modal: string },\n  overrides: Record<string, AnyComponent> | undefined,\n  poll: AlfakitContextValue['poll'],\n): AlfakitContextValue {\n  const translator = browserTranslator ?? new Translator()\n\n  return {\n    registry: createStandaloneRegistry(overrides),\n    pages: {},\n    translator,\n    actions: new ActionRunner({\n      endpoints: { ...endpoints },\n      // Outside a panel there is no `errorNotifications` config: a generic toast.\n      onError: (error) => {\n        const notification = resolveRequestErrorNotification(\n          error,\n          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n    poll,\n  }\n}\n\n// ---------------------------------------------------------------- Toaster ownership\n\nlet toasters = 0\n\n/** An `<AlfakitToaster>` (or the component that took the role) is mounted; returns a release. */\nexport function claimToaster(): () => void {\n  toasters++\n\n  return () => {\n    toasters--\n  }\n}\n\nexport function hasToaster(): boolean {\n  return toasters > 0\n}\n\n// ---------------------------------------------------------------- Flashed notifications\n\nconst flashTracker = new FlashNotificationTracker()\nlet flashRegistry: ComponentRegistry<AnyComponent> | null = null\nlet flashListening = false\n\n/**\n * Show the notifications the server flashed (`Notification::make()->send()`), from the\n * `flash` Inertia event after each visit and from the initial page (whose event fired\n * before the app mounted). One listener per page load, so it survives layouts that remount\n * between visits; the registry of the last mounted toaster renders custom toast views.\n */\nexport function ensureFlashToasts(registry: ComponentRegistry<AnyComponent>): void {\n  flashRegistry = registry\n\n  if (isServer || flashListening) return\n\n  flashListening = true\n\n  const show = (flash: unknown) => {\n    const flashed = (flash as { alfakitNotifications?: NotificationSchema[] } | undefined)\n      ?.alfakitNotifications\n\n    for (const notification of flashTracker.fresh(flashed)) {\n      showToast(notification, flashRegistry?.resolve(notification.view ?? ''))\n    }\n  }\n\n  show(initialFlash())\n  router.on('flash', (event) => show(event.detail.flash))\n}\n\n/** The initial page's flash data (fired as an event before the app mounted). */\nexport function initialFlash(): unknown {\n  if (isServer) return undefined\n\n  try {\n    const page = document.querySelector<HTMLElement>('[data-page]')?.dataset.page\n\n    return page ? (JSON.parse(page) as { flash?: unknown }).flash : undefined\n  } catch {\n    return undefined\n  }\n}\n"],"mappings":";;;;;;AAeA,MAAM,WAAW,OAAO,WAAW;AAInC,MAAM,oBAAoB,WAAW,OAAO,IAAI,WAAW;AAE3D,IAAI,eAAe;;AAGnB,SAAgB,0BAAgC;CAC9C,IAAI,YAAY,cAAc;CAE9B,eAAe;CACf,oBAAoB;AACtB;;;;;AAMA,SAAgB,yBACd,WACA,MACiC;CACjC,IAAI,CAAC,MACH,OAAO,sBAAsB,CAAC,CAC3B,aAAa,sBAAsB,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CACtD,aAAa,aAAa,CAAC,CAAC;CAGjC,IAAI,CAAC,aAAa,OAAO,KAAK,SAAS,CAAC,CAAC,WAAW,GAClD,OAAO;CAGT,MAAM,WAAW,IAAI,kBAAgC;CAErD,KAAK,MAAM,QAAQ,KAAK,MAAM,GAAG;EAC/B,MAAM,YAAY,KAAK,QAAQ,IAAI;EAEnC,IAAI,WAAW,SAAS,SAAS,MAAM,SAAS;CAClD;CAEA,OAAO,SAAS,aAAa,SAAS;AACxC;;;;;AAMA,SAAgB,wBACd,WACA,WACA,MACqB;CACrB,MAAM,aAAa,qBAAqB,IAAI,WAAW;CAEvD,OAAO;EACL,UAAU,yBAAyB,SAAS;EAC5C,OAAO,CAAC;EACR;EACA,SAAS,IAAI,aAAa;GACxB,WAAW,EAAE,GAAG,UAAU;GAE1B,UAAU,UAAU;IAClB,MAAM,eAAe,gCACnB,OACA,OACC,KAAK,cAAc,aAAa,WAAW,EAAE,KAAK,cAAc,QAAQ,CAC3E;IAEA,IAAI,cAAc,UAAU,YAAY;GAC1C;EACF,CAAC;EACD;CACF;AACF;AAIA,IAAI,WAAW;;AAGf,SAAgB,eAA2B;CACzC;CAEA,aAAa;EACX;CACF;AACF;AAEA,SAAgB,aAAsB;CACpC,OAAO,WAAW;AACpB;AAIA,MAAM,eAAe,IAAI,yBAAyB;AAClD,IAAI,gBAAwD;AAC5D,IAAI,iBAAiB;;;;;;;AAQrB,SAAgB,kBAAkB,UAAiD;CACjF,gBAAgB;CAEhB,IAAI,YAAY,gBAAgB;CAEhC,iBAAiB;CAEjB,MAAM,QAAQ,UAAmB;EAC/B,MAAM,UAAW,OACb;EAEJ,KAAK,MAAM,gBAAgB,aAAa,MAAM,OAAO,GACnD,UAAU,cAAc,eAAe,QAAQ,aAAa,QAAQ,EAAE,CAAC;CAE3E;CAEA,KAAK,aAAa,CAAC;CACnB,OAAO,GAAG,UAAU,UAAU,KAAK,MAAM,OAAO,KAAK,CAAC;AACxD;;AAGA,SAAgB,eAAwB;CACtC,IAAI,UAAU,OAAO,KAAA;CAErB,IAAI;EACF,MAAM,OAAO,SAAS,cAA2B,aAAa,CAAC,EAAE,QAAQ;EAEzE,OAAO,OAAQ,KAAK,MAAM,IAAI,CAAC,CAAyB,QAAQ,KAAA;CAClE,QAAQ;EACN;CACF;AACF"}

package/dist/standalone.css

@@ -0,0 +1,150 @@
+/*
+ * Alfakit outside panels. Import it after Tailwind in the stylesheet of the application
+ * that renders `<AlfakitComponent>`, and point Tailwind at the renderer's compiled
+ * components so their classes are generated:
+ *
+ *   @import 'tailwindcss';
+ *   @import '@alfakit/react/standalone.css';
+ *   @source '../../node_modules/@alfakit/react/dist';
+ *
+ * Unlike `styles.css` (the panel stylesheet) it defines no shadcn palette: components
+ * inherit your application's `--primary`, `--border`, `--radius`… and only the status
+ * colours Alfakit adds (`success`, `warning`, `info`) get defaults here. Override them in
+ * your own `:root`. Shared by the React, Vue and Svelte renderers (copied into each dist).
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+/*
+ * Grid classes are composed at runtime from schema breakpoints (`columns`, `columnSpan`),
+ * so force Tailwind to generate every variant the renderers can produce.
+ */
+@source inline('{,sm:,md:,lg:,xl:,2xl:}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}');
+@source inline('{,sm:,md:,lg:,xl:,2xl:}col-span-{1,2,3,4,5,6,7,8,9,10,11,12,full}');
+@source inline('{,sm:,md:,lg:,xl:,2xl:}col-start-{1,2,3,4,5,6,7,8,9,10,11,12}');
+@source inline('line-clamp-{1,2,3,4,5,6}');
+@source inline('{,sm:,md:,lg:,xl:,2xl:}{flex,hidden,flex-row,flex-col,items-center}');
+@source inline(
+  '{@3xs:,@2xs:,@xs:,@sm:,@md:,@lg:,@xl:,@2xl:,@3xl:,@4xl:,@5xl:,@6xl:,@7xl:}grid-cols-{1,2,3,4,5,6,7,8,9,10,11,12}'
+);
+@source inline(
+  '{@3xs:,@2xs:,@xs:,@sm:,@md:,@lg:,@xl:,@2xl:,@3xl:,@4xl:,@5xl:,@6xl:,@7xl:}col-span-{1,2,3,4,5,6,7,8,9,10,11,12,full}'
+);
+@source inline('{,sm:,md:,lg:,xl:,2xl:}{flex-row,items-start,items-center,items-end}');
+
+/* Status colours used by badges, buttons, notifications and stats; shadcn has no defaults for them. */
+@theme inline {
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-danger: var(--destructive);
+  --color-danger-foreground: var(--destructive-foreground);
+  --color-gray: var(--muted-foreground);
+}
+
+:root {
+  --success: var(--alfakit-success, oklch(0.627 0.194 149.214));
+  --success-foreground: oklch(0.985 0 0);
+  --warning: var(--alfakit-warning, oklch(0.769 0.188 70.08));
+  --warning-foreground: oklch(0.145 0 0);
+  --info: var(--alfakit-info, oklch(0.623 0.214 259.815));
+  --info-foreground: oklch(0.985 0 0);
+}
+
+.dark {
+  --success: var(--alfakit-success, oklch(0.723 0.219 149.579));
+  --warning: var(--alfakit-warning, oklch(0.828 0.189 84.429));
+  --info: var(--alfakit-info, oklch(0.707 0.165 254.624));
+}
+
+/*
+ * Text on solid danger buttons and badges. The Laravel starter kits set
+ * `--destructive-foreground` to the same red as `--destructive` (their own buttons use
+ * `text-white`), which would hide the label of every danger button. Only AlfaKit's views
+ * (`data-alfakit-embedded` in starter kit pages, `data-alfakit-component` for standalone
+ * components) and the dialogs, sheets and menus they open while one is on the page get a
+ * readable foreground; the host's own components keep theirs. Override it with
+ * `--alfakit-danger-foreground`.
+ */
+:where([data-alfakit-embedded], [data-alfakit-component]),
+:where(body:has([data-alfakit-embedded], [data-alfakit-component]))
+  :where(
+    [data-slot='dialog-content'],
+    [data-slot='sheet-content'],
+    [data-slot='alert-dialog-content'],
+    [data-slot='dropdown-menu-content'],
+    [data-slot='popover-content']
+  ) {
+  --destructive-foreground: var(--alfakit-danger-foreground, oklch(0.985 0 0));
+  /* A non-inline `@theme` (the starter kits) resolves the colour on :root, so set it here too. */
+  --color-destructive-foreground: var(--destructive-foreground);
+}
+
+/* Rich editor content and extensions (same rules as the panel stylesheet). */
+.alfakit-prose :where(h2) {
+  @apply mt-4 mb-2 text-xl font-semibold;
+}
+.alfakit-prose :where(h3) {
+  @apply mt-3 mb-1 text-lg font-semibold;
+}
+.alfakit-prose :where(p) {
+  @apply my-2 leading-relaxed;
+}
+.alfakit-prose :where(ul) {
+  @apply my-2 list-disc ps-6;
+}
+.alfakit-prose :where(ol) {
+  @apply my-2 list-decimal ps-6;
+}
+.alfakit-prose :where(blockquote) {
+  @apply text-muted-foreground my-2 border-s-2 ps-4 italic;
+}
+.alfakit-prose :where(pre) {
+  @apply bg-muted my-2 overflow-x-auto rounded-md p-3 text-sm;
+}
+.alfakit-prose :where(code) {
+  @apply bg-muted rounded px-1 py-0.5 text-sm;
+}
+.alfakit-prose :where(a) {
+  @apply text-primary underline underline-offset-4;
+}
+.alfakit-prose :where(img) {
+  @apply my-2 max-w-full rounded-md;
+}
+.alfakit-prose :where(table) {
+  @apply my-2 w-full border-collapse text-sm;
+}
+.alfakit-prose :where(td, th) {
+  @apply border px-2 py-1;
+}
+.alfakit-prose :where(.alfakit-mention) {
+  @apply bg-primary/10 text-primary rounded px-1 font-medium;
+}
+.alfakit-prose :where(.alfakit-merge-tag) {
+  @apply bg-muted text-muted-foreground rounded px-1 font-mono text-xs;
+}
+.alfakit-prose :where(.alfakit-custom-block) {
+  @apply bg-card my-2 overflow-hidden rounded-md border;
+}
+.alfakit-prose :where(.alfakit-custom-block.ProseMirror-selectednode) {
+  @apply ring-ring/50 ring-[3px];
+}
+.alfakit-prose :where(.alfakit-custom-block-header) {
+  @apply text-muted-foreground bg-muted/40 flex items-center justify-between gap-2 border-b px-2 py-1 text-xs font-medium;
+}
+.alfakit-prose :where(.alfakit-custom-block-controls) {
+  @apply flex items-center gap-1;
+}
+.alfakit-prose :where(.alfakit-custom-block-controls button) {
+  @apply hover:bg-accent hover:text-accent-foreground rounded px-1.5 py-0.5;
+}
+.alfakit-prose :where(.alfakit-custom-block-preview) {
+  @apply p-3;
+}
+.tiptap p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  @apply text-muted-foreground pointer-events-none float-left;
+}

package/dist/starter-kit/index.d.ts

@@ -0,0 +1,4 @@
+import { AlfakitNavigation, useAlfakitNavigation } from "./navigation.js";
+import { AlfakitStarterKitRoot, StarterKitContentLayout, StarterKitLayout, StarterKitPageOptions, createStarterKitPage } from "./starter-kit.js";
+import { AlfakitHeaderWidgetProps, AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher } from "./widgets.js";
+export { type AlfakitHeaderWidgetProps, type AlfakitNavigation, AlfakitNotifications, AlfakitSearch, AlfakitStarterKitRoot, AlfakitTenantSwitcher, StarterKitContentLayout, type StarterKitLayout, type StarterKitPageOptions, createStarterKitPage, useAlfakitNavigation };

package/dist/starter-kit/index.js

@@ -0,0 +1,4 @@
+import { useAlfakitNavigation } from "./navigation.js";
+import { AlfakitStarterKitRoot, StarterKitContentLayout, createStarterKitPage } from "./starter-kit.js";
+import { AlfakitNotifications, AlfakitSearch, AlfakitTenantSwitcher } from "./widgets.js";
+export { AlfakitNotifications, AlfakitSearch, AlfakitStarterKitRoot, AlfakitTenantSwitcher, StarterKitContentLayout, createStarterKitPage, useAlfakitNavigation };

package/dist/starter-kit/navigation.d.ts

@@ -0,0 +1,20 @@
+import { StarterKitNavGroup, StarterKitNavigationSchema } from "@alfakit/core";
+//#region src/starter-kit/navigation.d.ts
+export interface AlfakitNavigation {
+  /** The panel's navigation as the server shared it, or null for guests. */
+  navigation: StarterKitNavigationSchema | null;
+  /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */
+  groups: StarterKitNavGroup[];
+}
+/**
+ * The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the
+ * host's sidebar. Every Inertia page of the application carries it, so the host's own pages
+ * list the panel's resources too.
+ *
+ * ```tsx
+ * const { groups } = useAlfakitNavigation()
+ * ```
+ */
+export declare function useAlfakitNavigation(panelId?: string): AlfakitNavigation;
+//#endregion
+//# sourceMappingURL=navigation.d.ts.map

package/dist/starter-kit/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","names":[],"sources":["../../src/starter-kit/navigation.ts"],"mappings":";;iBASiB;;EAEf,YAAY;;EAEZ,QAAQ;;;;;;;;;;;wBAYM,qBAAqB,mBAAmB"}

package/dist/starter-kit/navigation.js

@@ -0,0 +1,25 @@
+import { starterKitNavigation, toStarterKitNavGroups } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { useMemo } from "react";
+//#region src/starter-kit/navigation.ts
+/**
+* The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the
+* host's sidebar. Every Inertia page of the application carries it, so the host's own pages
+* list the panel's resources too.
+*
+* ```tsx
+* const { groups } = useAlfakitNavigation()
+* ```
+*/
+function useAlfakitNavigation(panelId) {
+	const props = usePage().props;
+	const navigation = starterKitNavigation(props, panelId);
+	return useMemo(() => ({
+		navigation,
+		groups: toStarterKitNavGroups(navigation?.groups)
+	}), [navigation]);
+}
+//#endregion
+export { useAlfakitNavigation };
+
+//# sourceMappingURL=navigation.js.map

package/dist/starter-kit/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","names":[],"sources":["../../src/starter-kit/navigation.ts"],"sourcesContent":["import {\n  starterKitNavigation,\n  toStarterKitNavGroups,\n  type StarterKitNavGroup,\n  type StarterKitNavigationSchema,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useMemo } from 'react'\n\nexport interface AlfakitNavigation {\n  /** The panel's navigation as the server shared it, or null for guests. */\n  navigation: StarterKitNavigationSchema | null\n  /** Its groups as plain items (`title`, `href`, `icon`, `isActive`, `badge`, `children`). */\n  groups: StarterKitNavGroup[]\n}\n\n/**\n * The navigation of a `starterKit()` panel (the first one unless `panelId` is given), for the\n * host's sidebar. Every Inertia page of the application carries it, so the host's own pages\n * list the panel's resources too.\n *\n * ```tsx\n * const { groups } = useAlfakitNavigation()\n * ```\n */\nexport function useAlfakitNavigation(panelId?: string): AlfakitNavigation {\n  const props = usePage().props\n  const navigation = starterKitNavigation(props, panelId)\n\n  return useMemo(\n    () => ({ navigation, groups: toStarterKitNavGroups(navigation?.groups) }),\n    [navigation],\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAyBA,SAAgB,qBAAqB,SAAqC;CACxE,MAAM,QAAQ,QAAQ,CAAC,CAAC;CACxB,MAAM,aAAa,qBAAqB,OAAO,OAAO;CAEtD,OAAO,eACE;EAAE;EAAY,QAAQ,sBAAsB,YAAY,MAAM;CAAE,IACvE,CAAC,UAAU,CACb;AACF"}

package/dist/starter-kit/starter-kit.d.ts

@@ -0,0 +1,56 @@
+import { AnyComponent } from "../context.js";
+import { AppLayoutProps } from "../layouts/app-layout.js";
+import { AlfakitOptions, StarterKitBreadcrumb } from "@alfakit/core";
+import { ComponentType, ReactNode } from "react";
+//#region src/starter-kit/starter-kit.d.ts
+/** The host's layout, as the starter kits' `AppLayout` takes its props. */
+export type StarterKitLayout = ComponentType<{
+  breadcrumbs?: StarterKitBreadcrumb[];
+  children: ReactNode;
+}>;
+export interface StarterKitPageOptions extends Pick<AlfakitOptions<AnyComponent>, 'components' | 'pages' | 'chartFormatters' | 'chartPlugins' | 'richEditorExtensions'> {
+  /**
+   * The host layout Alfakit pages render in, usually the starter kit's `AppLayout`
+   * (`@/layouts/app-layout`). It receives the page's breadcrumbs as `{ title, href }`.
+   * `null` renders the pages without a host layout.
+   */
+  layout?: StarterKitLayout | null;
+}
+/**
+ * The content area of an Alfakit page inside the host layout: what `layout:app` renders in
+ * starter kit mode instead of Alfakit's sidebar and top bar. Replace it with
+ * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.
+ */
+export declare function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps): import("react").JSX.Element;
+/**
+ * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:
+ * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the
+ * user moves between Alfakit pages.
+ */
+export declare function AlfakitStarterKitRoot({ options, children }: {
+  options?: StarterKitPageOptions;
+  children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * The page component for `Alfakit/Page` in a starter kit app: the host's
+ * `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,
+ * so Inertia's page resolution, the root view's page preload and SSR all find it like any
+ * other host page.
+ *
+ * ```tsx
+ * import { createStarterKitPage } from '@alfakit/react'
+ * import AppLayout from '@/layouts/app-layout'
+ *
+ * export default createStarterKitPage({ layout: AppLayout })
+ * ```
+ */
+export declare function createStarterKitPage(options?: StarterKitPageOptions): {
+  (): import("react").JSX.Element;
+  layout(props: Record<string, unknown>): (readonly [StarterKitLayout, {
+    readonly breadcrumbs: StarterKitBreadcrumb[];
+  }] | readonly [typeof AlfakitStarterKitRoot, {
+    readonly options: StarterKitPageOptions;
+  }])[];
+};
+//#endregion
+//# sourceMappingURL=starter-kit.d.ts.map

package/dist/starter-kit/starter-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-kit.d.ts","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"mappings":";;;;;;YAgCY,mBAAmB;EAC7B,cAAc;EACd,UAAU;;iBAGK,8BAA8B,KAC7C,eAAe;;;;;;EAQf,SAAS;;;;;;;wBAQK,0BAA0B,UAAU,mBAAmB,iCAAc,IAAA;;;;;;wBAgErE,wBACd,SACA;EAEA,UAAU;EACV,WAAW;oBACZ,IAAA;;;;;;;;;;;;;;wBAmDe,qBAAqB,UAAS;;EAYL,OAAA,OAAA,qCAAuB"}

package/dist/starter-kit/starter-kit.js

@@ -0,0 +1,120 @@
+import { AlfakitProvider, useAlfakitProps } from "../context.js";
+import { cn } from "../lib/utils.js";
+import { preloadIcons } from "../lib/icons.js";
+import { createDefaultRegistry } from "../registry.js";
+import { setToasterId, showToast } from "../components/notifications/flash-toasts.js";
+import { Slot } from "../components/panel/slot.js";
+import { MAX_WIDTHS } from "../layouts/app-layout.js";
+import { AlfakitPage } from "../pages/page.js";
+import { AlfakitRoot } from "../create-alfakit.js";
+import { ActionRunner, STARTER_KIT_TOASTER_ID, Translator, configureCharts, installStarterKitRuntime, registerRichEditorExtensions, resolveRequestErrorNotification, starterKitBreadcrumbsFromProps, syncStarterKitPage } from "@alfakit/core";
+import { usePage } from "@inertiajs/react";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/starter-kit/starter-kit.tsx
+/**
+* The content area of an Alfakit page inside the host layout: what `layout:app` renders in
+* starter kit mode instead of Alfakit's sidebar and top bar. Replace it with
+* `createStarterKitPage({ components: { 'layout:app': MyContent } })`.
+*/
+function StarterKitContentLayout({ children, maxContentWidth }) {
+	const props = useAlfakitProps();
+	const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? "full";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "content",
+		"data-alfakit-embedded": "",
+		className: cn("mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6", MAX_WIDTHS[width] ?? "max-w-full"),
+		children: [
+			/* @__PURE__ */ jsx(Slot, { name: "content.start" }),
+			children,
+			/* @__PURE__ */ jsx(Slot, { name: "content.end" })
+		]
+	});
+}
+let browserContext = null;
+function createStarterKitContext(options) {
+	const registry = createDefaultRegistry().register("layout:app", StarterKitContentLayout).registerMany(options.components ?? {});
+	const translator = new Translator();
+	return {
+		registry,
+		pages: {
+			"Alfakit/Page": AlfakitPage,
+			...options.pages
+		},
+		translator,
+		actions: new ActionRunner({
+			endpoints: {
+				action: "",
+				modal: ""
+			},
+			onError: (error) => {
+				const notification = resolveRequestErrorNotification(error, null, (key, replacements, fallback) => translator.t(key, replacements, fallback));
+				if (notification) showToast(notification);
+			}
+		})
+	};
+}
+function starterKitContext(options) {
+	if (typeof window === "undefined") return createStarterKitContext(options);
+	browserContext ??= createStarterKitContext(options);
+	return browserContext;
+}
+/**
+* The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:
+* Alfakit's context, modals, toasts and the reading direction. It stays mounted while the
+* user moves between Alfakit pages.
+*/
+function AlfakitStarterKitRoot({ options, children }) {
+	const [context] = useState(() => starterKitContext(options ?? {}));
+	const props = usePage().props;
+	const panel = props.alfakit;
+	if (panel) context.actions.setEndpoints({
+		action: panel.endpoints.action ?? "",
+		modal: panel.endpoints.modal ?? ""
+	});
+	useEffect(() => {
+		syncStarterKitPage(props);
+	}, [props]);
+	useEffect(() => {
+		installStarterKitRuntime((notification) => showToast(notification), (key, replacements, fallback) => context.translator.t(key, replacements, fallback));
+		setToasterId(STARTER_KIT_TOASTER_ID);
+		return () => {
+			syncStarterKitPage(null);
+			setToasterId(void 0);
+		};
+	}, [context]);
+	return /* @__PURE__ */ jsx(AlfakitProvider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(AlfakitRoot, {
+			toasterId: STARTER_KIT_TOASTER_ID,
+			children
+		})
+	});
+}
+/**
+* The page component for `Alfakit/Page` in a starter kit app: the host's
+* `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,
+* so Inertia's page resolution, the root view's page preload and SSR all find it like any
+* other host page.
+*
+* ```tsx
+* import { createStarterKitPage } from '@alfakit/react'
+* import AppLayout from '@/layouts/app-layout'
+*
+* export default createStarterKitPage({ layout: AppLayout })
+* ```
+*/
+function createStarterKitPage(options = {}) {
+	preloadIcons();
+	configureCharts(options);
+	registerRichEditorExtensions(options.richEditorExtensions ?? {});
+	function AlfakitStarterKitPage() {
+		return /* @__PURE__ */ jsx(AlfakitPage, {});
+	}
+	AlfakitStarterKitPage.layout = (props) => [...options.layout ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }]] : [], [AlfakitStarterKitRoot, { options }]];
+	return AlfakitStarterKitPage;
+}
+//#endregion
+export { AlfakitStarterKitRoot, StarterKitContentLayout, createStarterKitPage };
+
+//# sourceMappingURL=starter-kit.js.map

package/dist/starter-kit/starter-kit.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"starter-kit.js","names":[],"sources":["../../src/starter-kit/starter-kit.tsx"],"sourcesContent":["import {\n  ActionRunner,\n  STARTER_KIT_TOASTER_ID,\n  Translator,\n  configureCharts,\n  installStarterKitRuntime,\n  registerRichEditorExtensions,\n  resolveRequestErrorNotification,\n  starterKitBreadcrumbsFromProps,\n  syncStarterKitPage,\n  type AlfakitOptions,\n  type AlfakitPageProps,\n  type StarterKitBreadcrumb,\n} from '@alfakit/core'\nimport { usePage } from '@inertiajs/react'\nimport { useEffect, useState, type ComponentType, type ReactNode } from 'react'\nimport { setToasterId, showToast } from '../components/notifications/flash-toasts'\nimport { Slot } from '../components/panel/slot'\nimport {\n  AlfakitProvider,\n  useAlfakitProps,\n  type AlfakitContextValue,\n  type AnyComponent,\n} from '../context'\nimport { AlfakitRoot } from '../create-alfakit'\nimport { MAX_WIDTHS, type AppLayoutProps } from '../layouts/app-layout'\nimport { preloadIcons } from '../lib/icons'\nimport { cn } from '../lib/utils'\nimport { AlfakitPage } from '../pages/page'\nimport { createDefaultRegistry } from '../registry'\n\n/** The host's layout, as the starter kits' `AppLayout` takes its props. */\nexport type StarterKitLayout = ComponentType<{\n  breadcrumbs?: StarterKitBreadcrumb[]\n  children: ReactNode\n}>\n\nexport interface StarterKitPageOptions extends Pick<\n  AlfakitOptions<AnyComponent>,\n  'components' | 'pages' | 'chartFormatters' | 'chartPlugins' | 'richEditorExtensions'\n> {\n  /**\n   * The host layout Alfakit pages render in, usually the starter kit's `AppLayout`\n   * (`@/layouts/app-layout`). It receives the page's breadcrumbs as `{ title, href }`.\n   * `null` renders the pages without a host layout.\n   */\n  layout?: StarterKitLayout | null\n}\n\n/**\n * The content area of an Alfakit page inside the host layout: what `layout:app` renders in\n * starter kit mode instead of Alfakit's sidebar and top bar. Replace it with\n * `createStarterKitPage({ components: { 'layout:app': MyContent } })`.\n */\nexport function StarterKitContentLayout({ children, maxContentWidth }: AppLayoutProps) {\n  const props = useAlfakitProps()\n  // The host's pages fill the content area, so starter kit pages default to the full width.\n  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? 'full'\n\n  return (\n    <div\n      data-slot=\"content\"\n      data-alfakit-embedded=\"\"\n      className={cn(\n        'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',\n        MAX_WIDTHS[width] ?? 'max-w-full',\n      )}\n    >\n      <Slot name=\"content.start\" />\n      {children}\n      <Slot name=\"content.end\" />\n    </div>\n  )\n}\n\n// One context for the browser session (it survives navigations between host and Alfakit\n// pages); a server render builds one per request so concurrent renders never share a locale.\nlet browserContext: AlfakitContextValue | null = null\n\nfunction createStarterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  const registry = createDefaultRegistry()\n    .register('layout:app', StarterKitContentLayout)\n    .registerMany(options.components ?? {})\n  const translator = new Translator()\n\n  return {\n    registry,\n    pages: { 'Alfakit/Page': AlfakitPage, ...options.pages },\n    translator,\n    actions: new ActionRunner({\n      endpoints: { action: '', modal: '' },\n      // A failed action request is a toast, never a silent no-op.\n      onError: (error) => {\n        const notification = resolveRequestErrorNotification(\n          error,\n          null,\n          (key, replacements, fallback) => translator.t(key, replacements, fallback),\n        )\n\n        if (notification) showToast(notification)\n      },\n    }),\n  }\n}\n\nfunction starterKitContext(options: StarterKitPageOptions): AlfakitContextValue {\n  if (typeof window === 'undefined') return createStarterKitContext(options)\n\n  browserContext ??= createStarterKitContext(options)\n\n  return browserContext\n}\n\n/**\n * The Inertia layout around every Alfakit page in starter kit mode, inside the host layout:\n * Alfakit's context, modals, toasts and the reading direction. It stays mounted while the\n * user moves between Alfakit pages.\n */\nexport function AlfakitStarterKitRoot({\n  options,\n  children,\n}: {\n  options?: StarterKitPageOptions\n  children?: ReactNode\n}) {\n  const [context] = useState(() => starterKitContext(options ?? {}))\n  const props = usePage<AlfakitPageProps>().props\n  const panel = props.alfakit\n\n  // Endpoints and error notifications follow the open page.\n  if (panel) {\n    context.actions.setEndpoints({\n      action: panel.endpoints.action ?? '',\n      modal: panel.endpoints.modal ?? '',\n    })\n  }\n\n  useEffect(() => {\n    syncStarterKitPage(props)\n  }, [props])\n\n  useEffect(() => {\n    installStarterKitRuntime(\n      (notification) => showToast(notification),\n      (key, replacements, fallback) => context.translator.t(key, replacements, fallback),\n    )\n    setToasterId(STARTER_KIT_TOASTER_ID)\n\n    return () => {\n      // A host page is open: its errors and toasts are the host's again.\n      syncStarterKitPage(null)\n      setToasterId(undefined)\n    }\n  }, [context])\n\n  return (\n    <AlfakitProvider value={context}>\n      <AlfakitRoot toasterId={STARTER_KIT_TOASTER_ID}>{children}</AlfakitRoot>\n    </AlfakitProvider>\n  )\n}\n\n/**\n * The page component for `Alfakit/Page` in a starter kit app: the host's\n * `resources/js/pages/Alfakit/Page.tsx` (written by `alfakit:install --starter-kit`) exports it,\n * so Inertia's page resolution, the root view's page preload and SSR all find it like any\n * other host page.\n *\n * ```tsx\n * import { createStarterKitPage } from '@alfakit/react'\n * import AppLayout from '@/layouts/app-layout'\n *\n * export default createStarterKitPage({ layout: AppLayout })\n * ```\n */\nexport function createStarterKitPage(options: StarterKitPageOptions = {}) {\n  // Panel pages draw named icons: fetch `lucide-react/dynamic` with the page.\n  preloadIcons()\n  // `'js:name'` chart option callbacks, Chart.js plugins and rich editor extensions.\n  configureCharts(options)\n  registerRichEditorExtensions(options.richEditorExtensions ?? {})\n\n  function AlfakitStarterKitPage() {\n    return <AlfakitPage />\n  }\n\n  // A layout callback: the host layout (with the page's breadcrumbs), then Alfakit's root.\n  AlfakitStarterKitPage.layout = (props: Record<string, unknown>) => [\n    ...(options.layout\n      ? [[options.layout, { breadcrumbs: starterKitBreadcrumbsFromProps(props) }] as const]\n      : []),\n    [AlfakitStarterKitRoot, { options }] as const,\n  ]\n\n  return AlfakitStarterKitPage\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,wBAAwB,EAAE,UAAU,mBAAmC;CACrF,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,QAAQ,mBAAmB,MAAM,QAAQ,mBAAmB;CAElE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,yBAAsB;EACtB,WAAW,GACT,gEACA,WAAW,UAAU,YACvB;EANF,UAAA;GAQE,oBAAC,MAAD,EAAM,MAAK,gBAAiB,CAAA;GAC3B;GACD,oBAAC,MAAD,EAAM,MAAK,cAAe,CAAA;EACvB;;AAET;AAIA,IAAI,iBAA6C;AAEjD,SAAS,wBAAwB,SAAqD;CACpF,MAAM,WAAW,sBAAsB,CAAC,CACrC,SAAS,cAAc,uBAAuB,CAAC,CAC/C,aAAa,QAAQ,cAAc,CAAC,CAAC;CACxC,MAAM,aAAa,IAAI,WAAW;CAElC,OAAO;EACL;EACA,OAAO;GAAE,gBAAgB;GAAa,GAAG,QAAQ;EAAM;EACvD;EACA,SAAS,IAAI,aAAa;GACxB,WAAW;IAAE,QAAQ;IAAI,OAAO;GAAG;GAEnC,UAAU,UAAU;IAClB,MAAM,eAAe,gCACnB,OACA,OACC,KAAK,cAAc,aAAa,WAAW,EAAE,KAAK,cAAc,QAAQ,CAC3E;IAEA,IAAI,cAAc,UAAU,YAAY;GAC1C;EACF,CAAC;CACH;AACF;AAEA,SAAS,kBAAkB,SAAqD;CAC9E,IAAI,OAAO,WAAW,aAAa,OAAO,wBAAwB,OAAO;CAEzE,mBAAmB,wBAAwB,OAAO;CAElD,OAAO;AACT;;;;;;AAOA,SAAgB,sBAAsB,EACpC,SACA,YAIC;CACD,MAAM,CAAC,WAAW,eAAe,kBAAkB,WAAW,CAAC,CAAC,CAAC;CACjE,MAAM,QAAQ,QAA0B,CAAC,CAAC;CAC1C,MAAM,QAAQ,MAAM;CAGpB,IAAI,OACF,QAAQ,QAAQ,aAAa;EAC3B,QAAQ,MAAM,UAAU,UAAU;EAClC,OAAO,MAAM,UAAU,SAAS;CAClC,CAAC;CAGH,gBAAgB;EACd,mBAAmB,KAAK;CAC1B,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB;EACd,0BACG,iBAAiB,UAAU,YAAY,IACvC,KAAK,cAAc,aAAa,QAAQ,WAAW,EAAE,KAAK,cAAc,QAAQ,CACnF;EACA,aAAa,sBAAsB;EAEnC,aAAa;GAEX,mBAAmB,IAAI;GACvB,aAAa,KAAA,CAAS;EACxB;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,OACE,oBAAC,iBAAD;EAAiB,OAAO;EACtB,UAAA,oBAAC,aAAD;GAAa,WAAW;GAAyB;EAAsB,CAAA;CACxD,CAAA;AAErB;;;;;;;;;;;;;;AAeA,SAAgB,qBAAqB,UAAiC,CAAC,GAAG;CAExE,aAAa;CAEb,gBAAgB,OAAO;CACvB,6BAA6B,QAAQ,wBAAwB,CAAC,CAAC;CAE/D,SAAS,wBAAwB;EAC/B,OAAO,oBAAC,aAAD,CAAc,CAAA;CACvB;CAGA,sBAAsB,UAAU,UAAmC,CACjE,GAAI,QAAQ,SACR,CAAC,CAAC,QAAQ,QAAQ,EAAE,aAAa,+BAA+B,KAAK,EAAE,CAAC,CAAU,IAClF,CAAC,GACL,CAAC,uBAAuB,EAAE,QAAQ,CAAC,CACrC;CAEA,OAAO;AACT"}