@northlight/ui 2.43.6 → 2.43.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/sandbox/index.cjs +1 -1
  2. package/dist/sandbox/index.js +1 -1
  3. package/package.json +2 -2
  4. package/sandbox/bin/sandbox.ts +2 -0
  5. package/sandbox/lib/viewer/sandbox-viewer.css +0 -1
package/dist/sandbox/index.cjs CHANGED
@@ -10481,7 +10481,7 @@ function styleInject(css, ref) {
10481
10481
  }
10482
10482
  }
10483
10483
 
10484
- var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
10484
+ var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
10485
10485
  styleInject(css_248z);
10486
10486
 
10487
10487
  var __defProp = Object.defineProperty;
package/dist/sandbox/index.js CHANGED
@@ -10461,7 +10461,7 @@ function styleInject(css, ref) {
10461
10461
  }
10462
10462
  }
10463
10463
 
10464
- var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
10464
+ var css_248z = "/* Design System Variables */\n:root {\n --sandbox-bg: #faf9f7;\n --sandbox-card: #f5f4f0;\n --sandbox-secondary: #edebe5;\n --sandbox-border: #e5e0d5;\n --sandbox-input: #eae5dc;\n --sandbox-accent: #f97316;\n --sandbox-accent-hover: #ea580c;\n --sandbox-accent-light: rgba(249, 115, 22, 0.1);\n --sandbox-text: #1c1917;\n --sandbox-text-muted: #766f65;\n --sandbox-text-secondary: #a8a29e;\n --sandbox-destructive: #dc2626;\n --sandbox-destructive-light: #fef2f2;\n --sandbox-radius-lg: 12px;\n --sandbox-radius-md: 10px;\n --sandbox-radius-sm: 8px;\n}\n\n* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n background: var(--sandbox-bg);\n font-family: Arial, Helvetica, sans-serif;\n}\n\n/* Main Layout */\n.sandbox-viewer {\n display: flex;\n height: 100vh;\n font-family: Arial, Helvetica, sans-serif;\n color: var(--sandbox-text);\n}\n\n/* Sidebar */\n.sandbox-sidebar {\n width: 256px;\n background: var(--sandbox-bg);\n border-right: 1px solid var(--sandbox-border);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.sandbox-logo {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 16px;\n border-bottom: 1px solid var(--sandbox-border);\n}\n\n.sandbox-logo-icon {\n width: 28px;\n height: 28px;\n border-radius: var(--sandbox-radius-sm);\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n font-weight: bold;\n}\n\n.sandbox-logo-text {\n font-weight: 600;\n font-size: 15px;\n color: var(--sandbox-text);\n letter-spacing: -0.01em;\n}\n\n/* Sidebar Search */\n.sandbox-sidebar-search {\n padding: 12px;\n}\n\n.sandbox-sidebar-search-input {\n width: 100%;\n padding: 10px 12px;\n font-size: 13px;\n border: 1px solid var(--sandbox-border);\n border-radius: var(--sandbox-radius-md);\n background: var(--sandbox-bg);\n color: var(--sandbox-text);\n outline: none;\n transition: all 0.15s ease;\n}\n\n.sandbox-sidebar-search-input::placeholder {\n color: var(--sandbox-text-secondary);\n}\n\n.sandbox-sidebar-search-input:focus {\n border-color: var(--sandbox-accent);\n box-shadow: 0 0 0 3px var(--sandbox-accent-light);\n}\n\n/* Sidebar Navigation */\n.sandbox-nav {\n flex: 1;\n overflow-y: auto;\n padding: 0 12px;\n}\n\n.sandbox-nav-section {\n margin-bottom: 16px;\n}\n\n.sandbox-nav-title {\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--sandbox-text-secondary);\n padding: 8px 12px;\n letter-spacing: 0.08em;\n}\n\n.sandbox-nav-item {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 10px 12px;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n text-align: left;\n cursor: pointer;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n transition: all 0.15s ease;\n}\n\n.sandbox-nav-item:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-nav-item.selected {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n font-weight: 500;\n}\n\n.sandbox-nav-item-icon {\n width: 16px;\n height: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n border: 1px dashed var(--sandbox-text-secondary);\n border-radius: 4px;\n color: var(--sandbox-text-secondary);\n}\n\n/* Content Area */\n.sandbox-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n}\n\n/* Main Content */\n.sandbox-main {\n flex: 1;\n overflow-y: auto;\n background: var(--sandbox-bg);\n}\n\n/* Hero Section */\n.sandbox-hero {\n padding: 48px 32px;\n text-align: center;\n border-bottom: 1px solid var(--sandbox-border);\n background: linear-gradient(to bottom, var(--sandbox-secondary), transparent);\n}\n\n.sandbox-hero-title {\n font-size: 32px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0 0 12px;\n}\n\n.sandbox-hero-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0 auto;\n max-width: 600px;\n}\n\n.sandbox-hero-stats {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 32px;\n margin-top: 32px;\n}\n\n.sandbox-hero-stat {\n text-align: center;\n}\n\n.sandbox-hero-stat-value {\n font-size: 24px;\n font-weight: 700;\n color: var(--sandbox-text);\n}\n\n.sandbox-hero-stat-label {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n}\n\n.sandbox-hero-divider {\n width: 1px;\n height: 32px;\n background: var(--sandbox-border);\n}\n\n/* Component Grid */\n.sandbox-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 24px;\n padding: 32px;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Component Card */\n.sandbox-card {\n position: relative;\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n overflow: hidden;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.sandbox-card:hover {\n border-color: rgba(249, 115, 22, 0.5);\n box-shadow: 0 8px 24px rgba(249, 115, 22, 0.08);\n}\n\n.sandbox-card-preview {\n aspect-ratio: 4 / 3;\n padding: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #ffffff;\n position: relative;\n}\n\n.sandbox-card-actions {\n position: absolute;\n inset: 0;\n background: rgba(28, 25, 23, 0.05);\n backdrop-filter: blur(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.2s ease;\n}\n\n.sandbox-card:hover .sandbox-card-actions {\n opacity: 1;\n pointer-events: auto;\n}\n\n.sandbox-card-btn {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n border-radius: var(--sandbox-radius-md);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-card-btn-secondary {\n background: rgba(250, 249, 247, 0.95);\n border: 1px solid var(--sandbox-border);\n color: var(--sandbox-text);\n}\n\n.sandbox-card-btn-secondary:hover {\n background: var(--sandbox-bg);\n}\n\n.sandbox-card-btn-primary {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-card-btn-primary:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-card-info {\n padding: 16px;\n border-top: 1px solid var(--sandbox-border);\n}\n\n.sandbox-card-title {\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-card-description {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n/* Component Detail View */\n.sandbox-detail {\n padding: 32px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.sandbox-detail-back {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 0;\n background: none;\n border: none;\n font-size: 14px;\n color: var(--sandbox-text-muted);\n cursor: pointer;\n margin-bottom: 24px;\n transition: color 0.15s ease;\n}\n\n.sandbox-detail-back:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n margin-bottom: 32px;\n}\n\n.sandbox-detail-title-row {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 8px;\n}\n\n.sandbox-detail-title {\n font-size: 28px;\n font-weight: 700;\n color: var(--sandbox-text);\n letter-spacing: -0.02em;\n margin: 0;\n}\n\n.sandbox-detail-badge {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: var(--sandbox-secondary);\n border-radius: 9999px;\n}\n\n.sandbox-detail-description {\n font-size: 18px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-detail-favorite {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n border-radius: var(--sandbox-radius-md);\n color: var(--sandbox-text-muted);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-detail-favorite:hover {\n background: var(--sandbox-secondary);\n color: var(--sandbox-text);\n}\n\n.sandbox-detail-favorite.active {\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n}\n\n/* Scenario Cards */\n.sandbox-scenarios {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.sandbox-scenario-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-scenario-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-scenario-info h3 {\n font-size: 15px;\n font-weight: 500;\n color: var(--sandbox-text);\n margin: 0;\n}\n\n.sandbox-scenario-info p {\n font-size: 13px;\n color: var(--sandbox-text-muted);\n margin: 4px 0 0;\n}\n\n.sandbox-scenario-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.sandbox-scenario-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n border-radius: var(--sandbox-radius-sm);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.sandbox-scenario-btn-toggle {\n background: var(--sandbox-secondary);\n border: none;\n color: var(--sandbox-text);\n}\n\n.sandbox-scenario-btn-toggle:hover {\n background: var(--sandbox-border);\n}\n\n.sandbox-scenario-btn-toggle.active {\n background: var(--sandbox-text);\n color: var(--sandbox-bg);\n}\n\n.sandbox-scenario-btn-copy {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-copy:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play {\n background: var(--sandbox-accent);\n border: none;\n color: white;\n}\n\n.sandbox-scenario-btn-play:hover {\n background: var(--sandbox-accent-hover);\n}\n\n.sandbox-scenario-btn-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n}\n\n.sandbox-scenario-btn-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-scenario-content {\n padding: 24px;\n}\n\n.sandbox-scenario-preview {\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-scenario-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n overflow-x: auto;\n}\n\n.sandbox-scenario-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Error States */\n.sandbox-error {\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 20px;\n}\n\n.sandbox-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 14px;\n margin-bottom: 12px;\n}\n\n.sandbox-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n margin: 0 0 12px;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-error-stack {\n color: #6b7280;\n font-family: ui-monospace, monospace;\n font-size: 11px;\n margin: 0;\n padding: 12px;\n background: white;\n border-radius: 4px;\n border: 1px solid var(--sandbox-border);\n white-space: pre-wrap;\n word-break: break-word;\n max-height: 300px;\n overflow: auto;\n}\n\n.sandbox-play-error {\n margin-top: 16px;\n background: var(--sandbox-destructive-light);\n border: 1px solid #fecaca;\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n}\n\n.sandbox-play-error-title {\n color: var(--sandbox-destructive);\n font-weight: 600;\n font-size: 13px;\n margin-bottom: 8px;\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.sandbox-play-error-title::before {\n content: \"✕\";\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n background: var(--sandbox-destructive);\n color: white;\n border-radius: 50%;\n font-size: 10px;\n font-weight: bold;\n}\n\n.sandbox-play-error-message {\n color: #b91c1c;\n font-family: ui-monospace, monospace;\n font-size: 12px;\n margin: 0;\n padding: 10px;\n background: white;\n border-radius: 4px;\n border: 1px solid #fecaca;\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n/* Legacy support for inline scenarios */\n.sandbox-inline {\n flex: 1;\n padding: 24px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.sandbox-inline-scenario {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.sandbox-inline-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n width: 100px;\n flex-shrink: 0;\n}\n\n.sandbox-inline-preview {\n flex: 1;\n background: var(--sandbox-card);\n border-radius: var(--sandbox-radius-md);\n padding: 16px;\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-play-slot {\n width: 32px;\n flex-shrink: 0;\n}\n\n.sandbox-play-inline {\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 12px;\n transition: all 0.15s ease;\n}\n\n.sandbox-play-inline:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play-inline:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play-inline.error {\n background: var(--sandbox-destructive);\n}\n\n/* Legacy Tabs (for backwards compatibility) */\n.sandbox-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 0 24px;\n background: var(--sandbox-card);\n border-bottom: 1px solid var(--sandbox-border);\n min-height: 52px;\n overflow-x: auto;\n flex-wrap: wrap;\n}\n\n.sandbox-tab {\n padding: 14px 16px;\n min-width: 100px;\n text-align: center;\n background: none;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n margin-bottom: -1px;\n transition: all 0.15s ease;\n border-radius: var(--sandbox-radius-sm) var(--sandbox-radius-sm) 0 0;\n}\n\n.sandbox-tab:hover {\n color: var(--sandbox-text);\n background: var(--sandbox-bg);\n}\n\n.sandbox-tab.selected {\n color: var(--sandbox-accent);\n border-bottom-color: var(--sandbox-accent);\n background: none;\n}\n\n.sandbox-play {\n margin-left: auto;\n padding: 8px 16px;\n background: var(--sandbox-accent);\n color: white;\n border: none;\n border-radius: var(--sandbox-radius-sm);\n cursor: pointer;\n font-size: 13px;\n font-weight: 500;\n transition: all 0.15s ease;\n}\n\n.sandbox-play:hover {\n background: var(--sandbox-accent-hover);\n transform: translateY(-1px);\n}\n\n.sandbox-play:disabled {\n background: var(--sandbox-border);\n color: var(--sandbox-text-muted);\n cursor: not-allowed;\n transform: none;\n}\n\n.sandbox-play.error {\n background: var(--sandbox-destructive);\n}\n\n.sandbox-play.error:hover {\n background: #b91c1c;\n}\n\n.sandbox-preview {\n flex: 1;\n padding: 32px;\n overflow: auto;\n}\n\n/* Tabbed Layout */\n.sandbox-detail-tabbed {\n padding: 32px;\n width: 100%;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-back {\n margin-bottom: 24px;\n}\n\n.sandbox-detail-tabbed .sandbox-detail-header {\n margin-bottom: 24px;\n}\n\n.sandbox-tabbed-card {\n border-radius: var(--sandbox-radius-lg);\n border: 1px solid var(--sandbox-border);\n background: var(--sandbox-card);\n}\n\n.sandbox-tabs-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-bottom: 1px solid var(--sandbox-border);\n background: rgba(237, 235, 229, 0.3);\n}\n\n.sandbox-tabs-list {\n display: flex;\n align-items: center;\n overflow-x: auto;\n}\n\n.sandbox-tab-item {\n padding: 14px 20px;\n font-size: 14px;\n font-weight: 500;\n color: var(--sandbox-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n white-space: nowrap;\n transition: color 0.15s ease;\n}\n\n.sandbox-tab-item:hover {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active {\n color: var(--sandbox-text);\n}\n\n.sandbox-tab-item.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--sandbox-accent);\n}\n\n.sandbox-tabs-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 16px;\n}\n\n.sandbox-tab-description {\n padding: 12px 24px;\n border-bottom: 1px solid rgba(229, 224, 213, 0.5);\n background: rgba(237, 235, 229, 0.1);\n}\n\n.sandbox-tab-description p {\n font-size: 14px;\n color: var(--sandbox-text-muted);\n margin: 0;\n}\n\n.sandbox-tab-content {\n padding: 32px;\n}\n\n.sandbox-tab-preview {\n min-height: 300px;\n padding: 32px;\n background: #ffffff;\n border-radius: var(--sandbox-radius-md);\n border: 1px solid var(--sandbox-border);\n}\n\n.sandbox-tab-code {\n background: rgba(28, 25, 23, 0.03);\n border-radius: var(--sandbox-radius-md);\n padding: 24px;\n overflow-x: auto;\n}\n\n.sandbox-tab-code pre {\n margin: 0;\n font-family: ui-monospace, monospace;\n font-size: 13px;\n color: rgba(28, 25, 23, 0.8);\n white-space: pre-wrap;\n word-break: break-word;\n}\n\n.sandbox-nav-dots {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n margin-top: 24px;\n}\n\n.sandbox-nav-dot {\n height: 8px;\n border-radius: 9999px;\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n padding: 0;\n}\n\n.sandbox-nav-dot.inactive {\n width: 8px;\n background: var(--sandbox-border);\n}\n\n.sandbox-nav-dot.inactive:hover {\n background: var(--sandbox-text-muted);\n}\n\n.sandbox-nav-dot.active {\n width: 24px;\n background: var(--sandbox-accent);\n}\n\n/* Advanced badge */\n.sandbox-badge-advanced {\n display: inline-flex;\n align-items: center;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n color: var(--sandbox-accent);\n background: var(--sandbox-accent-light);\n border: 1px solid rgba(249, 115, 22, 0.2);\n border-radius: 9999px;\n}\n\n/* Utility classes */\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n}\n";
10465
10465
  styleInject(css_248z);
10466
10466
 
10467
10467
  var __defProp = Object.defineProperty;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@northlight/ui",
3
- "version": "2.43.6",
3
+ "version": "2.43.7",
4
4
  "description": "Northlight UI library, based on Chakra-ui",
5
5
  "license": "MIT",
6
6
  "author": "Camphouse",
@@ -126,5 +126,5 @@
126
126
  "react-dom": ">=18.0.0",
127
127
  "react-router-dom": "^5.0.0"
128
128
  },
129
- "gitHead": "656ca98cae903229b8d93e831abce5d852ba02c1"
129
+ "gitHead": "a929b72baaccb92772fc8cd1d04eea348f731b67"
130
130
  }
package/sandbox/bin/sandbox.ts CHANGED
@@ -80,6 +80,7 @@ async function main () {
80
80
  <head>
81
81
  <meta charset="UTF-8" />
82
82
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
83
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
83
84
  <title>Sandbox</title>
84
85
  </head>
85
86
  <body>
@@ -107,6 +108,7 @@ async function main () {
107
108
  <head>
108
109
  <meta charset="UTF-8" />
109
110
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
111
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
110
112
  <title>Sandbox</title>
111
113
  </head>
112
114
  <body>
package/sandbox/lib/viewer/sandbox-viewer.css CHANGED
@@ -801,7 +801,6 @@ body {
801
801
  border-radius: var(--sandbox-radius-lg);
802
802
  border: 1px solid var(--sandbox-border);
803
803
  background: var(--sandbox-card);
804
- overflow: hidden;
805
804
  }
806
805
 
807
806
  .sandbox-tabs-bar {