@cratis/stage.runtime 4.202.0 → 4.203.0

package/dist/src/App.d.ts

@@ -2,7 +2,14 @@ import { type ApplicationStructure, type DialogTemplate, type InstanceContributi
 import type { EffectiveNavItem, PackageCatalog } from '@cratis/scene.engine';
 import { type ComponentRegistry } from '@cratis/scene.react';
 import { type CompositionOptions } from '@cratis/scene.blueprint.default';
+import '@cratis/components/tokens';
+import '@cratis/components/CommandForm/styles';
+import '@cratis/components/Dropdown/styles';
+import '@cratis/components/Common/styles';
+import '@cratis/components/Display/styles';
 import '@cratis/scene.blueprint.default/styles.css';
+import { type ApplicationIdentity } from './blueprint';
+import { type StageRouting } from './stageNavigation';
 import './app.css';
 export interface StageSceneApplication {
     uiProfiles?: UiProfile[];
@@ -42,12 +49,22 @@ export declare function stageShellOf(scene: StageSceneApplication, screenTemplat
  * shell (the effective navigation regions are Scene's), its command form, its status line and its data sources.
  */
 export declare function stageComposition(scene: StageSceneApplication, locales: string[], locale: string, packageCatalog?: PackageCatalog, dictionary?: Record<string, string>, blueprintTemplates?: ScreenTemplate[], showFooter?: boolean): CompositionOptions;
+/**
+ * What the application calls itself and how it draws its mark: the logo its navigation declares, otherwise the `identity` of the ui profile
+ * (its name, an icon logo and whether the name is shown), so the model's own title replaces the Stage's. Undefined when the model says neither.
+ */
+export declare function applicationIdentity(scene: StageSceneApplication): ApplicationIdentity | undefined;
 /**
  * Composes one screen the way the application shows it: the shared composition - the shell for the screen's layout, the chrome in
  * its slots, the screen inside the template it names - with the Stage's own decisions.
  */
 export declare function composeStageScreen(scene: StageSceneApplication, screen: Screen, locales: string[], locale: string, packageCatalog?: PackageCatalog, blueprintTemplates?: ScreenTemplate[]): SceneElement;
 export interface AppProps {
+    /**
+     * How the address says which screen is open. `hash` (the default) keeps it in the fragment, which works wherever the page is served
+     * from; `path` makes it a regular route (`/TalkList`), which needs the host to answer every path with the page.
+     */
+    routing?: StageRouting;
     /** Components the host adds to the registry, beneath the Stage's own. */
     components?: ComponentRegistry;
     /**
@@ -62,4 +79,4 @@ export interface AppProps {
     /** Hides a navigation item the user may not see - hidden, never disabled, so nothing about it leaks. */
     isVisible?: (item: EffectiveNavItem) => boolean;
 }
-export declare function App({ components, packageCatalog, screenTemplates, dialogTemplates, isVisible }?: AppProps): import("react").JSX.Element;
+export declare function App({ components, packageCatalog, screenTemplates, dialogTemplates, isVisible, routing }?: AppProps): import("react").JSX.Element;

package/dist/src/StageChrome.d.ts

@@ -16,6 +16,11 @@ export declare function StageChromeProvider({ state, children }: {
 export declare const stageActivityComponent = "Stage:activity";
 /** The language picker in the topbar, shown only when the model declares more than one. */
 export declare function StageLocale(): import("react").JSX.Element | null;
+/**
+ * The theme as one toggle: an icon button that shows a moon in a light theme and a sun in a dark one, and switches to the other, under a
+ * `Theme` headline. The themes it switches between are the light and the dark one the Stage ships.
+ */
+export declare function StageThemeToggle({ element }: RegisteredComponentProps): import("react").JSX.Element | null;
 /**
  * The application's navigation as the hierarchy the model declared: a group per module and feature, nested as deep
  * as the model nests them, each entry linking to the screen it opens.

package/dist/src/StageCommandForm.d.ts

@@ -9,6 +9,8 @@ export type { SchemaProperty };
  * - the next step of a wizard - is reachable again. A form outside a dialog has nothing to close.
  */
 export declare const StageDialogContext: import("react").Context<(() => void) | undefined>;
+/** The footer of the dialog a form sits in, where its submit button belongs beside Cancel; absent outside a dialog. */
+export declare const StageDialogFooterContext: import("react").Context<HTMLElement | null>;
 interface StageCommandFormProps {
     element: ExternalComponent;
 }

package/dist/src/app.css

@@ -1,2 +1,2 @@
-body{min-width:20rem;min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit}.stage-message{text-align:center;place-content:center;min-height:100vh;padding:2rem;display:grid}.stage-activity{background:var(--layout-highlight,#eef2ff);border-radius:var(--layout-radius,.5rem);color:var(--layout-highlight-text,#3730a3);margin-top:1rem;padding:.75rem}.stage-locale{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);color:var(--layout-text,inherit);padding:.35rem .5rem}.stage-table{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);min-width:0;padding:.5rem;overflow-x:auto}.stage-table table{border-collapse:collapse;width:100%}.stage-table th,.stage-table td{border-bottom:1px solid var(--layout-border,#e2e5e9);text-align:left;padding:.5rem .75rem}.stage-table th{color:var(--layout-text-muted,#6b7280);text-transform:uppercase;white-space:nowrap;font-size:.85rem;font-weight:600}.stage-table tbody tr[tabindex]{cursor:pointer}.stage-table tbody tr[tabindex]:hover td{background:var(--layout-background,#f8fafc)}.stage-table tbody tr[aria-selected=true] td,.stage-table tbody tr[aria-selected=true]:hover td{background:var(--layout-highlight,#eef2ff);color:var(--layout-highlight-text,#3730a3)}.stage-table tbody tr[aria-selected=true] td:first-child{box-shadow:inset 3px 0 0 var(--layout-highlight-text,#3730a3)}.stage-empty{color:var(--layout-text-muted,#6b7280);font-style:italic}.stage-note{color:var(--layout-text-muted,#6b7280);margin:0 0 .5rem}.stage-note--error{color:#dc2626}.stage-action{justify-items:start;gap:.75rem;display:grid}.stage-command-form__layout{gap:var(--layout-gap,1rem);width:100%;min-width:0;display:grid}.stage-command-form__field{min-width:0;display:block}.stage-command-form__field small.p-error{min-height:1.25rem;margin:.25rem 0 0;line-height:1.25rem}.stage-command-form__field:not(:has(small.p-error)):after{content:"";min-height:1.5rem;display:block}.stage-record-field,.stage-list-field{border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);gap:.6rem;min-width:0;margin:0;padding:.75rem;display:grid}.stage-record-field legend,.stage-list-field legend{padding:0 .35rem;font-weight:600}.stage-record-field[data-invalid=true],.stage-list-field[data-invalid=true]{border-color:#dc2626}.stage-list-field__row{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem;display:grid}.stage-value-field{gap:.25rem;display:grid}.stage-value-field--check{align-items:center;gap:.5rem;display:flex}.stage-value-field>span{color:var(--layout-text-muted,#6b7280);font-size:.85rem}.stage-value-field input:not([type=checkbox]),.stage-value-field select{background:var(--layout-background,#fff);border:1px solid var(--layout-border,#e2e5e9);color:inherit;font:inherit;border-radius:.3rem;padding:.45rem .6rem}.stage-form{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);gap:.6rem;min-width:20rem;padding:1rem;display:grid}.stage-form label{gap:.25rem;display:grid}.stage-form span{color:var(--layout-text-muted,#6b7280);font-size:.85rem}.stage-form input{background:var(--layout-background,#fff);border:1px solid var(--layout-border,#e2e5e9);color:inherit;border-radius:.3rem;padding:.45rem .6rem}pre{background:var(--layout-background,#f4f5f7);border-radius:.4rem;padding:1rem;overflow:auto}[role=table] header{gap:1rem;font-weight:600;display:flex}.stage-dialog-backdrop{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.stage-dialog{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);color:var(--layout-text,inherit);gap:.75rem;min-width:min(90vw,24rem);max-width:min(90vw,48rem);max-height:90vh;padding:1rem;display:grid;overflow:auto;box-shadow:0 1rem 3rem #0000004d}.stage-dialog>button{justify-self:end}.stage-confirm-dialog__decisions{flex-wrap:wrap;gap:.5rem;display:flex}.stage-confirm-dialog__decision[aria-pressed=true]{box-shadow:var(--scene-focus-ring,0 0 0 2px #4f46e566)}.stage-confirm-dialog button[type=submit]{background:var(--scene-primary-color,#4f46e5);border:1px solid var(--scene-primary-color,#4f46e5);border-radius:var(--scene-content-border-radius,.5rem);color:var(--scene-primary-contrast-color,#fff);cursor:pointer;font:inherit;justify-self:end;padding:.55rem 1.1rem}.stage-confirm-dialog button[type=submit]:focus-visible{box-shadow:var(--scene-focus-ring,0 0 0 2px #4f46e566);outline:none}
+body{min-width:20rem;min-height:100vh;margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}button{font:inherit}:root[data-scene-color-scheme=dark] .layout-menu-dark{--layout-sidebar-surface:color-mix(in srgb, var(--layout-background) 70%, black);--layout-sidebar-text:var(--layout-text);--layout-sidebar-muted:var(--layout-text-muted);--layout-sidebar-hover:color-mix(in srgb, var(--layout-text) 10%, transparent)}.stage-message{text-align:center;place-content:center;min-height:100vh;padding:2rem;display:grid}.stage-activity{background:var(--layout-highlight,#eef2ff);border-radius:var(--layout-radius,.5rem);color:var(--layout-highlight-text,#3730a3);margin-top:1rem;padding:.75rem}.stage-locale{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);color:var(--layout-text,inherit);padding:.35rem .5rem}.stage-table{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);min-width:0;padding:.5rem;overflow-x:auto}.stage-table table{border-collapse:collapse;width:100%}.stage-table th,.stage-table td{border-bottom:1px solid var(--layout-border,#e2e5e9);text-align:left;padding:.5rem .75rem}.stage-table th{color:var(--layout-text-muted,#6b7280);text-transform:uppercase;white-space:nowrap;font-size:.85rem;font-weight:600}.stage-table tbody tr[tabindex]{cursor:pointer}.stage-table tbody tr[tabindex]:hover td{background:var(--layout-background,#f8fafc)}.stage-table tbody tr[aria-selected=true] td,.stage-table tbody tr[aria-selected=true]:hover td{background:var(--layout-highlight,#eef2ff);color:var(--layout-highlight-text,#3730a3)}.stage-table tbody tr[aria-selected=true] td:first-child{box-shadow:inset 3px 0 0 var(--layout-highlight-text,#3730a3)}.stage-empty{color:var(--layout-text-muted,#6b7280);font-style:italic}.stage-note{color:var(--layout-text-muted,#6b7280);margin:0 0 .5rem}.stage-note--error{color:#dc2626}.stage-action{justify-items:start;gap:.75rem;display:grid}.stage-command-form__layout{gap:var(--layout-gap,1rem);width:100%;min-width:0;display:grid}.stage-command-form__field{min-width:0;display:block}.stage-command-form__field small.p-error{min-height:1.25rem;margin:.25rem 0 0;line-height:1.25rem}.stage-command-form__field:not(:has(small.p-error)):after{content:"";min-height:1.5rem;display:block}.stage-record-field,.stage-list-field{border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);gap:.6rem;min-width:0;margin:0;padding:.75rem;display:grid}.stage-record-field legend,.stage-list-field legend{padding:0 .35rem;font-weight:600}.stage-record-field[data-invalid=true],.stage-list-field[data-invalid=true]{border-color:#dc2626}.stage-list-field__row{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:.5rem;display:grid}.stage-value-field{gap:.25rem;display:grid}.stage-value-field--check{align-items:center;gap:.5rem;display:flex}.stage-value-field>span{color:var(--layout-text-muted,#6b7280);font-size:.85rem}.stage-value-field input:not([type=checkbox]),.stage-value-field select{background:var(--layout-background,#fff);border:1px solid var(--layout-border,#e2e5e9);color:inherit;font:inherit;border-radius:.3rem;padding:.45rem .6rem}.stage-form{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);gap:.6rem;min-width:20rem;padding:1rem;display:grid}.stage-form label{gap:.25rem;display:grid}.stage-form span{color:var(--layout-text-muted,#6b7280);font-size:.85rem}.stage-form input{background:var(--layout-background,#fff);border:1px solid var(--layout-border,#e2e5e9);color:inherit;border-radius:.3rem;padding:.45rem .6rem}pre{background:var(--layout-background,#f4f5f7);border-radius:.4rem;padding:1rem;overflow:auto}[role=table] header{gap:1rem;font-weight:600;display:flex}.stage-dialog-backdrop{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.stage-dialog{background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:var(--layout-radius,.5rem);color:var(--layout-text,inherit);gap:.75rem;min-width:min(90vw,24rem);max-width:min(90vw,48rem);max-height:90vh;padding:1rem;display:grid;overflow:auto;box-shadow:0 1rem 3rem #0000004d}.stage-dialog>button{justify-self:end}.stage-confirm-dialog__decisions{flex-wrap:wrap;gap:.5rem;display:flex}.stage-confirm-dialog__decision[aria-pressed=true]{box-shadow:var(--scene-focus-ring,0 0 0 2px #4f46e566)}.stage-confirm-dialog button[type=submit]{background:var(--scene-primary-color,#4f46e5);border:1px solid var(--scene-primary-color,#4f46e5);border-radius:var(--scene-content-border-radius,.5rem);color:var(--scene-primary-contrast-color,#fff);cursor:pointer;font:inherit;justify-self:end;padding:.55rem 1.1rem}.stage-confirm-dialog button[type=submit]:focus-visible{box-shadow:var(--scene-focus-ring,0 0 0 2px #4f46e566);outline:none}.stage-command-form__field>div,.stage-command-form__field .cratis-dropdown,.stage-command-form__field .cratis-field-input{box-sizing:border-box;width:100%}.stage-command-form__field .cratis-dropdown__select,.stage-command-form__field .cratis-dropdown__trigger{width:100%}.stage-command-form__submit,.scene-slice-dialog-submit{font:inherit;cursor:pointer;color:var(--scene-primary-contrast-color,#fff);background:var(--scene-primary-color,#4f46e5);border:1px solid var(--scene-primary-color,#4f46e5);border-radius:var(--scene-content-border-radius,.5rem);padding:.55rem 1.1rem}.stage-command-form__submit,.scene-slice-dialog-footer{margin-top:1rem}.stage-theme-toggle{flex-direction:column;align-items:center;display:flex}.stage-theme-toggle .layout-config-section-title{margin:0 0 .15rem}.stage-theme-toggle__button{cursor:pointer;width:2.25rem;height:2.25rem;color:var(--layout-text,inherit);background:var(--layout-card,#fff);border:1px solid var(--layout-border,#e2e5e9);border-radius:50%;justify-content:center;align-items:center;padding:0;display:inline-flex}.stage-theme-toggle__button:hover{background:var(--layout-hover,#eceef1)}
 /*$vite$:1*/

package/dist/src/blueprint.d.ts

@@ -3,6 +3,8 @@ import { type PackageCatalog } from '@cratis/scene.engine';
 import { type ComponentRegistry } from '@cratis/scene.react';
 /** The qualified name Stage registers its locale picker under. */
 export declare const stageLocaleComponent = "Stage:locale";
+/** The qualified name Stage registers its light/dark toggle under. */
+export declare const stageThemeToggleComponent = "Stage:themeToggle";
 /** The package a host renders with when the profile lists no component library: the Cratis component library, built on React Aria. */
 export declare const stageBaselinePackage = "Cratis.Components";
 /** The component library the profile opts in to by listing it; the application registers its support only then. */
@@ -53,6 +55,13 @@ export declare function stageCatalogWith(approved: PackageCatalog | undefined):
 export declare const stageNavigationTreeComponent = "Stage:navigationTree";
 /** The name the application shows in its topbar and sidebar when the model gives it no logo. */
 export declare const stageApplicationName = "Cratis Stage";
+/** What the application calls itself and how its mark is drawn. */
+export interface ApplicationIdentity {
+    title: string;
+    image?: string;
+    icon?: string;
+    showName?: boolean;
+}
 /**
  * The chrome the blueprint's application shell wraps every screen in, besides the screen itself.
  *
@@ -61,10 +70,7 @@ export declare const stageApplicationName = "Cratis Stage";
  * the entries its screens authored as `Navigation` contributions - or one flat list of its screens - as the menu, and the topbar and
  * sidebar draw no region of their own.
  */
-export declare function applicationChrome(screens: Screen[], activeScreen: string, locales: string[], locale: string, application?: {
-    title: string;
-    image?: string;
-}, regions?: boolean, showFooter?: boolean): Record<string, SceneElement[]>;
+export declare function applicationChrome(screens: Screen[], activeScreen: string, locales: string[], locale: string, application?: ApplicationIdentity, regions?: boolean, showFooter?: boolean): Record<string, SceneElement[]>;
 /** The hash a screen is addressed by - what the blueprint's breadcrumb links point at. */
 export declare function screenHash(name: string): string;
 /** The screen name a hash addresses, or undefined when it addresses none. Parameters after `?` are not part of it. */