storion 0.2.3 → 0.3.0

package/dist/devtools-panel/index.js

@@ -0,0 +1,3326 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, memo, useMemo } from "react";
+import { createRoot } from "react-dom/client";
+const colors = {
+  // Dark theme - zinc palette inspired by shadcn
+  bg: {
+    base: "#09090b",
+    // zinc-950
+    card: "#18181b",
+    // zinc-900
+    panel: "#18181b",
+    // zinc-900 - for modals/panels
+    elevated: "#27272a",
+    // zinc-800
+    hover: "#3f3f46",
+    // zinc-700
+    muted: "#52525b"
+    // zinc-600
+  },
+  text: {
+    primary: "#fafafa",
+    // zinc-50
+    secondary: "#a1a1aa",
+    // zinc-400
+    muted: "#71717a",
+    // zinc-500
+    dim: "#52525b"
+    // zinc-600
+  },
+  border: {
+    default: "#27272a",
+    // zinc-800
+    subtle: "#3f3f46",
+    // zinc-700
+    focus: "#a1a1aa"
+    // zinc-400
+  },
+  // Accent colors for syntax highlighting
+  syntax: {
+    // fuchsia-400
+    string: "#fbbf24",
+    // amber-400
+    number: "#60a5fa",
+    // blue-400
+    boolean: "#f472b6",
+    // pink-400
+    null: "#71717a"
+    // zinc-500
+  },
+  // UI accents
+  accent: {
+    primary: "#a1a1aa",
+    // zinc-400
+    success: "#4ade80",
+    // green-400
+    warning: "#fbbf24",
+    // amber-400
+    danger: "#f87171",
+    // red-400
+    info: "#38bdf8",
+    // sky-400
+    blue: "#60a5fa",
+    // blue-400
+    purple: "#a78bfa",
+    // violet-400
+    // Aliases for compare modal
+    green: "#4ade80",
+    // green-400
+    red: "#f87171",
+    // red-400
+    yellow: "#fbbf24"
+    // amber-400
+  }
+};
+const fonts = {
+  sans: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+  mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+};
+const panelStyles = `
+  /* ============================================
+     Base & Reset
+     ============================================ */
+  .storion-devtools {
+    font-family: ${fonts.sans};
+    font-size: 12px;
+    line-height: 1.4;
+    color: ${colors.text.primary};
+    background: ${colors.bg.base};
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .storion-devtools * {
+    box-sizing: border-box;
+  }
+
+  /* ============================================
+     Header
+     ============================================ */
+  .sdt-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    background: ${colors.bg.card};
+    flex-shrink: 0;
+    position: relative;
+    z-index: 1; /* Keep header above transparent content */
+  }
+
+  /* Transparency mode: keep header interactive */
+  .storion-devtools.transparent .sdt-header {
+    pointer-events: auto;
+  }
+
+  /* Transparency mode: make content non-interactive */
+  .storion-devtools.transparent .sdt-tabs,
+  .storion-devtools.transparent .sdt-tab-content,
+  .storion-devtools.transparent .sdt-main-content {
+    pointer-events: none;
+  }
+
+  .sdt-logo {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .sdt-logo-icon {
+    width: 18px;
+    height: 18px;
+    background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  .sdt-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: ${colors.text.primary};
+    letter-spacing: -0.01em;
+  }
+
+  .sdt-header-actions {
+    margin-left: auto;
+    display: flex;
+    gap: 2px;
+  }
+
+  /* ============================================
+     Buttons
+     ============================================ */
+  .sdt-btn {
+    background: transparent;
+    border: 1px solid transparent;
+    color: ${colors.text.secondary};
+    cursor: pointer;
+    padding: 3px 5px;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-family: ${fonts.sans};
+    font-size: 11px;
+    font-weight: 500;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-btn:hover {
+    background: ${colors.bg.elevated};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-btn:active {
+    background: ${colors.bg.hover};
+  }
+
+  .sdt-btn.active {
+    background: ${colors.bg.elevated};
+    color: ${colors.text.primary};
+    border-color: rgba(168, 85, 247, 0.4);
+  }
+
+  .sdt-btn-primary {
+    background: ${colors.text.primary};
+    color: ${colors.bg.base};
+  }
+
+  .sdt-btn-primary:hover {
+    background: ${colors.text.secondary};
+    color: ${colors.bg.base};
+  }
+
+  .sdt-btn-ghost {
+    background: transparent;
+    border-color: ${colors.border.subtle};
+  }
+
+  .sdt-btn-ghost:hover {
+    background: ${colors.bg.elevated};
+    border-color: ${colors.border.focus};
+  }
+
+  .sdt-btn-toggle {
+    background: transparent;
+    border: 1px solid ${colors.border.default};
+    color: ${colors.text.muted};
+  }
+
+  .sdt-btn-toggle:hover {
+    background: ${colors.bg.elevated};
+    color: ${colors.text.secondary};
+  }
+
+  .sdt-btn-toggle.active {
+    background: ${colors.bg.elevated};
+    border-color: ${colors.accent.info};
+    color: ${colors.accent.info};
+  }
+
+  .sdt-btn-toggle.active:hover {
+    background: ${colors.bg.hover};
+  }
+
+  /* Stores action bar */
+  .sdt-stores-actions {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+  }
+
+  /* ============================================
+     Tab Content Container
+     ============================================ */
+  .sdt-tab-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  /* ============================================
+     Search Input
+     ============================================ */
+  .sdt-search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 6px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    flex-shrink: 0;
+  }
+
+  .sdt-search-icon {
+    position: absolute;
+    left: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${colors.text.muted};
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .sdt-search-input {
+    width: 100%;
+    padding: 5px 28px 5px 28px;
+    background: ${colors.bg.card};
+    border: 1px solid ${colors.border.default};
+    border-radius: 4px;
+    color: ${colors.text.primary};
+    font-family: ${fonts.mono};
+    font-size: 11px;
+    outline: none;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-search-input:hover {
+    border-color: ${colors.border.subtle};
+  }
+
+  .sdt-search-input:focus {
+    border-color: ${colors.border.focus};
+    box-shadow: 0 0 0 1px rgba(161, 161, 170, 0.1);
+  }
+
+  .sdt-search-input::placeholder {
+    color: ${colors.text.dim};
+    font-family: ${fonts.sans};
+  }
+
+  .sdt-search-clear {
+    position: absolute;
+    right: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 2px;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-search-clear:hover {
+    color: ${colors.text.primary};
+    background: ${colors.bg.elevated};
+  }
+
+  /* ============================================
+     Filter Bar
+     ============================================ */
+  .sdt-filter-bar {
+    display: flex;
+    gap: 4px;
+    padding: 5px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    flex-wrap: wrap;
+    flex-shrink: 0;
+  }
+
+  .sdt-filter-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-family: ${fonts.sans};
+    font-size: 10px;
+    font-weight: 500;
+    background: ${colors.bg.elevated};
+    color: ${colors.text.secondary};
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-filter-item:hover {
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-filter-item.active {
+    background: ${colors.text.primary};
+    color: ${colors.bg.base};
+  }
+
+  .sdt-filter-item .count {
+    font-family: ${fonts.mono};
+    background: rgba(0, 0, 0, 0.2);
+    padding: 0px 4px;
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 600;
+  }
+
+  /* ============================================
+     Action Bar
+     ============================================ */
+  .sdt-action-bar {
+    display: flex;
+    gap: 4px;
+    padding: 5px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    flex-shrink: 0;
+  }
+
+  .sdt-action-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 3px 8px;
+    border-radius: 4px;
+    font-family: ${fonts.sans};
+    font-size: 10px;
+    font-weight: 500;
+    background: ${colors.bg.elevated};
+    color: ${colors.text.secondary};
+    border: 1px solid ${colors.border.default};
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-action-btn:hover:not(:disabled) {
+    background: ${colors.bg.hover};
+    border-color: ${colors.border.subtle};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-action-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* ============================================
+     Main Content
+     ============================================ */
+  .sdt-main-content {
+    flex: 1;
+    overflow-y: auto;
+    padding: 6px 8px;
+  }
+
+  /* Custom scrollbar */
+  .sdt-main-content::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .sdt-main-content::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .sdt-main-content::-webkit-scrollbar-thumb {
+    background: ${colors.bg.muted};
+    border-radius: 3px;
+  }
+
+  .sdt-main-content::-webkit-scrollbar-thumb:hover {
+    background: ${colors.text.muted};
+  }
+
+  /* ============================================
+     Store Entry Card
+     ============================================ */
+  .sdt-store-entry {
+    background: ${colors.bg.card};
+    border-radius: 6px;
+    margin-bottom: 4px;
+    overflow: hidden;
+    border: 1px solid ${colors.border.default};
+    transition: all 0.15s ease;
+  }
+
+  .sdt-store-entry:hover {
+    border-color: ${colors.border.subtle};
+  }
+
+  .sdt-store-entry.selected {
+    border-color: ${colors.accent.primary};
+  }
+
+  .sdt-store-header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    cursor: pointer;
+    transition: background 0.15s ease;
+    background: ${colors.bg.elevated};
+  }
+
+  .sdt-store-header:hover {
+    background: ${colors.bg.hover};
+  }
+
+  /* Flash animation for store header */
+  @keyframes sdt-store-flash {
+    0% { background-color: rgba(168, 85, 247, 0.25); }
+    100% { background-color: transparent; }
+  }
+
+  .sdt-store-header.flash {
+    animation: sdt-store-flash 0.5s ease-out;
+  }
+
+  .sdt-store-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: ${colors.accent.primary};
+    opacity: 0.7;
+  }
+
+  .sdt-expand-btn {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    transition: all 0.15s ease;
+    margin-left: auto;
+  }
+
+  .sdt-expand-btn:hover {
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-store-name {
+    font-family: ${fonts.mono};
+    font-size: 12px;
+    font-weight: 600;
+    color: #ffffff;
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sdt-store-actions {
+    display: flex;
+    gap: 2px;
+  }
+
+  /* ============================================
+     Store Details
+     ============================================ */
+  .sdt-store-details {
+    padding: 8px;
+    border-top: 1px solid ${colors.border.default};
+    background: ${colors.bg.base};
+  }
+
+  .sdt-section-title {
+    font-family: ${fonts.sans};
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: ${colors.text.muted};
+    margin-bottom: 6px;
+  }
+
+  /* ============================================
+     State JSON Textarea
+     ============================================ */
+  .sdt-state-json {
+    font-family: ${fonts.mono};
+    font-size: 11px;
+    line-height: 1.4;
+    width: 100%;
+    min-height: 160px;
+    max-height: 400px;
+    padding: 6px 8px;
+    background: ${colors.bg.base};
+    border: 1px solid ${colors.border.default};
+    border-radius: 4px;
+    color: ${colors.text.secondary};
+    resize: vertical;
+    outline: none;
+    box-sizing: border-box;
+  }
+
+  .sdt-state-json:focus {
+    border-color: ${colors.accent};
+  }
+
+  /* Keep state-value for metadata section */
+  .sdt-state-value {
+    color: ${colors.syntax.string};
+  }
+
+  .sdt-state-value.string {
+    color: ${colors.syntax.string};
+  }
+
+  .sdt-state-value.number {
+    color: ${colors.syntax.number};
+  }
+
+  .sdt-state-value.boolean {
+    color: ${colors.syntax.boolean};
+  }
+
+  .sdt-state-value.null {
+    color: ${colors.syntax.null};
+    font-style: italic;
+  }
+
+  .sdt-state-value.object {
+    color: ${colors.text.secondary};
+  }
+
+  /* ============================================
+     History
+     ============================================ */
+  .sdt-history {
+    margin-top: 8px;
+  }
+
+  .sdt-history-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 6px;
+    border-radius: 4px;
+    margin-bottom: 2px;
+    transition: background 0.15s ease;
+    border: 1px solid transparent;
+  }
+
+  .sdt-history-item:hover {
+    background: ${colors.bg.elevated};
+  }
+
+  .sdt-history-item.initial .sdt-history-time {
+    color: #ffffff;
+    font-weight: 500;
+  }
+
+  .sdt-history-time {
+    font-family: ${fonts.mono};
+    font-size: 10px;
+    color: ${colors.text.secondary};
+    white-space: nowrap;
+  }
+
+  .sdt-history-props {
+    font-family: ${fonts.mono};
+    font-size: 10px;
+    color: ${colors.text.muted};
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sdt-history-actions {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  .sdt-history-action-btn {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    transition: all 0.15s;
+  }
+
+  .sdt-history-action-btn:hover {
+    opacity: 1;
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-history-expand {
+    display: flex;
+    justify-content: center;
+    padding: 4px;
+  }
+
+  .sdt-history-expand-btn {
+    font-family: ${fonts.sans};
+    font-size: 10px;
+    font-weight: 500;
+    background: transparent;
+    border: 1px solid ${colors.border.default};
+    color: ${colors.text.secondary};
+    padding: 3px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .sdt-history-expand-btn:hover {
+    background: ${colors.bg.elevated};
+    border-color: ${colors.border.subtle};
+    color: ${colors.text.primary};
+  }
+
+  /* ============================================
+     Metadata Section
+     ============================================ */
+  .sdt-metadata {
+    margin-top: 8px;
+  }
+
+  .sdt-metadata-row {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 3px;
+    font-size: 10px;
+  }
+
+  .sdt-metadata-row:last-child {
+    margin-bottom: 0;
+  }
+
+  .sdt-metadata-label {
+    font-family: ${fonts.sans};
+    font-weight: 500;
+    color: ${colors.text.muted};
+    min-width: 60px;
+    flex-shrink: 0;
+  }
+
+  .sdt-metadata-value {
+    font-family: ${fonts.mono};
+    color: ${colors.text.secondary};
+    word-break: break-all;
+  }
+
+  /* ============================================
+     Resize Handle
+     ============================================ */
+  .sdt-resize-handle {
+    position: absolute;
+    background: ${colors.border.subtle};
+    z-index: 10;
+    transition: background 0.15s ease;
+    /* Touch-friendly: add invisible padding for larger hit area */
+    touch-action: none; /* Prevent default touch behaviors */
+  }
+
+  .sdt-resize-handle:hover,
+  .sdt-resize-handle.active {
+    background: ${colors.accent.primary};
+  }
+
+  .sdt-resize-handle.horizontal {
+    width: 4px;
+    height: 100%;
+    top: 0;
+    cursor: ew-resize;
+    /* Add larger hit area for touch devices using ::before */
+  }
+
+  .sdt-resize-handle.horizontal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -8px;
+    right: -8px;
+    /* Invisible 20px wide hit area (4px + 8px on each side) */
+  }
+
+  .sdt-resize-handle.vertical {
+    height: 4px;
+    width: 100%;
+    left: 0;
+    cursor: ns-resize;
+  }
+
+  .sdt-resize-handle.vertical::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -8px;
+    bottom: -8px;
+    /* Invisible 20px tall hit area (4px + 8px on each side) */
+  }
+
+  .sdt-resize-handle.left { left: 0; }
+  .sdt-resize-handle.right { right: 0; }
+  .sdt-resize-handle.top { top: 0; }
+  .sdt-resize-handle.bottom { bottom: 0; }
+
+  /* ============================================
+     Empty State
+     ============================================ */
+  .sdt-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px 12px;
+    color: ${colors.text.muted};
+    text-align: center;
+  }
+
+  .sdt-empty-icon {
+    font-size: 28px;
+    margin-bottom: 8px;
+    opacity: 0.5;
+  }
+
+  .sdt-empty-message {
+    font-family: ${fonts.sans};
+    font-size: 12px;
+    font-weight: 500;
+    color: ${colors.text.secondary};
+    margin-bottom: 4px;
+  }
+
+  .sdt-empty-hint {
+    font-family: ${fonts.sans};
+    font-size: 11px;
+    color: ${colors.text.muted};
+  }
+
+  /* ============================================
+     Position Variants
+     ============================================ */
+  .storion-devtools.position-bottom {
+    flex-direction: column;
+  }
+
+  .storion-devtools.position-right {
+    flex-direction: column;
+  }
+
+  /* When bottom position and wide screen, display stores in 2 columns */
+  .storion-devtools.position-bottom .sdt-main-content {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-auto-rows: min-content;
+    gap: 4px;
+    align-content: start;
+    align-items: start;
+    overflow-y: auto; /* Ensure scrolling still works */
+  }
+
+  .storion-devtools.position-bottom .sdt-store-entry {
+    margin-bottom: 0;
+    height: auto;
+    min-height: 0;
+  }
+
+  /* ============================================
+     Tabs
+     ============================================ */
+  .sdt-tabs {
+    display: flex;
+    border-bottom: 1px solid ${colors.border.default};
+    background: ${colors.bg.card};
+    padding: 0 4px;
+    gap: 2px;
+  }
+
+  .sdt-tab {
+    font-family: ${fonts.sans};
+    font-size: 11px;
+    font-weight: 500;
+    padding: 6px 10px;
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    transition: color 0.15s, border-color 0.15s;
+  }
+
+  .sdt-tab:hover {
+    color: ${colors.text.secondary};
+  }
+
+  .sdt-tab.active {
+    color: ${colors.text.primary};
+    border-bottom-color: ${colors.accent.primary};
+  }
+
+  .sdt-tab-count {
+    font-family: ${fonts.mono};
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 8px;
+    background: ${colors.bg.elevated};
+    color: ${colors.text.muted};
+  }
+
+  .sdt-tab.active .sdt-tab-count {
+    background: ${colors.bg.hover};
+    color: ${colors.text.secondary};
+  }
+
+  /* Flash animation for tabs */
+  @keyframes sdt-flash {
+    0% { background-color: rgba(168, 85, 247, 0.3); }
+    100% { background-color: transparent; }
+  }
+
+  .sdt-tab.flash {
+    animation: sdt-flash 0.6s ease-out;
+  }
+
+  .sdt-tab.flash .sdt-tab-count {
+    animation: sdt-flash 0.6s ease-out;
+  }
+
+  /* ============================================
+     Event Entry
+     ============================================ */
+  .sdt-event-entry {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    font-family: ${fonts.mono};
+    font-size: 10px;
+    min-height: 28px;
+    max-height: 44px;
+    overflow: hidden;
+  }
+
+  .sdt-event-entry:hover {
+    background: ${colors.bg.elevated};
+  }
+
+  .sdt-event-time {
+    color: ${colors.text.muted};
+    font-size: 10px;
+    flex-shrink: 0;
+    width: 80px;
+    margin-right: 4px;
+  }
+
+  .sdt-event-type {
+    font-family: ${fonts.sans};
+    font-size: 9px;
+    font-weight: 600;
+    padding: 2px 5px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+
+  .sdt-event-target {
+    color: ${colors.text.secondary};
+    flex-shrink: 0;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .sdt-event-target.clickable {
+    cursor: pointer;
+    color: ${colors.accent.info};
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    transition: text-decoration-color 0.15s;
+  }
+
+  .sdt-event-target.clickable:hover {
+    text-decoration-color: ${colors.accent.info};
+  }
+
+  .sdt-event-extra {
+    color: ${colors.text.muted};
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  .sdt-event-copy {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    transition: opacity 0.15s, color 0.15s, background 0.15s;
+  }
+
+  .sdt-event-copy:hover {
+    opacity: 1;
+    color: ${colors.text.secondary};
+    background: ${colors.bg.hover};
+  }
+
+  /* ============================================
+     Event Filter Bar
+     ============================================ */
+  .sdt-event-filters {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    border-bottom: 1px solid ${colors.border.default};
+    background: ${colors.bg.card};
+  }
+
+  .sdt-event-filter-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    flex: 1;
+  }
+
+  .sdt-event-filter-chip {
+    font-family: ${fonts.sans};
+    font-size: 9px;
+    font-weight: 500;
+    padding: 2px 6px;
+    border-radius: 3px;
+    border: 1px solid ${colors.border.default};
+    background: transparent;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .sdt-event-filter-chip:hover {
+    border-color: ${colors.border.subtle};
+    color: ${colors.text.secondary};
+  }
+
+  .sdt-event-filter-chip.active {
+    color: ${colors.text.primary};
+  }
+
+  .sdt-event-clear-btn {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 3px;
+    transition: color 0.15s, background 0.15s;
+  }
+
+  .sdt-event-clear-btn:hover {
+    color: ${colors.accent.danger};
+    background: ${colors.bg.elevated};
+  }
+
+  /* ============================================
+     Floating Button (Collapsed State)
+     ============================================ */
+  .sdt-floating-btn {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: ${colors.bg.card};
+    border: 1px solid ${colors.border.default};
+    color: ${colors.text.primary};
+    font-size: 14px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
+    z-index: 999999;
+  }
+
+  .sdt-floating-btn:hover {
+    background: ${colors.bg.elevated};
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+
+  .sdt-floating-btn:active {
+    transform: scale(0.95);
+  }
+
+  /* ============================================
+     Store Actions in Header
+     ============================================ */
+  .sdt-store-actions {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  .sdt-store-action-btn {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    transition: opacity 0.15s, background 0.15s, color 0.15s;
+  }
+
+  .sdt-store-action-btn:hover {
+    opacity: 1;
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+  }
+
+  /* ============================================
+     Section Header with Actions
+     ============================================ */
+  .sdt-section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 6px;
+  }
+
+  .sdt-section-actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .sdt-edit-btn,
+  .sdt-save-btn,
+  .sdt-cancel-btn {
+    background: transparent;
+    border: 1px solid ${colors.border.subtle};
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 3px 6px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 10px;
+    transition: all 0.15s;
+  }
+
+  .sdt-edit-btn:hover {
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+    border-color: ${colors.border.default};
+  }
+
+  .sdt-save-btn {
+    border-color: ${colors.accent.green};
+    color: ${colors.accent.green};
+  }
+
+  .sdt-save-btn:hover {
+    background: ${colors.accent.green}20;
+  }
+
+  .sdt-cancel-btn:hover {
+    background: ${colors.accent.red}20;
+    color: ${colors.accent.red};
+    border-color: ${colors.accent.red};
+  }
+
+  .sdt-state-json.editing {
+    background: ${colors.bg.elevated};
+    border-color: ${colors.accent.primary};
+    color: ${colors.text.primary};
+  }
+
+  /* ============================================
+     Event Replay Button
+     ============================================ */
+  .sdt-event-actions {
+    display: flex;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  .sdt-event-replay {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 2px 4px;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    opacity: 0.6;
+    transition: all 0.15s;
+  }
+
+  .sdt-event-replay:hover {
+    opacity: 1;
+    background: ${colors.accent.purple}20;
+    color: ${colors.accent.purple};
+  }
+
+  /* ============================================
+     Compare Modal
+     ============================================ */
+  .sdt-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000000;
+    backdrop-filter: blur(2px);
+    padding: 16px;
+    touch-action: manipulation;
+  }
+
+  .sdt-modal {
+    background: ${colors.bg.panel};
+    border: 1px solid ${colors.border.default};
+    border-radius: 8px;
+    width: 100%;
+    min-width: 300px;
+    max-width: 800px;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  }
+
+  @media (min-width: 640px) {
+    .sdt-modal {
+      min-width: 500px;
+    }
+  }
+
+  .sdt-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    border-bottom: 1px solid ${colors.border.default};
+  }
+
+  .sdt-modal-title {
+    font-weight: 600;
+    color: ${colors.text.primary};
+    font-size: 13px;
+  }
+
+  .sdt-modal-close {
+    background: transparent;
+    border: none;
+    color: ${colors.text.muted};
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    transition: all 0.15s;
+  }
+
+  .sdt-modal-close:hover {
+    background: ${colors.bg.hover};
+    color: ${colors.text.primary};
+  }
+
+  .sdt-modal-body {
+    padding: 16px;
+    padding-top: 0;
+    overflow: auto;
+    flex: 1;
+  }
+
+  /* Sticky header container - legend + column headers */
+  .sdt-compare-sticky-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background: ${colors.bg.panel};
+    margin: 0 -16px;
+    padding: 16px 16px 0 16px;
+  }
+
+  .sdt-compare-legend {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
+    font-size: 11px;
+  }
+
+  .sdt-legend-item {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .sdt-legend-item.changed { color: ${colors.accent.yellow}; }
+  .sdt-legend-item.added { color: ${colors.accent.green}; }
+  .sdt-legend-item.removed { color: ${colors.accent.red}; }
+  .sdt-legend-item.unchanged { color: ${colors.text.muted}; }
+
+  /* Two-column header: Snapshot | Current */
+  .sdt-compare-columns-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    background: ${colors.border.subtle};
+    border: 1px solid ${colors.border.subtle};
+    border-radius: 4px 4px 0 0;
+    margin-bottom: 0px; /* Remove gap with content below */
+  }
+
+  .sdt-compare-col-old,
+  .sdt-compare-col-new {
+    padding: 8px 10px;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: ${colors.text.secondary};
+    background: ${colors.bg.elevated};
+  }
+
+  .sdt-compare-col-old {
+    background: linear-gradient(${colors.accent.red}15, ${colors.accent.red}15), ${colors.bg.elevated};
+  }
+
+  .sdt-compare-col-new {
+    background: linear-gradient(${colors.accent.green}15, ${colors.accent.green}15), ${colors.bg.elevated};
+  }
+
+  /* Content area */
+  .sdt-compare-content {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid ${colors.border.subtle};
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+  }
+
+  /* Each property item */
+  .sdt-compare-item {
+    border-bottom: 1px solid ${colors.border.subtle};
+  }
+
+  .sdt-compare-item:last-child {
+    border-bottom: none;
+  }
+
+  .sdt-compare-item.unchanged {
+    opacity: 0.5;
+  }
+
+  /* Property name - sticky within its section */
+  .sdt-compare-prop-name {
+    font-weight: 600;
+    padding: 6px 10px;
+    background: ${colors.bg.elevated};
+    font-size: 11px;
+    color: ${colors.text.primary};
+    position: sticky;
+    top: 75px; /* Below the sticky header (legend ~27px + columns ~35px + padding 16px) */
+    z-index: 5;
+    border-bottom: 1px solid ${colors.border.subtle};
+  }
+
+  .sdt-compare-item.changed .sdt-compare-prop-name {
+    box-shadow: inset 3px 0 0 ${colors.accent.yellow};
+  }
+
+  .sdt-compare-item.added .sdt-compare-prop-name {
+    box-shadow: inset 3px 0 0 ${colors.accent.green};
+  }
+
+  .sdt-compare-item.removed .sdt-compare-prop-name {
+    box-shadow: inset 3px 0 0 ${colors.accent.red};
+  }
+
+  /* Two-column values */
+  .sdt-compare-values {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    background: ${colors.border.subtle};
+  }
+
+  .sdt-compare-old,
+  .sdt-compare-new {
+    padding: 8px 10px;
+    background: ${colors.bg.base};
+    min-height: 40px;
+  }
+
+  .sdt-compare-old {
+    background: linear-gradient(${colors.accent.red}08, ${colors.accent.red}08), ${colors.bg.base};
+  }
+
+  .sdt-compare-new {
+    background: linear-gradient(${colors.accent.green}08, ${colors.accent.green}08), ${colors.bg.base};
+  }
+
+  .sdt-compare-old pre,
+  .sdt-compare-new pre {
+    margin: 0;
+    font-family: ${fonts.mono};
+    font-size: 11px;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: #ffffff;
+  }
+
+  /* ============================================
+     Responsive
+     ============================================ */
+  @media (max-width: 768px) {
+    .storion-devtools {
+      font-size: 11px;
+    }
+
+    .sdt-header {
+      padding: 5px 6px;
+    }
+
+    .sdt-search {
+      padding: 5px 6px;
+    }
+
+    .sdt-main-content {
+      padding: 5px 6px;
+    }
+
+    .sdt-store-header {
+      padding: 5px 6px;
+    }
+
+    .sdt-store-details {
+      padding: 6px;
+    }
+  }
+`;
+const IconChevron = ({ open }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    style: {
+      transform: open ? "rotate(90deg)" : "rotate(0)",
+      transition: "transform 0.15s"
+    },
+    children: /* @__PURE__ */ jsx("path", { d: "M9 18l6-6-6-6" })
+  }
+);
+const IconStore = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "5", rx: "9", ry: "3" }),
+      /* @__PURE__ */ jsx("path", { d: "M21 12c0 1.66-4 3-9 3s-9-1.34-9-3" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5" })
+    ]
+  }
+);
+const IconMinimize = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  }
+);
+const IconTransparency = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+const IconDockLeft = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("line", { x1: "9", y1: "3", x2: "9", y2: "21" })
+    ]
+  }
+);
+const IconDockBottom = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "15", x2: "21", y2: "15" })
+    ]
+  }
+);
+const IconDockRight = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsx("line", { x1: "15", y1: "3", x2: "15", y2: "21" })
+    ]
+  }
+);
+const IconCopy = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+    ]
+  }
+);
+const IconClear$1 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("path", { d: "M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+  }
+);
+const IconActivity = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+    ]
+  }
+);
+const IconExpandAll = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+      /* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+      /* @__PURE__ */ jsx("line", { x1: "21", y1: "3", x2: "14", y2: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+    ]
+  }
+);
+const IconCollapseAll = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("polyline", { points: "4 14 10 14 10 20" }),
+      /* @__PURE__ */ jsx("polyline", { points: "20 10 14 10 14 4" }),
+      /* @__PURE__ */ jsx("line", { x1: "14", y1: "10", x2: "21", y2: "3" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "21", x2: "10", y2: "14" })
+    ]
+  }
+);
+const IconReplay = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("polygon", { points: "5 3 19 12 5 21 5 3" })
+  }
+);
+const IconEdit = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+      /* @__PURE__ */ jsx("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
+    ]
+  }
+);
+const IconSave = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+const IconCancel = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+);
+const IconEvents = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "8", y1: "6", x2: "21", y2: "6" }),
+      /* @__PURE__ */ jsx("line", { x1: "8", y1: "12", x2: "21", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "8", y1: "18", x2: "21", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "6", x2: "3.01", y2: "6" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "3.01", y2: "12" }),
+      /* @__PURE__ */ jsx("line", { x1: "3", y1: "18", x2: "3.01", y2: "18" })
+    ]
+  }
+);
+const IconCompare = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "20", x2: "18", y2: "10" }),
+      /* @__PURE__ */ jsx("line", { x1: "12", y1: "20", x2: "12", y2: "4" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "20", x2: "6", y2: "14" })
+    ]
+  }
+);
+const IconRevert = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 3v5h5" })
+    ]
+  }
+);
+function ResizeHandle({ position, onResize }) {
+  const [active, setActive] = useState(false);
+  const lastPosRef = useRef({ x: 0, y: 0 });
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      setActive(true);
+      lastPosRef.current = { x: e.clientX, y: e.clientY };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = position === "bottom" ? "ns-resize" : "ew-resize";
+      const handleMouseMove = (moveEvent) => {
+        const lastPos = lastPosRef.current;
+        if (position === "bottom") {
+          const delta = lastPos.y - moveEvent.clientY;
+          onResize(delta);
+        } else {
+          const delta = moveEvent.clientX - lastPos.x;
+          onResize(delta);
+        }
+        lastPosRef.current = { x: moveEvent.clientX, y: moveEvent.clientY };
+      };
+      const handleMouseUp = () => {
+        setActive(false);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [position, onResize]
+  );
+  const handleTouchStart = useCallback(
+    (e) => {
+      e.preventDefault();
+      setActive(true);
+      const touch = e.touches[0];
+      lastPosRef.current = { x: touch.clientX, y: touch.clientY };
+      document.body.style.userSelect = "none";
+      const handleTouchMove = (moveEvent) => {
+        const touch2 = moveEvent.touches[0];
+        const lastPos = lastPosRef.current;
+        if (position === "bottom") {
+          const delta = lastPos.y - touch2.clientY;
+          onResize(delta);
+        } else {
+          const delta = touch2.clientX - lastPos.x;
+          onResize(delta);
+        }
+        lastPosRef.current = { x: touch2.clientX, y: touch2.clientY };
+      };
+      const handleTouchEnd = () => {
+        setActive(false);
+        document.body.style.userSelect = "";
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+      };
+      document.addEventListener("touchmove", handleTouchMove);
+      document.addEventListener("touchend", handleTouchEnd);
+    },
+    [position, onResize]
+  );
+  const isVertical = position === "bottom";
+  const handleClass = isVertical ? "vertical top" : position === "right" ? "horizontal left" : "horizontal right";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `sdt-resize-handle ${handleClass} ${active ? "active" : ""}`,
+      onMouseDown: handleMouseDown,
+      onTouchStart: handleTouchStart
+    }
+  );
+}
+const STORAGE_KEY$1 = "storion-devtools-settings";
+function loadSettings() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY$1);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch {
+  }
+  return {};
+}
+function saveSettings(settings) {
+  try {
+    const current = loadSettings();
+    const merged = { ...current, ...settings };
+    localStorage.setItem(STORAGE_KEY$1, JSON.stringify(merged));
+  } catch {
+  }
+}
+function clearDevtoolsSettings() {
+  try {
+    localStorage.removeItem(STORAGE_KEY$1);
+  } catch {
+  }
+}
+function usePersistentState(key, initialValue, transform) {
+  const [value, setValue] = useState(() => {
+    const stored = loadSettings();
+    if (key in stored) {
+      const storedValue = stored[key];
+      return (transform == null ? void 0 : transform.fromStorage) ? transform.fromStorage(storedValue) : storedValue;
+    }
+    return initialValue;
+  });
+  const isFirstMount = useRef(true);
+  useEffect(() => {
+    if (isFirstMount.current) {
+      isFirstMount.current = false;
+      return;
+    }
+    const toStore = (transform == null ? void 0 : transform.toStorage) ? transform.toStorage(value) : value;
+    saveSettings({ [key]: toStore });
+  }, [value, key, transform]);
+  return [value, setValue];
+}
+const IconSearch = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+    ]
+  }
+);
+const IconClear = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+const SearchBar = memo(function SearchBar2({
+  value,
+  onChange,
+  placeholder = "Search...",
+  autoFocus = false
+}) {
+  const handleClear = useCallback(() => {
+    onChange("");
+  }, [onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: "sdt-search", children: [
+    /* @__PURE__ */ jsx("div", { className: "sdt-search-icon", children: /* @__PURE__ */ jsx(IconSearch, {}) }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: "sdt-search-input",
+        placeholder,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        autoFocus
+      }
+    ),
+    value && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "sdt-search-clear",
+        onClick: handleClear,
+        title: "Clear search",
+        type: "button",
+        children: /* @__PURE__ */ jsx(IconClear, {})
+      }
+    )
+  ] });
+});
+const FilterBar = memo(function FilterBar2({
+  filters,
+  onToggle
+}) {
+  if (filters.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "sdt-filter-bar", children: filters.map((filter) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: `sdt-filter-item ${filter.active ? "active" : ""}`,
+      onClick: () => onToggle(filter.key),
+      children: [
+        /* @__PURE__ */ jsx("span", { children: filter.label }),
+        filter.count !== void 0 && /* @__PURE__ */ jsx("span", { className: "count", children: filter.count })
+      ]
+    },
+    filter.key
+  )) });
+});
+const ActionBar = memo(function ActionBar2({ actions }) {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "sdt-action-bar", children: actions.map((action) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: "sdt-action-btn",
+      onClick: action.onClick,
+      disabled: action.disabled,
+      title: action.label,
+      children: [
+        action.icon,
+        /* @__PURE__ */ jsx("span", { children: action.label })
+      ]
+    },
+    action.key
+  )) });
+});
+const MainContent = memo(function MainContent2({
+  children,
+  isEmpty,
+  emptyIcon = "📦",
+  emptyMessage = "No items found",
+  emptyHint
+}) {
+  if (isEmpty) {
+    return /* @__PURE__ */ jsx("div", { className: "sdt-main-content", children: /* @__PURE__ */ jsxs("div", { className: "sdt-empty", children: [
+      /* @__PURE__ */ jsx("div", { className: "sdt-empty-icon", children: emptyIcon }),
+      /* @__PURE__ */ jsx("div", { className: "sdt-empty-message", children: emptyMessage }),
+      emptyHint && /* @__PURE__ */ jsx("div", { className: "sdt-empty-hint", children: emptyHint })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: "sdt-main-content", children });
+});
+const TabContent = memo(function TabContent2({
+  searchBar,
+  filterBar,
+  actionBar,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "sdt-tab-content", children: [
+    searchBar,
+    filterBar,
+    actionBar,
+    children
+  ] });
+});
+function formatTime(timestamp) {
+  const date = new Date(timestamp);
+  const time = date.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  });
+  const ms = String(date.getMilliseconds()).padStart(3, "0");
+  return `${time}.${ms}`;
+}
+function formatDateTime(timestamp) {
+  return formatTime(timestamp);
+}
+function formatValue(value) {
+  if (value === null) return { text: "null", type: "null" };
+  if (value === void 0) return { text: "undefined", type: "null" };
+  if (typeof value === "string") return { text: `"${value}"`, type: "string" };
+  if (typeof value === "number") return { text: String(value), type: "number" };
+  if (typeof value === "boolean")
+    return { text: String(value), type: "boolean" };
+  if (Array.isArray(value))
+    return { text: `Array(${value.length})`, type: "object" };
+  if (typeof value === "object") {
+    const keys = Object.keys(value);
+    return {
+      text: `{${keys.slice(0, 3).join(", ")}${keys.length > 3 ? "..." : ""}}`,
+      type: "object"
+    };
+  }
+  return { text: String(value), type: "unknown" };
+}
+const DEFAULT_HISTORY_COUNT = 5;
+const MAX_HISTORY_COUNT = 50;
+const StoreEntry = memo(function StoreEntry2({
+  entry,
+  onRevert,
+  onShowEvents,
+  onCompare,
+  onStateEdit,
+  flash = false,
+  forceExpanded = null
+}) {
+  const [expanded, setExpanded] = useState(true);
+  const [historyExpanded, setHistoryExpanded] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  useEffect(() => {
+    if (forceExpanded !== null) {
+      setExpanded(forceExpanded);
+    }
+  }, [forceExpanded]);
+  const toggleExpand = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  const totalHistory = entry.history.length;
+  const hasMoreHistory = totalHistory > DEFAULT_HISTORY_COUNT;
+  const displayCount = historyExpanded ? Math.min(totalHistory, MAX_HISTORY_COUNT) : Math.min(totalHistory, DEFAULT_HISTORY_COUNT);
+  const initialSnapshot = entry.history[0];
+  const recentEntries = entry.history.slice(1);
+  const recentDisplayCount = Math.max(0, displayCount - 1);
+  const displayRecentEntries = recentEntries.slice(-recentDisplayCount).reverse();
+  const displayHistory = totalHistory > 0 ? [...displayRecentEntries, initialSnapshot] : [];
+  const getChangedProps = useCallback(
+    (snapshotIndex) => {
+      const snapshot = entry.history[snapshotIndex];
+      if (!snapshot) return [];
+      if (snapshotIndex === 0) {
+        return Object.keys(snapshot.state);
+      }
+      const prevSnapshot = entry.history[snapshotIndex - 1];
+      if (!prevSnapshot) return Object.keys(snapshot.state);
+      const changedKeys = [];
+      const allKeys = /* @__PURE__ */ new Set([
+        ...Object.keys(snapshot.state),
+        ...Object.keys(prevSnapshot.state)
+      ]);
+      for (const key of allKeys) {
+        const curr = snapshot.state[key];
+        const prev = prevSnapshot.state[key];
+        if (curr !== prev) {
+          changedKeys.push(key);
+        }
+      }
+      return changedKeys;
+    },
+    [entry.history]
+  );
+  const getSnapshotIndex = useCallback(
+    (snapshotId) => {
+      return entry.history.findIndex((s) => s.id === snapshotId);
+    },
+    [entry.history]
+  );
+  const metaEntries = entry.meta ? Object.entries(entry.meta) : [];
+  const handleStartEdit = useCallback(() => {
+    setEditValue(JSON.stringify(entry.state, null, 2));
+    setIsEditing(true);
+  }, [entry.state]);
+  const handleCancelEdit = useCallback(() => {
+    setIsEditing(false);
+    setEditValue("");
+  }, []);
+  const handleSaveEdit = useCallback(() => {
+    try {
+      const newState = JSON.parse(editValue);
+      onStateEdit == null ? void 0 : onStateEdit(entry.id, newState);
+      setIsEditing(false);
+      setEditValue("");
+    } catch {
+      alert("Invalid JSON. Please fix the syntax and try again.");
+    }
+  }, [editValue, entry.id, onStateEdit]);
+  const handleShowEvents = useCallback(
+    (e) => {
+      e.stopPropagation();
+      onShowEvents == null ? void 0 : onShowEvents(entry.id);
+    },
+    [entry.id, onShowEvents]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "sdt-store-entry", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `sdt-store-header ${flash ? "flash" : ""}`,
+        onClick: toggleExpand,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sdt-store-icon", children: /* @__PURE__ */ jsx(IconStore, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "sdt-store-name", children: entry.id }),
+          /* @__PURE__ */ jsx("div", { className: "sdt-store-actions", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-store-action-btn",
+              onClick: handleShowEvents,
+              title: "Show events for this store",
+              children: /* @__PURE__ */ jsx(IconEvents, {})
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-expand-btn",
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleExpand();
+              },
+              children: /* @__PURE__ */ jsx(IconChevron, { open: expanded })
+            }
+          )
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "sdt-store-details", children: [
+      /* @__PURE__ */ jsxs("div", { className: "sdt-section-header", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdt-section-title", children: "State" }),
+        /* @__PURE__ */ jsx("div", { className: "sdt-section-actions", children: !isEditing ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "sdt-edit-btn",
+            onClick: handleStartEdit,
+            title: "Edit state",
+            children: /* @__PURE__ */ jsx(IconEdit, {})
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-save-btn",
+              onClick: handleSaveEdit,
+              title: "Save changes",
+              children: /* @__PURE__ */ jsx(IconSave, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-cancel-btn",
+              onClick: handleCancelEdit,
+              title: "Cancel editing",
+              children: /* @__PURE__ */ jsx(IconCancel, {})
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          className: `sdt-state-json ${isEditing ? "editing" : ""}`,
+          value: isEditing ? editValue : JSON.stringify(entry.state, null, 2),
+          onChange: (e) => setEditValue(e.target.value),
+          readOnly: !isEditing,
+          spellCheck: false
+        }
+      ),
+      totalHistory > 0 && /* @__PURE__ */ jsxs("div", { className: "sdt-history", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sdt-section-title", children: [
+          "History (",
+          totalHistory,
+          ")"
+        ] }),
+        displayHistory.map((snapshot) => {
+          const historyIndex = getSnapshotIndex(snapshot.id);
+          const isInitial = historyIndex === 0;
+          const changedProps = getChangedProps(historyIndex);
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `sdt-history-item ${isInitial ? "initial" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sdt-history-time", children: isInitial ? "Initial" : formatTime(snapshot.timestamp) }),
+                /* @__PURE__ */ jsx("span", { className: "sdt-history-props", children: changedProps.join(", ") }),
+                /* @__PURE__ */ jsxs("div", { className: "sdt-history-actions", children: [
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "sdt-history-action-btn",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onCompare == null ? void 0 : onCompare(entry.id, snapshot);
+                      },
+                      title: "Compare with current state",
+                      children: /* @__PURE__ */ jsx(IconCompare, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: "sdt-history-action-btn",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        if (confirm("Revert state to this snapshot?")) {
+                          onRevert(snapshot.id);
+                        }
+                      },
+                      title: "Revert to this state",
+                      children: /* @__PURE__ */ jsx(IconRevert, {})
+                    }
+                  )
+                ] })
+              ]
+            },
+            snapshot.id
+          );
+        }),
+        hasMoreHistory && !historyExpanded && /* @__PURE__ */ jsx("div", { className: "sdt-history-expand", children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "sdt-history-expand-btn",
+            onClick: () => setHistoryExpanded(true),
+            children: [
+              "Show",
+              " ",
+              Math.min(totalHistory, MAX_HISTORY_COUNT) - DEFAULT_HISTORY_COUNT,
+              " ",
+              "more"
+            ]
+          }
+        ) }),
+        historyExpanded && totalHistory > DEFAULT_HISTORY_COUNT && /* @__PURE__ */ jsx("div", { className: "sdt-history-expand", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "sdt-history-expand-btn",
+            onClick: () => setHistoryExpanded(false),
+            children: "Show less"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "sdt-metadata", children: [
+        /* @__PURE__ */ jsx("div", { className: "sdt-section-title", children: "Metadata" }),
+        /* @__PURE__ */ jsxs("div", { className: "sdt-metadata-row", children: [
+          /* @__PURE__ */ jsx("span", { className: "sdt-metadata-label", children: "Created:" }),
+          /* @__PURE__ */ jsx("span", { className: "sdt-metadata-value", children: formatDateTime(entry.createdAt) })
+        ] }),
+        metaEntries.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "sdt-section-title",
+              style: { marginTop: 8, marginBottom: 4 },
+              children: "spec.meta"
+            }
+          ),
+          metaEntries.map(([key, value]) => {
+            const formatted = formatValue(value);
+            return /* @__PURE__ */ jsxs("div", { className: "sdt-metadata-row", children: [
+              /* @__PURE__ */ jsxs("span", { className: "sdt-metadata-label", children: [
+                key,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: `sdt-metadata-value sdt-state-value ${formatted.type}`,
+                  children: formatted.text
+                }
+              )
+            ] }, key);
+          })
+        ] })
+      ] })
+    ] })
+  ] });
+});
+function CompareModal({
+  storeId,
+  snapshot,
+  currentState,
+  onClose
+}) {
+  const diff = useMemo(() => {
+    const allKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(snapshot.state),
+      ...Object.keys(currentState)
+    ]);
+    const changes = [];
+    for (const key of allKeys) {
+      const oldValue = snapshot.state[key];
+      const newValue = currentState[key];
+      const oldExists = key in snapshot.state;
+      const newExists = key in currentState;
+      if (!oldExists && newExists) {
+        changes.push({ key, type: "added", oldValue: void 0, newValue });
+      } else if (oldExists && !newExists) {
+        changes.push({ key, type: "removed", oldValue, newValue: void 0 });
+      } else if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
+        changes.push({ key, type: "changed", oldValue, newValue });
+      } else {
+        changes.push({ key, type: "unchanged", oldValue, newValue });
+      }
+    }
+    return changes.sort((a, b) => {
+      const order = { changed: 0, added: 1, removed: 2, unchanged: 3 };
+      return order[a.type] - order[b.type];
+    });
+  }, [snapshot.state, currentState]);
+  const counts = useMemo(() => {
+    return {
+      changed: diff.filter((d) => d.type === "changed").length,
+      added: diff.filter((d) => d.type === "added").length,
+      removed: diff.filter((d) => d.type === "removed").length,
+      unchanged: diff.filter((d) => d.type === "unchanged").length
+    };
+  }, [diff]);
+  const formatJsonValue = (value) => {
+    if (value === void 0) return "undefined";
+    return JSON.stringify(value, null, 2);
+  };
+  const handleOverlayClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleOverlayTouchEnd = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "sdt-modal-overlay",
+      onClick: handleOverlayClick,
+      onTouchEnd: handleOverlayTouchEnd,
+      children: /* @__PURE__ */ jsxs("div", { className: "sdt-modal", onClick: (e) => e.stopPropagation(), children: [
+        /* @__PURE__ */ jsxs("div", { className: "sdt-modal-header", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sdt-modal-title", children: [
+            "Compare: ",
+            storeId,
+            " @ ",
+            formatTime(snapshot.timestamp),
+            " vs Current"
+          ] }),
+          /* @__PURE__ */ jsx("button", { className: "sdt-modal-close", onClick: onClose, children: /* @__PURE__ */ jsx(IconCancel, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sdt-modal-body", children: [
+          /* @__PURE__ */ jsxs("div", { className: "sdt-compare-sticky-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "sdt-compare-legend", children: [
+              /* @__PURE__ */ jsxs("span", { className: "sdt-legend-item changed", children: [
+                "● Changed (",
+                counts.changed,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "sdt-legend-item added", children: [
+                "● Added (",
+                counts.added,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "sdt-legend-item removed", children: [
+                "● Removed (",
+                counts.removed,
+                ")"
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "sdt-legend-item unchanged", children: [
+                "● Unchanged (",
+                counts.unchanged,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "sdt-compare-columns-header", children: [
+              /* @__PURE__ */ jsx("div", { className: "sdt-compare-col-old", children: "Snapshot" }),
+              /* @__PURE__ */ jsx("div", { className: "sdt-compare-col-new", children: "Current" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "sdt-compare-content", children: diff.map(({ key, type, oldValue, newValue }) => /* @__PURE__ */ jsxs("div", { className: `sdt-compare-item ${type}`, children: [
+            /* @__PURE__ */ jsx("div", { className: "sdt-compare-prop-name", children: key }),
+            /* @__PURE__ */ jsxs("div", { className: "sdt-compare-values", children: [
+              /* @__PURE__ */ jsx("div", { className: "sdt-compare-old", children: /* @__PURE__ */ jsx("pre", { children: formatJsonValue(oldValue) }) }),
+              /* @__PURE__ */ jsx("div", { className: "sdt-compare-new", children: /* @__PURE__ */ jsx("pre", { children: formatJsonValue(newValue) }) })
+            ] })
+          ] }, key)) })
+        ] })
+      ] })
+    }
+  );
+}
+function StoresTab({
+  controller,
+  stores,
+  searchQuery,
+  onSearchQueryChange,
+  onNavigateToEvents
+}) {
+  var _a;
+  const [sortByActivity, setSortByActivity] = usePersistentState(
+    "sortByActivity",
+    true
+  );
+  const storeVersionsRef = useRef(/* @__PURE__ */ new Map());
+  const [flashingStores, setFlashingStores] = useState(/* @__PURE__ */ new Set());
+  const [forceExpanded, setForceExpanded] = useState(null);
+  const [compareData, setCompareData] = useState(null);
+  useEffect(() => {
+    const newFlashing = /* @__PURE__ */ new Set();
+    for (const store of stores) {
+      const prevVersion = storeVersionsRef.current.get(store.id) ?? 0;
+      const newVersion = store.history.length;
+      if (prevVersion > 0 && newVersion > prevVersion) {
+        newFlashing.add(store.id);
+      }
+      storeVersionsRef.current.set(store.id, newVersion);
+    }
+    if (newFlashing.size > 0) {
+      setFlashingStores(newFlashing);
+      const timer = setTimeout(() => setFlashingStores(/* @__PURE__ */ new Set()), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [stores]);
+  useEffect(() => {
+    if (forceExpanded !== null) {
+      const timer = setTimeout(() => setForceExpanded(null), 50);
+      return () => clearTimeout(timer);
+    }
+  }, [forceExpanded]);
+  const filteredStores = useMemo(() => {
+    let result = stores;
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (s) => s.name.toLowerCase().includes(query) || s.id.toLowerCase().includes(query)
+      );
+    }
+    if (sortByActivity) {
+      result = [...result].sort((a, b) => {
+        const aLastActivity = a.history.length > 0 ? a.history[a.history.length - 1].timestamp : a.createdAt;
+        const bLastActivity = b.history.length > 0 ? b.history[b.history.length - 1].timestamp : b.createdAt;
+        return bLastActivity - aLastActivity;
+      });
+    }
+    return result;
+  }, [stores, searchQuery, sortByActivity]);
+  const handleRevert = useCallback(
+    (storeId, snapshotId) => {
+      controller.revertToSnapshot(storeId, snapshotId);
+    },
+    [controller]
+  );
+  const toggleSortByActivity = useCallback(() => {
+    setSortByActivity((prev) => !prev);
+  }, []);
+  const handleShowEvents = useCallback(
+    (storeId) => {
+      onNavigateToEvents(storeId);
+    },
+    [onNavigateToEvents]
+  );
+  const handleCompare = useCallback(
+    (storeId, snapshot) => {
+      setCompareData({ storeId, snapshot });
+    },
+    []
+  );
+  const handleCloseCompare = useCallback(() => {
+    setCompareData(null);
+  }, []);
+  const handleStateEdit = useCallback(
+    (storeId, newState) => {
+      const store = controller.getStore(storeId);
+      if (store && store.instance) {
+        const actions = store.instance.actions;
+        if (typeof actions.__revertState === "function") {
+          actions.__revertState(newState);
+        }
+      }
+    },
+    [controller]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TabContent,
+      {
+        searchBar: /* @__PURE__ */ jsx(
+          SearchBar,
+          {
+            value: searchQuery,
+            onChange: onSearchQueryChange,
+            placeholder: "Search stores..."
+          }
+        ),
+        actionBar: /* @__PURE__ */ jsxs("div", { className: "sdt-stores-actions", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: `sdt-btn sdt-btn-toggle ${sortByActivity ? "active" : ""}`,
+              onClick: toggleSortByActivity,
+              title: sortByActivity ? "Showing recent activity first" : "Show recent activity first",
+              children: [
+                /* @__PURE__ */ jsx(IconActivity, {}),
+                /* @__PURE__ */ jsx("span", { children: "Recent" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-btn sdt-btn-ghost",
+              onClick: () => setForceExpanded(true),
+              title: "Expand all stores",
+              children: /* @__PURE__ */ jsx(IconExpandAll, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "sdt-btn sdt-btn-ghost",
+              onClick: () => setForceExpanded(false),
+              title: "Collapse all stores",
+              children: /* @__PURE__ */ jsx(IconCollapseAll, {})
+            }
+          )
+        ] }),
+        children: /* @__PURE__ */ jsx(
+          MainContent,
+          {
+            isEmpty: filteredStores.length === 0,
+            emptyIcon: "📦",
+            emptyMessage: "No stores found",
+            emptyHint: "Add devtoolsMiddleware to your container",
+            children: filteredStores.map((entry) => /* @__PURE__ */ jsx(
+              StoreEntry,
+              {
+                entry,
+                onRevert: (snapshotId) => handleRevert(entry.id, snapshotId),
+                onShowEvents: handleShowEvents,
+                onCompare: handleCompare,
+                onStateEdit: handleStateEdit,
+                flash: flashingStores.has(entry.id),
+                forceExpanded
+              },
+              entry.id
+            ))
+          }
+        )
+      }
+    ),
+    compareData && /* @__PURE__ */ jsx(
+      CompareModal,
+      {
+        storeId: compareData.storeId,
+        snapshot: compareData.snapshot,
+        currentState: ((_a = stores.find((s) => s.id === compareData.storeId)) == null ? void 0 : _a.state) ?? {},
+        onClose: handleCloseCompare
+      }
+    )
+  ] });
+}
+const EVENT_TYPE_LABELS = {
+  change: { label: "CHG", color: "#60a5fa" },
+  // blue
+  create: { label: "NEW", color: "#4ade80" },
+  // green
+  dispose: { label: "DEL", color: "#f87171" },
+  // red
+  dispatch: { label: "ACT", color: "#a78bfa" },
+  // purple
+  error: { label: "ERR", color: "#f87171" }
+  // red
+};
+const ALL_EVENT_TYPES = [
+  "change",
+  "create",
+  "dispose",
+  "dispatch",
+  "error"
+];
+const EventEntry = memo(function EventEntry2({
+  event,
+  onTargetClick,
+  onReplay
+}) {
+  const typeInfo = EVENT_TYPE_LABELS[event.type];
+  const isStoreTarget = event.target !== "window";
+  const isDispatch = event.type === "dispatch";
+  const handleCopy = useCallback(() => {
+    const copyData = {
+      type: event.type,
+      target: event.target,
+      timestamp: new Date(event.timestamp).toISOString(),
+      extra: event.extra,
+      data: event.data
+    };
+    navigator.clipboard.writeText(JSON.stringify(copyData, null, 2));
+  }, [event]);
+  const handleTargetClick = useCallback(() => {
+    if (isStoreTarget && onTargetClick) {
+      onTargetClick(event.target);
+    }
+  }, [event.target, isStoreTarget, onTargetClick]);
+  const handleReplay = useCallback(() => {
+    onReplay == null ? void 0 : onReplay(event);
+  }, [event, onReplay]);
+  return /* @__PURE__ */ jsxs("div", { className: "sdt-event-entry", children: [
+    /* @__PURE__ */ jsx("span", { className: "sdt-event-time", children: formatTime(event.timestamp) }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "sdt-event-type",
+        style: {
+          backgroundColor: typeInfo.color + "20",
+          color: typeInfo.color
+        },
+        children: typeInfo.label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `sdt-event-target ${isStoreTarget ? "clickable" : ""}`,
+        onClick: handleTargetClick,
+        title: isStoreTarget ? "Click to view store" : void 0,
+        children: event.target
+      }
+    ),
+    event.extra && /* @__PURE__ */ jsx("span", { className: "sdt-event-extra", title: event.extra, children: event.extra }),
+    /* @__PURE__ */ jsxs("div", { className: "sdt-event-actions", children: [
+      isDispatch && /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "sdt-event-replay",
+          onClick: handleReplay,
+          title: "Replay this action",
+          children: /* @__PURE__ */ jsx(IconReplay, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "sdt-event-copy",
+          onClick: handleCopy,
+          title: "Copy event data",
+          children: /* @__PURE__ */ jsx(IconCopy, {})
+        }
+      )
+    ] })
+  ] });
+});
+function EventFilterBar({
+  activeFilters,
+  onFilterChange,
+  onClear
+}) {
+  const isAllSelected = activeFilters === null;
+  const handleAllClick = useCallback(() => {
+    onFilterChange(null);
+  }, [onFilterChange]);
+  const handleTypeClick = useCallback(
+    (type) => {
+      if (isAllSelected) {
+        onFilterChange(/* @__PURE__ */ new Set([type]));
+      } else {
+        const next = new Set(activeFilters);
+        if (next.has(type)) {
+          next.delete(type);
+          if (next.size === 0) {
+            onFilterChange(null);
+          } else {
+            onFilterChange(next);
+          }
+        } else {
+          next.add(type);
+          onFilterChange(next);
+        }
+      }
+    },
+    [activeFilters, isAllSelected, onFilterChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "sdt-event-filters", children: [
+    /* @__PURE__ */ jsxs("div", { className: "sdt-event-filter-chips", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: `sdt-event-filter-chip ${isAllSelected ? "active" : ""}`,
+          onClick: handleAllClick,
+          style: {
+            borderColor: isAllSelected ? "#a1a1aa" : void 0,
+            backgroundColor: isAllSelected ? "#a1a1aa20" : void 0
+          },
+          children: "All"
+        }
+      ),
+      ALL_EVENT_TYPES.map((type) => {
+        const info = EVENT_TYPE_LABELS[type];
+        const isActive = !isAllSelected && activeFilters.has(type);
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `sdt-event-filter-chip ${isActive ? "active" : ""}`,
+            onClick: () => handleTypeClick(type),
+            style: {
+              borderColor: isActive ? info.color : void 0,
+              backgroundColor: isActive ? info.color + "20" : void 0
+            },
+            children: info.label
+          },
+          type
+        );
+      })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "sdt-event-clear-btn",
+        onClick: onClear,
+        title: "Clear all events",
+        children: /* @__PURE__ */ jsx(IconClear$1, {})
+      }
+    )
+  ] });
+}
+function EventsTab({
+  controller,
+  events,
+  searchQuery,
+  onSearchQueryChange,
+  filters,
+  onFiltersChange,
+  onNavigateToStore
+}) {
+  const filteredEvents = useMemo(() => {
+    let filtered = events;
+    if (filters !== null) {
+      filtered = filtered.filter((e) => filters.has(e.type));
+    }
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (e) => {
+          var _a;
+          return e.target.toLowerCase().includes(query) || e.type.toLowerCase().includes(query) || ((_a = e.extra) == null ? void 0 : _a.toLowerCase().includes(query));
+        }
+      );
+    }
+    return [...filtered].reverse();
+  }, [events, searchQuery, filters]);
+  const handleFilterChange = useCallback(
+    (newFilters) => {
+      onFiltersChange(newFilters);
+    },
+    [onFiltersChange]
+  );
+  const handleClearEvents = useCallback(() => {
+    controller.clearEvents();
+  }, [controller]);
+  const handleTargetClick = useCallback(
+    (storeId) => {
+      onNavigateToStore(storeId);
+    },
+    [onNavigateToStore]
+  );
+  const handleReplay = useCallback(
+    (event) => {
+      var _a;
+      if (event.type !== "dispatch") return;
+      const store = controller.getStore(event.target);
+      if (!store || !store.instance) return;
+      const actionName = (_a = event.extra) == null ? void 0 : _a.split("(")[0];
+      if (!actionName) return;
+      const actions = store.instance.actions;
+      const action = actions[actionName];
+      if (typeof action !== "function") return;
+      const args = event.data;
+      if (args && Array.isArray(args)) {
+        action(...args);
+      } else {
+        action();
+      }
+    },
+    [controller]
+  );
+  return /* @__PURE__ */ jsx(
+    TabContent,
+    {
+      searchBar: /* @__PURE__ */ jsx(
+        SearchBar,
+        {
+          value: searchQuery,
+          onChange: onSearchQueryChange,
+          placeholder: "Search events..."
+        }
+      ),
+      filterBar: /* @__PURE__ */ jsx(
+        EventFilterBar,
+        {
+          activeFilters: filters,
+          onFilterChange: handleFilterChange,
+          onClear: handleClearEvents
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        MainContent,
+        {
+          isEmpty: filteredEvents.length === 0,
+          emptyIcon: "📋",
+          emptyMessage: "No events yet",
+          emptyHint: "Events will appear as stores change",
+          children: filteredEvents.map((event) => /* @__PURE__ */ jsx(
+            EventEntry,
+            {
+              event,
+              onTargetClick: handleTargetClick,
+              onReplay: handleReplay
+            },
+            event.id
+          ))
+        }
+      )
+    }
+  );
+}
+function DevtoolsPanel({
+  controller,
+  position: initialPosition = "left",
+  onPositionChange,
+  onCollapsedChange,
+  onTransparencyChange,
+  onResize,
+  initialSize = 360,
+  initialCollapsed = false
+}) {
+  const eventFiltersTransform = useMemo(
+    () => ({
+      toStorage: (value) => value ? Array.from(value) : null,
+      fromStorage: (stored) => Array.isArray(stored) ? new Set(stored) : null
+    }),
+    []
+  );
+  const [activeTab, setActiveTab] = usePersistentState(
+    "activeTab",
+    "stores"
+  );
+  const [collapsed, setCollapsed] = usePersistentState(
+    "collapsed",
+    initialCollapsed
+  );
+  const [size, setSize] = usePersistentState("size", initialSize);
+  const [position, setPosition] = usePersistentState(
+    "position",
+    initialPosition
+  );
+  const [stores, setStores] = useState([]);
+  const [events, setEvents] = useState([]);
+  const [storeSearchQuery, setStoreSearchQuery] = usePersistentState(
+    "storeSearchQuery",
+    ""
+  );
+  const [eventSearchQuery, setEventSearchQuery] = usePersistentState(
+    "eventSearchQuery",
+    ""
+  );
+  const [eventFilters, setEventFilters] = usePersistentState(
+    "eventFilters",
+    null,
+    eventFiltersTransform
+  );
+  const [isTransparent, setIsTransparent] = useState(false);
+  const prevStoresVersion = useRef(0);
+  const prevEventsCount = useRef(0);
+  const [storesTabFlash, setStoresTabFlash] = useState(false);
+  const [eventsTabFlash, setEventsTabFlash] = useState(false);
+  useEffect(() => {
+    const update = () => {
+      const newStores = controller.getStores();
+      const newEvents = controller.getEvents();
+      const newStoresVersion = newStores.reduce(
+        (sum, s) => sum + s.history.length,
+        0
+      );
+      if (prevStoresVersion.current > 0 && newStoresVersion > prevStoresVersion.current) {
+        setStoresTabFlash(true);
+        setTimeout(() => setStoresTabFlash(false), 600);
+      }
+      prevStoresVersion.current = newStoresVersion;
+      if (prevEventsCount.current > 0 && newEvents.length > prevEventsCount.current) {
+        setEventsTabFlash(true);
+        setTimeout(() => setEventsTabFlash(false), 600);
+      }
+      prevEventsCount.current = newEvents.length;
+      setStores(newStores);
+      setEvents(newEvents);
+    };
+    update();
+    return controller.subscribe(update);
+  }, [controller]);
+  const toggleCollapsed = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev;
+      onCollapsedChange == null ? void 0 : onCollapsedChange(next);
+      return next;
+    });
+  }, [onCollapsedChange]);
+  const togglePosition = useCallback(() => {
+    const nextPosition = {
+      left: "bottom",
+      bottom: "right",
+      right: "left"
+    };
+    const newPosition = nextPosition[position];
+    setPosition(newPosition);
+    onPositionChange == null ? void 0 : onPositionChange(newPosition);
+  }, [position, onPositionChange]);
+  const toggleTransparency = useCallback(() => {
+    setIsTransparent((prev) => {
+      const next = !prev;
+      onTransparencyChange == null ? void 0 : onTransparencyChange(next);
+      return next;
+    });
+  }, [onTransparencyChange]);
+  const handleResize = useCallback(
+    (delta) => {
+      setSize((prev) => {
+        const minSize = 200;
+        const maxSize = position === "bottom" ? 600 : 800;
+        const adjustedDelta = position === "right" ? -delta : delta;
+        const newSize = Math.min(maxSize, Math.max(minSize, prev + adjustedDelta));
+        onResize == null ? void 0 : onResize(newSize);
+        return newSize;
+      });
+    },
+    [position, onResize]
+  );
+  const handleNavigateToEvents = useCallback((storeId) => {
+    setActiveTab("events");
+    setEventSearchQuery(storeId);
+  }, []);
+  const handleNavigateToStore = useCallback((storeId) => {
+    setActiveTab("stores");
+    setStoreSearchQuery(storeId);
+  }, []);
+  useEffect(() => {
+    onResize == null ? void 0 : onResize(size);
+  }, []);
+  const positionClass = `position-${position}`;
+  const expandedStyle = collapsed ? position === "left" ? { left: "-9999px" } : position === "right" ? { right: "-9999px" } : { bottom: "-9999px" } : {};
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: panelStyles }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `storion-devtools ${positionClass} ${isTransparent ? "transparent" : ""}`,
+        style: expandedStyle,
+        children: [
+          /* @__PURE__ */ jsx(ResizeHandle, { position, onResize: handleResize }),
+          /* @__PURE__ */ jsxs("div", { className: "sdt-header", children: [
+            /* @__PURE__ */ jsxs("div", { className: "sdt-logo", children: [
+              /* @__PURE__ */ jsx("div", { className: "sdt-logo-icon", children: "⚡" }),
+              /* @__PURE__ */ jsx("span", { className: "sdt-title", children: "Storion" })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "sdt-header-actions", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `sdt-btn ${isTransparent ? "active" : ""}`,
+                  onClick: toggleTransparency,
+                  title: "Toggle transparency",
+                  children: /* @__PURE__ */ jsx(IconTransparency, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sdt-btn",
+                  onClick: togglePosition,
+                  title: position === "left" ? "Dock to bottom" : position === "bottom" ? "Dock to right" : "Dock to left",
+                  children: position === "left" ? /* @__PURE__ */ jsx(IconDockBottom, {}) : position === "bottom" ? /* @__PURE__ */ jsx(IconDockRight, {}) : /* @__PURE__ */ jsx(IconDockLeft, {})
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "sdt-btn",
+                  onClick: toggleCollapsed,
+                  title: "Minimize",
+                  children: /* @__PURE__ */ jsx(IconMinimize, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sdt-tabs", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: `sdt-tab ${activeTab === "stores" ? "active" : ""} ${storesTabFlash ? "flash" : ""}`,
+                onClick: () => setActiveTab("stores"),
+                children: [
+                  "Stores",
+                  /* @__PURE__ */ jsx("span", { className: "sdt-tab-count", children: stores.length })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: `sdt-tab ${activeTab === "events" ? "active" : ""} ${eventsTabFlash ? "flash" : ""}`,
+                onClick: () => setActiveTab("events"),
+                children: [
+                  "Events",
+                  /* @__PURE__ */ jsx("span", { className: "sdt-tab-count", children: events.length })
+                ]
+              }
+            )
+          ] }),
+          activeTab === "stores" && /* @__PURE__ */ jsx(
+            StoresTab,
+            {
+              controller,
+              stores,
+              searchQuery: storeSearchQuery,
+              onSearchQueryChange: setStoreSearchQuery,
+              onNavigateToEvents: handleNavigateToEvents
+            }
+          ),
+          activeTab === "events" && /* @__PURE__ */ jsx(
+            EventsTab,
+            {
+              controller,
+              events,
+              searchQuery: eventSearchQuery,
+              onSearchQueryChange: setEventSearchQuery,
+              filters: eventFilters,
+              onFiltersChange: setEventFilters,
+              onNavigateToStore: handleNavigateToStore
+            }
+          )
+        ]
+      }
+    ),
+    collapsed && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "sdt-floating-btn",
+        onClick: toggleCollapsed,
+        title: "Open Storion DevTools",
+        children: "⚡"
+      }
+    )
+  ] });
+}
+const STORAGE_KEY = "storion-devtools-settings";
+function loadStoredSettings() {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch {
+  }
+  return {};
+}
+let panelRoot = null;
+let panelContainer = null;
+let currentPosition = "left";
+let originalBodyPadding = "";
+function updateBodyPadding(position, size, collapsed) {
+  if (position === "bottom" && !collapsed) {
+    if (!originalBodyPadding) {
+      originalBodyPadding = document.body.style.paddingBottom || "";
+    }
+    document.body.style.paddingBottom = `${size}px`;
+  } else {
+    document.body.style.paddingBottom = originalBodyPadding;
+  }
+}
+function resetBodyPadding() {
+  document.body.style.paddingBottom = originalBodyPadding;
+  originalBodyPadding = "";
+}
+let wasCollapsed = false;
+function updateContainerPosition(position, size, collapsed = false) {
+  if (!panelContainer) return;
+  currentPosition = position;
+  const isExpanding = wasCollapsed && !collapsed;
+  wasCollapsed = collapsed;
+  panelContainer.style.top = "";
+  panelContainer.style.right = "";
+  panelContainer.style.bottom = "";
+  panelContainer.style.left = "";
+  panelContainer.style.width = "";
+  panelContainer.style.height = "";
+  panelContainer.style.borderTop = "";
+  panelContainer.style.borderRight = "";
+  panelContainer.style.borderBottom = "";
+  panelContainer.style.borderLeft = "";
+  if (collapsed) {
+    panelContainer.style.transition = "none";
+    panelContainer.style.opacity = "1";
+    panelContainer.style.left = "-9999px";
+    panelContainer.style.top = "0";
+    panelContainer.style.width = `${size}px`;
+    panelContainer.style.height = "100vh";
+    updateBodyPadding(position, size, true);
+    return;
+  }
+  if (isExpanding) {
+    panelContainer.style.transition = "none";
+    panelContainer.style.opacity = "0";
+  }
+  if (position === "left") {
+    panelContainer.style.top = "0";
+    panelContainer.style.left = "0";
+    panelContainer.style.width = `${size}px`;
+    panelContainer.style.height = "100vh";
+    panelContainer.style.borderRight = "1px solid #27272a";
+  } else if (position === "right") {
+    panelContainer.style.top = "0";
+    panelContainer.style.right = "0";
+    panelContainer.style.width = `${size}px`;
+    panelContainer.style.height = "100vh";
+    panelContainer.style.borderLeft = "1px solid #27272a";
+  } else {
+    panelContainer.style.bottom = "0";
+    panelContainer.style.left = "0";
+    panelContainer.style.right = "0";
+    panelContainer.style.height = `${size}px`;
+    panelContainer.style.width = "100%";
+    panelContainer.style.borderTop = "1px solid #27272a";
+  }
+  if (isExpanding) {
+    panelContainer.style.transition = "opacity 0.2s ease-out";
+    panelContainer.style.opacity = "1";
+  }
+  updateBodyPadding(position, size, collapsed);
+}
+function updateContainerSize(size) {
+  if (!panelContainer) return;
+  panelContainer.style.transition = "none";
+  if (currentPosition === "bottom") {
+    panelContainer.style.height = `${size}px`;
+  } else {
+    panelContainer.style.width = `${size}px`;
+  }
+  updateBodyPadding(currentPosition, size, false);
+}
+function mountDevtoolsPanel(options = {}) {
+  const stored = loadStoredSettings();
+  const { container, zIndex = 999999 } = options;
+  const position = stored.position ?? options.position ?? "left";
+  const initialSize = stored.size ?? options.size ?? 360;
+  const initialCollapsed = stored.collapsed ?? options.collapsed ?? false;
+  currentPosition = position;
+  const controller = window.__STORION_DEVTOOLS__;
+  if (!controller) {
+    console.warn(
+      "[Storion Devtools] No devtools controller found. Make sure to add devtoolsMiddleware to your container."
+    );
+    return () => {
+    };
+  }
+  if (panelRoot) {
+    panelRoot.unmount();
+    panelRoot = null;
+  }
+  if (panelContainer && !container) {
+    panelContainer.remove();
+    panelContainer = null;
+  }
+  let containerEl;
+  if (container) {
+    if (typeof container === "string") {
+      const el = document.querySelector(container);
+      if (!el) {
+        console.error(`[Storion Devtools] Container not found: ${container}`);
+        return () => {
+        };
+      }
+      containerEl = el;
+    } else {
+      containerEl = container;
+    }
+  } else {
+    containerEl = document.createElement("div");
+    containerEl.id = "storion-devtools-panel";
+    const baseStyles = {
+      position: "fixed",
+      zIndex: String(zIndex),
+      background: "#09090b",
+      boxShadow: "0 0 20px rgba(0,0,0,0.5)",
+      overflow: "hidden",
+      display: "block"
+    };
+    const positionStyles = {
+      left: {
+        top: "0",
+        left: initialCollapsed ? "-9999px" : "0",
+        width: `${initialSize}px`,
+        height: "100vh",
+        borderRight: "1px solid #27272a"
+      },
+      right: {
+        top: "0",
+        right: initialCollapsed ? "-9999px" : "0",
+        width: `${initialSize}px`,
+        height: "100vh",
+        borderLeft: "1px solid #27272a"
+      },
+      bottom: {
+        bottom: initialCollapsed ? "-9999px" : "0",
+        left: "0",
+        right: "",
+        height: `${initialSize}px`,
+        width: "100%",
+        borderTop: "1px solid #27272a"
+      }
+    };
+    Object.assign(containerEl.style, baseStyles, positionStyles[position]);
+    document.body.appendChild(containerEl);
+    panelContainer = containerEl;
+    updateBodyPadding(position, initialSize, initialCollapsed);
+  }
+  let currentSize = initialSize;
+  let isCollapsed = initialCollapsed;
+  wasCollapsed = initialCollapsed;
+  const handleResize = (newSize) => {
+    currentSize = newSize;
+    if (!isCollapsed) {
+      updateContainerSize(newSize);
+    }
+  };
+  const handleCollapsedChange = (collapsed) => {
+    isCollapsed = collapsed;
+    updateContainerPosition(currentPosition, currentSize, collapsed);
+  };
+  const handlePositionChange = (newPosition) => {
+    currentPosition = newPosition;
+    updateContainerPosition(newPosition, currentSize, isCollapsed);
+  };
+  const handleTransparencyChange = (transparent) => {
+    if (!panelContainer) return;
+    panelContainer.style.opacity = transparent ? "0.3" : "1";
+  };
+  panelRoot = createRoot(containerEl);
+  panelRoot.render(
+    /* @__PURE__ */ jsx(
+      DevtoolsPanel,
+      {
+        controller,
+        position,
+        initialSize,
+        initialCollapsed,
+        onCollapsedChange: handleCollapsedChange,
+        onPositionChange: handlePositionChange,
+        onTransparencyChange: handleTransparencyChange,
+        onResize: handleResize
+      }
+    )
+  );
+  const handleWindowError = (event) => {
+    var _a;
+    controller.recordEvent("error", "window", event.message, {
+      message: event.message,
+      filename: event.filename,
+      lineno: event.lineno,
+      colno: event.colno,
+      stack: (_a = event.error) == null ? void 0 : _a.stack
+    });
+  };
+  const handleUnhandledRejection = (event) => {
+    const reason = event.reason;
+    const message = reason instanceof Error ? reason.message : typeof reason === "string" ? reason : "Unhandled promise rejection";
+    controller.recordEvent("error", "window", message, {
+      message,
+      stack: reason instanceof Error ? reason.stack : void 0,
+      reason
+    });
+  };
+  window.addEventListener("error", handleWindowError);
+  window.addEventListener("unhandledrejection", handleUnhandledRejection);
+  return () => {
+    window.removeEventListener("error", handleWindowError);
+    window.removeEventListener("unhandledrejection", handleUnhandledRejection);
+    if (panelRoot) {
+      panelRoot.unmount();
+      panelRoot = null;
+    }
+    if (panelContainer) {
+      panelContainer.remove();
+      panelContainer = null;
+    }
+    resetBodyPadding();
+  };
+}
+function unmountDevtoolsPanel() {
+  if (panelRoot) {
+    panelRoot.unmount();
+    panelRoot = null;
+  }
+  if (panelContainer) {
+    panelContainer.remove();
+    panelContainer = null;
+  }
+  resetBodyPadding();
+}
+function toggleDevtoolsPanel(options) {
+  if (panelRoot) {
+    unmountDevtoolsPanel();
+  } else {
+    mountDevtoolsPanel(options);
+  }
+}
+export {
+  ActionBar,
+  DevtoolsPanel,
+  FilterBar,
+  MainContent,
+  SearchBar,
+  TabContent,
+  clearDevtoolsSettings,
+  mountDevtoolsPanel,
+  toggleDevtoolsPanel,
+  unmountDevtoolsPanel
+};