@cratis/stage.runtime 4.202.1 → 4.204.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/src/App.d.ts CHANGED
@@ -3,8 +3,13 @@ import type { EffectiveNavItem, PackageCatalog } from '@cratis/scene.engine';
3
3
  import { type ComponentRegistry } from '@cratis/scene.react';
4
4
  import { type CompositionOptions } from '@cratis/scene.blueprint.default';
5
5
  import '@cratis/components/tokens';
6
+ import '@cratis/components/CommandForm/styles';
7
+ import '@cratis/components/Dropdown/styles';
8
+ import '@cratis/components/Common/styles';
9
+ import '@cratis/components/Display/styles';
6
10
  import '@cratis/scene.blueprint.default/styles.css';
7
11
  import { type ApplicationIdentity } from './blueprint';
12
+ import { type StageRouting } from './stageNavigation';
8
13
  import './app.css';
9
14
  export interface StageSceneApplication {
10
15
  uiProfiles?: UiProfile[];
@@ -55,6 +60,11 @@ export declare function applicationIdentity(scene: StageSceneApplication): Appli
55
60
  */
56
61
  export declare function composeStageScreen(scene: StageSceneApplication, screen: Screen, locales: string[], locale: string, packageCatalog?: PackageCatalog, blueprintTemplates?: ScreenTemplate[]): SceneElement;
57
62
  export interface AppProps {
63
+ /**
64
+ * How the address says which screen is open. `hash` (the default) keeps it in the fragment, which works wherever the page is served
65
+ * from; `path` makes it a regular route (`/TalkList`), which needs the host to answer every path with the page.
66
+ */
67
+ routing?: StageRouting;
58
68
  /** Components the host adds to the registry, beneath the Stage's own. */
59
69
  components?: ComponentRegistry;
60
70
  /**
@@ -69,4 +79,4 @@ export interface AppProps {
69
79
  /** Hides a navigation item the user may not see - hidden, never disabled, so nothing about it leaks. */
70
80
  isVisible?: (item: EffectiveNavItem) => boolean;
71
81
  }
72
- export declare function App({ components, packageCatalog, screenTemplates, dialogTemplates, isVisible }?: AppProps): import("react").JSX.Element;
82
+ export declare function App({ components, packageCatalog, screenTemplates, dialogTemplates, isVisible, routing }?: AppProps): import("react").JSX.Element;
@@ -16,6 +16,11 @@ export declare function StageChromeProvider({ state, children }: {
16
16
  export declare const stageActivityComponent = "Stage:activity";
17
17
  /** The language picker in the topbar, shown only when the model declares more than one. */
18
18
  export declare function StageLocale(): import("react").JSX.Element | null;
19
+ /**
20
+ * 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
21
+ * `Theme` headline. The themes it switches between are the light and the dark one the Stage ships.
22
+ */
23
+ export declare function StageThemeToggle({ element }: RegisteredComponentProps): import("react").JSX.Element | null;
19
24
  /**
20
25
  * The application's navigation as the hierarchy the model declared: a group per module and feature, nested as deep
21
26
  * as the model nests them, each entry linking to the screen it opens.
@@ -9,6 +9,8 @@ export type { SchemaProperty };
9
9
  * - the next step of a wizard - is reachable again. A form outside a dialog has nothing to close.
10
10
  */
11
11
  export declare const StageDialogContext: import("react").Context<(() => void) | undefined>;
12
+ /** The footer of the dialog a form sits in, where its submit button belongs beside Cancel; absent outside a dialog. */
13
+ export declare const StageDialogFooterContext: import("react").Context<HTMLElement | null>;
12
14
  interface StageCommandFormProps {
13
15
  element: ExternalComponent;
14
16
  }
package/dist/src/app.css CHANGED
@@ -1,2 +1,2 @@
1
- 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}
1
+ 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)}
2
2
  /*$vite$:1*/
@@ -3,6 +3,8 @@ import { type PackageCatalog } from '@cratis/scene.engine';
3
3
  import { type ComponentRegistry } from '@cratis/scene.react';
4
4
  /** The qualified name Stage registers its locale picker under. */
5
5
  export declare const stageLocaleComponent = "Stage:locale";
6
+ /** The qualified name Stage registers its light/dark toggle under. */
7
+ export declare const stageThemeToggleComponent = "Stage:themeToggle";
6
8
  /** The package a host renders with when the profile lists no component library: the Cratis component library, built on React Aria. */
7
9
  export declare const stageBaselinePackage = "Cratis.Components";
8
10
  /** The component library the profile opts in to by listing it; the application registers its support only then. */
@@ -0,0 +1,2 @@
1
+ /** Keeps only absolute HTTP and HTTPS routes as external navigation links. */
2
+ export declare function externalRouteHref(route: string | undefined): string | undefined;