diff --git a/packages/react/.storybook/main.ts b/packages/react/.storybook/main.ts
index 123839c788..9086f566e7 100644
--- a/packages/react/.storybook/main.ts
+++ b/packages/react/.storybook/main.ts
@@ -27,6 +27,10 @@ const config: StorybookConfig = {
       directory: "../src/experimental",
       titlePrefix: "Components",
     },
+    {
+      directory: "../src/co-creation",
+      titlePrefix: "CoCreation",
+    },
     ...(process.env.STORYBOOK_PUBLIC_BUILD
       ? []
       : [
diff --git a/packages/react/docs/development/using-f0-source.md b/packages/react/docs/development/using-f0-source.md
index c2709039d4..611faa0d31 100644
--- a/packages/react/docs/development/using-f0-source.md
+++ b/packages/react/docs/development/using-f0-source.md
@@ -17,8 +17,7 @@ consumer of `f0`
 
 Building the library will be necessary to use it in the same way as in
 production, but in some scenarios (like local development) we can skip
-publishing and reinstalling (check how to: [in local development](#local) or
-[in coder](#coder))
+publishing and reinstalling (check how to: [in local development](#local)
 
 ## How to
 
@@ -41,7 +40,7 @@ This applies when both `f0` and `factorial`'s monorepo are in the local computer
 5. Run `pnpm link --global @factorialco/f0-react` to use the local version of
    the package
 
-### How to use local version of `f0` in coder {#cder}
+### How to use local version of `f0` using sync
 
 This applies when `f0` is in your local computer and `factorial`'s monorepo is
 in coder's dev environment
@@ -50,25 +49,25 @@ in coder's dev environment
 
 - [rsync](https://linux.die.net/man/1/rsync) in your local computer:
   `brew install rsync`
-- [coder cli](https://coder.com/docs/install/cli) in your local computer
-  - ![Coder ssh](images/coder.png)
-- Configure coder cli if its the first time you connect by ssh:
-  `coder login https://coder.factorial.dev`
-- Create if not exists `packages/react/.env.local` and add this line
-  `CODER_REMOTE=[YOUR_CODER_SSH_CONNECTION_STRING]`, for example:
-  `CODER_REMOTE=coder.sergiocarracedo-dev-env`
+- (optional) Create if not exists `packages/react/.env.local` and add this line
+  `F0_REMOTE_SYNC=[your application]`, for example:
+  `F0_REMOTE_SYNC=/home/sergio/factorial/frontend`
   > This file is in the `.gitignore` file, so it won't be pushed to the
   > repository
+- Add folligin to target workspace vite.config.ts
+
+```
+watch: {
+      ignored: ['!**/node_modules/@factorialco/f0-react/**'],
+    }
+```
 
 **Steps:**
 
 1. Go to the `f0` folder: `cd f0/packages/react`
-2. Run `pnpm dev:coder` to rebuild the project on any change and sync that build
-   to coder workspace
-3. On the `factorial` project you may need to clean vite cache (rm -Rf
-   frontend/node_modules/.vite) and restart frontend service: make
-   session.frontend
+2. Run `pnpm dev:sync [target]` to rebuild the project on any change and sync
+   that build to target. e.g. `pnpm dev:sync /works/factorial/frontend`
 
 > Now on each change in the `f0`'s source code, the changes will be reflected in
-> the coder workspace and the frontend will be reloaded using always the latest
+> the target project and the frontend will be reloaded using always the latest
 > `f0`'s code.
diff --git a/packages/react/package.json b/packages/react/package.json
index ed761bb891..079967297f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,8 +21,10 @@
   "scripts": {
     "dev": "storybook dev -p 6006",
     "dev:docs": "DOCS_MODE=true pnpm run dev",
-    "dev:coder": "pnpm build --watch -- --buildSync",
+    "dev:sync": "pnpm build:prepare && tsx scripts/dev-sync.ts",
     "start": "pnpm run dev",
+    "build:types": "tsc --project ./tsconfig-build.json",
+    "build:prepare": "pnpm run build:types && run-p build-icons",
     "size": "pnpm run build && size-limit",
     "build": "tsc --project ./tsconfig-build.json && run-p build-icons && BUILD_TYPES=true vite build -- --tailwind",
     "build:tsup": "tsup && pnpm run build:tailwind && run-p build-icons",
@@ -162,6 +164,7 @@
     "storybook": "^9.1.3",
     "storybook-addon-tag-badges": "^2.0.2",
     "tsup": "^8.3.5",
+    "tsx": "^4.20.6",
     "typescript": "^5.7.2",
     "user-agent-data-types": "^0.4.2",
     "vite": "^6.3.5",
@@ -177,7 +180,7 @@
     "@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.4",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.5",
-    "@factorialco/f0-core": "workspace:*",
+    "@factorialco/f0-core": "latest",
     "@radix-ui/number": "^1.1.1",
     "@radix-ui/primitive": "^1.1.2",
     "@radix-ui/react-collection": "^1.1.7",
@@ -230,6 +233,8 @@
     "aria-hidden": "^1.2.6",
     "cva": "1.0.0-beta.3",
     "dompurify": "^3.2.6",
+    "echarts": "6",
+    "echarts-for-react": "3.0.4",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.0.1",
diff --git a/packages/react/scripts/dev-sync.ts b/packages/react/scripts/dev-sync.ts
new file mode 100755
index 0000000000..6549914d68
--- /dev/null
+++ b/packages/react/scripts/dev-sync.ts
@@ -0,0 +1,22 @@
+#!/usr/bin/env tsx
+import { spawn } from "node:child_process"
+
+const syncPath = process.argv[2]
+
+if (!syncPath) {
+  console.error("Error: Please provide a sync path")
+  console.error("Usage: pnpm dev:sync <path>")
+  process.exit(1)
+}
+
+// Run vite build directly in watch mode with buildSync flag
+const args = ["vite", "build", "--watch", "--", `--buildSync=${syncPath}`]
+
+const proc = spawn("pnpm", args, {
+  stdio: "inherit",
+  shell: true,
+})
+
+proc.on("exit", (code) => {
+  process.exit(code || 0)
+})
diff --git a/packages/react/src/co-creation/__stories__/CoCreationGroup.stories.tsx b/packages/react/src/co-creation/__stories__/CoCreationGroup.stories.tsx
new file mode 100644
index 0000000000..4a8441db22
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/CoCreationGroup.stories.tsx
@@ -0,0 +1,126 @@
+import { PageLayout } from "@/components/layouts/page/PageLayout"
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { useCocreationGroup } from "../components/CoCreationGroup"
+import {
+  CoCreationGroup,
+  cocreationModes,
+} from "../components/CoCreationGroup/CoCreationGroup"
+import { CoCreationBlockInstance, CoCreationBlockManifest } from "../types"
+import { AvatarCCBManifest } from "./blocks/Avatar"
+import { ChartCCBManifest } from "./blocks/Chart"
+import { KeyValueCCBManifest } from "./blocks/KeyValue"
+import { LongTextCCBManifest } from "./blocks/LongText"
+import { TextCCBManifest } from "./blocks/Text"
+
+const meta = {
+  title: "CoCreationGroup",
+  component: CoCreationGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A component that allows to create a group of blocks using the agent.",
+      },
+    },
+  },
+  tags: ["autodocs", "experimental"],
+  argTypes: {
+    mode: {
+      description: "The mode of the co-creation group",
+      options: cocreationModes,
+      control: { type: "select" },
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      const { instructions } = useCocreationGroup({
+        blockManifests: args.blockManifests,
+        agentInstructions: args.agentInstructions,
+        agentContext: args.agentContext,
+        mode: args.mode,
+      })
+
+      return (
+        <PageLayout
+          aside={
+            <>
+              <h4>Agent intructions</h4>
+              {instructions.map((instruction) => (
+                <p key={instruction}>
+                  <pre>{instruction}</pre>
+                </p>
+              ))}
+            </>
+          }
+        >
+          <Story args={args} />
+        </PageLayout>
+      )
+    },
+  ],
+} satisfies Meta<typeof CoCreationGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const avaliableBlocks: CoCreationBlockManifest[] = [
+  TextCCBManifest,
+  KeyValueCCBManifest,
+  AvatarCCBManifest,
+  LongTextCCBManifest,
+  ChartCCBManifest,
+]
+
+const blocks: CoCreationBlockInstance[] = [
+  {
+    id: "1",
+    type: "text",
+    props: {
+      text: "Hello, world!",
+    },
+  },
+  {
+    id: "2",
+    type: "avatar",
+    props: {
+      avatar: {
+        type: "person",
+        firstName: "John",
+        lastName: "Doe",
+      },
+    },
+  },
+  {
+    id: "3",
+    type: "longText",
+    props: {
+      text: [
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi interdum nisl laoreet, commodo ex id, faucibus purus. Phasellus varius ligula magna. Integer neque nulla, rhoncus vel sagittis et, consequat non velit. Vestibulum sagittis tristique gravida. Aliquam scelerisque iaculis lacinia. Fusce malesuada eros id leo commodo rutrum. Sed lectus turpis, auctor sit amet sem vitae, hendrerit tristique nibh. In imperdiet nisi mi, ultricies bibendum erat scelerisque in. Fusce pulvinar, nunc eu ultrices blandit, felis est consequat ex, quis consectetur nisl mauris id nulla.",
+        "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque consectetur venenatis ex. Aenean mattis tortor mauris, quis semper turpis aliquet sed. Aenean lacus lectus, tincidunt nec varius eleifend, semper at mauris. Integer molestie urna vel nisl sagittis, at tempus enim sagittis. Integer quis arcu eros. Etiam sit amet tincidunt sem. Proin euismod dui vitae fringilla eleifend. Etiam pellentesque vulputate purus id pharetra. Integer viverra leo eget elit venenatis viverra. Quisque auctor mi orci, eget posuere dolor vulputate at. Praesent ac volutpat ligula. Nulla et augue ac nunc vehicula scelerisque. Maecenas ac tristique lectus. In hac habitasse platea dictumst. Maecenas scelerisque felis pulvinar purus rhoncus, ac rutrum turpis sollicitudin.",
+        "In ornare mollis ipsum vitae consectetur. Fusce rutrum neque sed ullamcorper porttitor. In luctus dignissim lectus, at mollis ex venenatis eu. Etiam at ex nec urna elementum ultrices ac ut nunc. Nullam cursus dictum convallis. Vivamus urna felis, tincidunt at massa quis, sollicitudin semper nulla. Vivamus nisi dui, venenatis id aliquam at, fermentum sed lectus. Nulla eget odio quis metus lacinia placerat ut quis massa. Maecenas vel feugiat ligula. Nam vitae tempus nunc. Aenean pulvinar nibh a augue malesuada, sit amet accumsan erat mattis. Praesent facilisis justo purus, id finibus nibh pellentesque vel.",
+      ],
+      title: "Long Text",
+      description: "This is a long text description",
+    },
+  },
+]
+
+// Basic Variants
+export const Default: Story = {
+  args: {
+    blockInstances: blocks,
+    blockManifests: avaliableBlocks,
+    agentInstructions: [
+      "I want to represent the user data using the blocks available ",
+    ],
+    mode: "co-creation",
+    agentContext: [
+      "The user data is:",
+      "John Doe",
+      "email: john.doe@example.com",
+      "phone: +34 666 666 666",
+      "address: 123 Main St, City, Country",
+    ],
+  },
+}
diff --git a/packages/react/src/co-creation/__stories__/blocks/Avatar.tsx b/packages/react/src/co-creation/__stories__/blocks/Avatar.tsx
new file mode 100644
index 0000000000..29b7d83899
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/blocks/Avatar.tsx
@@ -0,0 +1,25 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import z from "zod"
+
+export const AvatarProps = z.object({
+  type: z.enum(["person"]).describe("The type of the avatar"),
+  firstName: z.string().describe("The first name of the person"),
+  lastName: z.string().describe("The last name of the person"),
+})
+
+export const Avatar = (props: z.infer<typeof AvatarProps>) => {
+  return (
+    <>
+      This should be an avatar {props.type} with name {props.firstName}{" "}
+      {props.lastName}
+    </>
+    //<F0AvatarPerson firstName={props.firstName} lastName={props.lastName} />
+  )
+}
+
+export const AvatarCCBManifest: CoCreationBlockManifest = {
+  id: "avatar",
+  description: "A block that displays an avatar",
+  component: Avatar,
+  propsSchema: AvatarProps,
+}
diff --git a/packages/react/src/co-creation/__stories__/blocks/Chart.tsx b/packages/react/src/co-creation/__stories__/blocks/Chart.tsx
new file mode 100644
index 0000000000..6981a0d60e
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/blocks/Chart.tsx
@@ -0,0 +1,24 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import { F0ECharts } from "@/components/Charts/F0ECharts"
+import z from "zod"
+
+export const ChartProps = z.object({
+  title: z.string().describe("The chart title"),
+  chartOptions: z.object({}).describe("ECharts-compatible options"),
+})
+
+export const Chart = (props: z.infer<typeof ChartProps>) => {
+  return (
+    <>
+      <h3>{props.title}</h3>
+      <F0ECharts options={props.chartOptions} />
+    </>
+  )
+}
+
+export const ChartCCBManifest: CoCreationBlockManifest = {
+  id: "chart",
+  description: "A block that displays a chart",
+  component: Chart,
+  propsSchema: ChartProps,
+}
diff --git a/packages/react/src/co-creation/__stories__/blocks/KeyValue.tsx b/packages/react/src/co-creation/__stories__/blocks/KeyValue.tsx
new file mode 100644
index 0000000000..bbf1167e45
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/blocks/KeyValue.tsx
@@ -0,0 +1,23 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import z from "zod"
+
+export const KeyValueProps = z.object({
+  label: z.string().describe("The label to display"),
+  value: z.string().describe("The value to display"),
+})
+
+export const KeyValue = (props: z.infer<typeof KeyValueProps>) => {
+  return (
+    <div className="flex flex-col content-between gap-1">
+      <p className="text-f1-foreground-secondary">{props.label}</p>
+      <p className="text-f1-foreground">{props.value}</p>
+    </div>
+  )
+}
+
+export const KeyValueCCBManifest: CoCreationBlockManifest = {
+  id: "keyValue",
+  description: "A block that displays a key and a value",
+  component: KeyValue,
+  propsSchema: KeyValueProps,
+}
diff --git a/packages/react/src/co-creation/__stories__/blocks/LongText.tsx b/packages/react/src/co-creation/__stories__/blocks/LongText.tsx
new file mode 100644
index 0000000000..980afcdfdd
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/blocks/LongText.tsx
@@ -0,0 +1,27 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import z from "zod"
+
+export const LongTextProps = z.object({
+  text: z
+    .union([z.string(), z.array(z.string())])
+    .describe("The text to display. Can be a string or an array of strings"),
+  title: z.string().optional().describe("The title to display"),
+  description: z.string().optional().describe("The description to display"),
+})
+
+export const LongText = (props: z.infer<typeof LongTextProps>) => {
+  return (
+    <section>
+      {props.title && <h2>{props.title}</h2>}
+      {props.description && <h6>{props.description}</h6>}
+      {props.text && <p>{props.text}</p>}
+    </section>
+  )
+}
+
+export const LongTextCCBManifest: CoCreationBlockManifest = {
+  id: "longText",
+  description: "A block that displays a title and a description",
+  component: LongText,
+  propsSchema: LongTextProps,
+}
diff --git a/packages/react/src/co-creation/__stories__/blocks/Text.tsx b/packages/react/src/co-creation/__stories__/blocks/Text.tsx
new file mode 100644
index 0000000000..959f2bba4c
--- /dev/null
+++ b/packages/react/src/co-creation/__stories__/blocks/Text.tsx
@@ -0,0 +1,31 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import z from "zod"
+
+export const TextProps = z.object({
+  text: z.string().describe("The text to display"),
+})
+
+export const Text = (props: z.infer<typeof TextProps>) => {
+  return <div>{props.text}</div>
+}
+
+export const TextCCBManifest: CoCreationBlockManifest = {
+  id: "text",
+  description: "A block that displays a text",
+  component: Text,
+  propsSchema: TextProps,
+  actions: () => [
+    {
+      label: "Duplicate",
+      onClick: () => {
+        console.log("duplicate")
+      },
+    },
+    {
+      label: "Delete",
+      onClick: () => {
+        console.log("delete")
+      },
+    },
+  ],
+}
diff --git a/packages/react/src/co-creation/components/CoCreationGroup/CoCreationGroup.tsx b/packages/react/src/co-creation/components/CoCreationGroup/CoCreationGroup.tsx
new file mode 100644
index 0000000000..d4140c6754
--- /dev/null
+++ b/packages/react/src/co-creation/components/CoCreationGroup/CoCreationGroup.tsx
@@ -0,0 +1,84 @@
+import {
+  CoCreationBlockInstance,
+  CoCreationBlockManifest,
+} from "@/co-creation/types"
+import { F0Button } from "@/components/F0Button/F0Button"
+import { PageLayout } from "@/components/layouts/page/PageLayout"
+import { Plus } from "lucide-react"
+import { CoCreationBlock } from "./components/CoCreationBlock"
+
+export const cocreationModes = [
+  "co-creation",
+  "co-editing",
+  "co-review",
+] as const
+
+export type CoCreationGroupMode = (typeof cocreationModes)[number]
+
+export type CoCreationGroupProps = {
+  /**
+   * The blocks manifests that are available to use
+   */
+  blockManifests: CoCreationBlockManifest[]
+
+  /**
+   * The block instances that are currently in the group and their props
+   */
+  blockInstances: CoCreationBlockInstance[]
+
+  /**
+   * The mode of the co-creation group
+   * - "co-creation": The agent or user will create and manipulate the block instances and the blocks content
+   * - "co-editing": The block instances list are fixed and the agent or user will edit the blocks content only
+   * - "co-review": The block instances list and the blocks content are fixed and the agent can awswer questions about the content
+   * @default "co-review"
+   */
+  mode: CoCreationGroupMode
+}
+
+export const CoCreationGroup = ({
+  blockInstances,
+  blockManifests,
+  mode,
+}: CoCreationGroupProps) => {
+  return (
+    <PageLayout.Group>
+      {blockInstances.map((instance) => {
+        const manifest = blockManifests.find((b) => b.id === instance.type)
+        return manifest ? (
+          <CoCreationBlock
+            key={instance.id}
+            onClickOneButton={() => {
+              console.log("onClickOneButton", instance)
+            }}
+            instance={instance}
+            manifest={manifest}
+            mode={mode}
+            onClickAddBlock={() => {
+              console.log("onClickAddBlock")
+            }}
+          >
+            <manifest.component key={instance.id} {...instance.props} />
+          </CoCreationBlock>
+        ) : (
+          "Invalid block instance (type not found)"
+        )
+      })}
+
+      {mode === "co-creation" && (
+        <div className="relative flex w-full items-center justify-center p-1 align-middle after:absolute after:bottom-3 after:left-0 after:right-0 after:h-1 after:bg-f1-background-secondary after:content-['']">
+          <F0Button
+            label="Insert new block"
+            onClick={() => {
+              console.log("onClickAddBlock")
+            }}
+            hideLabel
+            variant="ghost"
+            icon={Plus}
+            size="sm"
+          />
+        </div>
+      )}
+    </PageLayout.Group>
+  )
+}
diff --git a/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/CoCreationBlock.tsx b/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/CoCreationBlock.tsx
new file mode 100644
index 0000000000..590d624049
--- /dev/null
+++ b/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/CoCreationBlock.tsx
@@ -0,0 +1,90 @@
+import {
+  CoCreationBlockInstance,
+  CoCreationBlockManifest,
+} from "@/co-creation/types"
+import { F0Button } from "@/components/F0Button/F0Button"
+import { PageLayout } from "@/components/layouts/page/PageLayout"
+import { PageLayoutBlockProps } from "@/components/layouts/page/PageLayout/components/PageLayoutBlock/types"
+import { Plus } from "@/icons/app"
+import { useMemo } from "react"
+import { OneButton } from "../../../OneButton/OneButton"
+import { CoCreationGroupMode } from "../../CoCreationGroup"
+
+export type CoCreationBlockProps = PageLayoutBlockProps & {
+  /**
+   * PRopably we can remove this property and handle the click here sending the block info to the cocreationhook
+   *
+   */
+  onClickOneButton: () => void
+
+  /**
+   * The block instance
+   */
+  instance: CoCreationBlockInstance
+
+  /**
+   * The manifest of the block
+   */
+  manifest: CoCreationBlockManifest
+
+  /**
+   * The mode of the co-creation block
+   */
+  mode: CoCreationGroupMode
+
+  /**
+   * The function to call when the add block button is clicked
+   */
+  onClickAddBlock: () => void
+}
+
+export const CoCreationBlock = (props: CoCreationBlockProps) => {
+  const { instance, manifest, mode } = props
+
+  const actions = useMemo(() => {
+    if (typeof manifest.actions === "function") {
+      return manifest.actions?.(instance.props)
+    }
+    return manifest.actions
+  }, [manifest, instance])
+
+  const primaryAction = useMemo(() => {
+    if (["co-creation", "co-editing"].includes(mode)) {
+      return (
+        <OneButton
+          size="sm"
+          label="Edit with One"
+          onClick={props.onClickOneButton}
+        />
+      )
+    }
+
+    if (mode === "co-review") {
+      return (
+        <OneButton size="sm" label="Ask One" onClick={props.onClickOneButton} />
+      )
+    }
+  }, [mode, props.onClickAddBlock, props.onClickOneButton])
+  return (
+    <PageLayout.Block
+      className="group relative"
+      primaryAction={primaryAction}
+      {...props}
+      actions={actions}
+    >
+      {props.children}
+      {mode === "co-creation" && (
+        <div className="absolute -bottom-1 left-0 right-0 hidden items-center justify-center align-middle after:absolute after:bottom-3 after:left-0 after:right-0 after:h-1 after:bg-f1-background-secondary after:content-[''] group-hover:flex">
+          <F0Button
+            label="Insert new block"
+            onClick={props.onClickAddBlock}
+            hideLabel
+            variant="ghost"
+            icon={Plus}
+            size="sm"
+          />
+        </div>
+      )}
+    </PageLayout.Block>
+  )
+}
diff --git a/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/index.ts b/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/index.ts
new file mode 100644
index 0000000000..48af930dcb
--- /dev/null
+++ b/packages/react/src/co-creation/components/CoCreationGroup/components/CoCreationBlock/index.ts
@@ -0,0 +1 @@
+export * from "./CoCreationBlock"
diff --git a/packages/react/src/co-creation/components/CoCreationGroup/index.ts b/packages/react/src/co-creation/components/CoCreationGroup/index.ts
new file mode 100644
index 0000000000..8bbc2383a9
--- /dev/null
+++ b/packages/react/src/co-creation/components/CoCreationGroup/index.ts
@@ -0,0 +1,2 @@
+export * from "./CoCreationGroup"
+export * from "./useCocreationGroup"
diff --git a/packages/react/src/co-creation/components/CoCreationGroup/useCocreationGroup.ts b/packages/react/src/co-creation/components/CoCreationGroup/useCocreationGroup.ts
new file mode 100644
index 0000000000..2bd1847da5
--- /dev/null
+++ b/packages/react/src/co-creation/components/CoCreationGroup/useCocreationGroup.ts
@@ -0,0 +1,78 @@
+import { CoCreationBlockManifest } from "@/co-creation/types"
+import { toArray } from "@/lib/toArray"
+import { useMemo } from "react"
+import { CoCreationGroupMode } from "./CoCreationGroup"
+
+const modeInstructions: Record<CoCreationGroupMode, string[]> = {
+  "co-creation": [
+    "You are a co-creation agent. You will create and manipulate the block instances and the blocks content. You will use the blocks manifests to choose the different blocks types to create or edit the block instances and the blocks content",
+  ],
+  "co-editing": [
+    "You are a co-editing agent. You will edit the blocks content only. You will use the blocks understand the content and the context to edit the blocks content.",
+  ],
+  "co-review": [
+    "You are a co-review agent. You will answer questions about the blocks content.",
+  ],
+}
+
+const commonInstructions: string[] = [
+  "Block manifests describes the basic information pieces used to build the content. Each manifest desceribes a block type, for what use it and the schema needed to populate it",
+  "Block instances are the actual instances of the blocks manifest (block types). They are the basic information pieces used to build the content. Each instance is a block type with the props needed to populate it",
+]
+
+const indent = (text: string | string[]) => {
+  return toArray(text).map((line) => `    ${line}`)
+}
+const blockManifestToStrings = (blockManifest: CoCreationBlockManifest) => {
+  return [
+    `- ${blockManifest.id}:`,
+    ...indent([
+      "Description / use case:",
+      ...indent(blockManifest.description),
+    ]),
+    ...indent([
+      "Props schema:",
+      ...indent(blockManifest.propsSchema.toString()),
+    ]),
+  ]
+}
+export const useCocreationGroup = (options: {
+  blockManifests: CoCreationBlockManifest[]
+  agentInstructions: string | string[]
+  agentContext?: string | string[]
+  mode?: CoCreationGroupMode
+}) => {
+  const {
+    mode = "co-review",
+    blockManifests,
+    agentInstructions,
+    agentContext,
+  } = options
+
+  const instructions = useMemo(() => {
+    const modeText = toArray(modeInstructions[mode] ?? [])
+
+    return [
+      ...modeText,
+      ...commonInstructions,
+      "---",
+      "This is the list of the block types (block manifests) used to build the content:",
+      ...blockManifests.flatMap((manifest) => {
+        return indent(blockManifestToStrings(manifest))
+      }),
+      "---",
+      "Following are the group instructions:",
+      ...indent(agentInstructions),
+      "---",
+      ...(agentContext
+        ? ["Following are the group context:", ...indent(agentContext)]
+        : []),
+    ]
+
+    console.log(agentContext)
+  }, [agentInstructions, agentContext, blockManifests, mode])
+
+  return {
+    instructions,
+  }
+}
diff --git a/packages/react/src/co-creation/components/OneButton/OneButton.tsx b/packages/react/src/co-creation/components/OneButton/OneButton.tsx
new file mode 100644
index 0000000000..20df50b701
--- /dev/null
+++ b/packages/react/src/co-creation/components/OneButton/OneButton.tsx
@@ -0,0 +1,31 @@
+import { ButtonInternal } from "@/components/F0Button/internal"
+import { ButtonSize } from "@/components/F0Button/types"
+import { One } from "@/icons/special"
+
+export type OneButtonProps = {
+  label: string
+  onClick: () => void
+  disabled?: boolean
+  loading?: boolean
+  size?: ButtonSize
+}
+
+export const OneButton = ({
+  label,
+  onClick,
+  disabled,
+  loading,
+  size,
+}: OneButtonProps) => {
+  return (
+    <ButtonInternal
+      label={label}
+      onClick={onClick}
+      disabled={disabled}
+      loading={loading}
+      variant="outline"
+      size={size}
+      icon={One}
+    />
+  )
+}
diff --git a/packages/react/src/co-creation/components/OneButton/index.ts b/packages/react/src/co-creation/components/OneButton/index.ts
new file mode 100644
index 0000000000..75b1dfe645
--- /dev/null
+++ b/packages/react/src/co-creation/components/OneButton/index.ts
@@ -0,0 +1 @@
+export * from "./OneButton"
diff --git a/packages/react/src/co-creation/exports.ts b/packages/react/src/co-creation/exports.ts
new file mode 100644
index 0000000000..31601a3d5a
--- /dev/null
+++ b/packages/react/src/co-creation/exports.ts
@@ -0,0 +1,2 @@
+export * from "./components/CoCreationGroup"
+export * from "./types"
diff --git a/packages/react/src/co-creation/types.ts b/packages/react/src/co-creation/types.ts
new file mode 100644
index 0000000000..8c806e7e41
--- /dev/null
+++ b/packages/react/src/co-creation/types.ts
@@ -0,0 +1,65 @@
+import {
+  LayoutBlockActionGroup,
+  LayoutBlockActionItem,
+} from "@/components/layouts/page/PageLayout"
+import { ZodSchema } from "zod"
+
+export type CoCreationBlockTypeId = string
+
+export type CoCreationBlockActions =
+  | LayoutBlockActionGroup[]
+  | LayoutBlockActionItem[]
+  | LayoutBlockActionGroup
+
+export type CoCreationBlockManifest<
+  PropsSchema extends ZodSchema = ZodSchema<unknown>,
+> = {
+  /**
+   * The description of the usecase for the block for the agent
+   */
+  description: string | string[]
+
+  /**
+   * The id of the block type
+   */
+  id: CoCreationBlockTypeId
+
+  /**
+   * The component of the block type
+   */
+  component: React.ComponentType<any>
+
+  /*
+   * The variant of the component to display in the chat or preview
+   */
+  teaserComponent?: React.ComponentType<any>
+
+  /**
+   * The props definition of the block type
+   */
+  propsSchema: PropsSchema
+
+  actions?:
+    | CoCreationBlockActions
+    | ((props: PropsSchema) => CoCreationBlockActions)
+}
+
+export type CoCreationBlockInstance = {
+  /**
+   * The identifier of the block instance
+   */
+  id: string
+  /**
+   * The type of the block
+   */
+  type: CoCreationBlockTypeId
+
+  /**
+   * The props of the block instance
+   */
+  props: any
+}
+
+export type CoCreationBlockInstanceWithManifest = CoCreationBlockInstance & {
+  manifest: CoCreationBlockManifest
+}
diff --git a/packages/react/src/components/Charts/F0ECharts/F0ECharts.tsx b/packages/react/src/components/Charts/F0ECharts/F0ECharts.tsx
new file mode 100644
index 0000000000..5d0e091009
--- /dev/null
+++ b/packages/react/src/components/Charts/F0ECharts/F0ECharts.tsx
@@ -0,0 +1,61 @@
+import * as echarts from "echarts"
+import { useEffect, useMemo, useRef } from "react"
+import "./themes/f0.light"
+
+export const F0ECharts = ({ options }: { options: echarts.EChartsOption }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const chart = useRef<echarts.ECharts | null>(null)
+  useEffect(() => {
+    if (ref.current) {
+      chart.current = echarts.init(ref.current)
+    }
+  }, [ref])
+
+  const optionsWithDefaults = useMemo(() => {
+    const optionsDefaults = {
+      aria: {
+        role: "img",
+        labelledby: "chart-title",
+      },
+      grid: {
+        left: 10,
+        right: 20,
+        top: "title" in options ? 50 : 10,
+        bottom: "legend" in options ? 70 : 10,
+      },
+      legend: {
+        ...options.legend,
+        show: options.legend ? true : false,
+      },
+    }
+
+    return Object.assign({}, optionsDefaults, options)
+  }, [options])
+
+  useEffect(() => {
+    chart.current?.setOption(optionsWithDefaults)
+  }, [optionsWithDefaults, chart])
+
+  // Set theme
+  const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
+  function updateDarkMode() {
+    const isDarkMode = darkModeMediaQuery.matches
+    console.log("isDarkMode", isDarkMode)
+    chart.current?.setTheme("f0.light")
+    //isDarkMode ? "f0.dark" : "f0.light")
+  }
+
+  darkModeMediaQuery.addEventListener("change", () => {
+    updateDarkMode()
+  })
+  updateDarkMode()
+
+  return (
+    <div
+      ref={ref}
+      className="h-full w-full"
+      style={{ border: "1px solid red" }}
+    />
+  )
+}
diff --git a/packages/react/src/components/Charts/F0ECharts/__stories__/F0ECharts.stories.tsx b/packages/react/src/components/Charts/F0ECharts/__stories__/F0ECharts.stories.tsx
new file mode 100644
index 0000000000..4b671de101
--- /dev/null
+++ b/packages/react/src/components/Charts/F0ECharts/__stories__/F0ECharts.stories.tsx
@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { F0ECharts } from "../index"
+
+const meta = {
+  component: F0ECharts,
+  title: "Charts/F0ECharts",
+  tags: ["autodocs", "experimental", "internal"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A wrapper around ECharts for React that provides a simple line chart visualization. This is an experimental component.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-80 w-96">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof F0ECharts>
+
+export default meta
+type Story = StoryObj<typeof F0ECharts>
+
+export const Default: Story = {
+  render: (args) => <F0ECharts {...args} />,
+  args: {
+    options: {
+      title: {
+        text: "Monthly Performance Review vs. Average",
+      },
+      tooltip: {
+        trigger: "axis",
+      },
+      legend: {
+        data: ["Employee", "Average"],
+      },
+      xAxis: {
+        type: "category",
+        data: [
+          "Jan",
+          "Feb",
+          "Mar",
+          "Apr",
+          "May",
+          "Jun",
+          "Jul",
+          "Aug",
+          "Sep",
+          "Oct",
+          "Nov",
+          "Dec",
+        ],
+      },
+      yAxis: {
+        type: "value",
+        name: "Performance Score",
+      },
+      series: [
+        {
+          name: "Employee",
+          type: "bar",
+          data: [78, 82, 85, 80, 88, 90, 92, 89, 87, 91, 93, 95],
+        },
+        {
+          name: "Average",
+          type: "line",
+          data: [80, 80, 81, 82, 83, 85, 86, 87, 86, 88, 89, 90],
+          smooth: true,
+          lineStyle: {
+            type: "dashed",
+          },
+        },
+      ],
+    },
+  },
+}
+
+export const WithCustomSize: Story = {
+  ...Default,
+  decorators: [
+    (Story) => (
+      <div className="h-64 w-full max-w-2xl">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const CompactSize: Story = {
+  ...Default,
+  decorators: [
+    (Story) => (
+      <div className="h-40 w-64">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        story: "The chart works well in smaller containers too.",
+      },
+    },
+  },
+}
diff --git a/packages/react/src/components/Charts/F0ECharts/index.ts b/packages/react/src/components/Charts/F0ECharts/index.ts
new file mode 100644
index 0000000000..e4f1279ba3
--- /dev/null
+++ b/packages/react/src/components/Charts/F0ECharts/index.ts
@@ -0,0 +1,10 @@
+import { experimentalComponent } from "@/lib/experimental"
+import { F0ECharts as _F0ECharts } from "./F0ECharts"
+
+/**
+ * @experimental This is an experimental component use it at your own risk
+ */
+export const F0ECharts = experimentalComponent<typeof _F0ECharts>(
+  "F0ECharts",
+  _F0ECharts
+)
diff --git a/packages/react/src/components/Charts/F0ECharts/themes/f0.light.ts b/packages/react/src/components/Charts/F0ECharts/themes/f0.light.ts
new file mode 100644
index 0000000000..0eba69ae1e
--- /dev/null
+++ b/packages/react/src/components/Charts/F0ECharts/themes/f0.light.ts
@@ -0,0 +1,187 @@
+import { registerTheme } from "echarts"
+
+export const colorPalette = [
+  "#ff0000",
+  "#00ff00",
+  "#0000ff",
+  "#0000ff",
+  "#000000",
+  "#c42703",
+  "#d07e75",
+]
+
+export const theme = {
+  color: colorPalette,
+  textStyle: {
+    fontFamily: "monospace",
+    fontWeight: "bold",
+    fontSize: 12,
+  },
+
+  title: {
+    textStyle: {
+      fontWeight: "normal",
+      color: "#d8361b",
+    },
+  },
+
+  visualMap: {
+    color: ["#d8361b", "#ffd2d2"],
+  },
+
+  dataRange: {
+    color: ["#bd0707", "#ffd2d2"],
+  },
+
+  toolbox: {
+    color: ["#d8361b", "#d8361b", "#d8361b", "#d8361b"],
+  },
+
+  tooltip: {
+    backgroundColor: "rgba(0,0,0,0.5)",
+    axisPointer: {
+      // Axis indicator, coordinate trigger effective
+      type: "line", // The default is a straight line： 'line' | 'shadow'
+      lineStyle: {
+        // Straight line indicator style settings
+        color: "#d8361b",
+        type: "dashed",
+      },
+      crossStyle: {
+        color: "#d8361b",
+      },
+      shadowStyle: {
+        // Shadow indicator style settings
+        color: "rgba(200,200,200,0.3)",
+      },
+    },
+  },
+
+  // Area scaling controller
+  dataZoom: {
+    dataBackgroundColor: "#eee", // Data background color
+    fillerColor: "rgba(216,54,27,0.2)", // Fill the color
+    handleColor: "#d8361b", // Handle color
+  },
+
+  grid: {
+    borderWidth: 0,
+  },
+
+  categoryAxis: {
+    axisLine: {
+      // Coordinate axis
+      lineStyle: {
+        // Property 'lineStyle' controls line styles
+        color: "#d8361b",
+      },
+    },
+    splitLine: {
+      // Separation line
+      lineStyle: {
+        // Property 'lineStyle' (see lineStyle) controls line styles
+        color: ["#eee"],
+      },
+    },
+  },
+
+  valueAxis: {
+    axisLine: {
+      // Coordinate axis
+      lineStyle: {
+        // Property 'lineStyle' controls line styles
+        color: "#d8361b",
+      },
+    },
+    splitArea: {
+      show: true,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.1)", "rgba(200,200,200,0.1)"],
+      },
+    },
+    splitLine: {
+      // Separation line
+      lineStyle: {
+        // Property 'lineStyle' (see lineStyle) controls line styles
+        color: ["#eee"],
+      },
+    },
+  },
+
+  timeline: {
+    lineStyle: {
+      color: "#d8361b",
+    },
+    controlStyle: {
+      color: "#d8361b",
+      borderColor: "#d8361b",
+    },
+  },
+
+  candlestick: {
+    itemStyle: {
+      color: "#f16b4c",
+      color0: "#f7b4a9",
+    },
+    lineStyle: {
+      width: 1,
+      color: "#d8361b",
+      color0: "#d26666",
+    },
+    areaStyle: {
+      color: "#d8361b",
+      color0: "#d07e75",
+    },
+  },
+
+  graph: {
+    itemStyle: {
+      color: "#d07e75",
+    },
+    linkStyle: {
+      color: "#d8361b",
+    },
+  },
+
+  chord: {
+    padding: 4,
+    itemStyle: {
+      color: "#d07e75",
+      borderWidth: 1,
+      borderColor: "rgba(128, 128, 128, 0.5)",
+    },
+    lineStyle: {
+      color: "rgba(128, 128, 128, 0.5)",
+    },
+    areaStyle: {
+      color: "#d8361b",
+    },
+  },
+
+  map: {
+    itemStyle: {
+      color: "#d8361b",
+    },
+    areaStyle: {
+      color: "#d07e75",
+    },
+    label: {
+      color: "#c12e34",
+    },
+  },
+
+  gauge: {
+    axisLine: {
+      lineStyle: {
+        color: [
+          [0.2, "#f16b4c"],
+          [0.8, "#d8361b"],
+          [1, "#99311c"],
+        ],
+        width: 8,
+      },
+    },
+  },
+}
+
+registerTheme("f0.light", theme)
diff --git a/packages/react/src/components/OneFilterPicker/filterTypes/DateFilter/DateFilter.stories.tsx b/packages/react/src/components/OneFilterPicker/filterTypes/DateFilter/DateFilter.stories.tsx
new file mode 100644
index 0000000000..39120dab2c
--- /dev/null
+++ b/packages/react/src/components/OneFilterPicker/filterTypes/DateFilter/DateFilter.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { addDays } from "date-fns"
+import { DateFilter } from "./DateFilter"
+
+const meta = {
+  title: "FilterPicker/Filters/DateFilter",
+  component: DateFilter,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="border-f1-border-primary w-[300px] rounded-md border p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DateFilter>
+
+export default meta
+
+type Story = StoryObj<typeof DateFilter>
+
+// Static options example
+export const Default: Story = {
+  args: {
+    schema: {
+      label: "Date",
+      options: {
+        mode: "single",
+        view: "day",
+      },
+    },
+    onChange: () => {},
+  },
+}
+
+// With selected values
+export const WithSelectedDate: Story = {
+  args: {
+    schema: {
+      label: "Department",
+      options: {
+        mode: "single",
+        view: "day",
+      },
+    },
+    value: new Date(),
+    onChange: () => {},
+  },
+}
+
+// Only range
+export const WithSelectedDateRange: Story = {
+  args: {
+    schema: {
+      label: "Date",
+      options: {
+        mode: "range",
+        view: "day",
+      },
+    },
+    value: {
+      from: new Date(),
+      to: addDays(new Date(), 1),
+    },
+    onChange: () => {},
+  },
+}
diff --git a/packages/react/src/components/OneFilterPicker/filterTypes/NumberFilter/NumberFilter.stories.tsx b/packages/react/src/components/OneFilterPicker/filterTypes/NumberFilter/NumberFilter.stories.tsx
new file mode 100644
index 0000000000..c76046beaa
--- /dev/null
+++ b/packages/react/src/components/OneFilterPicker/filterTypes/NumberFilter/NumberFilter.stories.tsx
@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { NumberFilter } from "./NumberFilter"
+
+const meta = {
+  title: "FilterPicker/Filters/NumberFilter",
+  component: NumberFilter,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="border-f1-border-primary w-[300px] rounded-md border p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof NumberFilter>
+
+export default meta
+
+type Story = StoryObj<typeof NumberFilter>
+
+// Static options example
+export const Default: Story = {
+  args: {
+    schema: {
+      label: "Salary",
+      options: {
+        min: 0,
+        max: 100000,
+      },
+    },
+    onChange: () => {},
+  },
+}
+
+// With selected values
+export const WithSelectedValues: Story = {
+  args: {
+    schema: {
+      label: "Department",
+      options: {
+        min: 0,
+        max: 100000,
+      },
+    },
+    value: [50000, 100000],
+    onChange: () => {},
+  },
+}
+
+// Only range
+export const OnlyRange: Story = {
+  args: {
+    schema: {
+      label: "Salary",
+      options: {
+        modes: ["range"],
+        min: 0,
+        max: 100000,
+      },
+    },
+    value: undefined,
+    onChange: () => {},
+  },
+}
+
+// Only single
+export const OnlySingle: Story = {
+  args: {
+    schema: {
+      label: "Salary",
+      options: {
+        modes: ["single"],
+      },
+    },
+  },
+}
diff --git a/packages/react/src/components/layouts/page/PageLayout/PageLayout.tsx b/packages/react/src/components/layouts/page/PageLayout/PageLayout.tsx
new file mode 100644
index 0000000000..5f12a54072
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/PageLayout.tsx
@@ -0,0 +1,73 @@
+import { cn } from "@/lib/utils"
+import { ReactNode, forwardRef } from "react"
+import { validatePageLayoutChildren } from "./internal/utils"
+
+export interface PageLayoutProps {
+  children: ReactNode
+  aside?: ReactNode
+  header?: ReactNode
+  variant?: "main-aside" | "aside-main"
+}
+
+const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
+  function PageLayout(
+    { children: mainContent, aside, header, variant = "main-aside" },
+    ref
+  ) {
+    const stickyHeader = true
+    const stickyAside = true
+
+    // Validate that all children are PageLayoutBlock components in development
+    if (process.env.NODE_ENV === "development") {
+      validatePageLayoutChildren(mainContent)
+    }
+
+    return (
+      <div ref={ref} className="h-full">
+        <div
+          className={cn(
+            "flex h-full max-w-full overflow-auto text-f1-foreground md:flex-row",
+            "flex-col",
+            "overflow-y-auto",
+            stickyHeader && "md:sticky md:top-0 md:max-h-full"
+          )}
+        >
+          <main
+            className={cn(
+              "sm:min-h-xs h-fit border-0",
+              "order-1 sm:flex-1 sm:border-solid md:order-2",
+              stickyAside
+                ? "md:auto md:h-full md:max-h-full md:overflow-y-auto md:overflow-x-hidden"
+                : "min-h-full",
+              variant === "aside-main"
+                ? "sm:border-l sm:border-l-f1-border-secondary"
+                : "sm:border-r sm:border-r-f1-border-secondary",
+              "border-t border-solid border-t-f1-border-secondary sm:border-t-0"
+            )}
+          >
+            {header && (
+              <header className={cn(stickyHeader && "sticky top-0 z-30")}>
+                {header}
+              </header>
+            )}
+            <div className="flex-1">{mainContent}</div>
+          </main>
+
+          {aside && (
+            <aside
+              className={cn(
+                "min-w-30 sm:basis-1/4 md:max-w-80",
+                "order-2",
+                variant === "aside-main" ? "md:order-1" : "md:order-3"
+              )}
+            >
+              {aside}
+            </aside>
+          )}
+        </div>
+      </div>
+    )
+  }
+)
+
+export { PageLayout }
diff --git a/packages/react/src/components/layouts/page/PageLayout/__stories__/PageLayout.stories.tsx b/packages/react/src/components/layouts/page/PageLayout/__stories__/PageLayout.stories.tsx
new file mode 100644
index 0000000000..60e229db5d
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/__stories__/PageLayout.stories.tsx
@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+
+import { DetailsItemsList } from "@/experimental/Lists/DetailsItemsList"
+import * as DetailsItemsListStories from "@/experimental/Lists/DetailsItemsList/index.stories"
+import { Dashboard } from "@/experimental/Widgets/Layout/Dashboard"
+import * as DashboardStories from "@/experimental/Widgets/Layout/Dashboard/index.stories"
+import { PageDecorator } from "@/lib/storybook-utils/pageDecorator"
+import { ComponentProps } from "react"
+import { PageLayoutContentBlock } from "../components/PageLayoutContentBlock"
+import { PageLayout } from "../index"
+
+const FocusableElement = () => {
+  return (
+    <div className="p-4">
+      <label htmlFor="focusable-element">Focusable Element</label>
+      <div>
+        <input
+          type="text"
+          className="border-0 bg-[#fff] px-2"
+          id="focusable-element"
+        />
+      </div>
+    </div>
+  )
+}
+const meta = {
+  title: "Layout/Page/Page Layout",
+  component: PageLayout,
+  tags: ["autodocs"],
+  decorators: [PageDecorator],
+  args: {
+    children: (
+      <div className="flex h-[800px] flex-col items-center justify-center bg-f1-foreground-info text-f1-foreground-inverse">
+        Main
+        <FocusableElement />
+        <p>
+          Should the the first focusable element even if main is on right side
+        </p>
+      </div>
+    ),
+    header: (
+      <div className="flex flex-col items-center justify-center bg-[#777] p-3 text-f1-foreground-inverse">
+        Header
+        <FocusableElement />
+      </div>
+    ),
+    aside: (
+      <div className="flex h-48 flex-col items-center justify-center bg-f1-foreground-secondary text-f1-foreground-inverse">
+        Aside
+        <FocusableElement />
+      </div>
+    ),
+  },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [{ id: "svg-img-alt", enabled: false }],
+      },
+    },
+    docs: {
+      description: {
+        component: [
+          "A page layout component that is used to display a main content, header and an aside content. This component manages the responsiveness of the content.",
+          "This component doesnt provide any padding or margin for the content, only the content layout",
+        ]
+          .map((line) => `<p>${line}</p>`)
+          .join(""),
+      },
+      story: {
+        height: "650px",
+      },
+    },
+  },
+} satisfies Meta<typeof PageLayout>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const ProfileExample: Story = {
+  args: {
+    variant: "main-aside",
+    children: (
+      <PageLayout.Block>
+        <Dashboard {...DashboardStories.default.args} />
+      </PageLayout.Block>
+    ),
+    header: (
+      <PageLayout.Block variant="full">
+        <div className="flex flex-col items-center justify-center bg-f1-foreground-secondary p-3 text-f1-foreground-inverse">
+          Header
+        </div>
+      </PageLayout.Block>
+    ),
+    aside: (
+      <PageLayout.Block>
+        <DetailsItemsList
+          {...(DetailsItemsListStories.default.args as ComponentProps<
+            typeof DetailsItemsList
+          >)}
+        />
+      </PageLayout.Block>
+    ),
+  },
+}
+
+export const AsideMainVariant: Story = {
+  args: {
+    ...Default.args,
+    variant: "aside-main",
+  },
+}
+
+export const WithContentBlocks: Story = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <PageLayoutContentBlock
+          title="Welcome Dashboard"
+          description="Here's an overview of your current activities and metrics"
+          variant="default"
+        >
+          <Dashboard {...DashboardStories.default.args} />
+        </PageLayoutContentBlock>
+
+        <PageLayoutContentBlock
+          title="Quick Actions"
+          description="Frequently used actions and shortcuts"
+          titleLevel="h3"
+          variant="full-width"
+        >
+          <div className="grid grid-cols-2 gap-4">
+            <button className="rounded border bg-f1-background-secondary p-4">
+              Action 1
+            </button>
+            <button className="rounded border bg-f1-background-secondary p-4">
+              Action 2
+            </button>
+          </div>
+        </PageLayoutContentBlock>
+
+        <PageLayoutContentBlock title="System Status" titleLevel="h4">
+          <div className="text-sm text-f1-foreground-secondary">
+            All systems operational ✅
+          </div>
+        </PageLayoutContentBlock>
+
+        <PageLayout.Group sortable onSort={(items) => console.log(items)}>
+          <PageLayoutContentBlock title="System Status" titleLevel="h4">
+            <div className="text-sm text-f1-foreground-secondary">
+              All systems operational ✅
+            </div>
+          </PageLayoutContentBlock>
+          <PageLayoutContentBlock title="System Status 2" titleLevel="h4">
+            <div className="text-sm text-f1-foreground-secondary">
+              All systems operational 2✅
+            </div>
+          </PageLayoutContentBlock>
+        </PageLayout.Group>
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Example showing multiple PageLayoutContentBlock components with different configurations - titles, descriptions, and content types.",
+      },
+    },
+  },
+}
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/PageLayoutBlock.tsx b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/PageLayoutBlock.tsx
new file mode 100644
index 0000000000..a8b25c01de
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/PageLayoutBlock.tsx
@@ -0,0 +1,138 @@
+import { Dropdown, DropdownItem } from "@/experimental/Navigation/Dropdown"
+import { cn } from "@/lib/utils"
+import { cva } from "cva"
+import { forwardRef, useMemo } from "react"
+import {
+  LayoutBlockActionGroup,
+  LayoutBlockActionItem,
+  PageLayoutBlockComponent,
+  PageLayoutBlockProps,
+} from "./types"
+
+const variants = cva({
+  base: "flex w-full flex-col p-4",
+  variants: {
+    variant: {
+      default: "",
+      "full-width": "px-0",
+      full: "p-0",
+    },
+  },
+})
+
+/**
+ * Converts the item actions definition to dropdown items
+ * @param actions - The item actions definition to convert
+ * @param item - The item to convert the actions for
+ * @returns An array of dropdown items
+ */
+export const actionsToLayoutBlockActionItems = (
+  actions: LayoutBlockActionGroup[] | undefined
+): DropdownItem[] => {
+  return (actions || [])
+    .map((group) => group.items)
+    .reduce<DropdownItem[]>((acc, curr) => {
+      if (acc.length > 0) {
+        acc.push({ type: "separator" })
+      }
+      acc.push(...curr)
+      return acc
+    }, [])
+}
+
+/**
+ * Normalize the items to an array of DropdownButtonGroup
+ */
+const normalizeActionItems = (
+  items:
+    | LayoutBlockActionItem[]
+    | LayoutBlockActionGroup[]
+    | LayoutBlockActionGroup
+) => {
+  const isActionDefinition = (
+    item: LayoutBlockActionItem | LayoutBlockActionGroup
+  ): item is LayoutBlockActionItem => {
+    return "onClick" in item
+  }
+
+  if (Array.isArray(items)) {
+    // LayoutBlockActionItem[] case
+    if (items.every(isActionDefinition)) {
+      return [
+        {
+          items: items,
+        },
+      ]
+    } else {
+      // LayoutBlockActionGroup[] case
+      return items
+    }
+  } else {
+    // LayoutBlockActionGroup case
+    return [items]
+  }
+}
+
+export const PageLayoutBlock = forwardRef<HTMLDivElement, PageLayoutBlockProps>(
+  (
+    {
+      children,
+      variant = "default",
+      className,
+      draggable = false,
+      onDragStart,
+      onDragEnd,
+      onDrop,
+      dragId,
+      primaryAction,
+      ...props
+    },
+    ref
+  ) => {
+    const actions = useMemo(
+      () => normalizeActionItems(props.actions || []),
+      [props.actions]
+    )
+
+    const actionsDropdownItems: DropdownItem[] = useMemo(
+      () => actions.flatMap((action) => action.items),
+      [actions]
+    )
+
+    const showActionsBar = useMemo(
+      () => actionsDropdownItems.length > 0 || !!primaryAction,
+      [actionsDropdownItems, primaryAction]
+    )
+
+    return (
+      <div
+        ref={ref}
+        className={cn(variants({ variant }), "relative", className)}
+        draggable={draggable}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
+        onDrop={onDrop}
+        data-drag-id={dragId}
+        {...props}
+      >
+        {showActionsBar && (
+          <div className="absolute right-0 top-0 flex items-center justify-end gap-2 p-4">
+            {!!primaryAction && primaryAction}
+            {actionsDropdownItems.length > 0 && (
+              <Dropdown
+                items={actionsToLayoutBlockActionItems(actions)}
+                data-testid="actions-dropdown"
+              />
+            )}
+          </div>
+        )}
+        <div data-testid="content">{children}</div>
+      </div>
+    )
+  }
+)
+
+PageLayoutBlock.displayName = "PageLayoutBlock"
+// Mark as a valid PageLayoutBlock component
+;(PageLayoutBlock as unknown as PageLayoutBlockComponent).__isPageLayoutBlock =
+  true
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/index.ts b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/index.ts
new file mode 100644
index 0000000000..5c9f4eb4b9
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/index.ts
@@ -0,0 +1,2 @@
+export * from "./PageLayoutBlock"
+export * from "./types"
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/types.ts b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/types.ts
new file mode 100644
index 0000000000..27668083ca
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutBlock/types.ts
@@ -0,0 +1,47 @@
+import { IconType } from "@/components/F0Icon"
+import { ReactElement } from "react"
+
+export interface LayoutBlockActionItem {
+  label: string
+  description?: string
+  icon?: IconType
+  onClick: () => void
+}
+
+export interface LayoutBlockActionGroup {
+  label?: string
+  items: LayoutBlockActionItem[]
+}
+
+export interface PageLayoutBlockProps {
+  children: React.ReactNode
+  variant?: "default" | "full-width" | "full"
+  fullHeight?: boolean
+  className?: string
+  // Drag and drop props (for future implementation)
+  draggable?: boolean
+  onDragStart?: (e: React.DragEvent) => void
+  onDragEnd?: (e: React.DragEvent) => void
+  onDrop?: (e: React.DragEvent) => void
+  dragId?: string
+  /**
+   * The actions to display in the block.
+   */
+  actions?:
+    | LayoutBlockActionItem[]
+    | LayoutBlockActionGroup[]
+    | LayoutBlockActionGroup
+  /**
+   * TODO: Limit the elements here to button or onebutton
+   */
+  primaryAction?: React.ReactNode
+}
+
+// Base marker interface for PageLayoutBlock components
+export interface PageLayoutBlockComponent {
+  __isPageLayoutBlock: true
+  displayName?: string
+}
+
+// Type for components that inherit from PageLayoutBlock
+export type PageLayoutBlockElement = ReactElement<PageLayoutBlockProps>
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutContentBlock.tsx b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutContentBlock.tsx
new file mode 100644
index 0000000000..c6ba13ced5
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutContentBlock.tsx
@@ -0,0 +1,63 @@
+import { cn } from "@/lib/utils"
+import { ReactNode } from "react"
+import { createPageLayoutBlock } from "../utils"
+import { PageLayoutBlockProps } from "./PageLayoutBlock"
+import { PageLayoutBlock } from "./PageLayoutBlock/PageLayoutBlock"
+
+export interface PageLayoutContentBlockProps extends PageLayoutBlockProps {
+  title: string
+  description?: string
+  titleLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+  children: ReactNode
+}
+
+// Make the additional props optional for the helper function
+interface ContentBlockExtraProps {
+  title?: string
+  description?: string
+  titleLevel?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
+const PageLayoutContentBlockComponent = ({
+  title = "",
+  description,
+  titleLevel = "h2",
+  children,
+  className,
+  ...props
+}: PageLayoutBlockProps & ContentBlockExtraProps) => {
+  if (!title) return null
+
+  const TitleTag = titleLevel
+
+  return (
+    <PageLayoutBlock {...props} className={cn("space-y-4", className)}>
+      <div className="space-y-2">
+        <TitleTag
+          className={cn("font-semibold text-f1-foreground", {
+            "text-2xl": titleLevel === "h1",
+            "text-xl": titleLevel === "h2",
+            "text-lg": titleLevel === "h3",
+            "text-base": titleLevel === "h4",
+            "text-sm": titleLevel === "h5",
+            "text-xs": titleLevel === "h6",
+          })}
+        >
+          {title}
+        </TitleTag>
+
+        {description && (
+          <p className="text-sm text-f1-foreground-secondary">{description}</p>
+        )}
+      </div>
+
+      <div className="flex-1">{children}</div>
+    </PageLayoutBlock>
+  )
+}
+
+// Create the component using the helper function
+export const PageLayoutContentBlock = createPageLayoutBlock(
+  "PageLayoutContentBlock",
+  PageLayoutContentBlockComponent
+)
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/PageLayoutGroup.tsx b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/PageLayoutGroup.tsx
new file mode 100644
index 0000000000..681a42e856
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/PageLayoutGroup.tsx
@@ -0,0 +1,36 @@
+import {
+  Children,
+  forwardRef,
+  Fragment,
+  ReactNode,
+  useEffect,
+  useState,
+} from "react"
+import { PageLayoutGroupComponent, PageLayoutGroupProps } from "./types"
+
+export const PageLayoutGroup = forwardRef<HTMLDivElement, PageLayoutGroupProps>(
+  ({ children, onSort, ...props }, ref) => {
+    const [items, setItems] = useState<ReactNode[]>(Children.toArray(children))
+
+    useEffect(() => {
+      setItems(Children.toArray(children))
+    }, [children])
+
+    useEffect(() => {
+      onSort?.(items)
+    }, [items, onSort])
+
+    return (
+      <div ref={ref} {...props}>
+        {items.map((item, index) => (
+          <Fragment key={index}>{item}</Fragment>
+        ))}
+      </div>
+    )
+  }
+)
+
+PageLayoutGroup.displayName = "PageLayoutGroup"
+// Mark as a valid PageLayoutGroup component
+;(PageLayoutGroup as unknown as PageLayoutGroupComponent).__isPageLayoutGroup =
+  true
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/index.ts b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/index.ts
new file mode 100644
index 0000000000..3a17477d10
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/index.ts
@@ -0,0 +1,2 @@
+export * from "./PageLayoutGroup"
+export * from "./types"
diff --git a/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/types.ts b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/types.ts
new file mode 100644
index 0000000000..34319e57c7
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/components/PageLayoutGroup/types.ts
@@ -0,0 +1,16 @@
+import { ReactElement } from "react"
+
+export interface PageLayoutGroupProps {
+  children: React.ReactNode
+  sortable?: boolean
+  onSort?: (items: React.ReactNode[]) => void
+}
+
+// Base marker interface for PageLayoutBlock components
+export interface PageLayoutGroupComponent {
+  __isPageLayoutGroup: true
+  displayName?: string
+}
+
+// Type for components that inherit from PageLayoutGroup
+export type PageLayoutGroupElement = ReactElement<PageLayoutGroupProps>
diff --git a/packages/react/src/components/layouts/page/PageLayout/index.ts b/packages/react/src/components/layouts/page/PageLayout/index.ts
new file mode 100644
index 0000000000..da9611d5a8
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/index.ts
@@ -0,0 +1,10 @@
+import { PageLayout as PageLayoutComponent } from "./PageLayout"
+import { PageLayoutBlock } from "./components/PageLayoutBlock/PageLayoutBlock"
+import { PageLayoutGroup } from "./components/PageLayoutGroup/PageLayoutGroup"
+export * from "./components/PageLayoutBlock/types"
+export * from "./components/PageLayoutGroup/types"
+
+export const PageLayout = Object.assign(PageLayoutComponent, {
+  Block: PageLayoutBlock,
+  Group: PageLayoutGroup,
+})
diff --git a/packages/react/src/components/layouts/page/PageLayout/internal/utils.ts b/packages/react/src/components/layouts/page/PageLayout/internal/utils.ts
new file mode 100644
index 0000000000..82f8d147e8
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/internal/utils.ts
@@ -0,0 +1,35 @@
+import { Children, isValidElement, ReactNode } from "react"
+import { PageLayoutBlock } from "../components/PageLayoutBlock/PageLayoutBlock"
+import {
+  PageLayoutBlockComponent,
+  PageLayoutBlockElement,
+} from "../components/PageLayoutBlock/types"
+
+// Utility to check if a component is a valid PageLayoutBlock
+export const isPageLayoutBlockComponent = (
+  child: ReactNode
+): child is PageLayoutBlockElement => {
+  return (
+    isValidElement(child) &&
+    ((child.type as unknown as PageLayoutBlockComponent)
+      ?.__isPageLayoutBlock === true ||
+      child.type === PageLayoutBlock ||
+      (typeof child.type === "function" &&
+        (child.type as { displayName?: string }).displayName ===
+          "PageLayoutBlock"))
+  )
+}
+
+// Utility to validate all children are PageLayoutBlock components
+export const validatePageLayoutChildren = (children: ReactNode): void => {
+  const childArray = Children.toArray(children)
+
+  for (const child of childArray) {
+    if (!isPageLayoutBlockComponent(child)) {
+      console.warn(
+        `PageLayout: Child component must inherit from PageLayoutBlock. Found:`,
+        child
+      )
+    }
+  }
+}
diff --git a/packages/react/src/components/layouts/page/PageLayout/types.ts b/packages/react/src/components/layouts/page/PageLayout/types.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/react/src/components/layouts/page/PageLayout/utils.ts b/packages/react/src/components/layouts/page/PageLayout/utils.ts
new file mode 100644
index 0000000000..8b153fb897
--- /dev/null
+++ b/packages/react/src/components/layouts/page/PageLayout/utils.ts
@@ -0,0 +1,18 @@
+import {
+  PageLayoutBlockComponent,
+  PageLayoutBlockProps,
+} from "./components/PageLayoutBlock/types"
+
+// Helper function to create components that inherit from PageLayoutBlock
+export const createPageLayoutBlock = <T extends Record<string, unknown>>(
+  displayName: string,
+  Component: React.ComponentType<PageLayoutBlockProps & T>
+): React.ComponentType<PageLayoutBlockProps & T> => {
+  const WrappedComponent = Component as React.ComponentType<
+    PageLayoutBlockProps & T
+  > &
+    PageLayoutBlockComponent
+  WrappedComponent.displayName = displayName
+  WrappedComponent.__isPageLayoutBlock = true
+  return WrappedComponent
+}
diff --git a/packages/react/src/f0.ts b/packages/react/src/f0.ts
index 13ca0f3ecf..eb219f7447 100644
--- a/packages/react/src/f0.ts
+++ b/packages/react/src/f0.ts
@@ -1,3 +1,4 @@
+export * from "./co-creation/exports"
 export * from "./components/exports"
 export * from "./hooks/exports"
 export * from "./lib/exports"
diff --git a/packages/react/src/lib/storybook-utils/pageDecorator.tsx b/packages/react/src/lib/storybook-utils/pageDecorator.tsx
index c35dd2d4eb..b3d916832d 100644
--- a/packages/react/src/lib/storybook-utils/pageDecorator.tsx
+++ b/packages/react/src/lib/storybook-utils/pageDecorator.tsx
@@ -2,9 +2,16 @@ import { Page } from "../../experimental/Navigation/Page"
 import * as PageStories from "../../experimental/Navigation/Page/index.stories"
 
 export const PageDecorator = (Story: React.ComponentType) => (
-  <div className="flex h-[600px] w-full flex-row">
-    <Page {...PageStories.Default.args}>
-      <Story />
-    </Page>
-  </div>
+  <>
+    <div className="flex h-[600px] w-full flex-row border-[1px] border-dashed border-[#333]">
+      <Page {...PageStories.Default.args}>
+        <Story />
+      </Page>
+    </div>
+    <p className="mt-2 align-middle">
+      The &nbsp;
+      <span className="inline-block w-5 border-[1px] border-dashed border-[#333]"></span>
+      &nbsp; indicates the screen border
+    </p>
+  </>
 )
diff --git a/packages/react/src/lib/toArray/__tests__/toArray.test.ts b/packages/react/src/lib/toArray/__tests__/toArray.test.ts
new file mode 100644
index 0000000000..b3e217dda2
--- /dev/null
+++ b/packages/react/src/lib/toArray/__tests__/toArray.test.ts
@@ -0,0 +1,81 @@
+import { describe, expect, it } from "vitest"
+import { toArray } from "../toArray"
+
+describe("toArray", () => {
+  it("should return an empty array when value is undefined", () => {
+    const result = toArray(undefined)
+    expect(result).toEqual([])
+  })
+
+  it("should return an empty array when value is null", () => {
+    const result = toArray(null)
+    expect(result).toEqual([])
+  })
+
+  it("should return the same array when value is already an array", () => {
+    const input = [1, 2, 3]
+    const result = toArray(input)
+    expect(result).toEqual([1, 2, 3])
+    expect(result).toBe(input) // Should return the same reference
+  })
+
+  it("should wrap a single value in an array", () => {
+    const result = toArray(42)
+    expect(result).toEqual([42])
+  })
+
+  it("should wrap a string value in an array", () => {
+    const result = toArray("hello")
+    expect(result).toEqual(["hello"])
+  })
+
+  it("should wrap an object in an array", () => {
+    const obj = { id: 1, name: "test" }
+    const result = toArray(obj)
+    expect(result).toEqual([obj])
+  })
+
+  it("should wrap a boolean value in an array", () => {
+    expect(toArray(true)).toEqual([true])
+    expect(toArray(false)).toEqual([false])
+  })
+
+  it("should handle empty arrays", () => {
+    const input: number[] = []
+    const result = toArray(input)
+    expect(result).toEqual([])
+    expect(result).toBe(input)
+  })
+
+  it("should handle arrays with multiple types", () => {
+    const input = [1, "two", { three: 3 }, true]
+    const result = toArray(input)
+    expect(result).toEqual([1, "two", { three: 3 }, true])
+  })
+
+  it("should handle zero as a value", () => {
+    const result = toArray(0)
+    expect(result).toEqual([0])
+  })
+
+  it("should handle empty string as a value", () => {
+    const result = toArray("")
+    expect(result).toEqual([""])
+  })
+
+  it("should preserve type information with generics", () => {
+    // String type
+    const stringResult: string[] = toArray<string>("test")
+    expect(stringResult).toEqual(["test"])
+
+    // Number type
+    const numberResult: number[] = toArray<number>(123)
+    expect(numberResult).toEqual([123])
+
+    // Custom type
+    type User = { id: number; name: string }
+    const user: User = { id: 1, name: "John" }
+    const userResult: User[] = toArray<User>(user)
+    expect(userResult).toEqual([user])
+  })
+})
diff --git a/packages/react/src/lib/toArray/index.ts b/packages/react/src/lib/toArray/index.ts
new file mode 100644
index 0000000000..3a1027dc8a
--- /dev/null
+++ b/packages/react/src/lib/toArray/index.ts
@@ -0,0 +1 @@
+export * from "./toArray"
diff --git a/packages/react/src/lib/toArray/toArray.ts b/packages/react/src/lib/toArray/toArray.ts
new file mode 100644
index 0000000000..58730da8c4
--- /dev/null
+++ b/packages/react/src/lib/toArray/toArray.ts
@@ -0,0 +1,6 @@
+export const toArray = <T>(value: T | T[] | undefined | null): T[] => {
+  if (value === undefined || value === null) {
+    return []
+  }
+  return Array.isArray(value) ? value : [value]
+}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
index b87d1915e3..97166d7823 100644
--- a/packages/react/vite.config.ts
+++ b/packages/react/vite.config.ts
@@ -3,7 +3,7 @@ import react from "@vitejs/plugin-react"
 import { consola } from "consola"
 import dotenv from "dotenv"
 import { spawnSync } from "node:child_process"
-import { copyFileSync } from "node:fs"
+import { copyFileSync, existsSync } from "node:fs"
 import path, { resolve } from "path"
 import removeTestIdAttribute from "rollup-plugin-jsx-remove-attributes"
 import { defineConfig, Plugin } from "vite"
@@ -29,19 +29,16 @@ if (buildTailwind) {
 }
 
 /* Build sync */
-const defaultCoderWorkspaceFolder =
-  "/home/factorial/workspace/factorial/frontend/node_modules/@factorialco/f0-react"
-
 const buildSyncArg = process.argv.find((arg) => arg.startsWith("--buildSync"))
 const buildSync = !!buildSyncArg
 const buildSyncValue = buildSyncArg
-  ? buildSyncArg.split("=")[1] || process.env.CODER_REMOTE
+  ? buildSyncArg.split("=")[1] || process.env.F0_REMOTE_SYNC
   : null
 
 if (buildSync) {
   if (!buildSyncValue) {
     consola.error(
-      "The buildSync flag must remote target or you can set it in the env variable CODER_REMOTE in the `.env.local` file"
+      "The buildSync flag must remote target or you can set it in the env variable F0_REMOTE_SYNC in the `.env.local` file"
     )
     process.exit(1)
   }
@@ -49,14 +46,21 @@ if (buildSync) {
   const [remote, remoteFolder] = buildSyncValue.split(":")
 
   const target = buildSyncValue.includes(":")
-    ? [remote, remoteFolder || defaultCoderWorkspaceFolder]
-        .filter(Boolean)
-        .join(":")
+    ? [remote, remoteFolder].filter(Boolean).join(":")
     : buildSyncValue
 
+  const targetFolder = `${target}/node_modules/@factorialco/f0-react/dist`
+
+  if (!existsSync(targetFolder)) {
+    consola.error(
+      "The target folder does not exist. Please check the target folder and try again."
+    )
+    process.exit(1)
+  }
+
   extraPlugins.push(
     buildSyncPlugin({
-      target,
+      target: targetFolder,
     })
   )
 }
diff --git a/packages/react/vite/build-sync.plugin.ts b/packages/react/vite/build-sync.plugin.ts
index afe60bff60..8fa1fe3138 100644
--- a/packages/react/vite/build-sync.plugin.ts
+++ b/packages/react/vite/build-sync.plugin.ts
@@ -58,6 +58,8 @@ export function buildSyncPlugin(pluginConfig: CoderSyncPluginConfig) {
       )
       try {
         const start = Date.now()
+        consola.debug(consolaPrefix, "Syncing files to", pluginConfig.target)
+
         const { output, status } = spawnSync("rsync", [
           "-avz",
           "--delete",
diff --git a/packages/react/vite/dev-name.plugin.ts b/packages/react/vite/dev-name.plugin.ts
new file mode 100644
index 0000000000..a5b88a47c2
--- /dev/null
+++ b/packages/react/vite/dev-name.plugin.ts
@@ -0,0 +1,25 @@
+export const devName = () => ({
+  visitor: {
+    JSXElement(path: any) {
+      const openingElement = path.node.openingElement
+      const componentName = openingElement.name.name
+
+      if (componentName && /^[A-Z]/.test(componentName)) {
+        const hasAttr = openingElement.attributes.some((attr) =>
+          attr.name?.name.startsWith("data-dev-name")
+        )
+
+        if (!hasAttr) {
+          // Generate a random string of size 5
+          const randomStr = Math.random().toString(36).substring(2, 7)
+          const dataDevNameAttribute = `data-dev-name-${randomStr}`
+          openingElement.attributes.push({
+            type: "JSXAttribute",
+            name: { type: "JSXIdentifier", name: dataDevNameAttribute },
+            value: { type: "StringLiteral", value: componentName },
+          })
+        }
+      }
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb1f032b81..28ffe29835 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -31,7 +31,7 @@ importers:
         version: 0.4.20(eslint@9.27.0(jiti@2.4.2))
       eslint-plugin-storybook:
         specifier: ^9.1.3
-        version: 9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)
+        version: 9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)
       lefthook:
         specifier: ^1.11.3
         version: 1.11.3
@@ -68,7 +68,7 @@ importers:
         version: 3.5.2
       tsup:
         specifier: ^8.3.5
-        version: 8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
+        version: 8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(tsx@4.20.6)(typescript@5.8.2)(yaml@2.7.0)
 
   packages/react:
     dependencies:
@@ -324,6 +324,12 @@ importers:
       dompurify:
         specifier: ^3.2.6
         version: 3.2.6
+      echarts:
+        specifier: '6'
+        version: 6.0.0
+      echarts-for-react:
+        specifier: 3.0.4
+        version: 3.0.4(echarts@6.0.0)(react@18.3.1)
       embla-carousel-autoplay:
         specifier: ^8.5.2
         version: 8.5.2(embla-carousel@8.6.0)
@@ -427,7 +433,7 @@ importers:
     devDependencies:
       '@chromatic-com/storybook':
         specifier: ^4.1.1
-        version: 4.1.1(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 4.1.1(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@commitlint/cli':
         specifier: ^19.7.1
         version: 19.8.0(@types/node@22.15.21)(typescript@5.8.2)
@@ -469,25 +475,25 @@ importers:
         version: 11.2.0(size-limit@11.2.0)
       '@storybook/addon-a11y':
         specifier: ^9.1.3
-        version: 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/addon-designs':
         specifier: ^10.0.2
-        version: 10.0.2(@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 10.0.2(@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/addon-docs':
         specifier: ^9.1.3
-        version: 9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/addon-links':
         specifier: ^9.1.3
-        version: 9.1.3(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 9.1.3(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/addon-themes':
         specifier: ^9.1.3
-        version: 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/react-vite':
         specifier: ^9.1.3
-        version: 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       '@storybook/test-runner':
         specifier: ^0.23.0
-        version: 0.23.0(@swc/helpers@0.5.17)(@types/node@22.15.21)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 0.23.0(@swc/helpers@0.5.17)(@types/node@22.15.21)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@svgr/cli':
         specifier: ^8.1.0
         version: 8.1.0(typescript@5.8.2)
@@ -529,7 +535,7 @@ importers:
         version: 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.2)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.3.4(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 4.3.4(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       '@vitest/coverage-v8':
         specifier: ^3.2.4
         version: 3.2.4(vitest@3.0.7)
@@ -571,7 +577,7 @@ importers:
         version: 0.4.20(eslint@9.27.0(jiti@2.4.2))
       eslint-plugin-storybook:
         specifier: ^9.1.3
-        version: 9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)
+        version: 9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
@@ -616,19 +622,22 @@ importers:
         version: 4.0.1
       rollup-plugin-jsx-remove-attributes:
         specifier: ^3.1.1
-        version: 3.1.1(@rollup/pluginutils@5.1.4(rollup@4.40.2))(astring@1.9.0)(estree-walker@3.0.3)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 3.1.1(@rollup/pluginutils@5.1.4(rollup@4.40.2))(astring@1.9.0)(estree-walker@3.0.3)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       size-limit:
         specifier: ^11.2.0
         version: 11.2.0
       storybook:
         specifier: ^9.1.3
-        version: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       storybook-addon-tag-badges:
         specifier: ^2.0.2
-        version: 2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+        version: 2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       tsup:
         specifier: ^8.3.5
-        version: 8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0)
+        version: 8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(tsx@4.20.6)(typescript@5.8.2)(yaml@2.7.0)
+      tsx:
+        specifier: ^4.20.6
+        version: 4.20.6
       typescript:
         specifier: ^5.7.2
         version: 5.8.2
@@ -637,16 +646,16 @@ importers:
         version: 0.4.2
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+        version: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
       vite-plugin-dts:
         specifier: 4.3.0
-        version: 4.3.0(@types/node@22.15.21)(rollup@4.40.2)(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 4.3.0(@types/node@22.15.21)(rollup@4.40.2)(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       vite-plugin-lib-inject-css:
         specifier: ^2.2.1
-        version: 2.2.1(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+        version: 2.2.1(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       vitest:
         specifier: ^3.0.7
-        version: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(yaml@2.7.0)
+        version: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
   packages/react-native:
     dependencies:
@@ -7315,6 +7324,15 @@ packages:
   ecdsa-sig-formatter@1.0.11:
     resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
 
+  echarts-for-react@3.0.4:
+    resolution: {integrity: sha512-rc7SNdr0JoMTkMJspp9ejlZAoipv2mMwbI30ggIgxSZMELdX36C2aJREvJ9OSkyetC/RoO1s7VrefXUrUAMClg==}
+    peerDependencies:
+      echarts: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+      react: ^15.0.0 || >=16.0.0
+
+  echarts@6.0.0:
+    resolution: {integrity: sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==}
+
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -8100,6 +8118,9 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
   get-uri@6.0.5:
     resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
     engines: {node: '>= 14'}
@@ -11354,6 +11375,9 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   resolve-workspace-root@2.0.0:
     resolution: {integrity: sha512-IsaBUZETJD5WsI11Wt8PKHwaIe45or6pwNc8yflvLJ4DWtImK9kuLoH5kUva/2Mmx/RdIyr4aONNSa2v9LTJsw==}
 
@@ -11619,6 +11643,9 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  size-sensor@1.0.2:
+    resolution: {integrity: sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -12167,6 +12194,9 @@ packages:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -12189,6 +12219,11 @@ packages:
       typescript:
         optional: true
 
+  tsx@4.20.6:
+    resolution: {integrity: sha512-ytQKuwgmrrkDTFP4LjR0ToE2nqgy886GpvRSpU0JAnrdBYppuY5rLkRUYPU1yCryb24SsKBTL/hlDQAEFVwtZg==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   twemoji-parser@14.0.0:
     resolution: {integrity: sha512-9DUOTGLOWs0pFWnh1p6NF+C3CkQ96PWmEFwhOVmT3WbecRC+68AIqpsnJXygfkFcp4aXbOp8Dwbhh/HQgvoRxA==}
 
@@ -12977,6 +13012,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zrender@6.0.0:
+    resolution: {integrity: sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==}
+
   zustand@4.5.6:
     resolution: {integrity: sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ==}
     engines: {node: '>=12.7.0'}
@@ -14666,13 +14704,13 @@ snapshots:
 
   '@cfworker/json-schema@4.1.1': {}
 
-  '@chromatic-com/storybook@4.1.1(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@chromatic-com/storybook@4.1.1(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@neoconfetti/react': 1.0.0
       chromatic: 12.2.0
       filesize: 10.1.6
       jsonfile: 6.1.0
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       strip-ansi: 7.1.0
     transitivePeerDependencies:
       - '@chromatic-com/cypress'
@@ -15959,12 +15997,12 @@ snapshots:
       '@types/yargs': 17.0.33
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.30.17
       react-docgen-typescript: 2.4.0(typescript@5.8.2)
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     optionalDependencies:
       typescript: 5.8.2
 
@@ -17834,11 +17872,11 @@ snapshots:
     dependencies:
       '@statsig/client-core': 3.24.4
 
-  '@storybook/addon-a11y@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/addon-a11y@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@storybook/global': 5.0.0
       axe-core: 4.10.3
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
 
   '@storybook/addon-actions@8.6.14(storybook@8.6.14(prettier@2.8.8))':
     dependencies:
@@ -17856,32 +17894,32 @@ snapshots:
       storybook: 8.6.14(prettier@2.8.8)
       ts-dedent: 2.2.0
 
-  '@storybook/addon-designs@10.0.2(@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/addon-designs@10.0.2(@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@figspec/react': 1.0.4(react@18.3.1)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     optionalDependencies:
-      '@storybook/addon-docs': 9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+      '@storybook/addon-docs': 9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/addon-docs@9.1.3(@types/react@18.3.18)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@mdx-js/react': 3.1.0(@types/react@18.3.18)(react@18.3.1)
-      '@storybook/csf-plugin': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+      '@storybook/csf-plugin': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       '@storybook/icons': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/react-dom-shim': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+      '@storybook/react-dom-shim': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-links@9.1.3(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/addon-links@9.1.3(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     optionalDependencies:
       react: 18.3.1
 
@@ -17943,17 +17981,17 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/addon-themes@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/addon-themes@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       ts-dedent: 2.2.0
 
-  '@storybook/builder-vite@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@storybook/builder-vite@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      '@storybook/csf-plugin': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
   '@storybook/components@8.6.14(storybook@8.6.14(prettier@2.8.8))':
     dependencies:
@@ -17980,9 +18018,9 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/csf-plugin@9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       unplugin: 1.16.1
 
   '@storybook/csf@0.1.13':
@@ -18017,11 +18055,11 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       storybook: 8.6.14(prettier@2.8.8)
 
-  '@storybook/react-dom-shim@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/react-dom-shim@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
 
   '@storybook/react-native-theming@8.6.4(react-native@0.76.9(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.18)(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -18090,21 +18128,21 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@storybook/react-vite@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@storybook/react-vite@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.40.2)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      '@storybook/builder-vite': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
-      '@storybook/react': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)
+      '@storybook/builder-vite': 9.1.3(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
+      '@storybook/react': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)
       find-up: 7.0.0
       magic-string: 0.30.17
       react: 18.3.1
       react-docgen: 8.0.0
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.10
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       tsconfig-paths: 4.2.0
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -18125,17 +18163,17 @@ snapshots:
       '@storybook/test': 8.6.14(storybook@8.6.14(prettier@2.8.8))
       typescript: 5.8.2
 
-  '@storybook/react@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2)':
+  '@storybook/react@9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))
+      '@storybook/react-dom-shim': 9.1.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     optionalDependencies:
       typescript: 5.8.2
 
-  '@storybook/test-runner@0.23.0(@swc/helpers@0.5.17)(@types/node@22.15.21)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))':
+  '@storybook/test-runner@0.23.0(@swc/helpers@0.5.17)(@types/node@22.15.21)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/generator': 7.28.0
@@ -18155,7 +18193,7 @@ snapshots:
       jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@22.15.21))
       nyc: 15.1.0
       playwright: 1.52.0
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     transitivePeerDependencies:
       - '@swc/helpers'
       - '@types/node'
@@ -19022,14 +19060,14 @@ snapshots:
       '@urql/core': 5.1.1(graphql@16.11.0)
       wonka: 6.3.5
 
-  '@vitejs/plugin-react@4.3.4(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@vitejs/plugin-react@4.3.4(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
       '@babel/core': 7.26.10
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.10)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.10)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -19048,7 +19086,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(yaml@2.7.0)
+      vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -19075,23 +19113,23 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.0.7(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@vitest/mocker@3.0.7(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.0.7
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       msw: 2.10.4(@types/node@22.15.21)(typescript@5.8.2)
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
-  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))':
+  '@vitest/mocker@3.2.4(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
       msw: 2.10.4(@types/node@22.15.21)(typescript@5.8.2)
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -19144,7 +19182,7 @@ snapshots:
       sirv: 3.0.1
       tinyglobby: 0.2.13
       tinyrainbow: 2.0.0
-      vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(yaml@2.7.0)
+      vitest: 3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
   '@vitest/utils@2.0.5':
     dependencies:
@@ -20704,6 +20742,18 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  echarts-for-react@3.0.4(echarts@6.0.0)(react@18.3.1):
+    dependencies:
+      echarts: 6.0.0
+      fast-deep-equal: 3.1.3
+      react: 18.3.1
+      size-sensor: 1.0.2
+
+  echarts@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 6.0.0
+
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.179: {}
@@ -20989,11 +21039,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)))(typescript@5.8.2):
+  eslint-plugin-storybook@9.1.3(eslint@9.27.0(jiti@2.4.2))(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)))(typescript@5.8.2):
     dependencies:
       '@typescript-eslint/utils': 8.32.1(eslint@9.27.0(jiti@2.4.2))(typescript@5.8.2)
       eslint: 9.27.0(jiti@2.4.2)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -21724,6 +21774,10 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   get-uri@6.0.5:
     dependencies:
       basic-ftp: 5.0.5
@@ -25015,12 +25069,13 @@ snapshots:
     optionalDependencies:
       postcss: 8.5.3
 
-  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0):
+  postcss-load-config@6.0.1(jiti@2.4.2)(postcss@8.5.3)(tsx@4.20.6)(yaml@2.7.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.4.2
       postcss: 8.5.3
+      tsx: 4.20.6
       yaml: 2.7.0
 
   postcss-nested@6.2.0(postcss@8.5.3):
@@ -25940,6 +25995,8 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   resolve-workspace-root@2.0.0: {}
 
   resolve.exports@2.0.3: {}
@@ -25983,13 +26040,13 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rollup-plugin-jsx-remove-attributes@3.1.1(@rollup/pluginutils@5.1.4(rollup@4.40.2))(astring@1.9.0)(estree-walker@3.0.3)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)):
+  rollup-plugin-jsx-remove-attributes@3.1.1(@rollup/pluginutils@5.1.4(rollup@4.40.2))(astring@1.9.0)(estree-walker@3.0.3)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)):
     dependencies:
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
       astring: 1.9.0
       estree-walker: 3.0.3
       source-map: 0.7.4
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
   rollup@4.40.2:
     dependencies:
@@ -26251,6 +26308,8 @@ snapshots:
       picocolors: 1.1.1
       tinyglobby: 0.2.13
 
+  size-sensor@1.0.2: {}
+
   slash@3.0.0: {}
 
   slash@5.1.0: {}
@@ -26375,10 +26434,10 @@ snapshots:
 
   store2@2.14.4: {}
 
-  storybook-addon-tag-badges@2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))):
+  storybook-addon-tag-badges@2.0.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))):
     dependencies:
       '@storybook/icons': 1.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      storybook: 9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
     transitivePeerDependencies:
       - react
       - react-dom
@@ -26393,13 +26452,13 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)):
+  storybook@9.1.3(@testing-library/dom@10.4.1)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(prettier@3.5.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.6.3
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      '@vitest/mocker': 3.2.4(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       '@vitest/spy': 3.2.4
       better-opn: 3.0.2
       esbuild: 0.25.4
@@ -26884,9 +26943,11 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
+  tslib@2.3.0: {}
+
   tslib@2.8.1: {}
 
-  tsup@8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(typescript@5.8.2)(yaml@2.7.0):
+  tsup@8.3.6(@microsoft/api-extractor@7.52.8(@types/node@22.15.21))(@swc/core@1.11.13(@swc/helpers@0.5.17))(jiti@2.4.2)(postcss@8.5.3)(tsx@4.20.6)(typescript@5.8.2)(yaml@2.7.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.24.2)
       cac: 6.7.14
@@ -26896,7 +26957,7 @@ snapshots:
       esbuild: 0.24.2
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(yaml@2.7.0)
+      postcss-load-config: 6.0.1(jiti@2.4.2)(postcss@8.5.3)(tsx@4.20.6)(yaml@2.7.0)
       resolve-from: 5.0.0
       rollup: 4.40.2
       source-map: 0.8.0-beta.0
@@ -26915,6 +26976,13 @@ snapshots:
       - tsx
       - yaml
 
+  tsx@4.20.6:
+    dependencies:
+      esbuild: 0.25.4
+      get-tsconfig: 4.13.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
   twemoji-parser@14.0.0: {}
 
   type-check@0.4.0:
@@ -27295,13 +27363,13 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vite-node@3.0.7(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0):
+  vite-node@3.0.7(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -27316,7 +27384,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-dts@4.3.0(@types/node@22.15.21)(rollup@4.40.2)(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)):
+  vite-plugin-dts@4.3.0(@types/node@22.15.21)(rollup@4.40.2)(typescript@5.8.2)(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)):
     dependencies:
       '@microsoft/api-extractor': 7.52.8(@types/node@22.15.21)
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
@@ -27329,20 +27397,20 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.8.2
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-plugin-lib-inject-css@2.2.1(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)):
+  vite-plugin-lib-inject-css@2.2.1(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)):
     dependencies:
       '@ast-grep/napi': 0.32.3
       magic-string: 0.30.17
       picocolors: 1.1.1
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
 
-  vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0):
+  vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -27356,12 +27424,13 @@ snapshots:
       jiti: 2.4.2
       lightningcss: 1.29.2
       terser: 5.43.1
+      tsx: 4.20.6
       yaml: 2.7.0
 
-  vitest@3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(yaml@2.7.0):
+  vitest@3.0.7(@types/debug@4.1.12)(@types/node@22.15.21)(@vitest/ui@3.0.7)(jiti@2.4.2)(jsdom@26.0.0)(lightningcss@1.29.2)(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0):
     dependencies:
       '@vitest/expect': 3.0.7
-      '@vitest/mocker': 3.0.7(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0))
+      '@vitest/mocker': 3.0.7(msw@2.10.4(@types/node@22.15.21)(typescript@5.8.2))(vite@6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.0.7
       '@vitest/snapshot': 3.0.7
@@ -27377,8 +27446,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
-      vite-node: 3.0.7(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(yaml@2.7.0)
+      vite: 6.3.5(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
+      vite-node: 3.0.7(@types/node@22.15.21)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.43.1)(tsx@4.20.6)(yaml@2.7.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
@@ -27755,6 +27824,10 @@ snapshots:
 
   zod@3.25.76: {}
 
+  zrender@6.0.0:
+    dependencies:
+      tslib: 2.3.0
+
   zustand@4.5.6(@types/react@18.3.18)(react@18.3.1):
     dependencies:
       use-sync-external-store: 1.5.0(react@18.3.1)