@salsita-ai/sdk 0.0.0-stage → 0.49.0-develop.cbee856178

package/dist/docs/index.json

@@ -0,0 +1,2949 @@
+{
+  "generatedAt": "2026-10-07T10:56:14.429Z",
+  "categories": [
+    {
+      "name": "Phoenix",
+      "docs": [
+        {
+          "title": "Admin",
+          "description": "Phoenix's admin system provides a powerful content management interface that runs alongside your configurator. While your configurator helps users build and customize products, the admin interface...",
+          "path": "docs/phoenix/admin.mdx",
+          "category": [
+            "Phoenix",
+            "Admin"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Application States",
+          "description": "Beyond the domain model and components, Phoenix applications require various application-wide settings and data management configurations. These can be defined in any YAML file in the root of your...",
+          "path": "docs/phoenix/application-states.mdx",
+          "category": [
+            "Phoenix",
+            "Application States"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Best Practices",
+          "description": "1. **YAML is king** - 99% of configuration should be in spec/\\*.yaml files 2. **Custom code locations** (in order of preference): - `src/expressions/` - Computed/derived properties -...",
+          "path": "docs/phoenix/best-practices.mdx",
+          "category": [
+            "Phoenix",
+            "Best Practices"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Blender Rendering",
+          "description": "Use a **`GenerateImages`** finalization task when an order, quote, PDF, or email needs a server-rendered image of the submitted configuration. Phoenix can project a complete export-aware image...",
+          "path": "docs/phoenix/blender-rendering.mdx",
+          "category": [
+            "Phoenix",
+            "Blender Rendering"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "CSP",
+          "description": "**Content Security Policy (CSP)** is a browser security mechanism that limits what code a page can execute and where resources can be loaded from.",
+          "path": "docs/phoenix/csp.mdx",
+          "category": [
+            "Phoenix",
+            "CSP"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Clerk Sign-In",
+          "description": "Phoenix projects that use Clerk can replace the redirect-only OAuth entry point with an inline sign-in page for the Configurator, Admin, or both. The integration is opt-in through...",
+          "path": "docs/phoenix/clerk-sign-in.mdx",
+          "category": [
+            "Phoenix",
+            "Clerk Sign-In"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Components",
+          "description": "Phoenix uses an Entity-Component-System (ECS) architectural pattern to organize functionality and behavior. This pattern provides a flexible, composable way to build complex configurators without...",
+          "path": "docs/phoenix/components.mdx",
+          "category": [
+            "Phoenix",
+            "Components"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Configurator Interface",
+          "description": "The Configurator Interface is **Phoenix's public API** - the official, type-safe way to interact with the SDK. It provides strongly-typed hooks that give you access to the full configurator state and...",
+          "path": "docs/phoenix/configurator-interface.mdx",
+          "category": [
+            "Phoenix",
+            "Configurator Interface"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Connected Data Sources",
+          "description": "A `$data` entry with `kind: connected` is backed by an external spreadsheet rather than admin CRUD. Admins point the entry at a Google Sheet or an Excel workbook in SharePoint; at publish time the...",
+          "path": "docs/phoenix/connected-data-sources.mdx",
+          "category": [
+            "Phoenix",
+            "Connected Data Sources"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Data Sources",
+          "description": "Phoenix provides several data sources that make configurators data-driven rather than purely domain-driven. While the domain model defines structure and relationships, data sources provide dynamic...",
+          "path": "docs/phoenix/data-sources.mdx",
+          "category": [
+            "Phoenix",
+            "Data Sources"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Deployments",
+          "description": "Phoenix Platform uses a hierarchical multi-tenant architecture that organizes configurators through a three-level structure: **Customer → Project → Environment**. This design enables secure...",
+          "path": "docs/phoenix/deployments.mdx",
+          "category": [
+            "Phoenix",
+            "Deployments"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Dimensions",
+          "description": "Phoenix provides a comprehensive dimension system for handling measurements, units, and validation in configurator applications. The system supports multiple unit types, automatic conversions, and...",
+          "path": "docs/phoenix/dimensions.mdx",
+          "category": [
+            "Phoenix",
+            "Dimensions"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Domain Model",
+          "description": "In computer science, a **domain model** is a conceptual representation of a specific problem space or business domain. It captures the essential entities, their properties, relationships, and the...",
+          "path": "docs/phoenix/domain-model.mdx",
+          "category": [
+            "Phoenix",
+            "Domain Model"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Expression Context",
+          "description": "Phoenix expressions access a context containing data sources, system services, and application state beyond entity properties. Expressions sometimes need more than pure domain information to...",
+          "path": "docs/phoenix/expression-context.mdx",
+          "category": [
+            "Phoenix",
+            "Expression Context"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Finalization",
+          "description": "Finalization is Phoenix's system for completing configurator sessions and processing final orders or submissions. When a user finalizes their configuration, Phoenix triggers a webhook-based workflow...",
+          "path": "docs/phoenix/finalization.mdx",
+          "category": [
+            "Phoenix",
+            "Finalization"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Getting Started",
+          "description": "Phoenix Platform is a framework specifically designed for creating custom product configurators. It provides a comprehensive set of tools and libraries that enable developers to build interactive 3D...",
+          "path": "docs/phoenix/getting-started.mdx",
+          "category": [
+            "Phoenix",
+            "Getting Started"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Localization",
+          "description": "Phoenix provides a localization system built on **Lingui** that enables multi-language support across your configurator. The system handles React components and server-side webhook processing,...",
+          "path": "docs/phoenix/localization.mdx",
+          "category": [
+            "Phoenix",
+            "Localization"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Migration Guide",
+          "description": "This guide explains how to migrate existing Phoenix configurator projects to the new `phx-cli` project structure.",
+          "path": "docs/phoenix/migration-guide.mdx",
+          "category": [
+            "Phoenix",
+            "Migration Guide"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Migrations",
+          "description": "The domain model supports versioning to handle breaking changes in your model while maintaining backward compatibility with existing configurations. Here's how migrations work in the domain model:",
+          "path": "docs/phoenix/migrations.mdx",
+          "category": [
+            "Phoenix",
+            "Migrations"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Phoenix CLI",
+          "description": "The Phoenix CLI (`phoenix` command) is the unified tool for all configurator development. It handles domain code generation, development servers, deployment, asset inspection, and code quality checks.",
+          "path": "docs/phoenix/phoenix-cli.mdx",
+          "category": [
+            "Phoenix",
+            "Phoenix CLI"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Project Structure",
+          "description": "This document describes the standard project structure for Phoenix configurator projects created with `phx-cli`.",
+          "path": "docs/phoenix/project-structure.mdx",
+          "category": [
+            "Phoenix",
+            "Project Structure"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Publishing",
+          "description": "Publishing transforms admin-managed data into JSON payloads that configurators consume at runtime. When admins publish content, the system validates, maps, and stores data for configurator...",
+          "path": "docs/phoenix/publishing.mdx",
+          "category": [
+            "Phoenix",
+            "Publishing"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "SDK Builder Workflow",
+          "description": "An SDK-builder workspace lets you build one configurator from the application spec and develop and deploy it from your terminal. You don't need a repository, a CI pipeline, project keys or a...",
+          "path": "docs/phoenix/sdk-builder-workflow.mdx",
+          "category": [
+            "Phoenix",
+            "SDK Builder Workflow"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Sessions and Access",
+          "description": "Phoenix implements a **two-tier authentication system** where _session management_ establishes user identity while _access control_ determines configuration permissions. This separation enables...",
+          "path": "docs/phoenix/sessions-and-access.mdx",
+          "category": [
+            "Phoenix",
+            "Sessions and Access"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Sharing",
+          "description": "Phoenix provides a built-in sharing system that lets users generate shareable links to configurations with configurable access levels. Shared links can grant full editing rights, read-only access to...",
+          "path": "docs/phoenix/sharing.mdx",
+          "category": [
+            "Phoenix",
+            "Sharing"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "State Management",
+          "description": "Phoenix's state management system provides a reactive architecture for managing configurator state. At its core, it maintains an immutable domain state that flows through validation, transformation,...",
+          "path": "docs/phoenix/state-management.mdx",
+          "category": [
+            "Phoenix",
+            "State Management"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Webhook Membership",
+          "description": "Build component controls with React and browser SDKs without pulling them into the server webhook bundle. Phoenix keeps user-authored components and handlers in the frontend unless a file explicitly...",
+          "path": "docs/phoenix/webhook-membership.mdx",
+          "category": [
+            "Phoenix",
+            "Webhook Membership"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Webhooks",
+          "description": "To support project specific finalization workflows, authentication and custom integrations, platform provides a way to define webhooks. These webhooks are deployed on aws lambda and can be triggered...",
+          "path": "docs/phoenix/webhooks.mdx",
+          "category": [
+            "Phoenix",
+            "Webhooks"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Quickstart",
+          "description": "Build a working office desk configurator from an empty folder. You will describe the product in YAML, add a small TypeScript expression file, and let Phoenix generate the application around those...",
+          "path": "docs/phoenix/quickstart.mdx",
+          "category": [
+            "Phoenix",
+            "Quickstart"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Theming",
+          "description": "The SDK uses MUI 5's theming system with pre-configured themes that handle all styling needs.",
+          "path": "docs/phoenix/theming.mdx",
+          "category": [
+            "Phoenix",
+            "Theming"
+          ],
+          "source": "ui-sdk"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Integration",
+          "docs": [
+            {
+              "title": "Authentication (External)",
+              "description": "When the configurator is integrated into a third-party system (`handoff` or `headless` mode), the host application authenticates the user and securely passes a token to the configurator via an...",
+              "path": "docs/phoenix/integration/authentication-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Authentication (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Authentication (Internal)",
+              "description": "The auth-code flow is used in `handoff` and `headless` integrations where the partner's system authenticates the user and passes a token to the configurator. It replaces Clerk-based authentication...",
+              "path": "docs/phoenix/integration/authentication-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Authentication (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Finalization (External)",
+              "description": "When the user finalizes a configuration, the configurator processes it server-side — generating resources like configuration links and thumbnails — and delivers the results to the partner's backend...",
+              "path": "docs/phoenix/integration/finalization-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Finalization (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Finalization (Internal)",
+              "description": "In integration scenarios, finalization connects the configurator to the partner's backend. The frontend handler collects data, triggers a server-side webhook, the webhook generates resources...",
+              "path": "docs/phoenix/integration/finalization-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Finalization (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Handoff Mode (External)",
+              "description": "Use `handoff` mode when your platform can't embed the configurator as a web component — for example, a legacy CMS, strict iframe or CSP policies, or a B2B platform that does not allow third-party...",
+              "path": "docs/phoenix/integration/handoff-mode-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Handoff Mode (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Handoff Mode (Internal)",
+              "description": "The user is deep-linked from an external application (dealer portal, CPQ, B2B platform) into the configurator on a separate page. After configuring, they return to the originating application. Two...",
+              "path": "docs/phoenix/integration/handoff-mode-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Handoff Mode (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Headless Mode (External)",
+              "description": "Use `headless` mode when the host application needs full control over the configurator's lifecycle — deciding when it opens, what it shows, and how it closes. The configurator is embedded as a web...",
+              "path": "docs/phoenix/integration/headless-mode-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Headless Mode (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Headless Mode (Internal)",
+              "description": "The client has a host application (dealer portal, B2B platform, CPQ) that needs full control over the configurator's lifecycle — routing, authentication, and close behavior. The configurator is...",
+              "path": "docs/phoenix/integration/headless-mode-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Headless Mode (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Imperative API (External)",
+              "description": "Some configurator deployments expose a custom JavaScript API that the host application can call directly — for example, to clone a configuration, trigger an export, or query internal state. The API...",
+              "path": "docs/phoenix/integration/imperative-api-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Imperative API (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Imperative API (Internal)",
+              "description": "Headless integrations sometimes need the host to call configurator functionality programmatically — cloning a configuration, triggering an export, or querying internal state. The pattern for this is...",
+              "path": "docs/phoenix/integration/imperative-api-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Imperative API (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Integration Modes (External)",
+              "description": "The Salsita 3D configurator is designed to be embedded into your application or website — whether customer-facing or internal. The surrounding context might be a marketing page, a dealer portal, a...",
+              "path": "docs/phoenix/integration/integration-modes-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Integration Modes (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Integration Modes (Internal)",
+              "description": "Phoenix configurators are designed to be embedded into third-party systems — e-commerce sites, dealer portals, CMS pages, B2B platforms, and more. Each integration scenario has different requirements...",
+              "path": "docs/phoenix/integration/integration-modes-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Integration Modes (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Page Mode (External)",
+              "description": "The configurator runs as a standalone page — it manages its own URL state and authentication. No server-side integration is required.",
+              "path": "docs/phoenix/integration/page-mode-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Page Mode (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Page Mode (Internal)",
+              "description": "The default mode. The configurator owns the full page and is the primary content. Simplest setup — no auth-code flow, no host communication, and no way to close the configurator (the Back button...",
+              "path": "docs/phoenix/integration/page-mode-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Page Mode (Internal)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Preset Tags (External)",
+              "description": "The `presetTags` property lets the host restrict which presets the configurator shows on the preset selection screen. Useful when the same configurator build is embedded in multiple contexts (e.g....",
+              "path": "docs/phoenix/integration/preset-tags-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Preset Tags (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Widget Mode (External)",
+              "description": "Use `widget` mode when the host page has a trigger — typically a \"Customize\" button — that opens the configurator on demand. The configurator is embedded as a web component, stays hidden by default,...",
+              "path": "docs/phoenix/integration/widget-mode-external.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Widget Mode (External)"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Widget Mode (Internal)",
+              "description": "The client's site has a page (e.g. a product page) where the configurator is embedded inline as a web component. The configurator manages its own URL state and lifecycle — the client just needs to...",
+              "path": "docs/phoenix/integration/widget-mode-internal.mdx",
+              "category": [
+                "Phoenix",
+                "Integration",
+                "Widget Mode (Internal)"
+              ],
+              "source": "storybook-root"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "UX Guidelines",
+      "docs": [
+        {
+          "title": "Canvas and Feedback",
+          "description": "The canvas should preserve contrast and keep users oriented as the configured scene changes.",
+          "path": "docs/ux-guidelines/canvas-and-feedback.mdx",
+          "category": [
+            "UX Guidelines",
+            "Canvas and Feedback"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Choosing Navigation",
+          "description": "Choose navigation from the structure of the user's decisions, not from the desired visual treatment.",
+          "path": "docs/ux-guidelines/choosing-navigation.mdx",
+          "category": [
+            "UX Guidelines",
+            "Choosing Navigation"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Choosing a Control",
+          "description": "Choose the control from how users understand the options.",
+          "path": "docs/ux-guidelines/choosing-a-control.mdx",
+          "category": [
+            "UX Guidelines",
+            "Choosing a Control"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Interaction Modes",
+          "description": "Modes remove controls that do not apply to the user's current task. Treat each mode as an explicit visibility and interaction contract rather than a collection of one-off filters.",
+          "path": "docs/ux-guidelines/interaction-modes.mdx",
+          "category": [
+            "UX Guidelines",
+            "Interaction Modes"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Overview",
+          "description": "Use these guidelines as the baseline for a clear, predictable Phoenix configurator. Start here when planning a project, then follow the links for the surfaces the project uses.",
+          "path": "docs/ux-guidelines/overview.mdx",
+          "category": [
+            "UX Guidelines",
+            "Overview"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Presets",
+          "description": "The preset screen helps users choose a starting point. Keep the information architecture proportional to the available choices and make the result of every action obvious.",
+          "path": "docs/ux-guidelines/presets.mdx",
+          "category": [
+            "UX Guidelines",
+            "Presets"
+          ],
+          "source": "storybook-root"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Relations",
+      "docs": [
+        {
+          "title": "Aliases",
+          "description": "Aliases let you refer to a union of entity types using a single name (e.g., `Top` for `TopOval | TopRectangle`, `Legs` for `LegsAxel | Legs3DRonde`). Use aliases when multiple concrete types should...",
+          "path": "docs/relations/aliases.mdx",
+          "category": [
+            "Relations",
+            "Aliases"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "All of Type",
+          "description": "Use `allOfType` when you want a relation that always points to all entities of a given type without storing IDs. It is great for building parent collections like a `Range` composed of many `Module`...",
+          "path": "docs/relations/all-of-type.mdx",
+          "category": [
+            "Relations",
+            "All of Type"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Child - Nullable",
+          "description": "A nullable child uses a direct relation with cardinality `0-1` from the parent to an optional child. This lets the parent either point to a single child or to none at all.",
+          "path": "docs/relations/child-nullable.mdx",
+          "category": [
+            "Relations",
+            "Child - Nullable"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Child - Required",
+          "description": "A required child uses a direct relation with cardinality `1-1` from the parent to a mandatory child. The parent must always point to exactly one child.",
+          "path": "docs/relations/child-required.mdx",
+          "category": [
+            "Relations",
+            "Child - Required"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Collection - Direct",
+          "description": "A direct collection uses a direct relation from the parent to an array of child IDs (`0-N`). Use it when the parent owns an ordered or explicit set of children and you want full control over...",
+          "path": "docs/relations/collection-direct.mdx",
+          "category": [
+            "Relations",
+            "Collection - Direct"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Collection - Indirect",
+          "description": "An indirect collection uses a reverse reference on the child (e.g., `Module.rangeId`). The parent gathers children (`0-N`) by filtering entities with `rangeId` pointing to it. Use it when children...",
+          "path": "docs/relations/collection-indirect.mdx",
+          "category": [
+            "Relations",
+            "Collection - Indirect"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Collection - Multiple",
+          "description": "Multiple direct collections are useful when a parent owns several groups of children (e.g., first and second row). Each relation uses a separate field and instance name.",
+          "path": "docs/relations/collection-multiple.mdx",
+          "category": [
+            "Relations",
+            "Collection - Multiple"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Cross-reference",
+          "description": "Link two parts of a configurator without making either one own the other. In this example, a kitchen range owns a row of cabinets and a hood. The hood needs to know which cabinet it hangs above — but...",
+          "path": "docs/relations/cross-reference.mdx",
+          "category": [
+            "Relations",
+            "Cross-reference"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Hierarchy",
+          "description": "A generic hierarchy where any node can be a parent. Children store `parentId` (nullable), and the parent collects children via an indirect relation. This pattern underpins many tree-like UIs.",
+          "path": "docs/relations/hierarchy.mdx",
+          "category": [
+            "Relations",
+            "Hierarchy"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Layouts",
+      "docs": [
+        {
+          "title": "Icon Sets",
+          "description": "Override specific built‑in icons used across the configurator UI with your own SVGs. This is useful when you want branded icons (for buttons like “Finalize”, navigation, toolbars) while keeping the...",
+          "path": "docs/layouts/icon-sets.mdx",
+          "category": [
+            "Layouts",
+            "Icon Sets"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Canvas Padding",
+          "description": "Canvas padding controls how the 3D scene is framed within the viewport by adjusting the camera to account for UI elements like sidebars, headers, and toolbars. This ensures rendered models remain...",
+          "path": "docs/layouts/canvas-padding.mdx",
+          "category": [
+            "Layouts",
+            "Canvas Padding"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Custom Price",
+          "description": "The custom price footer component replaces the standard price display in the sidebar footer with a fully customizable React component. This allows you to create custom pricing interfaces, add...",
+          "path": "docs/layouts/custom-price.mdx",
+          "category": [
+            "Layouts",
+            "Custom Price"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Custom Theme Handler",
+          "description": "`createGetThemeHandler` lets a configurator project replace the built-in theme with its own MUI `ThemeOptions`. The resolver function is invoked **inside React render**, so it may use hooks like...",
+          "path": "docs/layouts/custom-theme-handler.mdx",
+          "category": [
+            "Layouts",
+            "Custom Theme Handler"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Phoenix Elements",
+          "description": "Use this pattern when you need both kinds of Phoenix UI in the same configurator:",
+          "path": "docs/layouts/phoenix-elements.mdx",
+          "category": [
+            "Layouts",
+            "Phoenix Elements"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Phoenix Handlers",
+          "description": "Phoenix handlers are the foundational system for defining custom behavior for action buttons in your configurator. They connect UI actions (like \"Finalize\", \"Save\", \"Download\") to your business logic.",
+          "path": "docs/layouts/phoenix-handlers.mdx",
+          "category": [
+            "Layouts",
+            "Phoenix Handlers"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Tool Controls",
+          "description": "Tool controls provide a UI interface for switching between different interaction modes (`toolState`) in a configurator. This is essential for applications that need multiple tools, such as switching...",
+          "path": "docs/layouts/tool-controls.mdx",
+          "category": [
+            "Layouts",
+            "Tool Controls"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Toolbar",
+          "description": "The toolbar provides quick access to common configurator actions and controls. It appears at the top of the canvas area on desktop and adapts to mobile layouts with primary (visible) and secondary...",
+          "path": "docs/layouts/toolbar.mdx",
+          "category": [
+            "Layouts",
+            "Toolbar"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Universal",
+          "description": "The universal layout covers the features of the previous distinct layouts. Start with the preset closest to your use case, then adjust the layout using the settings in the sidebar.",
+          "path": "docs/layouts/universal.mdx",
+          "category": [
+            "Layouts",
+            "Universal"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "View Controls",
+          "description": "View controls provide a UI interface for switching between different camera perspectives (`viewState`) in a 3D configurator. This is essential for applications that require multiple viewing angles,...",
+          "path": "docs/layouts/view-controls.mdx",
+          "category": [
+            "Layouts",
+            "View Controls"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Sidebar",
+          "docs": [
+            {
+              "title": "Entity Header",
+              "description": "Use entity headers when you need to display contextual information about the currently selected entity at the top of property pages in the sidebar. Entity headers show essential entity details like...",
+              "path": "docs/layouts/sidebar/entity-header.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "Entity Header"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Property Page Stack",
+              "description": "Property page stack enables multilevel navigation within property pages by allowing custom components to push additional pages onto a navigation stack. This creates drill-down interfaces where users...",
+              "path": "docs/layouts/sidebar/property-page-stack.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "Property Page Stack"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Property Page",
+              "description": "Use layout property pages when you need to provide contextual controls and information that adapt to the user's current selection. Property pages create a hierarchical, stack-based sidebar interface...",
+              "path": "docs/layouts/sidebar/property-page.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "Property Page"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "General",
+              "description": "The sidebar is the primary navigation and control interface in Phoenix configurators. It provides a flexible container for property pages, tabs, summary views, and other interactive components that...",
+              "path": "docs/layouts/sidebar/general.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "General"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Summary",
+              "description": "The sidebar summary component provides a dedicated summary view that displays configured items with pricing information. It integrates with navigation states to show a consolidated review of...",
+              "path": "docs/layouts/sidebar/summary.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "Summary"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Tabs",
+              "description": "Use sidebar tabs when you need to provide **contextual navigation that may change based on application state**. Sidebar tabs appear adjacent to the sidebar interface and allow users to switch between...",
+              "path": "docs/layouts/sidebar/tabs.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar",
+                "Tabs"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Header",
+          "docs": [
+            {
+              "title": "Custom",
+              "description": "The `customHeader` component replaces the standard header with your own React component. Use this when the floating, fixed, or hidden header options don't match your requirements.",
+              "path": "docs/layouts/header/custom.mdx",
+              "category": [
+                "Layouts",
+                "Header",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Fixed",
+              "description": "The `fixedHeader` component provides a header that remains at the top of the configurator with a solid background. It displays branding on the left and horizontal tabs on the right, creating a clear...",
+              "path": "docs/layouts/header/fixed.mdx",
+              "category": [
+                "Layouts",
+                "Header",
+                "Fixed"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Floating",
+              "description": "The `floatingHeader` is the default header for the configurator. It displays your brand and provides navigation controls without taking permanent layout space. The header floats over the 3D scene and...",
+              "path": "docs/layouts/header/floating.mdx",
+              "category": [
+                "Layouts",
+                "Header",
+                "Floating"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Hidden",
+              "description": "The `hiddenHeader` component removes the header from the configurator interface completely. When active, the header area disappears and the 3D scene expands to use the full available space.",
+              "path": "docs/layouts/header/hidden.mdx",
+              "category": [
+                "Layouts",
+                "Header",
+                "Hidden"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Presets",
+          "docs": [
+            {
+              "title": "Action and Overlay",
+              "description": "Add project-specific guidance to the default preset screen when its built-in cards and selection behavior already fit your configurator.",
+              "path": "docs/layouts/presets/action-and-overlay.mdx",
+              "category": [
+                "Layouts",
+                "Presets",
+                "Action and Overlay"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Custom",
+              "description": "Build a branded preset screen when a furniture configurator needs more guidance and filtering than the default preset screen provides.",
+              "path": "docs/layouts/presets/custom.mdx",
+              "category": [
+                "Layouts",
+                "Presets",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Sidebar Footer",
+          "docs": [
+            {
+              "title": "Custom",
+              "description": "The `customSidebarFooter` component allows you to replace the default sidebar footer with your own custom React component. Use this when you need complete control over the sidebar footer's appearance...",
+              "path": "docs/layouts/sidebar-footer/custom.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar Footer",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Basic",
+              "description": "The sidebar footer is a key part of the configurator interface that appears at the bottom of the sidebar. It serves as the primary location for displaying pricing information and providing actions...",
+              "path": "docs/layouts/sidebar-footer/basic.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar Footer",
+                "Basic"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Hidden",
+              "description": "The `hiddenSidebarFooter` component removes the sidebar footer from the configurator interface. This creates a cleaner, more focused experience by eliminating UI chrome and maximizing space for the...",
+              "path": "docs/layouts/sidebar-footer/hidden.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar Footer",
+                "Hidden"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Read",
+              "description": "The `readSidebarFooter` component displays a read-only version of the sidebar footer that shows pricing information without any action buttons. This component is specifically designed for users with...",
+              "path": "docs/layouts/sidebar-footer/read.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar Footer",
+                "Read"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Universal",
+              "description": "The `universalSidebarFooter` is the standard sidebar footer component for new configurators. It extends the basic sidebar footer with customizable text areas and a full action system, while...",
+              "path": "docs/layouts/sidebar-footer/universal.mdx",
+              "category": [
+                "Layouts",
+                "Sidebar Footer",
+                "Universal"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Preview",
+          "docs": [
+            {
+              "title": "Always Expand",
+              "description": "The configurator is designed to work seamlessly across different devices and embedding scenarios, whether as a standalone application or embedded within a website. The Preview serves as an entry...",
+              "path": "docs/layouts/preview/always-expand.mdx",
+              "category": [
+                "Layouts",
+                "Preview",
+                "Always Expand"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Always",
+              "description": "The configurator is designed to work seamlessly across different devices and embedding scenarios, whether as a standalone application or embedded within a website. The Preview serves as an entry...",
+              "path": "docs/layouts/preview/always.mdx",
+              "category": [
+                "Layouts",
+                "Preview",
+                "Always"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Auto Presets",
+              "description": "The configurator is designed to work seamlessly across different devices and embedding scenarios, whether as a standalone application or embedded within a website. The Preview serves as an entry...",
+              "path": "docs/layouts/preview/auto-presets.mdx",
+              "category": [
+                "Layouts",
+                "Preview",
+                "Auto Presets"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Auto",
+              "description": "The configurator is designed to work seamlessly across different devices and embedding scenarios, whether as a standalone application or embedded within a website. The Preview serves as an entry...",
+              "path": "docs/layouts/preview/auto.mdx",
+              "category": [
+                "Layouts",
+                "Preview",
+                "Auto"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Never",
+              "description": "The configurator is designed to work seamlessly across different devices and embedding scenarios, whether as a standalone application or embedded within a website. The Preview serves as an entry...",
+              "path": "docs/layouts/preview/never.mdx",
+              "category": [
+                "Layouts",
+                "Preview",
+                "Never"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Controls",
+      "docs": [
+        {
+          "title": "Color Picker Input",
+          "description": "Use ColorPickerInput when users need to pick an arbitrary color via a visual interface rather than selecting from a predefined set of swatches. A typical example is choosing a custom paint color for...",
+          "path": "docs/controls/color-picker-input.mdx",
+          "category": [
+            "Controls",
+            "Color Picker Input"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Custom",
+          "description": "The SDK provides many standard UI components for common scenarios. When you need custom controls tailored to specific application requirements, you can build them using React and the hooks provided...",
+          "path": "docs/controls/custom.mdx",
+          "category": [
+            "Controls",
+            "Custom"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Nullable Attributes",
+          "description": "MaterialSwatchSelector and AttributeSelection components gracefully handle null values by remaining visible but showing no selected state.",
+          "path": "docs/controls/nullable-attributes.mdx",
+          "category": [
+            "Controls",
+            "Nullable Attributes"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Text Input",
+          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "path": "docs/controls/text-input.mdx",
+          "category": [
+            "Controls",
+            "Text Input"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Select Attribute",
+          "docs": [
+            {
+              "title": "CardSelect",
+              "description": "Use AttributeCardSelector when users need to choose exactly one option and each option benefits from a visual cue (for example, material swatches, finish photos, or style previews). A typical example...",
+              "path": "docs/controls/select-attribute/cardselect.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "CardSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "ListSelect",
+              "description": "Use AttributeListSelector to choose exactly one option from a text-first list when images aren't essential. Typical cases include materials by name, product variants, or styles where the label is...",
+              "path": "docs/controls/select-attribute/listselect.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "ListSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Select",
+              "description": "AttributeSelect is used to select a single option from a list of items without the need for a strong visual cue, such as an image. The focus is primarily on the text labels or brief descriptions of...",
+              "path": "docs/controls/select-attribute/select.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "Select"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "SwitchSelect",
+              "description": "AttributeSwitchSelector is used to switch between two values of a boolean attribute.",
+              "path": "docs/controls/select-attribute/switchselect.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "SwitchSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "ToggleSelect",
+              "description": "ToggleSelector is used to select one option from a set of mutually exclusive options.",
+              "path": "docs/controls/select-attribute/toggleselect.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "ToggleSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "SwatchSelect",
+              "description": "MaterialSwatchSelector is used to select a color or texture option from a set of visually distinct swatches. The selected swatch is visually marked.",
+              "path": "docs/controls/select-attribute/swatchselect.mdx",
+              "category": [
+                "Controls",
+                "Select Attribute",
+                "SwatchSelect"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Select Child Entity",
+          "docs": [
+            {
+              "title": "CardSelect",
+              "description": "Child Entity Card Selector provides a visual card-based interface for selecting between different polymorphic child entity types. Each card displays an image and label, making it ideal when options...",
+              "path": "docs/controls/select-child-entity/cardselect.mdx",
+              "category": [
+                "Controls",
+                "Select Child Entity",
+                "CardSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "ListSelect",
+              "description": "Child Entity List Selector provides a dropdown-based interface for selecting between different polymorphic child entity types. Each option displays as a text label in a clean, space-efficient list...",
+              "path": "docs/controls/select-child-entity/listselect.mdx",
+              "category": [
+                "Controls",
+                "Select Child Entity",
+                "ListSelect"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "ToggleSelect",
+              "description": "Child Entity Toggle Selector provides a button-based interface for selecting between different polymorphic child entity types. Each option displays as a toggleable button with clear labels, making it...",
+              "path": "docs/controls/select-child-entity/toggleselect.mdx",
+              "category": [
+                "Controls",
+                "Select Child Entity",
+                "ToggleSelect"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Manage Child Entities",
+          "docs": [
+            {
+              "title": "EntityChildrenList",
+              "description": "This component is used to manage an array of child entities of a parent entity. It allows to select and optionally delete each item.",
+              "path": "docs/controls/manage-child-entities/entitychildrenlist.mdx",
+              "category": [
+                "Controls",
+                "Manage Child Entities",
+                "EntityChildrenList"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Scene",
+          "docs": [
+            {
+              "title": "Custom Controls",
+              "description": "Use `sceneEntityControl` when you need to render custom 3D elements attached to domain entities. Unlike [HTML hotspots](?path=/docs/controls-scene-html-hotspots--docs) which render DOM elements,...",
+              "path": "docs/controls/scene/custom-controls.mdx",
+              "category": [
+                "Controls",
+                "Scene",
+                "Custom Controls"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Html Hotspots",
+              "description": "Use `htmlHotspot` when you need to add interactive HTML elements to your 3D scene. The hotspot is positioned relative to the entity origin and renders standard DOM elements with full theming support....",
+              "path": "docs/controls/scene/html-hotspots.mdx",
+              "category": [
+                "Controls",
+                "Scene",
+                "Html Hotspots"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Object Html Hotspots",
+              "description": "Use `sceneEntityObjectHtmlHotspot` when you need HTML controls positioned relative to a specific 3D object rather than the entity origin. The hotspot is attached to a `sceneEntityRemoteObject`...",
+              "path": "docs/controls/scene/object-html-hotspots.mdx",
+              "category": [
+                "Controls",
+                "Scene",
+                "Object Html Hotspots"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "3d scene",
+      "docs": [
+        {
+          "title": "Animations - Basic",
+          "description": "It is cool to have things move around the scene! The SDK supports native threejs animation with simple wrapper system. Using this feature, you can create cool animations in Blender or other software,...",
+          "path": "docs/3d-scene/animations-basic.mdx",
+          "category": [
+            "3d scene",
+            "Animations - Basic"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Camera Based Hiding",
+          "description": "Rotating the camera may cause some 3D objects to obscure others. This is an issue especially with walls in room/interior configurators, where you need to see inside a room through an outer wall, but...",
+          "path": "docs/3d-scene/camera-based-hiding.mdx",
+          "category": [
+            "3d scene",
+            "Camera Based Hiding"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Engraving",
+          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "path": "docs/3d-scene/engraving.mdx",
+          "category": [
+            "3d scene",
+            "Engraving"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "PostProcessing",
+          "description": "This example serve as a quick showcase of how to apply PostProcessing effects to the Scene. No magic is required, just use custom three-fiber component, insert it into canvas and configure what you...",
+          "path": "docs/3d-scene/postprocessing.mdx",
+          "category": [
+            "3d scene",
+            "PostProcessing"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Cameras",
+          "docs": [
+            {
+              "title": "Autorotate",
+              "description": "This example demonstrates autorotate camera functionality combined with selection and fit-to-selection camera features.",
+              "path": "docs/3d-scene/cameras/autorotate.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Autorotate"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Canvas Padding",
+              "description": "When using fit-root or fit-selection cameras we want the entities to fit into the viewport while respecting canvas padding.",
+              "path": "docs/3d-scene/cameras/canvas-padding.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Canvas Padding"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Custom",
+              "description": "This example demonstrates how to implement custom camera behaviors using the `scheduleCameraTransition` API. Instead of declarative YAML configuration, you get full programmatic control over camera...",
+              "path": "docs/3d-scene/cameras/custom.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Fit During Drag",
+              "description": "`fitRootPerspectiveCamera` with `fitMeshChanges: true` refits the camera whenever the a remote object gets loaded and placed into the scene. This is needed for lazy-loaded entities and intial camera...",
+              "path": "docs/3d-scene/cameras/fit-during-drag.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Fit During Drag"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Fit Entity",
+              "description": "This example demonstrates fit-entity camera components that position the camera to frame a specific entity. Unlike fit-root (frames the entire scene) or fit-selection (reacts to user selection),...",
+              "path": "docs/3d-scene/cameras/fit-entity.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Fit Entity"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Fit Root",
+              "description": "This example demonstrates fit-root camera components that automatically position the camera to frame the entire root entity optimally. Unlike static cameras that maintain fixed positions, fit-root...",
+              "path": "docs/3d-scene/cameras/fit-root.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Fit Root"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Fit Selection",
+              "description": "This example demonstrates fit-selection camera components that automatically position the camera to frame selected entities optimally. Unlike static cameras that maintain fixed positions,...",
+              "path": "docs/3d-scene/cameras/fit-selection.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Fit Selection"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Simple",
+              "description": "This example demonstrates the default camera behavior in Phoenix configurators. When no camera components are configured, the system provides built-in camera controls with sensible defaults, giving...",
+              "path": "docs/3d-scene/cameras/simple.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Simple"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Static",
+              "description": "This example demonstrates static camera components that provide fixed camera positioning with precise control over viewing angles and camera properties. Static cameras give you complete control over...",
+              "path": "docs/3d-scene/cameras/static.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Static"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Transitions",
+              "description": "This example demonstrates how camera components are applied and when camera transitions occur in the Phoenix Configurator SDK. Understanding camera transitions is essential for creating smooth,...",
+              "path": "docs/3d-scene/cameras/transitions.mdx",
+              "category": [
+                "3d scene",
+                "Cameras",
+                "Transitions"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Rendering",
+          "docs": [
+            {
+              "title": "Basic",
+              "description": "These rendering components form the foundation for displaying 3D content in any configurator. Whether you're building furniture configurators, product customizers, or other applications that...",
+              "path": "docs/3d-scene/rendering/basic.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Basic"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Box Object",
+              "description": "Create a resizable placeholder for a cabinet, appliance, room volume, or other product part before its production model is available. The box stays inside Phoenix's normal scene-object pipeline, so...",
+              "path": "docs/3d-scene/rendering/box-object.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Box Object"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Custom Entity",
+              "description": "Use `customSceneEntity` when you need full control over how a domain entity renders in the 3D scene. Instead of loading 3D models from GLTF files, you write React Three Fiber components that define...",
+              "path": "docs/3d-scene/rendering/custom-entity.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Custom Entity"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Morph Targets",
+              "description": "This example isolates morph-target rendering and picking across preset remounts.",
+              "path": "docs/3d-scene/rendering/morph-targets.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Morph Targets"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Object Groups",
+              "description": "By default the objects of a scene entity are a flat list — each one is positioned independently through its own `sceneEntityObjectProperties`. That falls apart when several objects must move as a...",
+              "path": "docs/3d-scene/rendering/object-groups.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Object Groups"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Objects",
+              "description": "Product configurators often need to let users switch between shape variants while also customizing material finishes. When your 3D artist exports multiple object variants into a single GLTF file, you...",
+              "path": "docs/3d-scene/rendering/objects.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Objects"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Scene Entity Object",
+              "description": "Use `sceneEntityObject` when you need to render custom React Three Fiber components while retaining Phoenix platform features like positioning, selection highlighting, and conditional rendering....",
+              "path": "docs/3d-scene/rendering/scene-entity-object.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Scene Entity Object"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "SMMA",
+              "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+              "path": "docs/3d-scene/rendering/smma.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "SMMA"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Soft Shadows",
+              "description": "Shadows add visual realism and depth cues to 3D scenes. They help users understand the spatial relationships between objects — how far above the ground they are, their relative positions, and their...",
+              "path": "docs/3d-scene/rendering/soft-shadows.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Soft Shadows"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Transformer",
+              "description": "Code generation is fine and dandy, but sometimes we need to get down to the metal! This is where `sceneEntityObjectTransformerComponent` comes in handy! It allows you to register a transformer...",
+              "path": "docs/3d-scene/rendering/transformer.mdx",
+              "category": [
+                "3d scene",
+                "Rendering",
+                "Transformer"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": [
+            {
+              "name": "Lights",
+              "docs": [
+                {
+                  "title": "Ambient Light",
+                  "description": "Uniform light that illuminates all objects equally from every direction. Has no position or direction — useful as base fill lighting so the scene is never completely dark.",
+                  "path": "docs/3d-scene/rendering/lights/ambient-light.mdx",
+                  "category": [
+                    "3d scene",
+                    "Rendering",
+                    "Lights",
+                    "Ambient Light"
+                  ],
+                  "source": "storybook-example"
+                },
+                {
+                  "title": "Directional Light",
+                  "description": "Parallel rays from a given direction, like sunlight. Defined by a position and a target. Supports shadow casting.",
+                  "path": "docs/3d-scene/rendering/lights/directional-light.mdx",
+                  "category": [
+                    "3d scene",
+                    "Rendering",
+                    "Lights",
+                    "Directional Light"
+                  ],
+                  "source": "storybook-example"
+                },
+                {
+                  "title": "Point Light",
+                  "description": "Emits light in all directions from a single point. Light attenuates over distance — useful for lamps, bulbs, or any localized light source.",
+                  "path": "docs/3d-scene/rendering/lights/point-light.mdx",
+                  "category": [
+                    "3d scene",
+                    "Rendering",
+                    "Lights",
+                    "Point Light"
+                  ],
+                  "source": "storybook-example"
+                },
+                {
+                  "title": "Rect Area Light",
+                  "description": "A rectangular area light that emits light uniformly across its surface. Produces soft, realistic illumination similar to a window or LED panel. The most expensive light type — use sparingly.",
+                  "path": "docs/3d-scene/rendering/lights/rect-area-light.mdx",
+                  "category": [
+                    "3d scene",
+                    "Rendering",
+                    "Lights",
+                    "Rect Area Light"
+                  ],
+                  "source": "storybook-example"
+                },
+                {
+                  "title": "Spot Light",
+                  "description": "A cone-shaped light from a position toward a target. Cone shape controlled by `angle` (half-angle of the cone) and `penumbra` (softness of the cone edge).",
+                  "path": "docs/3d-scene/rendering/lights/spot-light.mdx",
+                  "category": [
+                    "3d scene",
+                    "Rendering",
+                    "Lights",
+                    "Spot Light"
+                  ],
+                  "source": "storybook-example"
+                }
+              ],
+              "subcategories": []
+            }
+          ]
+        },
+        {
+          "name": "Materials",
+          "docs": [
+            {
+              "title": "Custom",
+              "description": "This example focuses on a use case, where `RemoteMaterialOverride` can not be used and the material needs imperative code to work properly. Examples can be special shaders, etc... We should limit...",
+              "path": "docs/3d-scene/materials/custom.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Inherit",
+              "description": "`MaterialOverride` allows to override materials in multiple objects across the composition hierarchy at once. This is very useful when the same material is shared across many objects (like a Table,...",
+              "path": "docs/3d-scene/materials/inherit.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Inherit"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Multilevel",
+              "description": "This example is more complex. The choosen material properties depend on 2 filters - material and color. In this example we show how to manage these cases and how to optimaly organize the code so it...",
+              "path": "docs/3d-scene/materials/multilevel.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Multilevel"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Override",
+              "description": "The Material Override component demonstrates how to override material properties of 3D objects in the scene. This is particularly useful when you want to:",
+              "path": "docs/3d-scene/materials/override.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Override"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Simple",
+              "description": "You need to change a material and it's properties! Use `sceneEntityRemoteMaterialOverride`. It works by targeting all entity children's material by their name and so it allows to target multiple...",
+              "path": "docs/3d-scene/materials/simple.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Simple"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Transformer",
+              "description": "Sometimes, you just need to do crazy shit with your materials. When all other features fail, `materialOverrideTransformerComponent` comes to the rescue. It allows you to register a callback function...",
+              "path": "docs/3d-scene/materials/transformer.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Transformer"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Transition",
+              "description": "Sometime we need to transition from one property to another over time, eg. color animations. To do that, you can use `materialOverridePropertyTransition`.",
+              "path": "docs/3d-scene/materials/transition.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Transition"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Transmissive",
+              "description": "Glass looks cool! If you need a special transmissive material, use this one. Caveats are that it will not work with server side rendering and with normal client side render using new canvas.",
+              "path": "docs/3d-scene/materials/transmissive.mdx",
+              "category": [
+                "3d scene",
+                "Materials",
+                "Transmissive"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Dimensions",
+      "docs": [],
+      "subcategories": [
+        {
+          "name": "3D Scene Integration",
+          "docs": [
+            {
+              "title": "Angle Indicators",
+              "description": "Use AngleIndicator to display a read-only angular measurement between two directions in the 3D scene. The component renders an arc with two radial lines and a label showing the measured angle.",
+              "path": "docs/dimensions/3d-scene-integration/angle-indicators.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Angle Indicators"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Dimension Indicators",
+              "description": "Use dimension indicators to display precise measurements directly in the 3D scene, providing users with immediate visual feedback about object dimensions. This Phoenix component is perfect for...",
+              "path": "docs/dimensions/3d-scene-integration/dimension-indicators.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Dimension Indicators"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Editable Angle Indicator",
+              "description": "Use EditableAngleIndicator to let users change angles directly in the 3D scene by clicking on angle arc indicators. This Phoenix component provides interactive angle editing with visual feedback,...",
+              "path": "docs/dimensions/3d-scene-integration/editable-angle-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Editable Angle Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Editable Distance Dimension Indicator",
+              "description": "Use EditableDistanceDimensionIndicator to let users change dimensions directly in the 3D scene by clicking on dimension indicators. This Phoenix component provides interactive dimension editing with...",
+              "path": "docs/dimensions/3d-scene-integration/editable-distance-dimension-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Editable Distance Dimension Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Editable Offset Indicator",
+              "description": "Extends [OffsetIndicator](?path=/docs/dimensions-3d-scene-integration-offset-indicator--docs) with editing support. The user clicks an indicator, enters a new distance, and the entity moves to match....",
+              "path": "docs/dimensions/3d-scene-integration/editable-offset-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Editable Offset Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Editable Size Indicator",
+              "description": "Use EditableSizeIndicator when the measured distance is not a 1:1 mapping to a single state value. The most common case is **measuring a dimension that includes margins, paddings, or offsets** — for...",
+              "path": "docs/dimensions/3d-scene-integration/editable-size-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Editable Size Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "List Selector Dimension Indicator",
+              "description": "Use ListSelectorDimensionIndicator to let users change dimensions directly in the 3D scene by clicking on dimension indicators that open a dropdown menu with predefined options. This Phoenix...",
+              "path": "docs/dimensions/3d-scene-integration/list-selector-dimension-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "List Selector Dimension Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Offset Indicator",
+              "description": "Use OffsetIndicator to measure the projected gap between entities along a direction vector. Unlike `dimensionIndicator` which measures point-to-point distance, OffsetIndicator **projects** the...",
+              "path": "docs/dimensions/3d-scene-integration/offset-indicator.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Offset Indicator"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Overlap Offset Demo",
+              "description": "Rectangular footprint entities (prefab modules, pergola zones) laid out side-by-side on the ground. The user needs to see, at a glance, **how every corner of the selected entity offsets against the...",
+              "path": "docs/dimensions/3d-scene-integration/overlap-offset-demo.mdx",
+              "category": [
+                "Dimensions",
+                "3D Scene Integration",
+                "Overlap Offset Demo"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Basic Concepts",
+          "docs": [
+            {
+              "title": "Dimension Data Unit",
+              "description": "This example demonstrates how to configure the `distanceDataUnit` property in Phoenix's application configuration. The `distanceDataUnit` determines the base unit used internally for storing all...",
+              "path": "docs/dimensions/basic-concepts/dimension-data-unit.mdx",
+              "category": [
+                "Dimensions",
+                "Basic Concepts",
+                "Dimension Data Unit"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Dimension Unit Config",
+              "description": "This example demonstrates different unit configuration strategies and how they work in Phoenix's dimension system. It shows how dimensional values can be displayed and formatted across metric,...",
+              "path": "docs/dimensions/basic-concepts/dimension-unit-config.mdx",
+              "category": [
+                "Dimensions",
+                "Basic Concepts",
+                "Dimension Unit Config"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Selection Controls",
+          "docs": [
+            {
+              "title": "List Selector",
+              "description": "Use DimensionListSelector to choose exactly one dimension value from a predefined list when you need unit-aware selection. This Phoenix element is perfect for standard sizes like desk widths, table...",
+              "path": "docs/dimensions/selection-controls/list-selector.mdx",
+              "category": [
+                "Dimensions",
+                "Selection Controls",
+                "List Selector"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Toggle Selector",
+              "description": "Use DimensionToggleSelector to choose exactly one dimension value from a predefined set using toggle buttons when you need unit-aware selection. This Phoenix element is perfect for standard sizes...",
+              "path": "docs/dimensions/selection-controls/toggle-selector.mdx",
+              "category": [
+                "Dimensions",
+                "Selection Controls",
+                "Toggle Selector"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Input Controls",
+          "docs": [
+            {
+              "title": "Distance Input",
+              "description": "Use DistanceDimensionInput when you need users to input precise distance measurements like width, height, depth, or length. This Phoenix element handles unit conversions, validation, and provides...",
+              "path": "docs/dimensions/input-controls/distance-input.mdx",
+              "category": [
+                "Dimensions",
+                "Input Controls",
+                "Distance Input"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Distance Slider",
+              "description": "Use DistanceDimensionSlider when you need users to adjust distance measurements through an intuitive sliding interface. This Phoenix element combines the precision of numeric input with the visual...",
+              "path": "docs/dimensions/input-controls/distance-slider.mdx",
+              "category": [
+                "Dimensions",
+                "Input Controls",
+                "Distance Slider"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Generic Input",
+              "description": "Whenever you need to control some numerical value with a unit that is not a distance, `GenericDimensionInput` is here for you! It allows you to conrol a numerical property and specify a custom unit.",
+              "path": "docs/dimensions/input-controls/generic-input.mdx",
+              "category": [
+                "Dimensions",
+                "Input Controls",
+                "Generic Input"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Generic Slider",
+              "description": "Whenever you need to control some numerical value with a unit that is not a distance and you want a continual control, `GenericDimensionSlider` is here for you! It allows you to conrol a numerical...",
+              "path": "docs/dimensions/input-controls/generic-slider.mdx",
+              "category": [
+                "Dimensions",
+                "Input Controls",
+                "Generic Slider"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Selection & Highlight",
+      "docs": [
+        {
+          "title": "Canvas",
+          "description": "Canvas selection enables users to interact with 3D entities directly in the scene by clicking on them. This interaction pattern feels natural for 3D configurators where users explore products,...",
+          "path": "docs/selection-and-highlight/canvas.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Canvas"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Disable Highlight Per Object",
+          "description": "Per-object highlighting control allows you to disable the default selection highlighting on specific objects within an entity, while keeping it enabled on others. This is different from the...",
+          "path": "docs/selection-and-highlight/disable-highlight-per-object.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Disable Highlight Per Object"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Disable Highlight",
+          "description": "Disabling selection highlighting removes all visual feedback when entities are selected or hovered. This is useful when you want to provide your own custom selection feedback, use alternative visual...",
+          "path": "docs/selection-and-highlight/disable-highlight.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Disable Highlight"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Fast Emissive Highlight",
+          "description": "The fast emissive highlight is a performance-optimized alternative to the default clone-based highlight. Instead of cloning geometry, it modifies material emissive properties directly. This is useful...",
+          "path": "docs/selection-and-highlight/fast-emissive-highlight.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Fast Emissive Highlight"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Group Highlighting",
+          "description": "Selection groups allow users to select parent entities that contain child entities. When a parent is selected, all children are automatically highlighted through the composition hierarchy.",
+          "path": "docs/selection-and-highlight/group-highlighting.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Group Highlighting"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Hierarchy",
+          "description": "Complex configurators with big composition tree may need to support hierarchical selection. This can be achieved using a combination of transformers that will nail down the desired selection behavior...",
+          "path": "docs/selection-and-highlight/hierarchy.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Hierarchy"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Hotspots",
+          "description": "Selection hotspots provide clickable UI elements positioned in 3D space that allow users to select entities. Unlike canvas selection where users click directly on 3D geometry, hotspots offer visible,...",
+          "path": "docs/selection-and-highlight/hotspots.mdx",
+          "category": [
+            "Selection & Highlight",
+            "Hotspots"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Effects",
+          "docs": [
+            {
+              "title": "Outline",
+              "description": "This example shows how to outline selected or hovered entities on the scene. Compared to overlay, the outline is less intrusive and",
+              "path": "docs/selection-and-highlight/effects/outline.mdx",
+              "category": [
+                "Selection & Highlight",
+                "Effects",
+                "Outline"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Overlay",
+              "description": "This example is basically a reproduction of the [canvas selection](../selection-canvas/SelectionCanvas.mdx), using postprocessing overlay instead of a cloned object to highlight selected/hovered...",
+              "path": "docs/selection-and-highlight/effects/overlay.mdx",
+              "category": [
+                "Selection & Highlight",
+                "Effects",
+                "Overlay"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Recipes & Delete",
+      "docs": [
+        {
+          "title": "Delete Entity",
+          "description": "Use `DeleteEntityButton` when you need to provide users with the ability to remove entities from the configuration. The button automatically performs dry runs and integrates with the violation system...",
+          "path": "docs/recipes-and-delete/delete-entity.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Delete Entity"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Dynamic Root Entity",
+          "description": "Different root entities are usually used to represent different products. However, they can also represent different variants of the same product. In these cases it might be needed to change the root...",
+          "path": "docs/recipes-and-delete/dynamic-root-entity.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Dynamic Root Entity"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Recipe Hierarchy - Selection",
+          "description": "Recipe Child Selection Hierarchy demonstrates a usage pattern of entity selection combined with hierarchical recipe systems to enable selection between predefined entity configurations within a...",
+          "path": "docs/recipes-and-delete/recipe-hierarchy-selection.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Recipe Hierarchy - Selection"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Grouped Button",
+          "description": "Use `GroupedRecipeButton` when you need a compact entry point that opens a grouped recipe browser. The button pushes the `GroupedRecipePanel` onto the `propertyPageStack` and is ideal for property...",
+          "path": "docs/recipes-and-delete/grouped-button.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Grouped Button"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Grouped Panel",
+          "description": "Use `GroupedRecipePanel` when you need a grouped, hierarchical recipe browser on a property page. It presents recipe groups, shows aggregated counts, and lets users drill into group pages to pick...",
+          "path": "docs/recipes-and-delete/grouped-panel.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Grouped Panel"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Horizontal",
+          "description": "Use `HorizontalGroupRecipePanel` when you need to organize recipes into groups and display them with horizontal tab navigation. This panel is ideal for scenarios where you have multiple recipe...",
+          "path": "docs/recipes-and-delete/horizontal.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Horizontal"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Recipe Hierarchy - Lists",
+          "description": "Recipe Lists Hierarchy demonstrates a usage pattern of entity selection combined with hierarchical recipe systems to create complex multi-level configurator experiences. This approach allows users to...",
+          "path": "docs/recipes-and-delete/recipe-hierarchy-lists.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Recipe Hierarchy - Lists"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Replace Panel",
+          "description": "Use `ReplaceEntityPanelButton` when you need a compact entry point that opens a replacement panel (full sidebar page). The button pushes the `ReplaceEntityPanel` onto the `propertyPageStack` and is...",
+          "path": "docs/recipes-and-delete/replace-panel.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Replace Panel"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Replace Dropdown",
+          "description": "Use `ReplaceEntityDropdown` when you need to allow users to replace an existing entity with a different one from available recipes. This component provides a dropdown menu that shows replacement...",
+          "path": "docs/recipes-and-delete/replace-dropdown.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Replace Dropdown"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Simple",
+          "description": "Use `SimpleRecipePanel` when you need a straightforward recipe selection interface that displays all available recipes in a single list without grouping or categorization. This panel is ideal for...",
+          "path": "docs/recipes-and-delete/simple.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Simple"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Vertical",
+          "description": "Use `VerticalGroupRecipePanel` when you need to organize recipes into groups and display them in a vertical accordion layout. This panel is ideal for scenarios where you have multiple recipe...",
+          "path": "docs/recipes-and-delete/vertical.mdx",
+          "category": [
+            "Recipes & Delete",
+            "Vertical"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Drag & Drop",
+      "docs": [
+        {
+          "title": "Overview",
+          "description": "Phoenix provides a layered system for dragging entities in 3D space.",
+          "path": "docs/drag-and-drop/overview.mdx",
+          "category": [
+            "Drag & Drop",
+            "Overview"
+          ],
+          "source": "storybook-root"
+        },
+        {
+          "title": "Drag Handle",
+          "description": "Drag handles allow users to click directly on 3D scene objects to drag them across defined surfaces. This is useful when you want intuitive direct manipulation of entities without requiring separate...",
+          "path": "docs/drag-and-drop/drag-handle.mdx",
+          "category": [
+            "Drag & Drop",
+            "Drag Handle"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Hotspot Handle",
+          "description": "Hotspot drag handles are HTML-based drag handles that users can click and drag to move entities in 3D space. Unlike canvas-based drag handles, HTML handles are easily styled using standard CSS and...",
+          "path": "docs/drag-and-drop/hotspot-handle.mdx",
+          "category": [
+            "Drag & Drop",
+            "Hotspot Handle"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "No Selection",
+          "description": "In many configurators, users must first select an entity before they can drag it. This creates a two-step interaction: click to select, then drag. The no-selection pattern removes this friction by...",
+          "path": "docs/drag-and-drop/no-selection.mdx",
+          "category": [
+            "Drag & Drop",
+            "No Selection"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Planes",
+          "description": "This example demonstrates the capability of having multiple active dragging planes at once, eg. having a room with several walls and furniture that can be dragged around these walls.",
+          "path": "docs/drag-and-drop/planes.mdx",
+          "category": [
+            "Drag & Drop",
+            "Planes"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Rotatable",
+          "description": "Rotatable entities allow users to rotate 3D objects around defined axes. Combined with rotation handles, this provides an intuitive way to adjust entity orientation in the scene.",
+          "path": "docs/drag-and-drop/rotatable.mdx",
+          "category": [
+            "Drag & Drop",
+            "Rotatable"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Swap",
+          "description": "During drag operations, you may need to change entity composition - moving an entity from one parent to another, or swapping positions between entities. This example shows how to modify the domain...",
+          "path": "docs/drag-and-drop/swap.mdx",
+          "category": [
+            "Drag & Drop",
+            "Swap"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Room Planner",
+          "description": "A drag-and-drop demo for apps that arrange many objects inside a bounded space — kitchen planners, wardrobe configurators, retail floor plans, and similar. Multiple object types behave differently...",
+          "path": "docs/drag-and-drop/room-planner.mdx",
+          "category": [
+            "Drag & Drop",
+            "Room Planner"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Snapping",
+          "docs": [
+            {
+              "title": "Overview",
+              "description": "Snapping aligns a dragged entity to nearby targets — a point, an edge, a plane, an axis — so objects click into \"obvious\" positions instead of landing wherever the cursor happens to be. It is...",
+              "path": "docs/drag-and-drop/snapping/overview.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Overview"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Auto-Rotation Demo",
+              "description": "The `autoRotate` property enables entities to automatically rotate when they snap to a target. Auto-rotation is currently supported for **point-to-point** and **point-to-plane** snaps only — it is...",
+              "path": "docs/drag-and-drop/snapping/auto-rotation-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Auto-Rotation Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Snap Axis Demo",
+              "description": "The snap axis system allows entities to automatically align to axis lines. This is useful for:",
+              "path": "docs/drag-and-drop/snapping/snap-axis-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Snap Axis Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Snap Edge Demo",
+              "description": "The snap edge system allows entities to automatically align their edges when dragged within a threshold distance. This is useful for:",
+              "path": "docs/drag-and-drop/snapping/snap-edge-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Snap Edge Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Label Matching Demo",
+              "description": "The `targetLabel` property enables directional label matching for snap points. Each snap point declares its own `label` (identity) and a `targetLabel` (which labels it accepts). This enables typed...",
+              "path": "docs/drag-and-drop/snapping/label-matching-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Label Matching Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Multi-Snap Composition Demo",
+              "description": "Multi-snap composition allows an entity to snap to **two targets simultaneously** when the snaps constrain different axes. This is useful for:",
+              "path": "docs/drag-and-drop/snapping/multi-snap-composition-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Multi-Snap Composition Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Nested Entity Demo",
+              "description": "Snapping works correctly for nested entities — child entities composed under a parent with its own position and rotation. The snap system walks the composition tree to compute world-space positions...",
+              "path": "docs/drag-and-drop/snapping/nested-entity-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Nested Entity Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Snap Plane Demo",
+              "description": "The snap plane system allows entities to automatically snap onto surfaces defined by planes. This demo shows **one-sided snapping** - items only snap to a wall when approaching from one side (the...",
+              "path": "docs/drag-and-drop/snapping/snap-plane-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Snap Plane Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Snap Point Demo",
+              "description": "The snap point system allows entities to automatically snap together when dragged within a threshold distance. This is useful for:",
+              "path": "docs/drag-and-drop/snapping/snap-point-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Snap Point Demo"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Priority Demo",
+              "description": "The `priority` property allows snap targets to compete for attention. When multiple targets are within snap threshold, the one with the highest priority wins — even if a lower-priority target is...",
+              "path": "docs/drag-and-drop/snapping/priority-demo.mdx",
+              "category": [
+                "Drag & Drop",
+                "Snapping",
+                "Priority Demo"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "Spatial Constraints",
+          "docs": [
+            {
+              "title": "Overview",
+              "description": "Spatial constraints keep entities in valid arrangements — not overlapping, touching a neighbour, staying inside a container — declared as rules over each entity's collision geometry rather than coded...",
+              "path": "docs/drag-and-drop/spatial-constraints/overview.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Overview"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Collision System",
+              "description": "`CollisionProjections` is a standalone primitive for querying the spatial relationship between entities — whether they're `disjoint`, `touching`, `overlapping`, or one contains the other — and it...",
+              "path": "docs/drag-and-drop/spatial-constraints/collision-system.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Collision System"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Geometry Override",
+              "description": "An entity sometimes needs two views of its own shape: one for picking and rendering, another for a specific constraint. The classic case: a draggable handle that must stay on another entity's...",
+              "path": "docs/drag-and-drop/spatial-constraints/geometry-override.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Geometry Override"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Touches",
+              "description": "This example opts in to **drag-time enforcement** of the `touches` spatial predicate. When a block is dragged, the constraint transformer intercepts the drag pipeline and snaps the proposed position...",
+              "path": "docs/drag-and-drop/spatial-constraints/touches.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Touches"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Disjoint and Within",
+              "description": "This example opts in to **drag-time enforcement** of spatial constraints. When a block is dragged, the constraint transformer intercepts the drag update pipeline and clamps the proposed position so...",
+              "path": "docs/drag-and-drop/spatial-constraints/disjoint-and-within.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Disjoint and Within"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Multiple Collision Meshes",
+              "description": "When part of a product should constrain things differently from the rest of it — a wardrobe with a hanging zone _inside_ that items can't escape, a kitchen base unit that other modules avoid plus a...",
+              "path": "docs/drag-and-drop/spatial-constraints/multiple-collision-meshes.mdx",
+              "category": [
+                "Drag & Drop",
+                "Spatial Constraints",
+                "Multiple Collision Meshes"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Fabs",
+      "docs": [
+        {
+          "title": "Layout",
+          "description": "FABs and hotspots can be arranged into simple layouts by offsetting them in pixels. This approach allows you to group multiple controls (drag handles, delete buttons, add buttons, custom hotspots) at...",
+          "path": "docs/fabs/layout.mdx",
+          "category": [
+            "Fabs",
+            "Layout"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Basic",
+          "description": "Manipulation with entities in the sidebar might be an overkill simpler entities, especially when the scene contains a lot of them. Sometimes the sidebar itself is hidden or minimized to larger space...",
+          "path": "docs/fabs/basic.mdx",
+          "category": [
+            "Fabs",
+            "Basic"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Other features",
+      "docs": [
+        {
+          "title": "Responsive Viewports",
+          "description": "Keep your product usable in both a narrow phone embed and a wide desktop configurator by showing components suited to the available space. The `viewports` filter can control cameras, hotspots, and...",
+          "path": "docs/other-features/responsive-viewports.mdx",
+          "category": [
+            "Other features",
+            "Responsive Viewports"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Dynamic Component Attachments",
+          "description": "Dynamic component attachment solves scenarios where the number and configuration of scene objects depends on calculated state. Instead of declaring a fixed number of components in YAML, you attach...",
+          "path": "docs/other-features/dynamic-component-attachments.mdx",
+          "category": [
+            "Other features",
+            "Dynamic Component Attachments"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Currency",
+          "description": "Session data stores user-specific information from the authentication token that can be used to personalize the configurator experience. This example shows how to display prices in different...",
+          "path": "docs/other-features/currency.mdx",
+          "category": [
+            "Other features",
+            "Currency"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Not Found (404)",
+          "description": "Error page that is displayed when the configuration is not accesible.",
+          "path": "docs/other-features/not-found-404.mdx",
+          "category": [
+            "Other features",
+            "Not Found (404)"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Error (5xx)",
+          "description": "Error page that is displayed when needed.",
+          "path": "docs/other-features/error-5xx.mdx",
+          "category": [
+            "Other features",
+            "Error (5xx)"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Component Filters",
+          "description": "This example demonstrates various filter patterns available in Phoenix configurators.",
+          "path": "docs/other-features/component-filters.mdx",
+          "category": [
+            "Other features",
+            "Component Filters"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Navigation Hotspot",
+          "description": "Navigation hotspots allow users to navigate to specific navigation states by clicking on hotspots in the 3D scene. They can work instead of (or in addition to) sidebar tabs and steps, providing an...",
+          "path": "docs/other-features/navigation-hotspot.mdx",
+          "category": [
+            "Other features",
+            "Navigation Hotspot"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Projected Entities",
+          "description": "Projected entities let a parent entity declaratively manage the lifecycle of child entities. Instead of manually creating and deleting children, you define **blueprints** in an expression. The system...",
+          "path": "docs/other-features/projected-entities.mdx",
+          "category": [
+            "Other features",
+            "Projected Entities"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Share",
+          "description": "User can copy its configurator link and share it with others. There are two share options - share owner link, with edit rights, and read only link that points to a configuration revision (It will not...",
+          "path": "docs/other-features/share.mdx",
+          "category": [
+            "Other features",
+            "Share"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Side Effects",
+          "description": "In some cases, it is necessary to execute transformations automatically as a result of user changes, to ensure the state remains valid. To avoid confusing the user, it is important to provide...",
+          "path": "docs/other-features/side-effects.mdx",
+          "category": [
+            "Other features",
+            "Side Effects"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Transformers",
+          "description": "This story showcases how one can leverage update transformers to trigger side-effects, override or modify the UI triggered updates, fix invalid states etc. See the examples for inspiration.",
+          "path": "docs/other-features/transformers.mdx",
+          "category": [
+            "Other features",
+            "Transformers"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Violation Messages",
+          "description": "ViolationMessages enables sophisticated error handling through two powerful features: **custom message formatting** and **violation priority systems**. This goes far beyond basic validation to create...",
+          "path": "docs/other-features/violation-messages.mdx",
+          "category": [
+            "Other features",
+            "Violation Messages"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Violation Severity",
+          "description": "Important domain concept to support variety of use cases are violations. Any emitted state is validated and a violation severity is assigned to it. The platform defines several levels",
+          "path": "docs/other-features/violation-severity.mdx",
+          "category": [
+            "Other features",
+            "Violation Severity"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "Client Side Rendering",
+          "docs": [
+            {
+              "title": "Camera Padding",
+              "description": "Dashboard-embedded configurators often generate technical drawings or PDF documents straight from the live scene — after the user has moved and zoomed the camera, and sometimes with the browser tab...",
+              "path": "docs/other-features/client-side-rendering/camera-padding.mdx",
+              "category": [
+                "Other features",
+                "Client Side Rendering",
+                "Camera Padding"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Declarative",
+              "description": "Declarative client-side image rendering allows you to generate product images directly from your 3D scene without server-side rendering infrastructure. This is useful for creating preview thumbnails,...",
+              "path": "docs/other-features/client-side-rendering/declarative.mdx",
+              "category": [
+                "Other features",
+                "Client Side Rendering",
+                "Declarative"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Postprocessing",
+              "description": "Declarative client-side image rendering (see [Declarative](?path=/docs/other-features-client-side-rendering-declarative--docs)) works with Postprocessing. If the Salsita Postprocessing component is...",
+              "path": "docs/other-features/client-side-rendering/postprocessing.mdx",
+              "category": [
+                "Other features",
+                "Client Side Rendering",
+                "Postprocessing"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Custom",
+              "description": "Use client-side rendering to generate images of the current configuration for eCommerce thumbnails, PDFs, or other purposes. The original canvas method preserves all rendering effects like shadows,...",
+              "path": "docs/other-features/client-side-rendering/custom.mdx",
+              "category": [
+                "Other features",
+                "Client Side Rendering",
+                "Custom"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Performance",
+      "docs": [
+        {
+          "title": "Editable Dimension Stress Test",
+          "description": "This example is a regression test for a bug where the floating text label of an editable distance dimension indicator would stop following the indicator arrows and become stuck at a fixed position in...",
+          "path": "docs/performance/editable-dimension-stress-test.mdx",
+          "category": [
+            "Performance",
+            "Editable Dimension Stress Test"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Clone Highlight",
+          "description": "This example uses the default clone-based highlight on a 3x3 grid of selectable console units. Compare with the fast highlight example to see the performance difference.",
+          "path": "docs/performance/clone-highlight.mdx",
+          "category": [
+            "Performance",
+            "Clone Highlight"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Dynamic Components",
+          "description": "This story is building on top of the [Performance](?path=/docs/performance-dynamic-components--docs) example, showcasing additional performance limits regarding dynamic elements. Each entity has 3...",
+          "path": "docs/performance/dynamic-components.mdx",
+          "category": [
+            "Performance",
+            "Dynamic Components"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Fast Highlight",
+          "description": "This example uses the fast emissive highlight on a 3x3 grid of selectable console units. Compare with the clone highlight example to see the performance difference.",
+          "path": "docs/performance/fast-highlight.mdx",
+          "category": [
+            "Performance",
+            "Fast Highlight"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Render Isolation",
+          "description": "A large scene of connected entities: a floor plan of eighty rooms, each holding a dozen draggable boxes, with every room and box linked to the scene and to each other through relations. Click **Add 4...",
+          "path": "docs/performance/render-isolation.mdx",
+          "category": [
+            "Performance",
+            "Render Isolation"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "General",
+          "description": "This story showcases performance limits of the framework. There are 3 different examples with 50/100/150 console units showcasing how performance changes with increasing complexity.",
+          "path": "docs/performance/general.mdx",
+          "category": [
+            "Performance",
+            "General"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Complex Use Cases",
+      "docs": [
+        {
+          "title": "Custom UI on Root Level",
+          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "path": "docs/complex-use-cases/custom-ui-on-root-level.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Custom UI on Root Level"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Filtered controls with Fix Dialog",
+          "description": "When domain has a a lot of invariants, there may be a need to implement several fixes to improve the UX. These fixes can be either automatic using transformers or with a dialog asking user to make a...",
+          "path": "docs/complex-use-cases/filtered-controls-with-fix-dialog.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Filtered controls with Fix Dialog"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Focus Mode",
+          "description": "Focus mode is a UX pattern for situations where users need to concentrate on a specific task or aspect of their configuration. When entering focus mode, the UI filters to show only controls and...",
+          "path": "docs/complex-use-cases/focus-mode.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Focus Mode"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Navigation Guard",
+          "description": "Describe the use case for this story. What problem does it solve? When should this pattern be used?",
+          "path": "docs/complex-use-cases/navigation-guard.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Navigation Guard"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Navigation Reset Selection",
+          "description": "The `createResetSelectionOnNavigationTransformer` automatically deselects entities when the user navigates to specific steps. This clears the active selection when entering certain workflow phases,...",
+          "path": "docs/complex-use-cases/navigation-reset-selection.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Navigation Reset Selection"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Navigation Reset Undo",
+          "description": "The `ResetUndoListener` component clears the undo/redo history when the user navigates to specific steps. This prevents users from undoing changes made in previous workflow stages.",
+          "path": "docs/complex-use-cases/navigation-reset-undo.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Navigation Reset Undo"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Sketching",
+          "description": "Sketching lets users draw and edit 2D shapes on the scene’s XY plane using Phoenix system components. This example shows how to wire sketching modes, tool controls, and custom rendering for shapes...",
+          "path": "docs/complex-use-cases/sketching.mdx",
+          "category": [
+            "Complex Use Cases",
+            "Sketching"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Integrations",
+      "docs": [
+        {
+          "title": "OnLoadProvider",
+          "description": "TODO",
+          "path": "docs/integrations/onloadprovider.mdx",
+          "category": [
+            "Integrations",
+            "OnLoadProvider"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Lifecycle Providers",
+          "description": "Use `createOnPublishedDataReadyProvider` when a configurator must validate web-component properties, route input, or session data against its published schema before it sends frontend data to the...",
+          "path": "docs/integrations/lifecycle-providers.mdx",
+          "category": [
+            "Integrations",
+            "Lifecycle Providers"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": [
+        {
+          "name": "WooCommerce",
+          "docs": [
+            {
+              "title": "Local Development",
+              "description": "For development, it is possible to use the `docker-compose.yml` file in the integration's `docker` folder to run Wordpress with WooCommerce on the local machine.",
+              "path": "docs/integrations/woocommerce/local-development.mdx",
+              "category": [
+                "Integrations",
+                "WooCommerce",
+                "Local Development"
+              ],
+              "source": "storybook-root"
+            },
+            {
+              "title": "Overview",
+              "description": "The integration plugin is designed to be used with WordPress with the WooCommerce plugin installed. It is written in PHP and calls WordPress/WooCommerce helper functions.",
+              "path": "docs/integrations/woocommerce/overview.mdx",
+              "category": [
+                "Integrations",
+                "WooCommerce",
+                "Overview"
+              ],
+              "source": "storybook-root"
+            }
+          ],
+          "subcategories": []
+        },
+        {
+          "name": "WebComponent API",
+          "docs": [
+            {
+              "title": "Basics",
+              "description": "---",
+              "path": "docs/integrations/webcomponent-api/basics.mdx",
+              "category": [
+                "Integrations",
+                "WebComponent API",
+                "Basics"
+              ],
+              "source": "storybook-example"
+            },
+            {
+              "title": "Preset Tags",
+              "description": "Sometimes it's useful to allow only subset of presets to be available based on where the configurator is embedded. For example, if the configurator is embedded in a product page, it's useful to allow...",
+              "path": "docs/integrations/webcomponent-api/preset-tags.mdx",
+              "category": [
+                "Integrations",
+                "WebComponent API",
+                "Preset Tags"
+              ],
+              "source": "storybook-example"
+            }
+          ],
+          "subcategories": []
+        }
+      ]
+    },
+    {
+      "name": "Demos",
+      "docs": [
+        {
+          "title": "Glass",
+          "description": "This is a showcase how glass shaders can look. There is several glass objects showcasing reflections, caustics and shadows.",
+          "path": "docs/demos/glass.mdx",
+          "category": [
+            "Demos",
+            "Glass"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Heater",
+          "description": "This is an implementation of a heater in PHX. This demo will serve as more complex example for Bell Pepper implementations and for testing of features and their interactions.",
+          "path": "docs/demos/heater.mdx",
+          "category": [
+            "Demos",
+            "Heater"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Office Chair",
+          "description": "This is an implementation of previous Office Chair demo in PHX. This demo will serve as more complex example for Bell Pepper implementations and for testing of features and their interactions.",
+          "path": "docs/demos/office-chair.mdx",
+          "category": [
+            "Demos",
+            "Office Chair"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Office Desk",
+          "description": "This is an implementation of previous Office Desk demo in PHX. This demo will serve as more complex example for Bell Pepper implementations and for testing of features and their interactions.",
+          "path": "docs/demos/office-desk.mdx",
+          "category": [
+            "Demos",
+            "Office Desk"
+          ],
+          "source": "storybook-example"
+        },
+        {
+          "title": "Ring",
+          "description": "This is an implementation of previous Ring demo in PHX. This demo will serve as more complex example for Bell Pepper implementations and for testing of features and their interactions.",
+          "path": "docs/demos/ring.mdx",
+          "category": [
+            "Demos",
+            "Ring"
+          ],
+          "source": "storybook-example"
+        }
+      ],
+      "subcategories": []
+    },
+    {
+      "name": "Design System",
+      "docs": [],
+      "subcategories": [
+        {
+          "name": "Components",
+          "docs": [
+            {
+              "title": "Icons",
+              "description": "",
+              "path": "docs/design-system/components/icons.mdx",
+              "category": [
+                "Design System",
+                "Components",
+                "Icons"
+              ],
+              "source": "ui-sdk"
+            }
+          ],
+          "subcategories": [
+            {
+              "name": "Toolbar",
+              "docs": [
+                {
+                  "title": "Desktop",
+                  "description": "The basic structure of toolbar hierarchy is as follows:",
+                  "path": "docs/design-system/components/toolbar/desktop.mdx",
+                  "category": [
+                    "Design System",
+                    "Components",
+                    "Toolbar",
+                    "Desktop"
+                  ],
+                  "source": "ui-sdk"
+                }
+              ],
+              "subcategories": []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}