@voyantjs/availability-react 0.106.0 → 0.108.0

package/README.md

@@ -1,6 +1,14 @@
 # @voyantjs/availability-react
 
-React runtime package for Voyant availability. Provides the shared availability provider, typed fetch client, query keys, constants, and TanStack Query hooks that power availability-focused frontend experiences.
+The availability client tier: headless data hooks/clients plus the styled UI
+primitives and page-level compositions (formerly `@voyantjs/availability-ui`).
+
+Headless consumers (storefronts, portals) import from the root, `./hooks`,
+`./client`, or `./query-keys` — these pull no styling peers. Styled surfaces
+live under `./ui`, `./components/*`, `./admin`, `./i18n`, `./utils`, and
+`./styles.css`, whose heavier peers (`@voyantjs/ui`, `@voyantjs/admin`,
+`@tanstack/react-table`, `sonner`, `lucide-react`) are optional and only
+needed when you import those subpaths.
 
 ## Install
 
@@ -27,6 +35,158 @@ function SlotsList() {
 }
 ```
 
+## UI components
+
+Reusable availability UI primitives and page compositions for Voyant
+operator/admin apps.
+
+### Exports
+
+| Entry | Description |
+| --- | --- |
+| `./ui` | Barrel re-exports |
+| `./i18n` | Availability UI message provider, defaults, and helpers |
+| `./components/*` | Availability UI components |
+| `./utils` | Small formatting helpers |
+
+### Surface
+
+The package exports reusable pieces that keep app-owned routing and the
+availability batch mutations injected through props:
+
+- `AvailabilityPage`
+- `AvailabilityRuleDetailPage`, `AvailabilitySlotDetailPage`,
+  `AvailabilityStartTimeDetailPage`
+- `AvailabilityOverview`
+- `AvailabilitySlotsTab`, `AvailabilityRulesTab`, `AvailabilityStartTimesTab`
+- `AvailabilityCloseoutsTab`, `AvailabilityPickupPointsTab`
+- `AvailabilityRuleDialog`, `AvailabilityStartTimeDialog`, `AvailabilitySlotDialog`
+- `AvailabilityCloseoutDialog`, `AvailabilityPickupPointDialog`
+- `AvailabilityPageSkeleton`, `AvailabilityBodySkeleton`, detail skeletons
+- `availability*Columns` table column builders
+- `AvailabilitySectionHeader`
+- `AvailabilityUiMessagesProvider` and i18n helpers from `./i18n`
+- `formatLocalizedSelectionLabel`
+
+### Usage
+
+`AvailabilityPage` owns the common operator availability shell, data hooks,
+filters, overview metrics, table tabs, calendar tab, and rule/slot/start-time
+dialogs. Route navigation and batch mutations stay app-specific:
+
+```tsx
+import { AvailabilityPage } from "@voyantjs/availability-react/ui"
+
+<AvailabilityPage
+  onSlotOpen={(id) => navigate({ to: "/availability/$id", params: { id } })}
+  onRuleOpen={(id) => navigate({ to: "/availability/rules/$id", params: { id } })}
+  onStartTimeOpen={(id) =>
+    navigate({ to: "/availability/start-times/$id", params: { id } })
+  }
+  onProductOpen={(id) => navigate({ to: "/products/$id", params: { id } })}
+  onBulkUpdate={handleAvailabilityBulkUpdate}
+  onBulkDelete={handleAvailabilityBulkDelete}
+/>
+```
+
+Closeout and pickup-point mutations are not owned by the headless tier yet.
+Pass `onCloseoutSubmit` and `onPickupPointSubmit` to use the package dialogs, or
+use the `slots.dialogs` escape hatch to render app-owned dialogs.
+
+Detail pages expose query/loader helpers that accept the app's API client:
+
+```tsx
+import { defaultFetcher } from "@voyantjs/availability-react"
+import {
+  AvailabilitySlotDetailPage,
+  loadAvailabilitySlotDetailPage,
+} from "@voyantjs/availability-react/ui"
+
+const client = { baseUrl: getApiUrl(), fetcher: defaultFetcher }
+
+export const Route = createFileRoute("/_workspace/availability/$id")({
+  loader: ({ context, params }) =>
+    loadAvailabilitySlotDetailPage(context.queryClient, client, params.id),
+  component: () => {
+    const { id } = Route.useParams()
+    return (
+      <AvailabilitySlotDetailPage
+        id={id}
+        onBack={() => navigate({ to: "/availability" })}
+        onOpenProduct={(productId) =>
+          navigate({ to: "/products/$id", params: { id: productId } })
+        }
+        onOpenStartTime={(startTimeId) =>
+          navigate({ to: "/availability/start-times/$id", params: { id: startTimeId } })
+        }
+      />
+    )
+  },
+})
+```
+
+Wrap consumers in `AvailabilityUiMessagesProvider` for package-level copy and
+locale-aware formatting. Without a provider the package falls back to English.
+
+```tsx
+import { AvailabilityUiMessagesProvider } from "@voyantjs/availability-react/i18n"
+
+<AvailabilityUiMessagesProvider locale={resolvedLocale}>
+  <AvailabilityPage onBulkUpdate={handleBulkUpdate} onBulkDelete={handleBulkDelete} />
+</AvailabilityUiMessagesProvider>
+```
+
+Leaf components remain available for custom page shells:
+
+```tsx
+import { AvailabilitySectionHeader } from "@voyantjs/availability-react/ui"
+
+function SlotsHeader() {
+  return (
+    <AvailabilitySectionHeader
+      title="Slots"
+      description="Manage generated capacity."
+      actionLabel="Create slot"
+      onAction={() => setOpen(true)}
+    />
+  )
+}
+```
+
+Table column builders are available for apps that use `@voyantjs/ui`'s
+`DataTable` and keep routing behavior app-owned:
+
+```tsx
+import { availabilitySlotColumns } from "@voyantjs/availability-react/ui"
+
+<DataTable
+  columns={availabilitySlotColumns(products, openSlotRoute, messages.availability)}
+  data={slots}
+/>
+```
+
+Dialogs expose the reusable form UI and validation while the app decides how
+to persist the payload:
+
+```tsx
+import { AvailabilitySlotDialog } from "@voyantjs/availability-react/ui"
+
+<AvailabilitySlotDialog
+  messages={messages.availability}
+  open={open}
+  onOpenChange={setOpen}
+  products={products}
+  rules={rules}
+  startTimes={startTimes}
+  onSubmit={(payload, context) =>
+    context.isEditing
+      ? api.patch(`/v1/availability/slots/${context.id}`, payload)
+      : api.post("/v1/availability/slots", payload)
+  }
+  onSuccess={refresh}
+/>
+```
+
 ## License
 
 Apache-2.0

package/dist/admin/availability-index-host.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Packaged admin host for the availability index page (packaged-admin RFC
+ * Phase 3). Zero-prop: list/filter state stays component-local (no URL
+ * search contract), opening a slot resolves through the
+ * `availabilitySlot.detail` semantic destination, and the bulk
+ * update/delete handlers run through the typed batch mutation pairs from
+ * `@voyantjs/availability-react` (the `batch-update`/`batch-delete`
+ * endpoints) instead of an app RPC client. Slot create/edit submits through
+ * the package default (`useAvailabilitySlotMutation`).
+ */
+export declare function AvailabilityIndexHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=availability-index-host.d.ts.map

package/dist/admin/availability-index-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-index-host.d.ts","sourceRoot":"","sources":["../../src/admin/availability-index-host.tsx"],"names":[],"mappings":"AA0BA;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,4CA2KpC"}

package/dist/admin/availability-index-host.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useQueryClient } from "@tanstack/react-query";
+import { formatMessage, useAdminNavigate, useOperatorAdminMessages } from "@voyantjs/admin";
+import { useState } from "react";
+import { toast } from "sonner";
+import { AvailabilityPage, } from "../components/availability-page.js";
+import { availabilityQueryKeys, useAvailabilityCloseoutBatchMutation, useAvailabilityPickupPointBatchMutation, useAvailabilityRuleBatchMutation, useAvailabilitySlotBatchMutation, useAvailabilityStartTimeBatchMutation, } from "../index.js";
+import { formatLocalizedSelectionLabel } from "../utils.js";
+/**
+ * Packaged admin host for the availability index page (packaged-admin RFC
+ * Phase 3). Zero-prop: list/filter state stays component-local (no URL
+ * search contract), opening a slot resolves through the
+ * `availabilitySlot.detail` semantic destination, and the bulk
+ * update/delete handlers run through the typed batch mutation pairs from
+ * `@voyantjs/availability-react` (the `batch-update`/`batch-delete`
+ * endpoints) instead of an app RPC client. Slot create/edit submits through
+ * the package default (`useAvailabilitySlotMutation`).
+ */
+export function AvailabilityIndexHost() {
+    const messages = useOperatorAdminMessages();
+    const navigateTo = useAdminNavigate();
+    const queryClient = useQueryClient();
+    const [bulkActionTarget, setBulkActionTarget] = useState(null);
+    const ruleBatch = useAvailabilityRuleBatchMutation();
+    const startTimeBatch = useAvailabilityStartTimeBatchMutation();
+    const slotBatch = useAvailabilitySlotBatchMutation();
+    const closeoutBatch = useAvailabilityCloseoutBatchMutation();
+    const pickupPointBatch = useAvailabilityPickupPointBatchMutation();
+    const refreshAvailability = () => queryClient.invalidateQueries({ queryKey: availabilityQueryKeys.all });
+    // The tabs identify their batch endpoints by REST path; resolve each to
+    // the matching typed batch mutation pair. The page currently only emits
+    // the slots endpoint, but every availability list entity is covered so
+    // additional tabs slot in without touching the host.
+    const runBatchUpdate = (endpoint, ids, payload) => {
+        switch (endpoint) {
+            case "/v1/availability/rules":
+                return ruleBatch.batchUpdate.mutateAsync({
+                    ids,
+                    patch: payload,
+                });
+            case "/v1/availability/start-times":
+                return startTimeBatch.batchUpdate.mutateAsync({
+                    ids,
+                    patch: payload,
+                });
+            case "/v1/availability/closeouts":
+                return closeoutBatch.batchUpdate.mutateAsync({
+                    ids,
+                    patch: payload,
+                });
+            case "/v1/availability/pickup-points":
+                return pickupPointBatch.batchUpdate.mutateAsync({
+                    ids,
+                    patch: payload,
+                });
+            default:
+                return slotBatch.batchUpdate.mutateAsync({
+                    ids,
+                    patch: payload,
+                });
+        }
+    };
+    const runBatchDelete = (endpoint, ids) => {
+        switch (endpoint) {
+            case "/v1/availability/rules":
+                return ruleBatch.batchDelete.mutateAsync({ ids });
+            case "/v1/availability/start-times":
+                return startTimeBatch.batchDelete.mutateAsync({ ids });
+            case "/v1/availability/closeouts":
+                return closeoutBatch.batchDelete.mutateAsync({ ids });
+            case "/v1/availability/pickup-points":
+                return pickupPointBatch.batchDelete.mutateAsync({ ids });
+            default:
+                return slotBatch.batchDelete.mutateAsync({ ids });
+        }
+    };
+    const slotsNounSingular = messages.availability.tabs.slots.title;
+    const slotsNounPlural = messages.availability.tabs.slots.title;
+    const handleBulkUpdate = async ({ ids, endpoint, target, nounSingular, nounPlural, payload, successVerb, clearSelection, }) => {
+        if (ids.length === 0)
+            return;
+        setBulkActionTarget(target);
+        const result = await runBatchUpdate(endpoint, ids, payload);
+        await refreshAvailability();
+        clearSelection();
+        setBulkActionTarget(null);
+        const succeededSelection = formatLocalizedSelectionLabel(result.succeeded, nounSingular ?? slotsNounSingular, nounPlural ?? slotsNounPlural);
+        const totalSelection = formatLocalizedSelectionLabel(result.total, nounSingular ?? slotsNounSingular, nounPlural ?? slotsNounPlural);
+        if (result.failed.length === 0) {
+            toast.success(formatMessage(messages.availability.toasts.bulkUpdated, {
+                verb: successVerb,
+                selection: succeededSelection,
+            }));
+            return;
+        }
+        toast.error(formatMessage(messages.availability.toasts.bulkUpdatedPartial, {
+            verb: successVerb,
+            succeeded: result.succeeded,
+            selection: totalSelection,
+        }));
+    };
+    const handleBulkDelete = async ({ ids, endpoint, target, nounSingular, nounPlural, clearSelection, }) => {
+        if (ids.length === 0)
+            return;
+        setBulkActionTarget(target);
+        const result = await runBatchDelete(endpoint, ids);
+        await refreshAvailability();
+        clearSelection();
+        setBulkActionTarget(null);
+        const succeededSelection = formatLocalizedSelectionLabel(result.succeeded, nounSingular ?? slotsNounSingular, nounPlural ?? slotsNounPlural);
+        const totalSelection = formatLocalizedSelectionLabel(result.total, nounSingular ?? slotsNounSingular, nounPlural ?? slotsNounPlural);
+        if (result.failed.length === 0) {
+            toast.success(formatMessage(messages.availability.toasts.bulkDeleted, {
+                selection: succeededSelection,
+            }));
+            return;
+        }
+        toast.error(formatMessage(messages.availability.toasts.bulkDeletedPartial, {
+            succeeded: result.succeeded,
+            selection: totalSelection,
+        }));
+    };
+    return (_jsx(AvailabilityPage, { bulkActionTarget: bulkActionTarget, onBulkUpdate: handleBulkUpdate, onBulkDelete: handleBulkDelete, onSlotOpen: (slotId) => navigateTo("availabilitySlot.detail", { slotId }) }));
+}

package/dist/admin/availability-page-data.d.ts

@@ -0,0 +1,9 @@
+import type { QueryClient } from "@tanstack/react-query";
+import { type VoyantAvailabilityContextValue } from "../index.js";
+/**
+ * Index page loader: await only what the slots tab + the products picker
+ * (top of page) need for first paint; the rules/start-times dimensions that
+ * back the slot create/edit dialog prefetch in the background.
+ */
+export declare function ensureAvailabilityPageData(queryClient: QueryClient, client: VoyantAvailabilityContextValue): Promise<void>;
+//# sourceMappingURL=availability-page-data.d.ts.map

package/dist/admin/availability-page-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-page-data.d.ts","sourceRoot":"","sources":["../../src/admin/availability-page-data.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAKL,KAAK,8BAA8B,EACpC,MAAM,aAAa,CAAA;AAcpB;;;;GAIG;AACH,wBAAsB,0BAA0B,CAC9C,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,8BAA8B,GACrC,OAAO,CAAC,IAAI,CAAC,CAYf"}

package/dist/admin/availability-page-data.js

@@ -0,0 +1,25 @@
+import { getProductsQueryOptions, getRulesQueryOptions, getSlotsQueryOptions, getStartTimesQueryOptions, } from "../index.js";
+/**
+ * Canonical first-page list filters for the availability index page.
+ * `AvailabilityPage` hard-codes the same filters in its hooks, so the
+ * loader-seeded cache entries line up with the page's query keys.
+ */
+const availabilityPageQueryFilters = {
+    products: { limit: 25, offset: 0 },
+    slots: { limit: 25, offset: 0 },
+    rules: { limit: 25, offset: 0 },
+    startTimes: { limit: 25, offset: 0 },
+};
+/**
+ * Index page loader: await only what the slots tab + the products picker
+ * (top of page) need for first paint; the rules/start-times dimensions that
+ * back the slot create/edit dialog prefetch in the background.
+ */
+export async function ensureAvailabilityPageData(queryClient, client) {
+    await Promise.all([
+        queryClient.ensureQueryData(getSlotsQueryOptions(client, availabilityPageQueryFilters.slots)),
+        queryClient.ensureQueryData(getProductsQueryOptions(client, availabilityPageQueryFilters.products)),
+    ]);
+    void queryClient.prefetchQuery(getRulesQueryOptions(client, availabilityPageQueryFilters.rules));
+    void queryClient.prefetchQuery(getStartTimesQueryOptions(client, availabilityPageQueryFilters.startTimes));
+}

package/dist/admin/index.d.ts

@@ -0,0 +1,72 @@
+import { type AdminExtension } from "@voyantjs/admin";
+/**
+ * Semantic destinations the availability admin surfaces navigate to
+ * (packaged-admin RFC §4.7). Keys shared with other domains
+ * (`availabilitySlot.detail`, `booking.detail`, `product.detail`) come from
+ * the bookings-ui augmentation bound above; declared here are the
+ * availability-owned targets the packaged pages and breadcrumbs resolve
+ * through `useAdminHref`/`useAdminNavigate`.
+ */
+declare module "@voyantjs/admin" {
+    interface AdminDestinations {
+        /** The availability landing page (slots list + calendar). */
+        "availabilitySlot.list": Record<string, never>;
+        /** An availability start time's detail page. */
+        "availabilityStartTime.detail": {
+            startTimeId: string;
+        };
+    }
+}
+export { AvailabilityIndexHost } from "./availability-index-host.js";
+export { ensureAvailabilityPageData } from "./availability-page-data.js";
+export { OptionResourceTemplatesPanel, type OptionResourceTemplatesPanelProps, } from "./option-resource-templates-panel.js";
+export { AvailabilityRuleDetailHost, type AvailabilityRuleDetailHostProps, } from "./rule-detail-host.js";
+export { AvailabilitySlotDetailHost, type AvailabilitySlotDetailHostProps, } from "./slot-detail-host.js";
+export { AvailabilityStartTimeDetailHost, type AvailabilityStartTimeDetailHostProps, } from "./start-time-detail-host.js";
+export interface CreateAvailabilityAdminExtensionOptions {
+    /** Mount path of the availability pages inside the admin workspace. Default `/availability`. */
+    basePath?: string;
+    /** Localized page titles. Defaults are the English operator nav labels. */
+    labels?: {
+        availability?: string;
+    };
+}
+/**
+ * The availability admin contribution (packaged-admin RFC Phase 3,
+ * `@voyantjs/<domain>-ui/admin` convention).
+ *
+ * NAVIGATION: deliberately none. The Availability nav item is part of the
+ * BASE operator navigation — see `createOperatorAdminNavigation` in
+ * `@voyantjs/admin` — so contributing a nav entry here would duplicate it.
+ * If the base nav ever drops the availability item, this extension is where
+ * the entry moves.
+ *
+ * ROUTES: contributions carry the FULL route implementation (packaged-admin
+ * RFC §4.2/§4.8) — lazy `page` module loaders, data loaders fed by the
+ * host-supplied {@link AdminRouteLoaderContext} (QueryClient + runtime +
+ * params), per-route SSR mode, and pending skeletons. Hosts bind them into
+ * their code-assembled admin route tree; no per-route host files needed.
+ * The pages stay code-split because each contribution's `page` dynamically
+ * imports the specific host/page module — never the admin barrel — so the
+ * heavy page chunks load on navigation, not with workspace chrome.
+ * {@link AvailabilityIndexHost} (the slots list + calendar landing page,
+ * with bulk update/delete running through the typed batch mutation hooks in
+ * `@voyantjs/availability-react`) mounts as a zero-prop page; the detail
+ * hosts {@link AvailabilitySlotDetailHost},
+ * {@link AvailabilityRuleDetailHost} and
+ * {@link AvailabilityStartTimeDetailHost} read their record id from
+ * `AdminRoutePageProps` via the default-exported wrappers in `./pages/`.
+ * The index host's SSR loader binding is no longer app-side:
+ * {@link ensureAvailabilityPageData} runs in the contribution's own loader
+ * against the host runtime's cookie-forwarding fetcher. The pages keep
+ * their filter state component-local, so there are no URL search contracts,
+ * and every cross-route link resolves through the semantic destinations
+ * declared above.
+ *
+ * WIDGETS: none. {@link OptionResourceTemplatesPanel} (the per-option
+ * resource templates editor the product editor embeds) ships from this
+ * entry as a directly importable component — the products admin host owns
+ * where it mounts.
+ */
+export declare function createAvailabilityAdminExtension(options?: CreateAvailabilityAdminExtensionOptions): AdminExtension;
+//# sourceMappingURL=index.d.ts.map

package/dist/admin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/admin/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,iBAAiB,CAAA;AAoBxB;;;;;;;GAOG;AACH,OAAO,QAAQ,iBAAiB,CAAC;IAC/B,UAAU,iBAAiB;QACzB,6DAA6D;QAC7D,uBAAuB,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QAC9C,gDAAgD;QAChD,8BAA8B,EAAE;YAAE,WAAW,EAAE,MAAM,CAAA;SAAE,CAAA;KACxD;CACF;AAKD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAA;AACpE,OAAO,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAA;AACxE,OAAO,EACL,4BAA4B,EAC5B,KAAK,iCAAiC,GACvC,MAAM,sCAAsC,CAAA;AAC7C,OAAO,EACL,0BAA0B,EAC1B,KAAK,+BAA+B,GACrC,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,0BAA0B,EAC1B,KAAK,+BAA+B,GACrC,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EACL,+BAA+B,EAC/B,KAAK,oCAAoC,GAC1C,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,uCAAuC;IACtD,gGAAgG;IAChG,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE;QACP,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,gCAAgC,CAC9C,OAAO,GAAE,uCAA4C,GACpD,cAAc,CA6EhB"}

package/dist/admin/index.js

@@ -0,0 +1,132 @@
+import { adminRoutePageModule, defineAdminExtension, } from "@voyantjs/admin";
+import { AvailabilityPageSkeleton, AvailabilityRuleDetailSkeleton, AvailabilitySlotDetailSkeleton, AvailabilityStartTimeDetailSkeleton, } from "../components/availability-skeletons.js";
+import { defaultFetcher } from "../index.js";
+import { ensureAvailabilityPageData } from "./availability-page-data.js";
+// Packaged admin hosts (packaged-admin RFC Phase 3): the operator-grade
+// availability pages bound to their data wiring + semantic-destination
+// navigation. Host route files only bind route params onto these.
+export { AvailabilityIndexHost } from "./availability-index-host.js";
+export { ensureAvailabilityPageData } from "./availability-page-data.js";
+export { OptionResourceTemplatesPanel, } from "./option-resource-templates-panel.js";
+export { AvailabilityRuleDetailHost, } from "./rule-detail-host.js";
+export { AvailabilitySlotDetailHost, } from "./slot-detail-host.js";
+export { AvailabilityStartTimeDetailHost, } from "./start-time-detail-host.js";
+/**
+ * The availability admin contribution (packaged-admin RFC Phase 3,
+ * `@voyantjs/<domain>-ui/admin` convention).
+ *
+ * NAVIGATION: deliberately none. The Availability nav item is part of the
+ * BASE operator navigation — see `createOperatorAdminNavigation` in
+ * `@voyantjs/admin` — so contributing a nav entry here would duplicate it.
+ * If the base nav ever drops the availability item, this extension is where
+ * the entry moves.
+ *
+ * ROUTES: contributions carry the FULL route implementation (packaged-admin
+ * RFC §4.2/§4.8) — lazy `page` module loaders, data loaders fed by the
+ * host-supplied {@link AdminRouteLoaderContext} (QueryClient + runtime +
+ * params), per-route SSR mode, and pending skeletons. Hosts bind them into
+ * their code-assembled admin route tree; no per-route host files needed.
+ * The pages stay code-split because each contribution's `page` dynamically
+ * imports the specific host/page module — never the admin barrel — so the
+ * heavy page chunks load on navigation, not with workspace chrome.
+ * {@link AvailabilityIndexHost} (the slots list + calendar landing page,
+ * with bulk update/delete running through the typed batch mutation hooks in
+ * `@voyantjs/availability-react`) mounts as a zero-prop page; the detail
+ * hosts {@link AvailabilitySlotDetailHost},
+ * {@link AvailabilityRuleDetailHost} and
+ * {@link AvailabilityStartTimeDetailHost} read their record id from
+ * `AdminRoutePageProps` via the default-exported wrappers in `./pages/`.
+ * The index host's SSR loader binding is no longer app-side:
+ * {@link ensureAvailabilityPageData} runs in the contribution's own loader
+ * against the host runtime's cookie-forwarding fetcher. The pages keep
+ * their filter state component-local, so there are no URL search contracts,
+ * and every cross-route link resolves through the semantic destinations
+ * declared above.
+ *
+ * WIDGETS: none. {@link OptionResourceTemplatesPanel} (the per-option
+ * resource templates editor the product editor embeds) ships from this
+ * entry as a directly importable component — the products admin host owns
+ * where it mounts.
+ */
+export function createAvailabilityAdminExtension(options = {}) {
+    const { basePath = "/availability", labels = {} } = options;
+    const { availability = "Availability" } = labels;
+    return defineAdminExtension({
+        id: "availability",
+        routes: [
+            {
+                id: "availability-index",
+                path: basePath,
+                title: availability,
+                ssr: "data-only",
+                page: () => import("./availability-index-host.js").then((module) => adminRoutePageModule(module.AvailabilityIndexHost)),
+                // Awaits only what the slots tab + the products picker need for
+                // first paint; the slot dialog's rules/start-times dimensions
+                // prefetch in the background.
+                loader: ({ queryClient, runtime }) => ensureAvailabilityPageData(queryClient, loaderClient(runtime)),
+                pendingComponent: AvailabilityPageSkeleton,
+            },
+            {
+                id: "availability-slot-detail",
+                path: `${basePath}/$id`,
+                title: availability,
+                page: () => import("./pages/availability-slot-detail-page.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose: the loader helper lives in the slot
+                    // detail page module, and a static import here would pin that
+                    // module into the host's workspace-chrome chunk, defeating the
+                    // route's code-split. The loader and the page resolve the same
+                    // chunk, fetched once.
+                    const { loadAvailabilitySlotDetailPage } = await import("../components/availability-slot-detail-page.js");
+                    return loadAvailabilitySlotDetailPage(queryClient, loaderClient(runtime), id);
+                },
+                pendingComponent: AvailabilitySlotDetailSkeleton,
+            },
+            {
+                id: "availability-rule-detail",
+                path: `${basePath}/rules/$id`,
+                title: availability,
+                page: () => import("./pages/availability-rule-detail-page.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose — see the slot detail loader above.
+                    const { loadAvailabilityRuleDetailPage } = await import("../components/availability-rule-detail-page.js");
+                    return loadAvailabilityRuleDetailPage(queryClient, loaderClient(runtime), id);
+                },
+                pendingComponent: AvailabilityRuleDetailSkeleton,
+            },
+            {
+                id: "availability-start-time-detail",
+                path: `${basePath}/start-times/$id`,
+                title: availability,
+                page: () => import("./pages/availability-start-time-detail-page.js"),
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id)
+                        return;
+                    // Dynamic import on purpose — see the slot detail loader above.
+                    const { loadAvailabilityStartTimeDetailPage } = await import("../components/availability-start-time-detail-page.js");
+                    return loadAvailabilityStartTimeDetailPage(queryClient, loaderClient(runtime), id);
+                },
+                pendingComponent: AvailabilityStartTimeDetailSkeleton,
+            },
+        ],
+    });
+}
+/**
+ * Bridge the host-supplied {@link AdminRouteRuntime} (optional fetcher) to
+ * the required-fetcher client contract the availability loaders take.
+ *
+ * Note: the operator's detail route files built this client with the
+ * package `defaultFetcher` (a plain `credentials: "include"` fetch); the
+ * contribution uses the host runtime's cookie-forwarding fetcher instead,
+ * so detail SSR prefetches authenticate — an intentional improvement.
+ */
+function loaderClient(runtime) {
+    return { baseUrl: runtime.baseUrl, fetcher: runtime.fetcher ?? defaultFetcher };
+}

package/dist/admin/option-resource-templates-panel.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Per-option Resource templates editor. Templates drive the Allocation
+ * tab's "Generate resources" automation — without a template configured
+ * for an option, no rooms/seats/etc. are materialized when bookings hit
+ * a slot.
+ *
+ * Each template is identified by `(optionId, kind, refId)` — an option can
+ * hold several templates of the same kind, one per `option_unit` (e.g. a
+ * "room" template per room type), distinguished by `refId`. Common kinds:
+ *   - `room` — accommodation rooms (default capacity 2)
+ *   - `vehicle_seat` — coach/van seats (capacity 1)
+ *   - `cabin` — cruise cabins
+ *
+ * The kind field is a free-form string on the server; we constrain the
+ * picker to the known set for UX, but operators can extend by typing.
+ */
+export interface OptionResourceTemplatesPanelProps {
+    productId: string;
+    optionId: string;
+}
+export declare function OptionResourceTemplatesPanel({ productId, optionId, }: OptionResourceTemplatesPanelProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=option-resource-templates-panel.d.ts.map

package/dist/admin/option-resource-templates-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-resource-templates-panel.d.ts","sourceRoot":"","sources":["../../src/admin/option-resource-templates-panel.tsx"],"names":[],"mappings":"AA+CA;;;;;;;;;;;;;;;GAeG;AACH,MAAM,WAAW,iCAAiC;IAChD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAiBD,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,QAAQ,GACT,EAAE,iCAAiC,2CAqenC"}