Components 4, and the panel vocabulary Studio's canvas needs

Source/DotNET/Model/Common/Dock.cs

@@ -0,0 +1,30 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace Cratis.Scene.Model.Common;
+
+/// <summary>
+/// The edge of a dock panel a child is docked against.
+/// </summary>
+public enum Dock
+{
+    /// <summary>
+    /// Docked against the left edge.
+    /// </summary>
+    Left = 0,
+
+    /// <summary>
+    /// Docked against the top edge.
+    /// </summary>
+    Top = 1,
+
+    /// <summary>
+    /// Docked against the right edge.
+    /// </summary>
+    Right = 2,
+
+    /// <summary>
+    /// Docked against the bottom edge.
+    /// </summary>
+    Bottom = 3
+}

Source/DotNET/Model/Common/GridLength.cs

@@ -0,0 +1,37 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace Cratis.Scene.Model.Common;
+
+/// <summary>
+/// The length of a grid row or column, which can be absolute, sized to its content, or a weighted
+/// share of the space the absolute and content-sized tracks leave behind.
+/// </summary>
+/// <param name="Value">The numeric value, read according to <paramref name="UnitType"/>.</param>
+/// <param name="UnitType">How <paramref name="Value"/> is interpreted.</param>
+public record GridLength(double Value = 1, GridUnitType UnitType = GridUnitType.Star)
+{
+    /// <summary>
+    /// A length sized to the content it holds.
+    /// </summary>
+    public static readonly GridLength Auto = new(0, GridUnitType.Auto);
+
+    /// <summary>
+    /// A single share of the leftover space.
+    /// </summary>
+    public static readonly GridLength Star = new(1, GridUnitType.Star);
+
+    /// <summary>
+    /// Create an absolute length.
+    /// </summary>
+    /// <param name="value">The absolute length.</param>
+    /// <returns>A new <see cref="GridLength"/>.</returns>
+    public static GridLength Absolute(double value) => new(value, GridUnitType.Absolute);
+
+    /// <summary>
+    /// Create a weighted share of the leftover space.
+    /// </summary>
+    /// <param name="weight">The weight, relative to the other starred tracks.</param>
+    /// <returns>A new <see cref="GridLength"/>.</returns>
+    public static GridLength Stars(double weight) => new(weight, GridUnitType.Star);
+}

Source/DotNET/Model/Common/GridUnitType.cs

@@ -0,0 +1,25 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace Cratis.Scene.Model.Common;
+
+/// <summary>
+/// How a <see cref="GridLength"/>'s value is interpreted.
+/// </summary>
+public enum GridUnitType
+{
+    /// <summary>
+    /// The length is decided by the content it holds.
+    /// </summary>
+    Auto = 0,
+
+    /// <summary>
+    /// The length is an absolute measurement.
+    /// </summary>
+    Absolute = 1,
+
+    /// <summary>
+    /// The length is a weighted share of whatever space is left over.
+    /// </summary>
+    Star = 2
+}

Source/DotNET/Model/Common/Orientation.cs

@@ -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.
+
+namespace Cratis.Scene.Model.Common;
+
+/// <summary>
+/// The direction an element lays its children out in.
+/// </summary>
+public enum Orientation
+{
+    /// <summary>
+    /// Children are laid out left to right.
+    /// </summary>
+    Horizontal = 0,
+
+    /// <summary>
+    /// Children are laid out top to bottom.
+    /// </summary>
+    Vertical = 1
+}

Source/DotNET/Model/Elements/Panels/ColumnDefinition.cs

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using Cratis.Scene.Model.Common;
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+/// <summary>
+/// One column of a <see cref="Grid"/>.
+/// </summary>
+public record ColumnDefinition
+{
+    /// <summary>
+    /// Gets how wide the column is.
+    /// </summary>
+    public GridLength Width { get; init; } = GridLength.Star;
+
+    /// <summary>
+    /// Gets the width the column never goes below.
+    /// </summary>
+    public double MinimumWidth { get; init; }
+
+    /// <summary>
+    /// Gets the width the column never goes above.
+    /// </summary>
+    public double MaximumWidth { get; init; } = double.PositiveInfinity;
+}

Source/DotNET/Model/Elements/Panels/DockPanel.cs

@@ -0,0 +1,16 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+/// <summary>
+/// Lays its children out against its edges, each child stating which edge through the <c>Dock</c> key
+/// of its <see cref="SceneElement.Properties"/>.
+/// </summary>
+public record DockPanel : Panel
+{
+    /// <summary>
+    /// Gets whether the last child spreads into whatever space the docked children left behind.
+    /// </summary>
+    public bool LastChildFill { get; init; } = true;
+}

Source/DotNET/Model/Elements/Panels/Grid.cs

@@ -0,0 +1,28 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+// There is deliberately no Canvas panel here. Absolute placement is already the layout model's job -
+// FreeformArrangement carries an ElementPlacement (x, y, width, height) per element *per size class*,
+// which says strictly more than a canvas with attached Left/Top coordinates can. A Canvas panel would
+// also declare no properties of its own, and every element kind in this model is told apart by a
+// property no other kind has - so it could not be recognized at render time either.
+
+/// <summary>
+/// Lays its children out in rows and columns. A child states which cell it occupies through the
+/// <c>Grid.Row</c>, <c>Grid.Column</c>, <c>Grid.RowSpan</c> and <c>Grid.ColumnSpan</c> keys of its
+/// <see cref="SceneElement.Properties"/>.
+/// </summary>
+public record Grid : Panel
+{
+    /// <summary>
+    /// Gets the rows, top to bottom.
+    /// </summary>
+    public IReadOnlyList<RowDefinition> Rows { get; init; } = [];
+
+    /// <summary>
+    /// Gets the columns, left to right.
+    /// </summary>
+    public IReadOnlyList<ColumnDefinition> Columns { get; init; } = [];
+}

Source/DotNET/Model/Elements/Panels/RowDefinition.cs

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using Cratis.Scene.Model.Common;
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+/// <summary>
+/// One row of a <see cref="Grid"/>.
+/// </summary>
+public record RowDefinition
+{
+    /// <summary>
+    /// Gets how tall the row is.
+    /// </summary>
+    public GridLength Height { get; init; } = GridLength.Star;
+
+    /// <summary>
+    /// Gets the height the row never goes below.
+    /// </summary>
+    public double MinimumHeight { get; init; }
+
+    /// <summary>
+    /// Gets the height the row never goes above.
+    /// </summary>
+    public double MaximumHeight { get; init; } = double.PositiveInfinity;
+}

Source/DotNET/Model/Elements/Panels/StackPanel.cs

@@ -0,0 +1,22 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using Cratis.Scene.Model.Common;
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+/// <summary>
+/// Lays its children out in a single line.
+/// </summary>
+public record StackPanel : Panel
+{
+    /// <summary>
+    /// Gets the direction the line runs in.
+    /// </summary>
+    public Orientation Orientation { get; init; } = Orientation.Vertical;
+
+    /// <summary>
+    /// Gets the space left between one child and the next.
+    /// </summary>
+    public double Spacing { get; init; }
+}

Source/DotNET/Model/Elements/Panels/WrapPanel.cs

@@ -0,0 +1,27 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+using Cratis.Scene.Model.Common;
+
+namespace Cratis.Scene.Model.Elements.Panels;
+
+/// <summary>
+/// Lays its children out in a line and starts a new one whenever the current line runs out of room.
+/// </summary>
+public record WrapPanel : Panel
+{
+    /// <summary>
+    /// Gets the direction each line runs in.
+    /// </summary>
+    public Orientation Orientation { get; init; } = Orientation.Horizontal;
+
+    /// <summary>
+    /// Gets the width every child is laid out at, or <see langword="null"/> to let each child keep its own.
+    /// </summary>
+    public double? ItemWidth { get; init; }
+
+    /// <summary>
+    /// Gets the height every child is laid out at, or <see langword="null"/> to let each child keep its own.
+    /// </summary>
+    public double? ItemHeight { get; init; }
+}

Source/JavaScript/blueprint.components/.storybook/preview.tsx

@@ -2,20 +2,16 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import type { Preview } from '@storybook/react';
+import { PrimeReactProvider } from '@primereact/core';
 import { CratisComponentsProvider } from '@cratis/components/Common';
 
-// The stylesheet layers a page in this blueprint needs, in the order they resolve. PrimeReact 11 ships
-// zero CSS - `primereact/resources/themes/*` does not exist any more - and `@cratis/components` 3.0.0 took
-// its own CSS out of the JavaScript module graph, so every sheet below is an explicit import rather than
-// something a bundler injects behind an `import './Foo.css'`.
+// The stylesheet layers a page in this blueprint needs, in the order they resolve. Components 4 owns its
+// own CSS outright and keeps it out of the JavaScript module graph, so every sheet below is an explicit
+// import rather than something a bundler injects behind an `import './Foo.css'`.
 //
 // `tokens` defines the `--cratis-*` layer, `styles` is every component stylesheet plus the Tailwind
 // utilities that consume it, and `theme` is the Cratis-authored MIT baseline that assigns those tokens
-// actual values. That order matters: the last two both read the first. `theme` is what gives this preview
-// a look at all, because with no `@primeuix/themes` preset there are no `--p-*` values for the tokens to
-// resolve to - which also means the raw PrimeReact widgets the default blueprint's shell renders come out
-// structural rather than styled. That is the honest picture of an unstyled-first host, and this package
-// takes no dependency on a preset to paper over it.
+// actual values. That order matters: the last two both read the first.
 //
 // The Scene package's bridge puts Scene's `--scene-*` tokens in front of that, and the default blueprint's
 // `layout.css` draws the shell every one of these pages sits inside - which is the sheet this package does
@@ -31,24 +27,31 @@ import 'primeicons/primeicons.css';
 import '../../components/theme/sceneTokenBridge.css';
 import '../../blueprint.default/shell/layout.css';
 
+// The baseline theme is scoped to a `cratis-theme` ancestor rather than to `:root`, so something has to
+// carry the class, and overlays portal to the body rather than into the story's subtree.
+document.body.classList.add('cratis-theme');
+
 /**
- * Every story renders inside `CratisComponentsProvider`, the library's own configuration provider over
- * PrimeReact's. Without it the wrapped components fall back to PrimeReact's defaults rather than Cratis',
- * so a story would show something subtly different from what an application renders - which defeats the
- * point of having stories at all.
+ * Two providers, because these pages are two things at once.
+ *
+ * The page bodies are Components 4, which owns its own markup and configuration and no longer sits on
+ * PrimeReact at all - `CratisComponentsProvider` now carries only what the library itself owns.
  *
- * On PrimeReact 11 it is also load-bearing rather than merely advisable: every v11 component resolves its
- * configuration, theme and z-index registry through `PrimeReactProvider`, which this wraps, and throws
- * outright without one. These pages sit inside the default blueprint's shell, which reaches for PrimeReact
- * directly in five places, so removing this decorator would not degrade the stories - it would stop them
- * rendering.
+ * The shell they sit inside is the default blueprint's, and that reaches for PrimeReact directly in five
+ * places (`Topbar`, `Sidebar`, `Breadcrumb`, `UserMenu`, `ConfigPanel`). Every PrimeReact 11 component
+ * resolves its configuration, theme and z-index registry through `PrimeReactProvider` and throws without
+ * one. Until Components 3 that provider came for free, because `CratisComponentsProvider` wrapped it;
+ * under Components 4 it does not, so this preview supplies it explicitly. Dropping it would not degrade
+ * these stories - it would stop them rendering.
  */
 const preview: Preview = {
     decorators: [
         Story => (
-            <CratisComponentsProvider>
-                <Story />
-            </CratisComponentsProvider>
+            <PrimeReactProvider>
+                <CratisComponentsProvider value={{ locale: 'en-US' }}>
+                    <Story />
+                </CratisComponentsProvider>
+            </PrimeReactProvider>
         ),
     ],
     parameters: {

Source/JavaScript/blueprint.components/package.json

@@ -50,15 +50,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/components": "^3.0.0",
+        "@cratis/components": "^4.1.1",
         "@cratis/scene.blueprint.default": "1.0.0",
         "@cratis/scene.components": "1.0.0",
         "@cratis/scene.engine": "1.0.0",
         "@cratis/scene.model": "1.0.0",
         "@cratis/scene.react": "1.0.0"
     },
     "devDependencies": {
-        "@cratis/components": "^3.0.0",
+        "@cratis/components": "^4.1.1",
         "@cratis/scene.blueprint.default": "1.0.0",
         "@cratis/scene.components": "1.0.0",
         "@cratis/scene.engine": "1.0.0",
@@ -76,7 +76,7 @@
         "storybook": "^10.4.1"
     },
     "peerDependencies": {
-        "@cratis/components": "^3.0.0",
+        "@cratis/components": "^4.1.1",
         "@primereact/core": "^11.0.0",
         "@primereact/headless": "^11.0.0",
         "primeicons": "^8.0.0",