@cratis/scene.blueprint.default 0.1.0

package/dist/cjs/themes/LayoutThemeProvider.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var scene_react = require('@cratis/scene.react');
+var LayoutConfigProvider = require('../configuration/LayoutConfigProvider.js');
+var defaultBlueprintThemes = require('./defaultBlueprintThemes.js');
+
+/**
+ * Applies whichever theme the shell's configuration currently names.
+ *
+ * This is the seam between the configurator and `SceneThemeProvider`: the configurator only ever records
+ * a name, and this resolves that name against the theme set a host offers. Keeping the shell's state
+ * free of the theme object itself is what lets a host swap in an entirely different theme set - its own
+ * brand palettes - without the configurator or any shell component changing.
+ *
+ * Switching is live re-resolution, not a reload: `SceneThemeProvider` writes the new tokens onto the same
+ * element, so nothing below it remounts and no state is lost.
+ */ function LayoutThemeProvider({ themes = defaultBlueprintThemes.defaultBlueprintThemes, children, className }) {
+    const { config } = LayoutConfigProvider.useLayoutConfig();
+    const theme = react.useMemo(()=>themes.find((candidate)=>candidate.name === config.themeName) ?? themes[0], [
+        themes,
+        config.themeName
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(scene_react.SceneThemeProvider, {
+        theme: theme,
+        className: className,
+        children: children
+    });
+}
+
+exports.LayoutThemeProvider = LayoutThemeProvider;
+//# sourceMappingURL=LayoutThemeProvider.js.map

package/dist/cjs/themes/LayoutThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutThemeProvider.js","sources":["../../../themes/LayoutThemeProvider.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, useMemo } from 'react';\nimport { Theme } from '@cratis/scene.model';\nimport { SceneThemeProvider } from '@cratis/scene.react';\nimport { useLayoutConfig } from '../configuration';\nimport { defaultBlueprintThemes } from './defaultBlueprintThemes';\n\nexport interface LayoutThemeProviderProps {\n    /** The themes to choose between. Defaults to the two this package ships. */\n    themes?: Theme[];\n\n    /** The shell the chosen theme applies to. */\n    children?: ReactNode;\n\n    /** A class name for the element the tokens land on. */\n    className?: string;\n}\n\n/**\n * Applies whichever theme the shell's configuration currently names.\n *\n * This is the seam between the configurator and `SceneThemeProvider`: the configurator only ever records\n * a name, and this resolves that name against the theme set a host offers. Keeping the shell's state\n * free of the theme object itself is what lets a host swap in an entirely different theme set - its own\n * brand palettes - without the configurator or any shell component changing.\n *\n * Switching is live re-resolution, not a reload: `SceneThemeProvider` writes the new tokens onto the same\n * element, so nothing below it remounts and no state is lost.\n */\nexport function LayoutThemeProvider({ themes = defaultBlueprintThemes, children, className }: LayoutThemeProviderProps) {\n    const { config } = useLayoutConfig();\n    const theme = useMemo(() => themes.find(candidate => candidate.name === config.themeName) ?? themes[0], [themes, config.themeName]);\n\n    return (\n        <SceneThemeProvider theme={theme} className={className}>\n            {children}\n        </SceneThemeProvider>\n    );\n}\n"],"names":["LayoutThemeProvider","themes","defaultBlueprintThemes","children","className","config","useLayoutConfig","theme","useMemo","find","candidate","name","themeName","_jsx","SceneThemeProvider"],"mappings":";;;;;;;;AAoBA;;;;;;;;;;IAWO,SAASA,mBAAAA,CAAoB,EAAEC,MAAAA,GAASC,6CAAsB,EAAEC,QAAQ,EAAEC,SAAS,EAA4B,EAAA;IAClH,MAAM,EAAEC,MAAM,EAAE,GAAGC,oCAAAA,EAAAA;AACnB,IAAA,MAAMC,QAAQC,aAAAA,CAAQ,IAAMP,MAAAA,CAAOQ,IAAI,CAACC,CAAAA,SAAAA,GAAaA,SAAAA,CAAUC,IAAI,KAAKN,MAAAA,CAAOO,SAAS,KAAKX,MAAM,CAAC,EAAE,EAAE;AAACA,QAAAA,MAAAA;AAAQI,QAAAA,MAAAA,CAAOO;AAAU,KAAA,CAAA;AAElI,IAAA,qBACIC,cAAA,CAACC,8BAAAA,EAAAA;QAAmBP,KAAAA,EAAOA,KAAAA;QAAOH,SAAAA,EAAWA,SAAAA;AACxCD,QAAAA,QAAAA,EAAAA;;AAGb;;;;"}

package/dist/cjs/themes/blueprintThemeCompatibility.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var packageName = require('../packageName.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The packages this blueprint's themes declare compatibility with.
+ *
+ * `core` is on the list on purpose. `incompatiblePackages` has no implicit exemption for it - a theme
+ * that omits it is reported incompatible for `core` with every profile that lists it, which is every
+ * profile, since `core` is the fallback vocabulary. The exemption was left out of the engine deliberately
+ * so that "compatible with everything active" has to be stated rather than assumed, and a theme shipped by
+ * a blueprint is exactly where stating it matters.
+ *
+ * The rest is the stack the shell is actually built on: this blueprint's own components, the PrimeReact
+ * primitives it uses, the Cratis Components library its screen templates draw from, and the styling
+ * package those are written against.
+ */ const blueprintThemeCompatibility = [
+    'core',
+    packageName.defaultBlueprintName,
+    'PrimeReact',
+    'Cratis.Components',
+    'Tailwind'
+];
+
+exports.blueprintThemeCompatibility = blueprintThemeCompatibility;
+//# sourceMappingURL=blueprintThemeCompatibility.js.map

package/dist/cjs/themes/blueprintThemeCompatibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"blueprintThemeCompatibility.js","sources":["../../../themes/blueprintThemeCompatibility.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { defaultBlueprintName } from '../packageName';\n\n/**\n * The packages this blueprint's themes declare compatibility with.\n *\n * `core` is on the list on purpose. `incompatiblePackages` has no implicit exemption for it - a theme\n * that omits it is reported incompatible for `core` with every profile that lists it, which is every\n * profile, since `core` is the fallback vocabulary. The exemption was left out of the engine deliberately\n * so that \"compatible with everything active\" has to be stated rather than assumed, and a theme shipped by\n * a blueprint is exactly where stating it matters.\n *\n * The rest is the stack the shell is actually built on: this blueprint's own components, the PrimeReact\n * primitives it uses, the Cratis Components library its screen templates draw from, and the styling\n * package those are written against.\n */\nexport const blueprintThemeCompatibility: string[] = ['core', defaultBlueprintName, 'PrimeReact', 'Cratis.Components', 'Tailwind'];\n"],"names":["blueprintThemeCompatibility","defaultBlueprintName"],"mappings":";;;;AAAA;AACA;AAIA;;;;;;;;;;;;UAaaA,2BAAAA,GAAwC;AAAC,IAAA,MAAA;AAAQC,IAAAA,gCAAAA;AAAsB,IAAA,YAAA;AAAc,IAAA,mBAAA;AAAqB,IAAA;;;;;"}

package/dist/cjs/themes/dark.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var blueprintThemeCompatibility = require('./blueprintThemeCompatibility.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The dark theme the shell ships with.
+ *
+ * Deliberately the same ten token names as the light theme and nothing more. A dark theme that introduced
+ * extra tokens would work only for the parts of the shell written after it existed - the token set is the
+ * contract, and both themes filling it identically is what makes switching between them a swap rather than
+ * a re-render with holes in it.
+ */ const darkTheme = {
+    name: 'Scene Default Dark',
+    compatibleWith: blueprintThemeCompatibility.blueprintThemeCompatibility,
+    isDark: true,
+    author: 'Cratis',
+    authorUrl: 'https://cratis.io',
+    license: 'MIT',
+    description: 'The default dark palette: a deep slate ramp with a lifted indigo accent.',
+    tokens: {
+        'primary.color': '#818cf8',
+        'primary.contrastColor': '#10131f',
+        'surface.background': '#0f1117',
+        'surface.card': '#171a23',
+        'surface.border': '#262a36',
+        'surface.hover': '#1f2431',
+        'surface.overlay': '#1c2030',
+        'text.color': '#e6e8ef',
+        'text.mutedColor': '#9aa1b1',
+        'highlight.background': '#232a45',
+        'highlight.color': '#c7ccff',
+        'content.borderRadius': '0.5rem',
+        'focus.ring': '0 0 0 2px rgb(129 140 248 / 0.45)'
+    }
+};
+
+exports.darkTheme = darkTheme;
+//# sourceMappingURL=dark.js.map

package/dist/cjs/themes/dark.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dark.js","sources":["../../../themes/dark.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Theme } from '@cratis/scene.model';\nimport { blueprintThemeCompatibility } from './blueprintThemeCompatibility';\n\n/**\n * The dark theme the shell ships with.\n *\n * Deliberately the same ten token names as the light theme and nothing more. A dark theme that introduced\n * extra tokens would work only for the parts of the shell written after it existed - the token set is the\n * contract, and both themes filling it identically is what makes switching between them a swap rather than\n * a re-render with holes in it.\n */\nexport const darkTheme: Theme = {\n    name: 'Scene Default Dark',\n    compatibleWith: blueprintThemeCompatibility,\n    isDark: true,\n    author: 'Cratis',\n    authorUrl: 'https://cratis.io',\n    license: 'MIT',\n    description: 'The default dark palette: a deep slate ramp with a lifted indigo accent.',\n    tokens: {\n        'primary.color': '#818cf8',\n        'primary.contrastColor': '#10131f',\n        'surface.background': '#0f1117',\n        'surface.card': '#171a23',\n        'surface.border': '#262a36',\n        'surface.hover': '#1f2431',\n        'surface.overlay': '#1c2030',\n        'text.color': '#e6e8ef',\n        'text.mutedColor': '#9aa1b1',\n        'highlight.background': '#232a45',\n        'highlight.color': '#c7ccff',\n        'content.borderRadius': '0.5rem',\n        'focus.ring': '0 0 0 2px rgb(129 140 248 / 0.45)',\n    },\n};\n"],"names":["darkTheme","name","compatibleWith","blueprintThemeCompatibility","isDark","author","authorUrl","license","description","tokens"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;UAQaA,SAAAA,GAAmB;IAC5BC,IAAAA,EAAM,oBAAA;IACNC,cAAAA,EAAgBC,uDAAAA;IAChBC,MAAAA,EAAQ,IAAA;IACRC,MAAAA,EAAQ,QAAA;IACRC,SAAAA,EAAW,mBAAA;IACXC,OAAAA,EAAS,KAAA;IACTC,WAAAA,EAAa,0EAAA;IACbC,MAAAA,EAAQ;QACJ,eAAA,EAAiB,SAAA;QACjB,uBAAA,EAAyB,SAAA;QACzB,oBAAA,EAAsB,SAAA;QACtB,cAAA,EAAgB,SAAA;QAChB,gBAAA,EAAkB,SAAA;QAClB,eAAA,EAAiB,SAAA;QACjB,iBAAA,EAAmB,SAAA;QACnB,YAAA,EAAc,SAAA;QACd,iBAAA,EAAmB,SAAA;QACnB,sBAAA,EAAwB,SAAA;QACxB,iBAAA,EAAmB,SAAA;QACnB,sBAAA,EAAwB,QAAA;QACxB,YAAA,EAAc;AAClB;AACJ;;;;"}

package/dist/cjs/themes/defaultBlueprintThemes.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var dark = require('./dark.js');
+var light = require('./light.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The themes this blueprint ships, in the order a picker should offer them.
+ *
+ * The list is what the manifest's `themes` names and what the bundle provides, so it is the one place the
+ * two can be kept in step - `validatePackageBundle` proves they are.
+ */ const defaultBlueprintThemes = [
+    light.lightTheme,
+    dark.darkTheme
+];
+
+exports.defaultBlueprintThemes = defaultBlueprintThemes;
+//# sourceMappingURL=defaultBlueprintThemes.js.map

package/dist/cjs/themes/defaultBlueprintThemes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultBlueprintThemes.js","sources":["../../../themes/defaultBlueprintThemes.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Theme } from '@cratis/scene.model';\nimport { darkTheme } from './dark';\nimport { lightTheme } from './light';\n\n/**\n * The themes this blueprint ships, in the order a picker should offer them.\n *\n * The list is what the manifest's `themes` names and what the bundle provides, so it is the one place the\n * two can be kept in step - `validatePackageBundle` proves they are.\n */\nexport const defaultBlueprintThemes: Theme[] = [lightTheme, darkTheme];\n"],"names":["defaultBlueprintThemes","lightTheme","darkTheme"],"mappings":";;;;;AAAA;AACA;AAMA;;;;;UAMaA,sBAAAA,GAAkC;AAACC,IAAAA,gBAAAA;AAAYC,IAAAA;;;;;"}

package/dist/cjs/themes/light.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var blueprintThemeCompatibility = require('./blueprintThemeCompatibility.js');
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The light theme the shell ships with.
+ *
+ * The palette is original to Cratis - a neutral grey ramp with an indigo accent - rather than adopted from
+ * any existing preset, which is why `author` says so rather than being left blank. A theme with empty
+ * attribution reads as "nobody has checked", and once a palette is lifted from somewhere else without its
+ * credit, nobody can tell afterwards which of the two it was.
+ *
+ * The token set is the shell's whole styling contract: every rule in `layout.css` resolves back to one of
+ * these ten names. A theme that defines them defines the entire shell.
+ */ const lightTheme = {
+    name: 'Scene Default Light',
+    compatibleWith: blueprintThemeCompatibility.blueprintThemeCompatibility,
+    isDark: false,
+    author: 'Cratis',
+    authorUrl: 'https://cratis.io',
+    license: 'MIT',
+    description: 'The default light palette: a neutral grey ramp with an indigo accent.',
+    tokens: {
+        'primary.color': '#4f46e5',
+        'primary.contrastColor': '#ffffff',
+        'surface.background': '#f4f5f7',
+        'surface.card': '#ffffff',
+        'surface.border': '#e2e5e9',
+        'surface.hover': '#eceef1',
+        'surface.overlay': '#ffffff',
+        'text.color': '#1f2430',
+        'text.mutedColor': '#6b7280',
+        'highlight.background': '#eef2ff',
+        'highlight.color': '#3730a3',
+        'content.borderRadius': '0.5rem',
+        'focus.ring': '0 0 0 2px rgb(79 70 229 / 0.4)'
+    }
+};
+
+exports.lightTheme = lightTheme;
+//# sourceMappingURL=light.js.map

package/dist/cjs/themes/light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"light.js","sources":["../../../themes/light.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { Theme } from '@cratis/scene.model';\nimport { blueprintThemeCompatibility } from './blueprintThemeCompatibility';\n\n/**\n * The light theme the shell ships with.\n *\n * The palette is original to Cratis - a neutral grey ramp with an indigo accent - rather than adopted from\n * any existing preset, which is why `author` says so rather than being left blank. A theme with empty\n * attribution reads as \"nobody has checked\", and once a palette is lifted from somewhere else without its\n * credit, nobody can tell afterwards which of the two it was.\n *\n * The token set is the shell's whole styling contract: every rule in `layout.css` resolves back to one of\n * these ten names. A theme that defines them defines the entire shell.\n */\nexport const lightTheme: Theme = {\n    name: 'Scene Default Light',\n    compatibleWith: blueprintThemeCompatibility,\n    isDark: false,\n    author: 'Cratis',\n    authorUrl: 'https://cratis.io',\n    license: 'MIT',\n    description: 'The default light palette: a neutral grey ramp with an indigo accent.',\n    tokens: {\n        'primary.color': '#4f46e5',\n        'primary.contrastColor': '#ffffff',\n        'surface.background': '#f4f5f7',\n        'surface.card': '#ffffff',\n        'surface.border': '#e2e5e9',\n        'surface.hover': '#eceef1',\n        'surface.overlay': '#ffffff',\n        'text.color': '#1f2430',\n        'text.mutedColor': '#6b7280',\n        'highlight.background': '#eef2ff',\n        'highlight.color': '#3730a3',\n        'content.borderRadius': '0.5rem',\n        'focus.ring': '0 0 0 2px rgb(79 70 229 / 0.4)',\n    },\n};\n"],"names":["lightTheme","name","compatibleWith","blueprintThemeCompatibility","isDark","author","authorUrl","license","description","tokens"],"mappings":";;;;AAAA;AACA;AAKA;;;;;;;;;;UAWaA,UAAAA,GAAoB;IAC7BC,IAAAA,EAAM,qBAAA;IACNC,cAAAA,EAAgBC,uDAAAA;IAChBC,MAAAA,EAAQ,KAAA;IACRC,MAAAA,EAAQ,QAAA;IACRC,SAAAA,EAAW,mBAAA;IACXC,OAAAA,EAAS,KAAA;IACTC,WAAAA,EAAa,uEAAA;IACbC,MAAAA,EAAQ;QACJ,eAAA,EAAiB,SAAA;QACjB,uBAAA,EAAyB,SAAA;QACzB,oBAAA,EAAsB,SAAA;QACtB,cAAA,EAAgB,SAAA;QAChB,gBAAA,EAAkB,SAAA;QAClB,eAAA,EAAiB,SAAA;QACjB,iBAAA,EAAmB,SAAA;QACnB,YAAA,EAAc,SAAA;QACd,iBAAA,EAAmB,SAAA;QACnB,sBAAA,EAAwB,SAAA;QACxB,iBAAA,EAAmB,SAAA;QACnB,sBAAA,EAAwB,QAAA;QACxB,YAAA,EAAc;AAClB;AACJ;;;;"}

package/dist/esm/ComponentName.d.ts

@@ -0,0 +1,19 @@
+export declare enum ComponentName {
+    AppShell = "appShell",
+    FullPageShell = "fullPageShell",
+    Topbar = "topbar",
+    Sidebar = "sidebar",
+    Menu = "menu",
+    MenuItem = "menuItem",
+    Breadcrumb = "breadcrumb",
+    Footer = "footer",
+    RightPanel = "rightPanel",
+    ConfigPanel = "configPanel",
+    PageHeader = "pageHeader",
+    Mask = "mask",
+    Logo = "logo",
+    UserMenu = "userMenu",
+    ThemeSwitcher = "themeSwitcher",
+    LayoutModeSwitcher = "layoutModeSwitcher"
+}
+//# sourceMappingURL=ComponentName.d.ts.map

package/dist/esm/ComponentName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentName.d.ts","sourceRoot":"","sources":["../../ComponentName.ts"],"names":[],"mappings":"AAWA,oBAAY,aAAa;IAErB,QAAQ,aAAa;IAGrB,aAAa,kBAAkB;IAG/B,MAAM,WAAW;IAGjB,OAAO,YAAY;IAGnB,IAAI,SAAS;IAGb,QAAQ,aAAa;IAGrB,UAAU,eAAe;IAGzB,MAAM,WAAW;IAGjB,UAAU,eAAe;IAGzB,WAAW,gBAAgB;IAG3B,UAAU,eAAe;IAGzB,IAAI,SAAS;IAGb,IAAI,SAAS;IAGb,QAAQ,aAAa;IAGrB,aAAa,kBAAkB;IAG/B,kBAAkB,uBAAuB;CAC5C"}

package/dist/esm/ComponentName.js

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The bare names this package declares components under.
+ *
+ * A page template writes a bare name and `resolveComponentName` decides which active package wins it, so
+ * these names are public API: renaming one breaks every template that referenced it, in this package and
+ * in anyone else's. Keeping them in one enum means the manifest, the registry and every template
+ * reference the same symbol, and the specs can prove all three agree rather than hoping they do.
+ */ var ComponentName = /*#__PURE__*/ function(ComponentName) {
+    /** The application shell - topbar, sidebar, breadcrumb, content, footer and an optional right panel. */ ComponentName["AppShell"] = "appShell";
+    /** The chrome-less shell - content, an optional branding aside, and the configurator. */ ComponentName["FullPageShell"] = "fullPageShell";
+    /** The fixed strip across the top of the application shell. */ ComponentName["Topbar"] = "topbar";
+    /** The sidebar's own chrome, inside the shell-positioned panel. */ ComponentName["Sidebar"] = "sidebar";
+    /** A navigation list. */ ComponentName["Menu"] = "menu";
+    /** One entry in a navigation list, optionally with a submenu. */ ComponentName["MenuItem"] = "menuItem";
+    /** The trail above the content. */ ComponentName["Breadcrumb"] = "breadcrumb";
+    /** The strip below the content. */ ComponentName["Footer"] = "footer";
+    /** The inspector panel down the right-hand edge. */ ComponentName["RightPanel"] = "rightPanel";
+    /** The floating configurator: color scheme, layout mode, menu theme and theme. */ ComponentName["ConfigPanel"] = "configPanel";
+    /** A screen's title, subtitle and actions. */ ComponentName["PageHeader"] = "pageHeader";
+    /** The scrim behind a floating sidebar, which also closes it. */ ComponentName["Mask"] = "mask";
+    /** The brand mark. */ ComponentName["Logo"] = "logo";
+    /** The signed-in user's avatar and menu. */ ComponentName["UserMenu"] = "userMenu";
+    /** Switches between the themes a host offers. */ ComponentName["ThemeSwitcher"] = "themeSwitcher";
+    /** Switches between the layout modes. */ ComponentName["LayoutModeSwitcher"] = "layoutModeSwitcher";
+    return ComponentName;
+}({});
+
+export { ComponentName };
+//# sourceMappingURL=ComponentName.js.map

package/dist/esm/ComponentName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentName.js","sources":["../../ComponentName.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * The bare names this package declares components under.\n *\n * A page template writes a bare name and `resolveComponentName` decides which active package wins it, so\n * these names are public API: renaming one breaks every template that referenced it, in this package and\n * in anyone else's. Keeping them in one enum means the manifest, the registry and every template\n * reference the same symbol, and the specs can prove all three agree rather than hoping they do.\n */\nexport enum ComponentName {\n    /** The application shell - topbar, sidebar, breadcrumb, content, footer and an optional right panel. */\n    AppShell = 'appShell',\n\n    /** The chrome-less shell - content, an optional branding aside, and the configurator. */\n    FullPageShell = 'fullPageShell',\n\n    /** The fixed strip across the top of the application shell. */\n    Topbar = 'topbar',\n\n    /** The sidebar's own chrome, inside the shell-positioned panel. */\n    Sidebar = 'sidebar',\n\n    /** A navigation list. */\n    Menu = 'menu',\n\n    /** One entry in a navigation list, optionally with a submenu. */\n    MenuItem = 'menuItem',\n\n    /** The trail above the content. */\n    Breadcrumb = 'breadcrumb',\n\n    /** The strip below the content. */\n    Footer = 'footer',\n\n    /** The inspector panel down the right-hand edge. */\n    RightPanel = 'rightPanel',\n\n    /** The floating configurator: color scheme, layout mode, menu theme and theme. */\n    ConfigPanel = 'configPanel',\n\n    /** A screen's title, subtitle and actions. */\n    PageHeader = 'pageHeader',\n\n    /** The scrim behind a floating sidebar, which also closes it. */\n    Mask = 'mask',\n\n    /** The brand mark. */\n    Logo = 'logo',\n\n    /** The signed-in user's avatar and menu. */\n    UserMenu = 'userMenu',\n\n    /** Switches between the themes a host offers. */\n    ThemeSwitcher = 'themeSwitcher',\n\n    /** Switches between the layout modes. */\n    LayoutModeSwitcher = 'layoutModeSwitcher',\n}\n"],"names":["ComponentName"],"mappings":"AAAA;AACA;AAEA;;;;;;;IAQO,IAAKA,aAAAA,iBAAAA,SAAAA,aAAAA,EAAAA;6GAC8F,aAAA,CAAA,UAAA,CAAA,GAAA,UAAA;8FAGf,aAAA,CAAA,eAAA,CAAA,GAAA,eAAA;oEAG1B,aAAA,CAAA,QAAA,CAAA,GAAA,QAAA;wEAGI,aAAA,CAAA,SAAA,CAAA,GAAA,SAAA;8BAG1C,aAAA,CAAA,MAAA,CAAA,GAAA,MAAA;sEAGwC,aAAA,CAAA,UAAA,CAAA,GAAA,UAAA;wCAG9B,aAAA,CAAA,YAAA,CAAA,GAAA,YAAA;wCAGA,aAAA,CAAA,QAAA,CAAA,GAAA,QAAA;yDAGiB,aAAA,CAAA,YAAA,CAAA,GAAA,YAAA;uFAG8B,aAAA,CAAA,aAAA,CAAA,GAAA,aAAA;mDAGpC,aAAA,CAAA,YAAA,CAAA,GAAA,YAAA;sEAGmB,aAAA,CAAA,MAAA,CAAA,GAAA,MAAA;2BAG3C,aAAA,CAAA,MAAA,CAAA,GAAA,MAAA;iDAGsB,aAAA,CAAA,UAAA,CAAA,GAAA,UAAA;sDAGK,aAAA,CAAA,eAAA,CAAA,GAAA,eAAA;8CAGR,aAAA,CAAA,oBAAA,CAAA,GAAA,oBAAA;AA9C/BA,IAAAA,OAAAA,aAAAA;AAgDX,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/configuration/ColorScheme.d.ts

@@ -0,0 +1,6 @@
+export declare enum ColorScheme {
+    Light = "light",
+    Dark = "dark"
+}
+export declare const colorSchemes: ColorScheme[];
+//# sourceMappingURL=ColorScheme.d.ts.map

package/dist/esm/configuration/ColorScheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.d.ts","sourceRoot":"","sources":["../../../configuration/ColorScheme.ts"],"names":[],"mappings":"AAUA,oBAAY,WAAW;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAGD,eAAO,MAAM,YAAY,EAAE,WAAW,EAA0C,CAAC"}

package/dist/esm/configuration/ColorScheme.js

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The light/dark axis of the configurator.
+ *
+ * The shell never paints a color for a scheme itself - it only records which one is chosen, so the host
+ * can hand {@link SceneThemeProvider} a matching {@link Theme}. Keeping the choice and the palette apart
+ * is what lets a third-party theme participate in the same switch as the two this package ships.
+ */ var ColorScheme = /*#__PURE__*/ function(ColorScheme) {
+    ColorScheme["Light"] = "light";
+    ColorScheme["Dark"] = "dark";
+    return ColorScheme;
+}({});
+/** Every {@link ColorScheme}, in the order a configurator should offer them. */ const colorSchemes = [
+    "light",
+    "dark"
+];
+
+export { ColorScheme, colorSchemes };
+//# sourceMappingURL=ColorScheme.js.map

package/dist/esm/configuration/ColorScheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorScheme.js","sources":["../../../configuration/ColorScheme.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * The light/dark axis of the configurator.\n *\n * The shell never paints a color for a scheme itself - it only records which one is chosen, so the host\n * can hand {@link SceneThemeProvider} a matching {@link Theme}. Keeping the choice and the palette apart\n * is what lets a third-party theme participate in the same switch as the two this package ships.\n */\nexport enum ColorScheme {\n    Light = 'light',\n    Dark = 'dark',\n}\n\n/** Every {@link ColorScheme}, in the order a configurator should offer them. */\nexport const colorSchemes: ColorScheme[] = [ColorScheme.Light, ColorScheme.Dark];\n"],"names":["ColorScheme","colorSchemes"],"mappings":"AAAA;AACA;AAEA;;;;;;IAOO,IAAKA,WAAAA,iBAAAA,SAAAA,WAAAA,EAAAA;;;AAAAA,IAAAA,OAAAA,WAAAA;AAGX,CAAA,CAAA,EAAA;AAED,iFACO,MAAMC,YAAAA,GAA8B;;;;;;;"}

package/dist/esm/configuration/LayoutConfigProvider.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { ColorScheme } from './ColorScheme';
+import { LayoutConfigState } from './LayoutConfigState';
+import { LayoutMode } from './LayoutMode';
+import { MenuTheme } from './MenuTheme';
+export interface LayoutConfigContextValue {
+    config: LayoutConfigState;
+    effectiveMode: LayoutMode;
+    wrapperClasses: string[];
+    isMaskVisible: boolean;
+    setMode(mode: LayoutMode): void;
+    setMenuTheme(menuTheme: MenuTheme): void;
+    setColorScheme(colorScheme: ColorScheme): void;
+    setThemeName(themeName: string): void;
+    setSidebarOpen(isOpen: boolean): void;
+    toggleSidebar(): void;
+    setSidebarRevealed(isRevealed: boolean): void;
+    toggleSidebarAnchor(): void;
+}
+export interface LayoutConfigProviderProps {
+    initialConfig?: Partial<LayoutConfigState>;
+    storage?: Storage | null;
+    viewportWidth?: number;
+    children?: ReactNode;
+}
+export declare function LayoutConfigProvider({ initialConfig, storage, viewportWidth, children }: LayoutConfigProviderProps): import("react").JSX.Element;
+export declare function useOptionalLayoutConfig(): LayoutConfigContextValue | undefined;
+export declare function useLayoutConfig(): LayoutConfigContextValue;
+//# sourceMappingURL=LayoutConfigProvider.d.ts.map

package/dist/esm/configuration/LayoutConfigProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutConfigProvider.d.ts","sourceRoot":"","sources":["../../../configuration/LayoutConfigProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA2D,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AA0BxC,MAAM,WAAW,wBAAwB;IAErC,MAAM,EAAE,iBAAiB,CAAC;IAG1B,aAAa,EAAE,UAAU,CAAC;IAG1B,cAAc,EAAE,MAAM,EAAE,CAAC;IAGzB,aAAa,EAAE,OAAO,CAAC;IAGvB,OAAO,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC;IAGhC,YAAY,CAAC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAGzC,cAAc,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,CAAC;IAG/C,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAGtC,cAAc,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAC;IAGtC,aAAa,IAAI,IAAI,CAAC;IAGtB,kBAAkB,CAAC,UAAU,EAAE,OAAO,GAAG,IAAI,CAAC;IAG9C,mBAAmB,IAAI,IAAI,CAAC;CAC/B;AAID,MAAM,WAAW,yBAAyB;IAEtC,aAAa,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAM3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAQzB,aAAa,CAAC,EAAE,MAAM,CAAC;IAGvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AAUD,wBAAgB,oBAAoB,CAAC,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,yBAAyB,+BAiDlH;AASD,wBAAgB,uBAAuB,IAAI,wBAAwB,GAAG,SAAS,CAE9E;AAOD,wBAAgB,eAAe,IAAI,wBAAwB,CAO1D"}

package/dist/esm/configuration/LayoutConfigProvider.js

@@ -0,0 +1,92 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useMemo, useState, useEffect, createContext } from 'react';
+import { readPersistedLayoutConfig, persistLayoutConfig } from './layoutConfigStorage.js';
+import { isLayoutMaskVisible, layoutWrapperClasses } from './layoutWrapperClasses.js';
+import { withMobile, mobileMediaQuery, toggleSidebarAnchor, withSidebarRevealed, toggleSidebar, withSidebarOpen, withThemeName, withColorScheme, withMenuTheme, withMode, effectiveLayoutMode, isMobileWidth } from './layoutConfigTransitions.js';
+
+const LayoutConfigContext = /*#__PURE__*/ createContext(undefined);
+/**
+ * Owns the shell's configuration and keeps it in step with the viewport and with `localStorage`.
+ *
+ * One provider rather than state per shell component is what makes the modes work at all: the topbar's
+ * toggle, the sidebar's pin, the mask's click-to-close and the configurator's mode picker are four
+ * different components acting on one machine. It is also what makes a chosen mode survive a reload, which
+ * is the whole reason a mode picker is worth having.
+ */ function LayoutConfigProvider({ initialConfig, storage, viewportWidth, children }) {
+    const resolvedStorage = useMemo(()=>storage !== undefined ? storage ?? undefined : defaultStorage(), [
+        storage
+    ]);
+    const [config, setConfig] = useState(()=>({
+            ...readPersistedLayoutConfig(resolvedStorage),
+            ...initialConfig
+        }));
+    useEffect(()=>{
+        persistLayoutConfig(config, resolvedStorage);
+    }, [
+        config,
+        resolvedStorage
+    ]);
+    const isReportedMobile = viewportWidth === undefined ? undefined : isMobileWidth(viewportWidth);
+    useEffect(()=>{
+        if (isReportedMobile !== undefined) {
+            setConfig((current)=>withMobile(current, isReportedMobile));
+            return;
+        }
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+            return;
+        }
+        const query = window.matchMedia(mobileMediaQuery);
+        setConfig((current)=>withMobile(current, query.matches));
+        const listener = (event)=>setConfig((current)=>withMobile(current, event.matches));
+        query.addEventListener('change', listener);
+        return ()=>query.removeEventListener('change', listener);
+    }, [
+        isReportedMobile
+    ]);
+    const value = useMemo(()=>({
+            config,
+            effectiveMode: effectiveLayoutMode(config),
+            wrapperClasses: layoutWrapperClasses(config),
+            isMaskVisible: isLayoutMaskVisible(config),
+            setMode: (mode)=>setConfig((current)=>withMode(current, mode)),
+            setMenuTheme: (menuTheme)=>setConfig((current)=>withMenuTheme(current, menuTheme)),
+            setColorScheme: (colorScheme)=>setConfig((current)=>withColorScheme(current, colorScheme)),
+            setThemeName: (themeName)=>setConfig((current)=>withThemeName(current, themeName)),
+            setSidebarOpen: (isOpen)=>setConfig((current)=>withSidebarOpen(current, isOpen)),
+            toggleSidebar: ()=>setConfig(toggleSidebar),
+            setSidebarRevealed: (isRevealed)=>setConfig((current)=>withSidebarRevealed(current, isRevealed)),
+            toggleSidebarAnchor: ()=>setConfig(toggleSidebarAnchor)
+        }), [
+        config
+    ]);
+    return /*#__PURE__*/ jsx(LayoutConfigContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+/**
+ * The shell configuration, or `undefined` when there is no {@link LayoutConfigProvider} above.
+ *
+ * This is what lets the shell components put a provider around themselves when a host has not - a gallery
+ * preview drops a single `appShell` element into a renderer with no wrapper of its own, and it still has
+ * to work.
+ */ function useOptionalLayoutConfig() {
+    return useContext(LayoutConfigContext);
+}
+/**
+ * The shell configuration. Throws when there is no {@link LayoutConfigProvider} above, because every
+ * alternative - a silent default, a no-op setter - produces a shell whose buttons do nothing and says
+ * nothing about why.
+ */ function useLayoutConfig() {
+    const value = useOptionalLayoutConfig();
+    if (!value) {
+        throw new Error('useLayoutConfig() requires a <LayoutConfigProvider> above it.');
+    }
+    return value;
+}
+function defaultStorage() {
+    return typeof window !== 'undefined' ? window.localStorage : undefined;
+}
+
+export { LayoutConfigProvider, useLayoutConfig, useOptionalLayoutConfig };
+//# sourceMappingURL=LayoutConfigProvider.js.map

package/dist/esm/configuration/LayoutConfigProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutConfigProvider.js","sources":["../../../configuration/LayoutConfigProvider.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createContext, useContext, useEffect, useMemo, useState } from 'react';\nimport { ColorScheme } from './ColorScheme';\nimport { LayoutConfigState } from './LayoutConfigState';\nimport { LayoutMode } from './LayoutMode';\nimport { MenuTheme } from './MenuTheme';\nimport { persistLayoutConfig, readPersistedLayoutConfig } from './layoutConfigStorage';\nimport { isLayoutMaskVisible, layoutWrapperClasses } from './layoutWrapperClasses';\nimport {\n    effectiveLayoutMode,\n    isMobileWidth,\n    mobileMediaQuery,\n    toggleSidebar,\n    toggleSidebarAnchor,\n    withColorScheme,\n    withMenuTheme,\n    withMobile,\n    withMode,\n    withSidebarOpen,\n    withSidebarRevealed,\n    withThemeName,\n} from './layoutConfigTransitions';\n\n/**\n * What {@link useLayoutConfig} hands a shell component: the current state, the values every part of the\n * shell derives from it, and one function per transition.\n *\n * The derived values live here rather than being recomputed per component so that the topbar, the\n * sidebar and the mask cannot end up disagreeing about which mode is in force - the exact class of bug a\n * shell with per-component state produces.\n */\nexport interface LayoutConfigContextValue {\n    /** The current state. */\n    config: LayoutConfigState;\n\n    /** The mode actually in force, with the mobile override applied. */\n    effectiveMode: LayoutMode;\n\n    /** The classes for the shell's wrapper element. */\n    wrapperClasses: string[];\n\n    /** Whether the scrim behind a floating sidebar should be showing. */\n    isMaskVisible: boolean;\n\n    /** Chooses a different mode. Below the mobile breakpoint the choice is still recorded, but the shell keeps rendering off-canvas. */\n    setMode(mode: LayoutMode): void;\n\n    /** Chooses how the sidebar surface is tinted. */\n    setMenuTheme(menuTheme: MenuTheme): void;\n\n    /** Chooses the light/dark axis. */\n    setColorScheme(colorScheme: ColorScheme): void;\n\n    /** Records which theme is applied. */\n    setThemeName(themeName: string): void;\n\n    /** Opens or closes the sidebar. */\n    setSidebarOpen(isOpen: boolean): void;\n\n    /** Flips the sidebar between open and closed. */\n    toggleSidebar(): void;\n\n    /** Holds a `reveal`/`drawer` sidebar out, or lets it fall back. */\n    setSidebarRevealed(isRevealed: boolean): void;\n\n    /** Pins or unpins a `reveal`/`drawer` sidebar. */\n    toggleSidebarAnchor(): void;\n}\n\nconst LayoutConfigContext = createContext<LayoutConfigContextValue | undefined>(undefined);\n\nexport interface LayoutConfigProviderProps {\n    /** Values to start from, overriding both the defaults and anything persisted - a story or a spec pinning a mode. */\n    initialConfig?: Partial<LayoutConfigState>;\n\n    /**\n     * Where preferences are read from and written to. Defaults to `window.localStorage` when there is a\n     * window; pass a fake in a spec, or `null` to opt out of persistence entirely.\n     */\n    storage?: Storage | null;\n\n    /**\n     * The width the shell should consider its viewport, for a host that renders it into a sized element\n     * rather than the window - Studio's preview surface, where the device frame is a few hundred pixels\n     * wide while the real window is a desktop one. When given, this replaces the `matchMedia` listener\n     * entirely rather than competing with it.\n     */\n    viewportWidth?: number;\n\n    /** The shell this configuration applies to. */\n    children?: ReactNode;\n}\n\n/**\n * Owns the shell's configuration and keeps it in step with the viewport and with `localStorage`.\n *\n * One provider rather than state per shell component is what makes the modes work at all: the topbar's\n * toggle, the sidebar's pin, the mask's click-to-close and the configurator's mode picker are four\n * different components acting on one machine. It is also what makes a chosen mode survive a reload, which\n * is the whole reason a mode picker is worth having.\n */\nexport function LayoutConfigProvider({ initialConfig, storage, viewportWidth, children }: LayoutConfigProviderProps) {\n    const resolvedStorage = useMemo(() => (storage !== undefined ? storage ?? undefined : defaultStorage()), [storage]);\n    const [config, setConfig] = useState<LayoutConfigState>(() => ({\n        ...readPersistedLayoutConfig(resolvedStorage),\n        ...initialConfig,\n    }));\n\n    useEffect(() => {\n        persistLayoutConfig(config, resolvedStorage);\n    }, [config, resolvedStorage]);\n\n    const isReportedMobile = viewportWidth === undefined ? undefined : isMobileWidth(viewportWidth);\n    useEffect(() => {\n        if (isReportedMobile !== undefined) {\n            setConfig(current => withMobile(current, isReportedMobile));\n            return;\n        }\n\n        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {\n            return;\n        }\n\n        const query = window.matchMedia(mobileMediaQuery);\n        setConfig(current => withMobile(current, query.matches));\n\n        const listener = (event: MediaQueryListEvent) => setConfig(current => withMobile(current, event.matches));\n        query.addEventListener('change', listener);\n        return () => query.removeEventListener('change', listener);\n    }, [isReportedMobile]);\n\n    const value = useMemo<LayoutConfigContextValue>(\n        () => ({\n            config,\n            effectiveMode: effectiveLayoutMode(config),\n            wrapperClasses: layoutWrapperClasses(config),\n            isMaskVisible: isLayoutMaskVisible(config),\n            setMode: mode => setConfig(current => withMode(current, mode)),\n            setMenuTheme: menuTheme => setConfig(current => withMenuTheme(current, menuTheme)),\n            setColorScheme: colorScheme => setConfig(current => withColorScheme(current, colorScheme)),\n            setThemeName: themeName => setConfig(current => withThemeName(current, themeName)),\n            setSidebarOpen: isOpen => setConfig(current => withSidebarOpen(current, isOpen)),\n            toggleSidebar: () => setConfig(toggleSidebar),\n            setSidebarRevealed: isRevealed => setConfig(current => withSidebarRevealed(current, isRevealed)),\n            toggleSidebarAnchor: () => setConfig(toggleSidebarAnchor),\n        }),\n        [config],\n    );\n\n    return <LayoutConfigContext.Provider value={value}>{children}</LayoutConfigContext.Provider>;\n}\n\n/**\n * The shell configuration, or `undefined` when there is no {@link LayoutConfigProvider} above.\n *\n * This is what lets the shell components put a provider around themselves when a host has not - a gallery\n * preview drops a single `appShell` element into a renderer with no wrapper of its own, and it still has\n * to work.\n */\nexport function useOptionalLayoutConfig(): LayoutConfigContextValue | undefined {\n    return useContext(LayoutConfigContext);\n}\n\n/**\n * The shell configuration. Throws when there is no {@link LayoutConfigProvider} above, because every\n * alternative - a silent default, a no-op setter - produces a shell whose buttons do nothing and says\n * nothing about why.\n */\nexport function useLayoutConfig(): LayoutConfigContextValue {\n    const value = useOptionalLayoutConfig();\n    if (!value) {\n        throw new Error('useLayoutConfig() requires a <LayoutConfigProvider> above it.');\n    }\n\n    return value;\n}\n\nfunction defaultStorage(): Storage | undefined {\n    return typeof window !== 'undefined' ? window.localStorage : undefined;\n}\n"],"names":["LayoutConfigContext","createContext","undefined","LayoutConfigProvider","initialConfig","storage","viewportWidth","children","resolvedStorage","useMemo","defaultStorage","config","setConfig","useState","readPersistedLayoutConfig","useEffect","persistLayoutConfig","isReportedMobile","isMobileWidth","current","withMobile","window","matchMedia","query","mobileMediaQuery","matches","listener","event","addEventListener","removeEventListener","value","effectiveMode","effectiveLayoutMode","wrapperClasses","layoutWrapperClasses","isMaskVisible","isLayoutMaskVisible","setMode","mode","withMode","setMenuTheme","menuTheme","withMenuTheme","setColorScheme","colorScheme","withColorScheme","setThemeName","themeName","withThemeName","setSidebarOpen","isOpen","withSidebarOpen","toggleSidebar","setSidebarRevealed","isRevealed","withSidebarRevealed","toggleSidebarAnchor","_jsx","Provider","useOptionalLayoutConfig","useContext","useLayoutConfig","Error","localStorage"],"mappings":"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"}

package/dist/esm/configuration/LayoutConfigState.d.ts

@@ -0,0 +1,14 @@
+import { ColorScheme } from './ColorScheme';
+import { LayoutMode } from './LayoutMode';
+import { MenuTheme } from './MenuTheme';
+export interface LayoutConfigState {
+    mode: LayoutMode;
+    menuTheme: MenuTheme;
+    colorScheme: ColorScheme;
+    themeName: string;
+    isSidebarOpen: boolean;
+    isSidebarAnchored: boolean;
+    isSidebarRevealed: boolean;
+    isMobile: boolean;
+}
+//# sourceMappingURL=LayoutConfigState.d.ts.map

package/dist/esm/configuration/LayoutConfigState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutConfigState.d.ts","sourceRoot":"","sources":["../../../configuration/LayoutConfigState.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAYxC,MAAM,WAAW,iBAAiB;IAE9B,IAAI,EAAE,UAAU,CAAC;IAGjB,SAAS,EAAE,SAAS,CAAC;IAGrB,WAAW,EAAE,WAAW,CAAC;IAGzB,SAAS,EAAE,MAAM,CAAC;IAOlB,aAAa,EAAE,OAAO,CAAC;IAGvB,iBAAiB,EAAE,OAAO,CAAC;IAG3B,iBAAiB,EAAE,OAAO,CAAC;IAG3B,QAAQ,EAAE,OAAO,CAAC;CACrB"}

package/dist/esm/configuration/LayoutConfigState.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LayoutConfigState.js.map

package/dist/esm/configuration/LayoutConfigState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutConfigState.js","sourceRoot":"","sources":["../../../configuration/LayoutConfigState.ts"],"names":[],"mappings":""}

package/dist/esm/configuration/LayoutMode.d.ts

@@ -0,0 +1,12 @@
+export declare enum LayoutMode {
+    Static = "static",
+    Overlay = "overlay",
+    Slim = "slim",
+    SlimPlus = "slim-plus",
+    Compact = "compact",
+    Horizontal = "horizontal",
+    Reveal = "reveal",
+    Drawer = "drawer"
+}
+export declare const layoutModes: LayoutMode[];
+//# sourceMappingURL=LayoutMode.d.ts.map

package/dist/esm/configuration/LayoutMode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMode.d.ts","sourceRoot":"","sources":["../../../configuration/LayoutMode.ts"],"names":[],"mappings":"AAaA,oBAAY,UAAU;IAElB,MAAM,WAAW;IAGjB,OAAO,YAAY;IAGnB,IAAI,SAAS;IAGb,QAAQ,cAAc;IAGtB,OAAO,YAAY;IAGnB,UAAU,eAAe;IAGzB,MAAM,WAAW;IAGjB,MAAM,WAAW;CACpB;AAGD,eAAO,MAAM,WAAW,EAAE,UAAU,EASnC,CAAC"}

package/dist/esm/configuration/LayoutMode.js

@@ -0,0 +1,35 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * How the application shell arranges its sidebar against its content.
+ *
+ * The vocabulary - and the `layout-<mode>` wrapper class each value maps to - is deliberately the one
+ * PrimeTek's template line has used unchanged across Sakai, Diamond, Atlantis, Freya, Apollo, Ultima,
+ * Avalon and Verona. Anyone who has themed a PrimeReact application recognizes it, and a shell that
+ * invents its own names forces them to learn a second one for no gain.
+ *
+ * Every value here is user-selectable. Mobile deliberately is not - see {@link effectiveLayoutMode}.
+ */ var LayoutMode = /*#__PURE__*/ function(LayoutMode) {
+    /** Sidebar permanently docked; content is pushed by a matching margin, never covered. */ LayoutMode["Static"] = "static";
+    /** Sidebar parked off-canvas; opening floats it over the content behind a mask. */ LayoutMode["Overlay"] = "overlay";
+    /** Icon-only rail with circular buttons; submenus pop out as a floating panel. */ LayoutMode["Slim"] = "slim";
+    /** Wider rail with each icon's label stacked directly beneath it. */ LayoutMode["SlimPlus"] = "slim-plus";
+    /** The icon-only rail again, with square buttons, and the topbar shifted by the rail width. */ LayoutMode["Compact"] = "compact";
+    /** Sidebar flows into the topbar strip as a horizontal row; submenus drop down. */ LayoutMode["Horizontal"] = "horizontal";
+    /** Full panel translated off-left leaving a strip of icons; hovering slides it in over the content. */ LayoutMode["Reveal"] = "reveal";
+    /** Collapsed rail that animates its width to full on hover - it grows where reveal slides. */ LayoutMode["Drawer"] = "drawer";
+    return LayoutMode;
+}({});
+/** Every {@link LayoutMode}, in the order a configurator should offer them. */ const layoutModes = [
+    "static",
+    "overlay",
+    "slim",
+    "slim-plus",
+    "compact",
+    "horizontal",
+    "reveal",
+    "drawer"
+];
+
+export { LayoutMode, layoutModes };
+//# sourceMappingURL=LayoutMode.js.map

package/dist/esm/configuration/LayoutMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutMode.js","sources":["../../../configuration/LayoutMode.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * How the application shell arranges its sidebar against its content.\n *\n * The vocabulary - and the `layout-<mode>` wrapper class each value maps to - is deliberately the one\n * PrimeTek's template line has used unchanged across Sakai, Diamond, Atlantis, Freya, Apollo, Ultima,\n * Avalon and Verona. Anyone who has themed a PrimeReact application recognizes it, and a shell that\n * invents its own names forces them to learn a second one for no gain.\n *\n * Every value here is user-selectable. Mobile deliberately is not - see {@link effectiveLayoutMode}.\n */\nexport enum LayoutMode {\n    /** Sidebar permanently docked; content is pushed by a matching margin, never covered. */\n    Static = 'static',\n\n    /** Sidebar parked off-canvas; opening floats it over the content behind a mask. */\n    Overlay = 'overlay',\n\n    /** Icon-only rail with circular buttons; submenus pop out as a floating panel. */\n    Slim = 'slim',\n\n    /** Wider rail with each icon's label stacked directly beneath it. */\n    SlimPlus = 'slim-plus',\n\n    /** The icon-only rail again, with square buttons, and the topbar shifted by the rail width. */\n    Compact = 'compact',\n\n    /** Sidebar flows into the topbar strip as a horizontal row; submenus drop down. */\n    Horizontal = 'horizontal',\n\n    /** Full panel translated off-left leaving a strip of icons; hovering slides it in over the content. */\n    Reveal = 'reveal',\n\n    /** Collapsed rail that animates its width to full on hover - it grows where reveal slides. */\n    Drawer = 'drawer',\n}\n\n/** Every {@link LayoutMode}, in the order a configurator should offer them. */\nexport const layoutModes: LayoutMode[] = [\n    LayoutMode.Static,\n    LayoutMode.Overlay,\n    LayoutMode.Slim,\n    LayoutMode.SlimPlus,\n    LayoutMode.Compact,\n    LayoutMode.Horizontal,\n    LayoutMode.Reveal,\n    LayoutMode.Drawer,\n];\n"],"names":["LayoutMode","layoutModes"],"mappings":"AAAA;AACA;AAEA;;;;;;;;;IAUO,IAAKA,UAAAA,iBAAAA,SAAAA,UAAAA,EAAAA;8FAC+E,UAAA,CAAA,QAAA,CAAA,GAAA,QAAA;wFAGN,UAAA,CAAA,SAAA,CAAA,GAAA,SAAA;uFAGD,UAAA,CAAA,MAAA,CAAA,GAAA,MAAA;0EAGb,UAAA,CAAA,UAAA,CAAA,GAAA,WAAA;oGAG0B,UAAA,CAAA,SAAA,CAAA,GAAA,SAAA;wFAGZ,UAAA,CAAA,YAAA,CAAA,GAAA,YAAA;4GAGoB,UAAA,CAAA,QAAA,CAAA,GAAA,QAAA;mGAGT,UAAA,CAAA,QAAA,CAAA,GAAA,QAAA;AAtBpFA,IAAAA,OAAAA,UAAAA;AAwBX,CAAA,CAAA,EAAA;AAED,gFACO,MAAMC,WAAAA,GAA4B;;;;;;;;;;;;;"}

package/dist/esm/configuration/MenuTheme.d.ts

@@ -0,0 +1,7 @@
+export declare enum MenuTheme {
+    Light = "light",
+    Dark = "dark",
+    Primary = "primary"
+}
+export declare const menuThemes: MenuTheme[];
+//# sourceMappingURL=MenuTheme.d.ts.map

package/dist/esm/configuration/MenuTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTheme.d.ts","sourceRoot":"","sources":["../../../configuration/MenuTheme.ts"],"names":[],"mappings":"AAWA,oBAAY,SAAS;IAEjB,KAAK,UAAU;IAGf,IAAI,SAAS;IAGb,OAAO,YAAY;CACtB;AAGD,eAAO,MAAM,UAAU,EAAE,SAAS,EAAyD,CAAC"}

package/dist/esm/configuration/MenuTheme.js

@@ -0,0 +1,23 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * How the sidebar surface is tinted, independently of the overall {@link ColorScheme}.
+ *
+ * A dark sidebar against a light page is the single most common brand customization in the PrimeTek
+ * template line, which is why menu theme is its own configurator axis rather than something implied by
+ * the color scheme. The shell resolves each value from the active theme's tokens, so a menu theme never
+ * introduces a color of its own.
+ */ var MenuTheme = /*#__PURE__*/ function(MenuTheme) {
+    /** The sidebar uses the theme's ordinary card surface. */ MenuTheme["Light"] = "light";
+    /** The sidebar uses an inverted surface, regardless of the page's color scheme. */ MenuTheme["Dark"] = "dark";
+    /** The sidebar uses the theme's primary color as its surface. */ MenuTheme["Primary"] = "primary";
+    return MenuTheme;
+}({});
+/** Every {@link MenuTheme}, in the order a configurator should offer them. */ const menuThemes = [
+    "light",
+    "dark",
+    "primary"
+];
+
+export { MenuTheme, menuThemes };
+//# sourceMappingURL=MenuTheme.js.map

package/dist/esm/configuration/MenuTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuTheme.js","sources":["../../../configuration/MenuTheme.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\n/**\n * How the sidebar surface is tinted, independently of the overall {@link ColorScheme}.\n *\n * A dark sidebar against a light page is the single most common brand customization in the PrimeTek\n * template line, which is why menu theme is its own configurator axis rather than something implied by\n * the color scheme. The shell resolves each value from the active theme's tokens, so a menu theme never\n * introduces a color of its own.\n */\nexport enum MenuTheme {\n    /** The sidebar uses the theme's ordinary card surface. */\n    Light = 'light',\n\n    /** The sidebar uses an inverted surface, regardless of the page's color scheme. */\n    Dark = 'dark',\n\n    /** The sidebar uses the theme's primary color as its surface. */\n    Primary = 'primary',\n}\n\n/** Every {@link MenuTheme}, in the order a configurator should offer them. */\nexport const menuThemes: MenuTheme[] = [MenuTheme.Light, MenuTheme.Dark, MenuTheme.Primary];\n"],"names":["MenuTheme","menuThemes"],"mappings":"AAAA;AACA;AAEA;;;;;;;IAQO,IAAKA,SAAAA,iBAAAA,SAAAA,SAAAA,EAAAA;+DACgD,SAAA,CAAA,OAAA,CAAA,GAAA,OAAA;wFAGyB,SAAA,CAAA,MAAA,CAAA,GAAA,MAAA;sEAGlB,SAAA,CAAA,SAAA,CAAA,GAAA,SAAA;AAPvDA,IAAAA,OAAAA,SAAAA;AASX,CAAA,CAAA,EAAA;AAED,+EACO,MAAMC,UAAAA,GAA0B;;;;;;;;"}

package/dist/esm/configuration/index.d.ts

@@ -0,0 +1,9 @@
+export * from './LayoutMode';
+export * from './ColorScheme';
+export * from './MenuTheme';
+export * from './LayoutConfigState';
+export * from './layoutConfigTransitions';
+export * from './layoutWrapperClasses';
+export * from './layoutConfigStorage';
+export * from './LayoutConfigProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/configuration/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../configuration/index.ts"],"names":[],"mappings":"AAGA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC"}