app splitter story

web/src/components/ui/checkbox/Checkbox.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Base/Checkbox',
+  title: 'Base/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   argTypes: {

web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppSplitter } from './AppSplitter';
+
+const meta = {
+  title: 'Base/Layout/AppSplitter',
+  component: AppSplitter,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="" style={{ height: '400px' }}>
+        <Story />
+      </div>
+    )
+  ]
+} satisfies Meta<typeof AppSplitter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LeftContent = () => (
+  <div className="flex h-full w-full flex-col gap-3 bg-red-100 p-4">
+    <h2 className="text-lg font-semibold">Left Panel</h2>
+    <p>This is the left panel content</p>
+  </div>
+);
+
+const RightContent = () => (
+  <div className="flex h-full w-full flex-col gap-3 bg-blue-200 p-4">
+    <h2 className="text-lg font-semibold">Right Panel</h2>
+    <p>This is the right panel content</p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    leftChildren: <LeftContent />,
+    rightChildren: <RightContent />,
+    autoSaveId: 'default-split',
+    defaultLayout: ['50%', '50%'],
+    allowResize: true,
+    preserveSide: null
+  }
+};
+
+export const LeftPreserved: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'left-preserved-split',
+    preserveSide: 'left',
+    defaultLayout: ['300px', 'auto']
+  }
+};
+
+export const RightPreserved: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'right-preserved-split',
+    preserveSide: 'right',
+    defaultLayout: ['auto', '300px']
+  }
+};
+
+export const WithMinMaxSizes: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'min-max-split',
+    leftPanelMinSize: '200px',
+    leftPanelMaxSize: '60%',
+    rightPanelMinSize: '200px',
+    rightPanelMaxSize: '70%'
+  }
+};
+
+export const HorizontalSplit: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'horizontal-split',
+    split: 'horizontal',
+    defaultLayout: ['50%', '50%']
+  }
+};
+
+export const NonResizable: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'non-resizable-split',
+    allowResize: false
+  }
+};
+
+export const HiddenRight: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'hidden-right-split',
+    rightHidden: true
+  }
+};
+
+export const HiddenLeft: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'hidden-left-split',
+    leftHidden: true
+  }
+};

web/src/components/ui/layout/AppSplitter/SplitPane/SplitPane.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useMemo, useCallback, useRef, useState } from 'react';
 import Pane from './pane';
 import SplitPaneSash from './sash';

web/src/components/ui/switch/AppSwitch.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppSwitch } from './AppSwitch';
 
 const meta: Meta<typeof AppSwitch> = {
-  title: 'Base/Switch',
+  title: 'Base/Inputs/Switch',
   component: AppSwitch,
   tags: ['autodocs'],
   argTypes: {