twintrinsic 0.0.1

package/dist/components/App/App.story.svelte

@@ -0,0 +1,170 @@
+<script lang="ts">
+import type { HstSvelte as Histoire } from "@histoire/plugin-svelte"
+export let Hst: Histoire
+import App from "./App.svelte"
+
+let appName = "Twintrinsic Histoire App"
+let mainContent = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam hic ipsa, quia labore assumenda quo aperiam! Harum, reiciendis nihil ad nostrum temporibus in et, nulla, facilis cumque itaque maxime laboriosam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium sequi in maiores eum modi veniam porro quas! Dolore magnam nulla explicabo itaque. Cupiditate, quidem! Adipisci iusto cum odit magni consequuntur.
+  Porro veritatis culpa odio vel ullam excepturi amet? Repudiandae dignissimos ullam beatae unde cum inventore, recusandae dolore delectus quaerat reprehenderit doloribus officia, magnam asperiores neque expedita maxime eum, cumque voluptatibus.
+  Et ipsa facere numquam. Nulla perspiciatis repellendus distinctio temporibus, rerum a, odit corporis beatae qui sequi suscipit voluptatum quibusdam voluptatem laborum dolores consectetur! Laboriosam totam quaerat ab, exercitationem doloribus sunt.
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ullam, a similique autem dolorem esse voluptatibus repudiandae! Ipsam est ea accusamus? Dolore iusto amet, hic in nam odio necessitatibus? Odio.
+  Excepturi aut, facilis, voluptas assumenda, ullam saepe deserunt delectus dicta recusandae natus error nisi libero esse optio odit voluptatibus accusamus molestias sunt non doloribus placeat. Aut neque a nemo fugiat?
+  Harum error corrupti nobis quam laborum a beatae quibusdam minima aliquam ad ipsa, quo, veniam quos fuga earum, hic aspernatur exercitationem esse iure eum expedita! Officia aperiam laboriosam reiciendis consequatur!
+  Fuga inventore adipisci culpa laborum doloribus cum corrupti non impedit iste distinctio unde modi aut atque quam tenetur nam veniam aliquam est iure laudantium quos, perspiciatis magnam a fugiat. Fugit?
+  Rerum molestiae qui accusamus molestias incidunt debitis ut nobis delectus facere amet, inventore repellendus laboriosam magnam assumenda officiis optio error voluptates eum nisi sequi est id! Cum repellat magni rem.
+  Quibusdam doloribus laudantium culpa totam vel est deserunt perspiciatis labore, saepe quasi laboriosam, reiciendis, pariatur quas? Veritatis facere ad autem obcaecati? Tempore cumque nisi beatae dolor sint blanditiis necessitatibus corrupti.
+  Velit necessitatibus amet fugit quaerat placeat? Doloribus nam ducimus beatae, adipisci officiis aut quo, cupiditate quas mollitia eveniet dolore omnis quam, fuga odit voluptas sunt ex ea molestiae harum labore.
+  Necessitatibus magnam officiis natus voluptatem in, modi praesentium vero vitae beatae a quasi consequatur doloribus omnis deserunt quibusdam soluta similique corporis tenetur dicta consectetur at doloremque aspernatur. Accusamus, quos culpa.
+  Quis veritatis consequatur, error voluptates eos odio deserunt iste illo tempore? Exercitationem aut dolor id quia eos provident nobis laborum, illum porro sunt asperiores magnam, voluptas voluptatibus! Eveniet, neque enim.
+  Odio non reiciendis enim velit? Dicta numquam cumque quidem culpa quia dolore non fugit. Autem quibusdam, vitae aspernatur maiores consectetur commodi voluptas adipisci asperiores voluptatum, nemo, quam dolor? Eaque, explicabo!
+  Magni, aperiam rerum iste saepe voluptatum, amet numquam neque consequuntur, nihil laudantium eos? Quis nulla ex molestiae vero officia illo, voluptas aut repudiandae mollitia nostrum eveniet temporibus dolor officiis at!
+  Modi perferendis mollitia autem minima debitis quae sint adipisci. Iste, eius! In ab nam, aperiam reiciendis exercitationem libero quo deleniti blanditiis consequuntur aut dolores. Sint placeat blanditiis perspiciatis nisi et.
+  Sunt similique voluptatibus pariatur totam iste quaerat delectus modi voluptatem laudantium tempore numquam maiores doloribus harum excepturi blanditiis, sint fuga optio deleniti nemo molestiae incidunt. Ea esse quis nam facilis.
+  Vero illum amet enim, nisi quia cupiditate labore. Sequi neque alias ipsum perferendis quas blanditiis incidunt, vel quaerat reprehenderit corporis natus repellat ipsam fuga nisi cupiditate. Ducimus voluptatum hic perspiciatis?
+  Asperiores dolore distinctio unde vitae, doloremque esse doloribus delectus dignissimos nostrum velit natus vel at maiores a? Ipsam excepturi, beatae quis impedit modi aspernatur eius eos voluptas ab, magnam sint.
+  Itaque vitae dignissimos ex natus neque illo rerum quidem est at consequuntur fugiat excepturi, id expedita alias vero? Deserunt dolor eum temporibus! Voluptatum ipsam quidem, numquam necessitatibus aliquid rerum ullam.
+  Asperiores odit esse voluptate eveniet hic, autem quos repellat! Ex mollitia cupiditate atque esse deleniti repudiandae neque alias nesciunt aperiam consectetur magnam magni quis, consequuntur ea architecto? Omnis, aspernatur cum!
+  Doloremque officiis quia fugit deserunt necessitatibus aliquid laboriosam velit esse ipsam? Nam doloremque magni esse praesentium odio quasi inventore! Aspernatur veniam sed doloribus harum temporibus voluptatem iusto amet vero tempora?
+  Odit incidunt nemo blanditiis ratione tenetur harum sequi quidem. Minima, sunt sed voluptas nam inventore a obcaecati asperiores, maiores nesciunt aliquam, magnam iste molestias aperiam tenetur corrupti perspiciatis accusantium officia.
+  Maxime dolorem praesentium assumenda facere beatae non obcaecati iste architecto magni alias, culpa temporibus a dolorum tenetur doloribus modi itaque quod distinctio earum suscipit quibusdam et. Sunt voluptatibus est et!
+  Quis eum non tenetur eius velit. Nobis debitis, molestias, a quia aliquid sequi sapiente non aut beatae itaque animi, magnam incidunt mollitia ipsum accusamus quis eos eveniet ducimus iste ipsa.
+  Aliquam ipsam placeat sint est, quam magni labore aspernatur asperiores! Voluptates ratione quam animi totam ad. Ducimus fugit alias a excepturi architecto voluptas, laboriosam repudiandae nemo aliquam voluptatem tempora nihil!
+  Nemo laboriosam, impedit quasi, inventore quis, perspiciatis illum quod nam cum consequuntur officiis? Ducimus, excepturi? Aut velit, odio mollitia, non quae placeat magni consequuntur recusandae pariatur nihil quia perferendis veniam?
+  Consectetur porro, possimus vel obcaecati numquam iste a ut unde est odit eos molestiae accusantium autem ea nam harum, quasi deleniti illum? Dignissimos, praesentium repellendus iste quam officiis soluta tempore.
+  Debitis eius dolore, ex ratione fugiat est aspernatur? Qui, eos dicta! Molestiae dolorem quae, nihil delectus illum vero dolor explicabo, pariatur praesentium fugit iusto ullam reiciendis veritatis, eius saepe dolore.
+  Dicta sit placeat doloribus tempora, veniam aperiam nam doloremque. Aspernatur sed accusamus beatae quae corrupti officia possimus at ad amet, adipisci cupiditate reiciendis tenetur, magni sit totam nemo animi quisquam.
+  Deserunt numquam deleniti doloremque quae odit ipsa perspiciatis, voluptatibus cum eos facilis accusamus asperiores omnis recusandae unde ratione officiis quas similique reiciendis aspernatur eligendi expedita molestiae! Atque veniam aperiam dolor?
+  Expedita earum vitae pariatur delectus eveniet, voluptates natus mollitia adipisci aperiam eligendi, reiciendis soluta nisi officiis eum. Officia numquam possimus, alias suscipit iusto dicta soluta quidem mollitia in sed doloremque?
+  Veniam optio quae iusto dolore perspiciatis exercitationem, sint sit repudiandae illo vero ut atque doloremque, consectetur numquam ratione nam nisi fuga dignissimos soluta sunt praesentium iure maiores? Illo, excepturi corrupti?
+  Illo voluptatibus eos sed iusto voluptatem amet aliquam beatae culpa possimus earum vel maxime nihil quod necessitatibus quasi laborum accusamus quam labore nostrum, ea pariatur distinctio. Laboriosam numquam quod rerum.
+  Magnam excepturi quo non explicabo dignissimos, cupiditate nostrum esse officiis quisquam id molestiae eveniet incidunt provident dolorem error eius quidem reprehenderit illum quae vel consequatur debitis iusto! Aliquam, ea repellendus.
+  Velit veritatis inventore ut corporis qui vero, rem blanditiis, nihil magni odit excepturi atque, quisquam animi. Vero atque sapiente possimus quis magnam aperiam, earum deserunt fugiat quas omnis est aspernatur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore.`
+let menuContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+let headerContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+let rightContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+let leftContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+let footerContent =
+  "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+let darkMode = false
+let menu = {
+  "Hide Left Panel": () => {
+    leftContent = ""
+  },
+  "Show Left Panel": () => {
+    leftContent =
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+  },
+  "Hide Right Panel": () => {
+    rightContent = ""
+  },
+  "Show Right Panel": () => {
+    rightContent =
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+  },
+  "Hide Header": () => {
+    headerContent = ""
+  },
+  "Show Header": () => {
+    headerContent =
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+  },
+  "Hide Footer": () => {
+    footerContent = ""
+  },
+  "Show Footer": () => {
+    footerContent =
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+  },
+  "Hide Menu": () => {
+    menuContent = ""
+  },
+  "Show Menu": () => {
+    menuContent =
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel est nemo fugiat delectus perferendis adipisci maiores optio cupiditate hic ipsam dignissimos in quasi ea, minima, ut, reprehenderit quos tempora inventore."
+  },
+  "Hide Main": () => {
+    mainContent = ""
+  },
+}
+</script>
+
+<Hst.Story title="App/App" layout={{ type: 'single' }} icon="lucide:layout">
+	<svelte:fragment slot="controls">
+		<Hst.Text bind:value={appName} title="App Name" />
+		<!-- <Hst.Checkbox bind:value={darkMode} title="Dark Mode" /> -->
+		<Hst.Text bind:value={menuContent} title="Menu Content" />
+		<Hst.Text bind:value={leftContent} title="Left Content" />
+		<Hst.Text bind:value={rightContent} title="Right Content" />
+		<Hst.Text bind:value={mainContent} title="Main Content" />
+		<Hst.Text bind:value={headerContent} title="Header Content" />
+	</svelte:fragment>
+
+	<Hst.Variant title="Light Mode" source="<App>&#123;mainContent}</App>">
+		<App {appName}
+			>{window.matchMedia('(prefers-color-scheme: dark)').matches} {darkMode} {mainContent}</App
+		>
+	</Hst.Variant>
+
+	<Hst.Variant title="Dark Mode" source="<App>&#123;mainContent}</App>">
+		<div class="dark">
+			<App {appName}
+				>{window.matchMedia('(prefers-color-scheme: dark)').matches} {darkMode} {mainContent}</App
+			>
+		</div>
+	</Hst.Variant>
+
+	<Hst.Variant title="Left Panel" source="<App>&#123;mainContent}</App>">
+		<App {appName}>
+			<div slot="leftPanel">
+				{leftContent}
+			</div>
+			{mainContent}
+		</App>
+	</Hst.Variant>
+
+	<Hst.Variant title="Right Panel" source="<App>&#123;mainContent}</App>">
+		<App {appName}>
+			{mainContent}
+			<div slot="rightPanel">
+				{rightContent}
+			</div>
+		</App>
+	</Hst.Variant>
+
+	<Hst.Variant title="Both Panels" source="<App>&#123;mainContent}</App>">
+		<App {appName}>
+			<div slot="leftPanel">
+				{leftContent}
+			</div>
+			{mainContent}
+			<div slot="rightPanel">
+				{rightContent}
+			</div>
+		</App>
+	</Hst.Variant>
+
+	<Hst.Variant title="Header with Both Panels" source="<App>&#123;mainContent}</App>">
+		<App {appName}>
+			<div slot="header">
+				{headerContent}
+			</div>
+			<div slot="menu" {menu}>
+				{menuContent}
+			</div>
+			<div slot="leftPanel">
+				{leftContent}
+			</div>
+			{mainContent}
+			<div slot="rightPanel">
+				{rightContent}
+			</div>
+			<div slot="footer">
+				{footerContent}
+			</div>
+		</App>
+	</Hst.Variant>
+</Hst.Story>

package/dist/components/App/App.story.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { HstSvelte as Histoire } from "@histoire/plugin-svelte";
+import App from "./App.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const App: $$__sveltets_2_IsomorphicComponent<{
+    Hst: Histoire;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type App = InstanceType<typeof App>;
+export default App;

package/dist/components/App/App.svelte

@@ -0,0 +1,77 @@
+<script>
+import { setContext } from "svelte"
+
+const {
+  darkMode = false,
+  appName = "Twintrinsic App",
+  leftPanelWidth = "300px",
+  rightPanelWidth = "300px",
+} = $props()
+
+$effect(() => {
+  setContext("appDarkMode", {
+    getDarkMode: () => darkMode,
+  })
+})
+</script>
+
+<svelte:head>
+  <title>{appName}</title>
+</svelte:head>
+<!-- <svelte:body class="{darkMode ? "dark" : "light"}"/> -->
+<div class='app bg-element-100 dark:bg-dark dark:text-light min-h-screen' data-theme style="--left-panel-width: {leftPanelWidth}; --right-panel-width: {rightPanelWidth};">
+  {#if $$slots.menu}
+    <div class="appMenu">
+      <slot name="menu"/>
+    </div>
+  {/if}
+  {#if $$slots.header}
+    <div class="appHeader">
+      <slot name="header"/>
+    </div>
+  {/if}
+  <div class="appWrapper w-full flex flex-col sm:flex-row flex-wrap sm:flex-nowrap py-4 grow">
+    {#if $$slots.leftPanel}
+      <div class="appLeftPanel shrink-0 px-4">
+          <div class="sticky top-0 p-4 w-full h-full">
+              <slot name="leftPanel"/>
+          </div>
+      </div>
+    {/if}
+    <main role="main" class="appMain w-full grow pt-1 px-3">
+      <slot/>
+    </main>
+    {#if $$slots.rightPanel}
+      <div class="appRightPanel shrink-0 px-2">
+          <!-- fixed-width -->
+          <div class="flex sm:flex-col px-2">
+            <slot name="rightPanel"/>
+          </div>
+      </div>
+    {/if}
+  </div>
+  {#if $$slots.footer}
+    <footer class="bg-black mt-auto">
+      <slot name="footer"/>
+    </footer>
+  {/if}
+</div>
+
+<style>
+  @reference '../../twintrinsic.css';
+  
+  .appLeftPanel {
+    width: var(--left-panel-width);
+  }
+  
+  .appRightPanel {
+    width: var(--right-panel-width);
+  }
+  
+  @media (max-width: 640px) {
+    .appLeftPanel,
+    .appRightPanel {
+      width: 100%;
+    }
+  }
+</style>

package/dist/components/App/App.svelte.d.ts

@@ -0,0 +1,66 @@
+export default App;
+type App = SvelteComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}> & {
+    $$bindings?: "" | undefined;
+};
+declare const App: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    darkMode?: boolean;
+    appName?: string;
+    leftPanelWidth?: string;
+    rightPanelWidth?: string;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    menu: {};
+    header: {};
+    leftPanel: {};
+    default: {};
+    rightPanel: {};
+    footer: {};
+}, {}, "">;
+type $$ComponentProps = {
+    darkMode?: boolean;
+    appName?: string;
+    leftPanelWidth?: string;
+    rightPanelWidth?: string;
+};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/App/Split.svelte

@@ -0,0 +1,346 @@
+<!--
+@component
+Split - A component for creating resizable split panels in an IDE-style layout.
+Supports horizontal or vertical splitting with draggable dividers and keyboard controls.
+
+Usage:
+```svelte
+<Split>
+  <div slot="first">First panel content</div>
+  <div slot="second">Second panel content</div>
+</Split>
+
+<Split direction="vertical" initialSize={30} minSize={20} maxSize={80}>
+  <div slot="first">Top panel</div>
+  <div slot="second">Bottom panel</div>
+</Split>
+```
+-->
+<script>
+import { onMount } from "svelte"
+
+const {
+  /** @type {string} - Additional CSS classes */
+  class: className = "",
+
+  /** @type {string} - HTML id for accessibility */
+  id = crypto.randomUUID(),
+
+  /** @type {string} - Split direction (horizontal or vertical) */
+  direction = "horizontal",
+
+  /** @type {number} - Initial size of the first panel in percentage (0-100) */
+  initialSize = 50,
+
+  /** @type {number} - Minimum size of the first panel in percentage */
+  minSize = 10,
+
+  /** @type {number} - Maximum size of the first panel in percentage */
+  maxSize = 90,
+
+  /** @type {boolean} - Whether the split is resizable */
+  resizable = true,
+
+  /** @type {boolean} - Whether to collapse the first panel */
+  collapseFirst = false,
+
+  /** @type {boolean} - Whether to collapse the second panel */
+  collapseSecond = false,
+
+  /** @type {number} - Size of the divider in pixels */
+  dividerSize = 4,
+
+  /** @type {string} - ARIA label for the divider */
+  dividerAriaLabel,
+
+  /** @type {(event: CustomEvent) => void} - Resize event handler */
+  onresize,
+
+  first,
+  second,
+} = $props()
+
+// Component state
+let size = $state(initialSize)
+let isDragging = $state(false)
+let containerElement = $state()
+let firstPanelElement = $state()
+let secondPanelElement = $state()
+let dividerElement = $state()
+let startPosition = $state(0)
+let startSize = $state(0)
+let containerSize = $state(0)
+let resizeObserver = $state()
+
+// Computed values
+const isHorizontal = $derived(direction === "horizontal")
+const isVertical = $derived(direction === "vertical")
+const effectiveSize = $derived(collapseFirst ? 0 : collapseSecond ? 100 : size)
+
+// Divider aria label
+const dividerLabel = $derived(
+  dividerAriaLabel ||
+    `${isHorizontal ? "Horizontal" : "Vertical"} resizer. Use arrow keys to resize.`
+)
+
+/**
+ * Starts dragging the divider
+ * @param {MouseEvent|TouchEvent} event - Mouse or touch event
+ */
+function startDrag(event) {
+  if (!resizable || collapseFirst || collapseSecond) return
+
+  isDragging = true
+
+  // Get starting position
+  startPosition = isHorizontal
+    ? event.type === "touchstart"
+      ? event.touches[0].clientX
+      : event.clientX
+    : event.type === "touchstart"
+      ? event.touches[0].clientY
+      : event.clientY
+
+  startSize = size
+
+  // Get container size
+  const rect = containerElement.getBoundingClientRect()
+  containerSize = isHorizontal ? rect.width : rect.height
+
+  // Add event listeners for drag
+  if (event.type === "mousedown") {
+    document.addEventListener("mousemove", handleDrag)
+    document.addEventListener("mouseup", stopDrag)
+  } else if (event.type === "touchstart") {
+    document.addEventListener("touchmove", handleDrag, { passive: false })
+    document.addEventListener("touchend", stopDrag)
+  }
+
+  // Prevent default to avoid text selection
+  event.preventDefault()
+}
+
+/**
+ * Handles dragging the divider
+ * @param {MouseEvent|TouchEvent} event - Mouse or touch event
+ */
+function handleDrag(event) {
+  if (!isDragging) return
+
+  // Get current position
+  const currentPosition = isHorizontal
+    ? event.type === "touchmove"
+      ? event.touches[0].clientX
+      : event.clientX
+    : event.type === "touchmove"
+      ? event.touches[0].clientY
+      : event.clientY
+
+  // Calculate delta and new size
+  const delta = currentPosition - startPosition
+  const deltaPercent = (delta / containerSize) * 100
+  let newSize = startSize + deltaPercent
+
+  // Constrain to min/max
+  newSize = Math.max(minSize, Math.min(maxSize, newSize))
+
+  // Update size
+  size = newSize
+
+  // Dispatch resize event
+  onresize?.(new CustomEvent("resize", { detail: { size } }))
+
+  // Prevent default to avoid scrolling on touch devices
+  event.preventDefault()
+}
+
+/**
+ * Stops dragging the divider
+ */
+function stopDrag() {
+  if (!isDragging) return
+
+  isDragging = false
+
+  // Remove event listeners
+  document.removeEventListener("mousemove", handleDrag)
+  document.removeEventListener("mouseup", stopDrag)
+  document.removeEventListener("touchmove", handleDrag)
+  document.removeEventListener("touchend", stopDrag)
+
+  // Dispatch resize end event
+  onresize?.(new CustomEvent("resizeend", { detail: { size } }))
+}
+
+/**
+ * Handles keyboard navigation for resizing
+ * @param {KeyboardEvent} event - Keydown event
+ */
+function handleKeydown(event) {
+  if (!resizable || collapseFirst || collapseSecond) return
+
+  let newSize = size
+  const step = event.shiftKey ? 10 : 1
+
+  switch (event.key) {
+    case "ArrowLeft":
+      if (isHorizontal) newSize -= step
+      break
+    case "ArrowRight":
+      if (isHorizontal) newSize += step
+      break
+    case "ArrowUp":
+      if (isVertical) newSize -= step
+      break
+    case "ArrowDown":
+      if (isVertical) newSize += step
+      break
+    case "Home":
+      newSize = minSize
+      break
+    case "End":
+      newSize = maxSize
+      break
+    default:
+      return
+  }
+
+  // Constrain to min/max
+  newSize = Math.max(minSize, Math.min(maxSize, newSize))
+
+  // Update size if changed
+  if (newSize !== size) {
+    size = newSize
+    onresize?.(new CustomEvent("resize", { detail: { size } }))
+    event.preventDefault()
+  }
+}
+
+// Clean up event listeners on unmount
+onMount(() => {
+  return () => {
+    document.removeEventListener("mousemove", handleDrag)
+    document.removeEventListener("mouseup", stopDrag)
+    document.removeEventListener("touchmove", handleDrag)
+    document.removeEventListener("touchend", stopDrag)
+  }
+})
+</script>
+
+<div
+  {id}
+  class="
+    split
+    split-{direction}
+    {isDragging ? 'split-dragging' : ''}
+    {collapseFirst ? 'split-collapse-first' : ''}
+    {collapseSecond ? 'split-collapse-second' : ''}
+    {className}
+  "
+  bind:this={containerElement}
+>
+  <div
+    class="split-panel split-first"
+    style="
+      {isHorizontal ? `width: ${effectiveSize}%` : `height: ${effectiveSize}%`};
+      {collapseFirst ? 'display: none' : ''}
+    "
+    bind:this={firstPanelElement}
+  >
+    {@render first?.()}
+  </div>
+  
+  {#if !collapseFirst && !collapseSecond}
+    <div
+      class="
+        split-divider
+        {resizable ? 'split-divider-resizable' : ''}
+      "
+      style="
+        {isHorizontal ? `width: ${dividerSize}px` : `height: ${dividerSize}px`};
+      "
+      role={resizable ? 'separator' : undefined}
+      tabindex={resizable ? 0 : undefined}
+      aria-label={resizable ? dividerLabel : undefined}
+      aria-valuenow={resizable ? size : undefined}
+      aria-valuemin={resizable ? minSize : undefined}
+      aria-valuemax={resizable ? maxSize : undefined}
+      onmousedown={startDrag}
+      ontouchstart={startDrag}
+      onkeydown={handleKeydown}
+      bind:this={dividerElement}
+    >
+      <div class="split-divider-handle"></div>
+    </div>
+  {/if}
+  
+  <div
+    class="split-panel split-second"
+    style="
+      {isHorizontal ? `width: ${100 - effectiveSize}%` : `height: ${100 - effectiveSize}%`};
+      {collapseSecond ? 'display: none' : ''}
+    "
+    bind:this={secondPanelElement}
+  >
+    {@render second?.()}
+  </div>
+</div>
+
+<style>
+  @reference "../../twintrinsic.css";
+  
+  .split {
+    @apply flex w-full h-full overflow-hidden;
+  }
+  
+  .split-horizontal {
+    @apply flex-row;
+  }
+  
+  .split-vertical {
+    @apply flex-col;
+  }
+  
+  .split-panel {
+    @apply overflow-auto;
+  }
+  
+  .split-divider {
+    @apply flex-shrink-0 bg-border dark:bg-border;
+    @apply z-10;
+  }
+  
+  .split-divider-resizable {
+    @apply cursor-col-resize hover:bg-primary-300 dark:hover:bg-primary-700;
+    @apply focus:outline-none focus:bg-primary-300 dark:focus:bg-primary-700;
+    @apply transition-colors duration-150;
+  }
+  
+  .split-vertical .split-divider-resizable {
+    @apply cursor-row-resize;
+  }
+  
+  .split-divider-handle {
+    @apply absolute;
+  }
+  
+  .split-horizontal .split-divider-handle {
+    @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply w-1 h-8 rounded-full;
+    @apply bg-border dark:bg-border;
+  }
+  
+  .split-vertical .split-divider-handle {
+    @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply w-8 h-1 rounded-full;
+    @apply bg-border dark:bg-border;
+  }
+  
+  .split-dragging {
+    @apply select-none;
+  }
+  
+  .split-dragging .split-divider {
+    @apply bg-primary-300 dark:bg-primary-700;
+  }
+</style>