@aglyn/shared-ui-next 1.0.0-beta.143

package/src/lib/components/hub-tabs.js

@@ -0,0 +1,292 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { AppLink, CardDisplay, GridItems, MdiIcon, mdiLockOutline } from "@aglyn/shared-ui-jsx";
+import { TabContext, TabList, TabPanel } from "@mui/lab";
+import { Box, Tab, Tabs, useMediaQuery, useTheme } from "@mui/material";
+import { usePathname } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTabParam } from "../hooks/use-tab-param.js";
+/**
+ * The rail's own shape, shared by BOTH modes below (AGL-2501).
+ *
+ * `HubTabs` and `HubSections` are two ways of choosing a section and one way
+ * of DRAWING that choice. Duplicating the card, the orientation switch and the
+ * tab `sx` is how they drift into looking like two different products, which
+ * is exactly what happened the first time this rail was rebuilt by hand.
+ */ function useRailLayout() {
+    const theme = useTheme();
+    const stacked = useMediaQuery(theme.breakpoints.down('sm'));
+    return {
+        stacked,
+        /** Props every rail passes to its `Tabs`/`TabList`. */ tabsProps: {
+            orientation: stacked ? 'horizontal' : 'vertical',
+            variant: stacked ? 'scrollable' : 'standard',
+            allowScrollButtonsMobile: true,
+            textColor: 'primary',
+            indicatorColor: 'primary',
+            sx: {
+                ['.MuiTab-root']: {
+                    alignItems: stacked ? 'center' : 'start',
+                    maxWidth: 'unset',
+                    textTransform: 'none'
+                }
+            }
+        }
+    };
+}
+/**
+ * Hub tab strip (AGL-354/382): the host-setup two-column pattern as a
+ * shared component — a left "Navigation" CardDisplay with a vertical
+ * TabList, content on the right. Collapses to horizontal tabs on small
+ * screens. The active tab mirrors into the `?tab=` query param (shallow
+ * replace) so hub views deep-link and survive back/forward; panels are
+ * kept mounted so content and its data subscriptions are always present
+ * (unless `lazy`, which defers un-visited panels — see the prop).
+ */ export function HubTabs(props) {
+    const { tabs, navHeader = 'Navigation', lazy = false } = props;
+    const { tabsProps } = useRailLayout();
+    /*
+   * The SHARED resolver, not a second reading of the same parameter
+   * (AGL-2486). This rail used to hold the incoming id in `useState`, which
+   * reads it once and then stops: back and forward are navigations between
+   * two states of one mounted page, and a link into another section of a page
+   * already open changes the parameter without remounting anything. Either
+   * one left the rail on the old tab while the URL named a different one.
+   *
+   * `ids` is the tabs that exist right now, so an id naming a tab this hub
+   * does not render falls back to the first rather than selecting a panel
+   * nothing draws — which matters because several hubs build their tab list
+   * from entitlements and render a different set per org.
+   */ const tabIds = useMemo(()=>tabs.map((item)=>item.id), [
+        tabs
+    ]);
+    const { tab, onTabChange } = useTabParam({
+        ids: tabIds
+    });
+    // Which tabs have ever been active — the mount set when `lazy`. Seeded with
+    // the tab resolved for first paint so it (and only it) mounts.
+    const [activated, setActivated] = useState(()=>new Set(tab ? [
+            tab
+        ] : []));
+    const handleChange = useCallback((event, value)=>{
+        setActivated((prev)=>prev.has(value) ? prev : new Set(prev).add(value));
+        onTabChange(event, value);
+    }, [
+        onTabChange
+    ]);
+    /*
+   * A panel reached by URL rather than by click has to stay in the mount set
+   * too. `handleChange` is the only thing that grows the set, and it does not
+   * fire when back/forward or an in-app link moves the parameter — so without
+   * this, a `lazy` hub would drop such a panel again the moment the reader
+   * moved on, and every return to it would remount and re-subscribe.
+   *
+   * The panel itself does not wait for this effect: the render below mounts
+   * the ACTIVE tab unconditionally, so there is no frame in which the rail
+   * shows a selected tab over an empty panel.
+   */ useEffect(()=>{
+        if (!lazy || !tab) return;
+        setActivated((prev)=>prev.has(tab) ? prev : new Set(prev).add(tab));
+    }, [
+        lazy,
+        tab
+    ]);
+    return /*#__PURE__*/ _jsx(TabContext, {
+        value: tab,
+        children: /*#__PURE__*/ _jsx(GridItems, {
+            // A navigation column beside its content, not a set of cards.
+            masonry: false,
+            spacing: 3,
+            items: [
+                {
+                    size: {
+                        xs: 12,
+                        sm: 3
+                    },
+                    children: /*#__PURE__*/ _jsx(CardDisplay, {
+                        header: navHeader,
+                        children: /*#__PURE__*/ _jsx(TabList, _extends({}, tabsProps, {
+                            onChange: handleChange,
+                            children: tabs.map((item)=>/*#__PURE__*/ _jsx(Tab, {
+                                    value: item.id,
+                                    label: item.label
+                                }, item.id))
+                        }))
+                    })
+                },
+                {
+                    size: {
+                        xs: 12,
+                        sm: 9
+                    },
+                    children: /*#__PURE__*/ _jsx(_Fragment, {
+                        children: tabs.map((item)=>/*#__PURE__*/ _jsx(TabPanel, {
+                                value: item.id,
+                                keepMounted: true,
+                                sx: {
+                                    padding: 'unset'
+                                },
+                                children: !lazy || item.id === tab || activated.has(item.id) ? item.content : null
+                            }, item.id))
+                    })
+                }
+            ]
+        })
+    });
+}
+HubTabs.displayName = 'HubTabs';
+export default HubTabs;
+/**
+ * The same rail, choosing a section by ROUTE rather than by panel (AGL-2501).
+ *
+ * ## Why this exists beside `HubTabs`
+ *
+ * `HubTabs` renders every panel and keeps them mounted — `keepMounted`, and
+ * `lazy` is off by default and passed by nobody. That is deliberate for a hub
+ * whose panels are cheap and want live subscriptions, and it is the wrong
+ * default for a settings page: opening "General" mounts the API-keys card, the
+ * SSO card and the data-export card, and every one of their reads runs.
+ *
+ * The code is the other half. A tabbed page imports every panel's module
+ * statically, so a reader who only renames their workspace still downloads the
+ * delete-org dialog.
+ *
+ * Sections as routes fix both at the framework level rather than by hand: Next
+ * mounts one page and code-splits per route, so an unopened section costs
+ * neither a read nor a byte. Three things come free that the tab version faked
+ * or did without — a section is linkable, the back button walks sections, and
+ * the active state is a fact about the URL rather than state kept in sync with
+ * it.
+ *
+ * ## Active state
+ *
+ * By PREFIX, so a section stays selected on its own deeper routes, longest
+ * match first so a nested section beats its parent. The separator boundary is
+ * what stops `/settings` claiming `/settings-export`.
+ */ /**
+ * The section the current URL is inside, or `null` when none matches.
+ *
+ * Exported because the RAIL is not the only thing that has to know. A hub's
+ * breadcrumb ends at the hub — "Site / Admin" — while the reader is looking at
+ * Plugins, so the trail names every level except the one they are on. Feeding
+ * both from one resolver is what stops the two disagreeing: a section added to
+ * the rail is in the breadcrumb by construction, rather than by somebody
+ * remembering a second list.
+ *
+ * Matching is by PREFIX so a section stays selected on its own deeper routes,
+ * longest match first so a nested section beats its parent, and on a separator
+ * boundary so `/settings` cannot claim `/settings-export`.
+ */ export function useActiveSection(sections) {
+    const pathname = usePathname();
+    return useMemo(()=>{
+        var _filter_sort_;
+        const onPath = (href)=>pathname === href || pathname.startsWith(`${href}/`);
+        return (_filter_sort_ = [
+            ...sections
+        ].filter((section)=>section.visible !== false && onPath(section.href)).sort((a, b)=>b.href.length - a.href.length)[0]) != null ? _filter_sort_ : null;
+    }, [
+        pathname,
+        sections
+    ]);
+}
+/**
+ * A locked section's label: its name, then a lock, as one inline run
+ * (AGL-2783).
+ *
+ * The lock lives inside the label rather than in `Tab`'s `icon` slot, because
+ * MUI lays out a tab that has an icon as a different row. A tab with both an
+ * icon and a label gets `MuiTab-labelIcon` — a 72px minimum height against a
+ * plain tab's 48px, with its own vertical padding — and an icon beside the
+ * label turns the tab from a column into a row, where the rail's
+ * `alignItems: 'start'` stops meaning left and starts meaning top. Drawn that
+ * way, a locked section is taller than its neighbors, centered in its row,
+ * and its label is pinned to the row's top edge. Inside the label, a locked
+ * tab is the same tab as an unlocked one: same classes, same height, same
+ * alignment, on the vertical rail and the stacked one alike.
+ *
+ * The lock is named through `titleAccess`, which gives the svg `role="img"`
+ * and a `<title>`, so its words reach the tab's accessible name (AGL-2794).
+ * An `aria-label` cannot: MUI's `SvgIcon` renders any icon without a title
+ * `aria-hidden`, and a label on a hidden element is never read, so the tab
+ * would announce itself exactly like a section the plan includes.
+ */ function LockedSectionLabel(props) {
+    return /*#__PURE__*/ _jsxs(Box, {
+        component: "span",
+        sx: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 1
+        },
+        children: [
+            props.label,
+            /*#__PURE__*/ _jsx(MdiIcon, {
+                path: mdiLockOutline.path,
+                titleAccess: "Not included in your plan"
+            })
+        ]
+    });
+}
+export function HubSections(props) {
+    var _ref;
+    var _useActiveSection;
+    const { sections, children, navHeader = 'Navigation' } = props;
+    const { tabsProps } = useRailLayout();
+    const shown = useMemo(()=>sections.filter((section)=>section.visible !== false), [
+        sections
+    ]);
+    const activeHref = (_ref = (_useActiveSection = useActiveSection(sections)) == null ? void 0 : _useActiveSection.href) != null ? _ref : null;
+    return /*#__PURE__*/ _jsx(GridItems, {
+        // The same navigation-beside-content split as above.
+        masonry: false,
+        spacing: 3,
+        items: [
+            {
+                size: {
+                    xs: 12,
+                    sm: 3
+                },
+                children: /*#__PURE__*/ _jsx(CardDisplay, {
+                    header: navHeader,
+                    children: /*#__PURE__*/ _jsx(Tabs, _extends({}, tabsProps, {
+                        value: activeHref != null ? activeHref : false,
+                        children: shown.map((section)=>/*#__PURE__*/ _jsx(Tab, {
+                                value: section.href,
+                                label: section.locked ? /*#__PURE__*/ _jsx(LockedSectionLabel, {
+                                    label: section.label
+                                }) : section.label,
+                                component: AppLink,
+                                href: section.href,
+                                "aria-current": section.href === activeHref ? 'page' : undefined
+                            }, section.href))
+                    }))
+                })
+            },
+            {
+                size: {
+                    xs: 12,
+                    sm: 9
+                },
+                children
+            }
+        ]
+    });
+}
+HubSections.displayName = 'HubSections';
+
+//# sourceMappingURL=hub-tabs.js.map

package/src/lib/components/hub-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/next/src/lib/components/hub-tabs.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport {\n  AppLink,\n  CardDisplay,\n  GridItems,\n  MdiIcon,\n  mdiLockOutline,\n} from '@aglyn/shared-ui-jsx'\nimport { TabContext, TabList, TabPanel } from '@mui/lab'\nimport { Box, Tab, Tabs, useMediaQuery, useTheme } from '@mui/material'\nimport { usePathname } from 'next/navigation'\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { useTabParam } from '../hooks/use-tab-param'\n\n/**\n * The rail's own shape, shared by BOTH modes below (AGL-2501).\n *\n * `HubTabs` and `HubSections` are two ways of choosing a section and one way\n * of DRAWING that choice. Duplicating the card, the orientation switch and the\n * tab `sx` is how they drift into looking like two different products, which\n * is exactly what happened the first time this rail was rebuilt by hand.\n */\nfunction useRailLayout() {\n  const theme = useTheme()\n  const stacked = useMediaQuery(theme.breakpoints.down('sm'))\n  return {\n    stacked,\n    /** Props every rail passes to its `Tabs`/`TabList`. */\n    tabsProps: {\n      orientation: stacked ? ('horizontal' as const) : ('vertical' as const),\n      variant: stacked ? ('scrollable' as const) : ('standard' as const),\n      allowScrollButtonsMobile: true,\n      textColor: 'primary' as const,\n      indicatorColor: 'primary' as const,\n      sx: {\n        ['.MuiTab-root']: {\n          alignItems: stacked ? 'center' : 'start',\n          maxWidth: 'unset',\n          textTransform: 'none',\n        },\n      },\n    },\n  }\n}\n\nexport interface HubTab {\n  id: string\n  label: string\n  content: ReactNode\n}\n\nexport interface HubTabsProps {\n  tabs: HubTab[]\n  /** Left nav card header (defaults to \"Navigation\"). */\n  navHeader?: string\n  /**\n   * Defer mounting a panel's content until its tab is first activated, then\n   * keep it mounted (AGL-785). Off by default so the standard behavior —\n   * every panel mounted up front, subscriptions always live — is unchanged.\n   * Opt in when the tabs host several data-heavy panels whose subscriptions\n   * would otherwise all settle at once on load: mounting only the active\n   * panel keeps that first-paint re-render burst small enough not to trip\n   * React's nested-update limit. Panels stay mounted once visited, so\n   * switching back is still instant.\n   */\n  lazy?: boolean\n}\n\n/**\n * Hub tab strip (AGL-354/382): the host-setup two-column pattern as a\n * shared component — a left \"Navigation\" CardDisplay with a vertical\n * TabList, content on the right. Collapses to horizontal tabs on small\n * screens. The active tab mirrors into the `?tab=` query param (shallow\n * replace) so hub views deep-link and survive back/forward; panels are\n * kept mounted so content and its data subscriptions are always present\n * (unless `lazy`, which defers un-visited panels — see the prop).\n */\nexport function HubTabs(props: HubTabsProps) {\n  const { tabs, navHeader = 'Navigation', lazy = false } = props\n  const { tabsProps } = useRailLayout()\n  /*\n   * The SHARED resolver, not a second reading of the same parameter\n   * (AGL-2486). This rail used to hold the incoming id in `useState`, which\n   * reads it once and then stops: back and forward are navigations between\n   * two states of one mounted page, and a link into another section of a page\n   * already open changes the parameter without remounting anything. Either\n   * one left the rail on the old tab while the URL named a different one.\n   *\n   * `ids` is the tabs that exist right now, so an id naming a tab this hub\n   * does not render falls back to the first rather than selecting a panel\n   * nothing draws — which matters because several hubs build their tab list\n   * from entitlements and render a different set per org.\n   */\n  const tabIds = useMemo(() => tabs.map((item) => item.id), [tabs])\n  const { tab, onTabChange } = useTabParam({ ids: tabIds })\n  // Which tabs have ever been active — the mount set when `lazy`. Seeded with\n  // the tab resolved for first paint so it (and only it) mounts.\n  const [activated, setActivated] = useState<Set<string>>(\n    () => new Set(tab ? [tab] : []),\n  )\n\n  const handleChange = useCallback(\n    (event: unknown, value: string) => {\n      setActivated((prev) => (prev.has(value) ? prev : new Set(prev).add(value)))\n      onTabChange(event, value)\n    },\n    [onTabChange],\n  )\n\n  /*\n   * A panel reached by URL rather than by click has to stay in the mount set\n   * too. `handleChange` is the only thing that grows the set, and it does not\n   * fire when back/forward or an in-app link moves the parameter — so without\n   * this, a `lazy` hub would drop such a panel again the moment the reader\n   * moved on, and every return to it would remount and re-subscribe.\n   *\n   * The panel itself does not wait for this effect: the render below mounts\n   * the ACTIVE tab unconditionally, so there is no frame in which the rail\n   * shows a selected tab over an empty panel.\n   */\n  useEffect(() => {\n    if (!lazy || !tab) return\n    setActivated((prev) => (prev.has(tab) ? prev : new Set(prev).add(tab)))\n  }, [lazy, tab])\n\n  return (\n    <TabContext value={tab}>\n      <GridItems\n        // A navigation column beside its content, not a set of cards.\n        masonry={false}\n        spacing={3}\n        items={[\n          {\n            size: { xs: 12, sm: 3 },\n            children: (\n              <CardDisplay header={navHeader}>\n                <TabList {...tabsProps} onChange={handleChange}>\n                  {tabs.map((item) => (\n                    <Tab key={item.id} value={item.id} label={item.label} />\n                  ))}\n                </TabList>\n              </CardDisplay>\n            ),\n          },\n          {\n            size: { xs: 12, sm: 9 },\n            children: (\n              <>\n                {tabs.map((item) => (\n                  <TabPanel\n                    key={item.id}\n                    value={item.id}\n                    keepMounted\n                    sx={{ padding: 'unset' }}\n                  >\n                    {!lazy || item.id === tab || activated.has(item.id)\n                      ? item.content\n                      : null}\n                  </TabPanel>\n                ))}\n              </>\n            ),\n          },\n        ]}\n      />\n    </TabContext>\n  )\n}\nHubTabs.displayName = 'HubTabs'\n\nexport default HubTabs\n\n\nexport interface HubSection {\n  /** Route this section lives at. What the rail links to. */\n  href: string\n  label: string\n  /** Hidden entirely when false — a release or a role gate. */\n  visible?: boolean\n  /**\n   * Shown and linked, with a lock — an entitlement the org's plan does not\n   * carry (AGL-2611). Not hidden, deliberately: the page behind the link is\n   * the shell's upgrade notice, which is the way to buy it, and a rail that\n   * hid the section would hide the reason to upgrade.\n   */\n  locked?: boolean\n}\n\nexport interface HubSectionsProps {\n  sections: readonly HubSection[]\n  /** The active section's page, rendered beside the rail. */\n  children: ReactNode\n  /** Left nav card header (defaults to \"Navigation\"). */\n  navHeader?: string\n}\n\n/**\n * The same rail, choosing a section by ROUTE rather than by panel (AGL-2501).\n *\n * ## Why this exists beside `HubTabs`\n *\n * `HubTabs` renders every panel and keeps them mounted — `keepMounted`, and\n * `lazy` is off by default and passed by nobody. That is deliberate for a hub\n * whose panels are cheap and want live subscriptions, and it is the wrong\n * default for a settings page: opening \"General\" mounts the API-keys card, the\n * SSO card and the data-export card, and every one of their reads runs.\n *\n * The code is the other half. A tabbed page imports every panel's module\n * statically, so a reader who only renames their workspace still downloads the\n * delete-org dialog.\n *\n * Sections as routes fix both at the framework level rather than by hand: Next\n * mounts one page and code-splits per route, so an unopened section costs\n * neither a read nor a byte. Three things come free that the tab version faked\n * or did without — a section is linkable, the back button walks sections, and\n * the active state is a fact about the URL rather than state kept in sync with\n * it.\n *\n * ## Active state\n *\n * By PREFIX, so a section stays selected on its own deeper routes, longest\n * match first so a nested section beats its parent. The separator boundary is\n * what stops `/settings` claiming `/settings-export`.\n */\n/**\n * The section the current URL is inside, or `null` when none matches.\n *\n * Exported because the RAIL is not the only thing that has to know. A hub's\n * breadcrumb ends at the hub — \"Site / Admin\" — while the reader is looking at\n * Plugins, so the trail names every level except the one they are on. Feeding\n * both from one resolver is what stops the two disagreeing: a section added to\n * the rail is in the breadcrumb by construction, rather than by somebody\n * remembering a second list.\n *\n * Matching is by PREFIX so a section stays selected on its own deeper routes,\n * longest match first so a nested section beats its parent, and on a separator\n * boundary so `/settings` cannot claim `/settings-export`.\n */\nexport function useActiveSection(\n  sections: readonly HubSection[],\n): HubSection | null {\n  const pathname = usePathname()\n  return useMemo(() => {\n    const onPath = (href: string) =>\n      pathname === href || pathname.startsWith(`${href}/`)\n    return (\n      [...sections]\n        .filter((section) => section.visible !== false && onPath(section.href))\n        .sort((a, b) => b.href.length - a.href.length)[0] ?? null\n    )\n  }, [pathname, sections])\n}\n\n/**\n * A locked section's label: its name, then a lock, as one inline run\n * (AGL-2783).\n *\n * The lock lives inside the label rather than in `Tab`'s `icon` slot, because\n * MUI lays out a tab that has an icon as a different row. A tab with both an\n * icon and a label gets `MuiTab-labelIcon` — a 72px minimum height against a\n * plain tab's 48px, with its own vertical padding — and an icon beside the\n * label turns the tab from a column into a row, where the rail's\n * `alignItems: 'start'` stops meaning left and starts meaning top. Drawn that\n * way, a locked section is taller than its neighbors, centered in its row,\n * and its label is pinned to the row's top edge. Inside the label, a locked\n * tab is the same tab as an unlocked one: same classes, same height, same\n * alignment, on the vertical rail and the stacked one alike.\n *\n * The lock is named through `titleAccess`, which gives the svg `role=\"img\"`\n * and a `<title>`, so its words reach the tab's accessible name (AGL-2794).\n * An `aria-label` cannot: MUI's `SvgIcon` renders any icon without a title\n * `aria-hidden`, and a label on a hidden element is never read, so the tab\n * would announce itself exactly like a section the plan includes.\n */\nfunction LockedSectionLabel(props: { label: string }) {\n  return (\n    <Box\n      component=\"span\"\n      sx={{ display: 'inline-flex', alignItems: 'center', gap: 1 }}\n    >\n      {props.label}\n      <MdiIcon\n        path={mdiLockOutline.path}\n        titleAccess=\"Not included in your plan\"\n      />\n    </Box>\n  )\n}\n\nexport function HubSections(props: HubSectionsProps) {\n  const { sections, children, navHeader = 'Navigation' } = props\n  const { tabsProps } = useRailLayout()\n  const shown = useMemo(\n    () => sections.filter((section) => section.visible !== false),\n    [sections],\n  )\n  const activeHref = useActiveSection(sections)?.href ?? null\n\n  return (\n    <GridItems\n      // The same navigation-beside-content split as above.\n      masonry={false}\n      spacing={3}\n      items={[\n        {\n          size: { xs: 12, sm: 3 },\n          children: (\n            <CardDisplay header={navHeader}>\n              {/*\n                * `Tabs`, not `TabList`: there is no `TabContext` here because\n                * there are no panels to bind to — the content is a routed\n                * page. `false` when nothing matches, because a `value` MUI\n                * cannot find warns on every render and parks the indicator on\n                * whichever tab happens to be first.\n                */}\n              <Tabs {...tabsProps} value={activeHref ?? false}>\n                {shown.map((section) => (\n                  <Tab\n                    key={section.href}\n                    value={section.href}\n                    label={\n                      section.locked ? (\n                        <LockedSectionLabel label={section.label} />\n                      ) : (\n                        section.label\n                      )\n                    }\n                    component={AppLink}\n                    href={section.href}\n                    aria-current={\n                      section.href === activeHref ? 'page' : undefined\n                    }\n                  />\n                ))}\n              </Tabs>\n            </CardDisplay>\n          ),\n        },\n        { size: { xs: 12, sm: 9 }, children },\n      ]}\n    />\n  )\n}\nHubSections.displayName = 'HubSections'\n"],"names":["AppLink","CardDisplay","GridItems","MdiIcon","mdiLockOutline","TabContext","TabList","TabPanel","Box","Tab","Tabs","useMediaQuery","useTheme","usePathname","useCallback","useEffect","useMemo","useState","useTabParam","useRailLayout","theme","stacked","breakpoints","down","tabsProps","orientation","variant","allowScrollButtonsMobile","textColor","indicatorColor","sx","alignItems","maxWidth","textTransform","HubTabs","props","tabs","navHeader","lazy","tabIds","map","item","id","tab","onTabChange","ids","activated","setActivated","Set","handleChange","event","value","prev","has","add","masonry","spacing","items","size","xs","sm","children","header","onChange","label","keepMounted","padding","content","displayName","useActiveSection","sections","pathname","onPath","href","startsWith","filter","section","visible","sort","a","b","length","LockedSectionLabel","component","display","gap","path","titleAccess","HubSections","shown","activeHref","locked","aria-current","undefined"],"mappings":"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"}

package/src/lib/components/image.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { ComponentProps } from 'react';
+interface NextEmotionImageProps extends ComponentProps<typeof NextEmotionImage> {
+}
+declare const NextEmotionImage: import("@emotion/styled").StyledComponent<Pick<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "loading" | "src" | "alt" | "srcSet"> & {
+    src: string | import("next/dist/shared/lib/get-img-props").StaticImport;
+    alt: string;
+    width?: number | `${number}`;
+    height?: number | `${number}`;
+    fill?: boolean;
+    loader?: import("next/image").ImageLoader;
+    quality?: number | `${number}`;
+    preload?: boolean;
+    priority?: boolean;
+    loading?: "eager" | "lazy" | undefined;
+    placeholder?: import("next/dist/shared/lib/get-img-props").PlaceholderValue;
+    blurDataURL?: string;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    onLoadingComplete?: import("next/dist/shared/lib/get-img-props").OnLoadingComplete;
+    layout?: string;
+    objectFit?: string;
+    objectPosition?: string;
+    lazyBoundary?: string;
+    lazyRoot?: string;
+} & import("react").RefAttributes<HTMLImageElement>, "onChange" | "fill" | "children" | "slot" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "tw" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture" | "height" | "objectFit" | "objectPosition" | "width" | "layout" | "referrerPolicy" | "loading" | "src" | "alt" | "crossOrigin" | "decoding" | "fetchPriority" | "sizes" | "useMap" | "loader" | "quality" | "preload" | "priority" | "placeholder" | "blurDataURL" | "unoptimized" | "overrideSrc" | "onLoadingComplete" | "lazyBoundary" | "lazyRoot" | keyof import("react").RefAttributes<HTMLImageElement>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref" | "height" | "width" | "loading" | "src" | "alt" | "srcSet"> & {
+    src: string | import("next/dist/shared/lib/get-img-props").StaticImport;
+    alt: string;
+    width?: number | `${number}`;
+    height?: number | `${number}`;
+    fill?: boolean;
+    loader?: import("next/image").ImageLoader;
+    quality?: number | `${number}`;
+    preload?: boolean;
+    priority?: boolean;
+    loading?: "lazy" | "eager";
+    placeholder?: import("next/dist/shared/lib/get-img-props").PlaceholderValue;
+    blurDataURL?: string;
+    unoptimized?: boolean;
+    overrideSrc?: string;
+    onLoadingComplete?: import("next/dist/shared/lib/get-img-props").OnLoadingComplete;
+    layout?: string;
+    objectFit?: string;
+    objectPosition?: string;
+    lazyBoundary?: string;
+    lazyRoot?: string;
+}, {}, {}>;
+interface ShimmerProps {
+    width?: number | string;
+    height?: number | string;
+}
+export interface ImageProps extends NextEmotionImageProps {
+    disableShimmer?: boolean;
+}
+export declare function Image(props: ImageProps): JSX.Element;
+export declare namespace Image {
+    var shimmerToBase64: (shimmer?: string) => string;
+    var shimmer: (props: ShimmerProps) => string;
+    var displayName: string;
+    var aglyn: boolean;
+}
+export default Image;

package/src/lib/components/image.js

@@ -0,0 +1,75 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { styled } from "@aglyn/shared-ui-theme";
+import { base64IsomorphicEncode } from "@aglyn/shared-util-tools";
+import NextImageRaw from "next/image";
+import { useMemo } from "react";
+const NextEmotionImage = styled(NextImageRaw, {
+    name: 'NextEmotionImage'
+})({});
+function shimmer(props) {
+    const { width: w, height: h } = props;
+    return `<svg width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="g">
+      <stop stop-color="#333" offset="20%" />
+      <stop stop-color="#222" offset="50%" />
+      <stop stop-color="#333" offset="70%" />
+    </linearGradient>
+  </defs>
+  <rect width="${w}" height="${h}" fill="#333" />
+  <rect id="r" width="${w}" height="${h}" fill="url(#g)" />
+  <animate xlink:href="#r" attributeName="x" from="-${w}" to="${w}" dur="1s" repeatCount="indefinite"  />
+</svg>`;
+}
+function shimmerToBase64(shimmer) {
+    return `data:image/svg+xml;base64,${base64IsomorphicEncode(shimmer)}`;
+}
+export function Image(props) {
+    const { width = 100, height = 100, disableShimmer = false, placeholder = 'blur' } = props, rest = _object_without_properties_loose(props, [
+        "width",
+        "height",
+        "disableShimmer",
+        "placeholder"
+    ]);
+    const blurDataURL = useMemo(()=>{
+        if (disableShimmer) return undefined;
+        return Image.shimmerToBase64(Image.shimmer({
+            width,
+            height
+        }));
+    }, [
+        disableShimmer,
+        width,
+        height
+    ]);
+    return /*#__PURE__*/ _jsx(NextEmotionImage, _extends({
+        width: width,
+        height: height,
+        blurDataURL: blurDataURL,
+        placeholder: placeholder
+    }, rest));
+}
+Image.shimmerToBase64 = shimmerToBase64;
+Image.shimmer = shimmer;
+Image.displayName = 'Image';
+Image.aglyn = true;
+export default Image;
+
+//# sourceMappingURL=image.js.map

package/src/lib/components/image.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/next/src/lib/components/image.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { styled } from '@aglyn/shared-ui-theme'\nimport { base64IsomorphicEncode } from '@aglyn/shared-util-tools'\nimport NextImageRaw, { type ImageProps as NextImageProps } from 'next/image'\nimport type { ComponentProps } from 'react'\nimport { useMemo } from 'react'\n\ninterface NextEmotionImageProps\n  extends ComponentProps<typeof NextEmotionImage> {}\n\nconst NextEmotionImage = styled(NextImageRaw, {\n  name: 'NextEmotionImage',\n})<NextImageProps>({})\n\ninterface ShimmerProps {\n  width?: number | string\n  height?: number | string\n}\n\nfunction shimmer(props: ShimmerProps) {\n  const { width: w, height: h } = props\n  return `<svg width=\"${w}\" height=\"${h}\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n  <defs>\n    <linearGradient id=\"g\">\n      <stop stop-color=\"#333\" offset=\"20%\" />\n      <stop stop-color=\"#222\" offset=\"50%\" />\n      <stop stop-color=\"#333\" offset=\"70%\" />\n    </linearGradient>\n  </defs>\n  <rect width=\"${w}\" height=\"${h}\" fill=\"#333\" />\n  <rect id=\"r\" width=\"${w}\" height=\"${h}\" fill=\"url(#g)\" />\n  <animate xlink:href=\"#r\" attributeName=\"x\" from=\"-${w}\" to=\"${w}\" dur=\"1s\" repeatCount=\"indefinite\"  />\n</svg>`\n}\n\nfunction shimmerToBase64(shimmer?: string) {\n  return `data:image/svg+xml;base64,${base64IsomorphicEncode(shimmer)}`\n}\n\nexport interface ImageProps extends NextEmotionImageProps {\n  disableShimmer?: boolean\n}\n\nexport function Image(props: ImageProps): JSX.Element {\n  const {\n    width = 100,\n    height = 100,\n    disableShimmer = false,\n    placeholder = 'blur',\n    ...rest\n  } = props\n\n  const blurDataURL = useMemo(() => {\n    if (disableShimmer) return undefined\n    return Image.shimmerToBase64(Image.shimmer({ width, height }))\n  }, [disableShimmer, width, height])\n\n  return (\n    <NextEmotionImage\n      width={width}\n      height={height}\n      blurDataURL={blurDataURL}\n      placeholder={placeholder}\n      {...rest}\n    />\n  )\n}\nImage.shimmerToBase64 = shimmerToBase64\nImage.shimmer = shimmer\nImage.displayName = 'Image'\nImage.aglyn = true\n\nexport default Image\n"],"names":["styled","base64IsomorphicEncode","NextImageRaw","useMemo","NextEmotionImage","name","shimmer","props","width","w","height","h","shimmerToBase64","Image","disableShimmer","placeholder","rest","blurDataURL","undefined","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,MAAM,QAAQ,yBAAwB;AAC/C,SAASC,sBAAsB,QAAQ,2BAA0B;AACjE,OAAOC,kBAAyD,aAAY;AAE5E,SAASC,OAAO,QAAQ,QAAO;AAK/B,MAAMC,mBAAmBJ,OAAOE,cAAc;IAC5CG,MAAM;AACR,GAAmB,CAAC;AAOpB,SAASC,QAAQC,KAAmB;IAClC,MAAM,EAAEC,OAAOC,CAAC,EAAEC,QAAQC,CAAC,EAAE,GAAGJ;IAChC,OAAO,CAAC,YAAY,EAAEE,EAAE,UAAU,EAAEE,EAAE;;;;;;;;eAQzB,EAAEF,EAAE,UAAU,EAAEE,EAAE;sBACX,EAAEF,EAAE,UAAU,EAAEE,EAAE;oDACY,EAAEF,EAAE,MAAM,EAAEA,EAAE;MAC5D,CAAC;AACP;AAEA,SAASG,gBAAgBN,OAAgB;IACvC,OAAO,CAAC,0BAA0B,EAAEL,uBAAuBK,UAAU;AACvE;AAMA,OAAO,SAASO,MAAMN,KAAiB;IACrC,MAAM,EACJC,QAAQ,GAAG,EACXE,SAAS,GAAG,EACZI,iBAAiB,KAAK,EACtBC,cAAc,MAAM,EAErB,GAAGR,OADCS,wCACDT;;;;;;IAEJ,MAAMU,cAAcd,QAAQ;QAC1B,IAAIW,gBAAgB,OAAOI;QAC3B,OAAOL,MAAMD,eAAe,CAACC,MAAMP,OAAO,CAAC;YAAEE;YAAOE;QAAO;IAC7D,GAAG;QAACI;QAAgBN;QAAOE;KAAO;IAElC,qBACE,KAACN;QACCI,OAAOA;QACPE,QAAQA;QACRO,aAAaA;QACbF,aAAaA;OACTC;AAGV;AACAH,MAAMD,eAAe,GAAGA;AACxBC,MAAMP,OAAO,GAAGA;AAChBO,MAAMM,WAAW,GAAG;AACpBN,MAAMO,KAAK,GAAG;AAEd,eAAeP,MAAK"}

package/src/lib/components/page-decorated.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { NextPage } from 'next';
+import type { AppProps as NextAppProps } from 'next/app';
+type AnyProps = Partial<Record<string, unknown>>;
+type EmptyObj = Partial<Record<never, unknown>>;
+export interface NextPageGetLayoutFn {
+    (page: JSX.Element, props: NextAppWithLayoutProps): JSX.Element;
+}
+export interface NextPageLayoutObject<P = EmptyObj> {
+    Component: JSX.ElementType<P>;
+    props?: P;
+}
+export interface NextPageMemberLayout {
+    layouts?: NextPageLayoutObject<any>[];
+    layout?: NextPageGetLayoutFn;
+}
+export type NextPageWithLayout<Props = AnyProps, InitialProps = Props> = NextPage<Props, InitialProps> & NextPageMemberLayout;
+export interface NextAppWithLayoutProps<Props = AnyProps, InitialProps = Props> extends NextAppProps<Props> {
+    Component: NextPageWithLayout<Props, InitialProps>;
+}
+export interface PageDecoratedProps<Props, InitialProps> extends NextAppWithLayoutProps<Props, InitialProps> {
+}
+/**
+ * Decorate next page with defined layout
+ * Uses the layout defined at the page level, if available
+ */
+export declare function PageDecorated<Props, InitialProps>(props: PageDecoratedProps<Props, InitialProps>): JSX.Element;
+export declare namespace PageDecorated {
+    var displayName: string;
+}
+export default PageDecorated;

package/src/lib/components/page-decorated.js

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+function GetLayout(page, initialProps) {
+    return page;
+}
+function getNextPageLayout(props) {
+    const { Component } = props;
+    const { layout, layouts } = Component;
+    if (layout) return layout;
+    if (Array.isArray(layouts)) {
+        return layouts.reduce((page, layout)=>{
+            const { Component, props } = layout;
+            return (innerPage, initialProps)=>{
+                return page(/*#__PURE__*/ _jsx(Component, _extends({}, props, {
+                    children: innerPage
+                })), initialProps);
+            };
+        }, GetLayout);
+    }
+    return GetLayout;
+}
+/**
+ * Decorate next page with defined layout
+ * Uses the layout defined at the page level, if available
+ */ export function PageDecorated(props) {
+    const Component = props.Component;
+    return getNextPageLayout(props)(/*#__PURE__*/ _jsx(Component, _extends({}, props.pageProps)), props);
+}
+PageDecorated.displayName = 'PageDecorated';
+export default PageDecorated;
+
+//# sourceMappingURL=page-decorated.js.map

package/src/lib/components/page-decorated.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/next/src/lib/components/page-decorated.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { NextPage } from 'next'\nimport type { AppProps as NextAppProps } from 'next/app'\n\ntype AnyProps = Partial<Record<string, unknown>>\ntype EmptyObj = Partial<Record<never, unknown>>\n\nexport interface NextPageGetLayoutFn {\n  (page: JSX.Element, props: NextAppWithLayoutProps): JSX.Element\n}\n\nexport interface NextPageLayoutObject<P = EmptyObj> {\n  Component: JSX.ElementType<P>\n  props?: P\n}\n\nexport interface NextPageMemberLayout {\n  layouts?: NextPageLayoutObject<any>[]\n  layout?: NextPageGetLayoutFn\n}\n\nexport type NextPageWithLayout<\n  Props = AnyProps,\n  InitialProps = Props,\n> = NextPage<Props, InitialProps> & NextPageMemberLayout\n\nexport interface NextAppWithLayoutProps<Props = AnyProps, InitialProps = Props>\n  extends NextAppProps<Props> {\n  Component: NextPageWithLayout<Props, InitialProps>\n}\n\nfunction GetLayout(page: JSX.Element, initialProps?: NextAppWithLayoutProps) {\n  return page\n}\n\nfunction getNextPageLayout<Props, InitialProps>(\n  props: NextAppWithLayoutProps<Props, InitialProps>,\n): NextPageGetLayoutFn {\n  const { Component } = props\n  const { layout, layouts } = Component\n\n  if (layout) return layout\n\n  if (Array.isArray(layouts)) {\n    return layouts.reduce((page, layout) => {\n      const { Component, props } = layout\n      return (innerPage, initialProps) => {\n        return page(<Component {...props} children={innerPage} />, initialProps)\n      }\n    }, GetLayout)\n  }\n\n  return GetLayout\n}\n\nexport interface PageDecoratedProps<Props, InitialProps>\n  extends NextAppWithLayoutProps<Props, InitialProps> {}\n\n/**\n * Decorate next page with defined layout\n * Uses the layout defined at the page level, if available\n */\nexport function PageDecorated<Props, InitialProps>(\n  props: PageDecoratedProps<Props, InitialProps>,\n) {\n  const Component = props.Component\n  return getNextPageLayout(props)(<Component {...props.pageProps} />, props as NextAppWithLayoutProps)\n}\n\nPageDecorated.displayName = 'PageDecorated'\nexport default PageDecorated\n"],"names":["GetLayout","page","initialProps","getNextPageLayout","props","Component","layout","layouts","Array","isArray","reduce","innerPage","children","PageDecorated","pageProps","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC;;AAgCD,SAASA,UAAUC,IAAiB,EAAEC,YAAqC;IACzE,OAAOD;AACT;AAEA,SAASE,kBACPC,KAAkD;IAElD,MAAM,EAAEC,SAAS,EAAE,GAAGD;IACtB,MAAM,EAAEE,MAAM,EAAEC,OAAO,EAAE,GAAGF;IAE5B,IAAIC,QAAQ,OAAOA;IAEnB,IAAIE,MAAMC,OAAO,CAACF,UAAU;QAC1B,OAAOA,QAAQG,MAAM,CAAC,CAACT,MAAMK;YAC3B,MAAM,EAAED,SAAS,EAAED,KAAK,EAAE,GAAGE;YAC7B,OAAO,CAACK,WAAWT;gBACjB,OAAOD,mBAAK,KAACI,wBAAcD;oBAAOQ,UAAUD;qBAAeT;YAC7D;QACF,GAAGF;IACL;IAEA,OAAOA;AACT;AAKA;;;CAGC,GACD,OAAO,SAASa,cACdT,KAA8C;IAE9C,MAAMC,YAAYD,MAAMC,SAAS;IACjC,OAAOF,kBAAkBC,qBAAO,KAACC,wBAAcD,MAAMU,SAAS,IAAMV;AACtE;AAEAS,cAAcE,WAAW,GAAG;AAC5B,eAAeF,cAAa"}