@os-legal/ui 0.1.0

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 (6) hide show
  1. package/README.md +347 -0
  2. package/dist/index.d.mts +1959 -0
  3. package/dist/index.d.ts +1959 -0
  4. package/dist/index.js +16331 -0
  5. package/dist/index.mjs +16089 -0
  6. package/package.json +73 -0
package/dist/index.d.mts ADDED
@@ -0,0 +1,1959 @@
1
+ import React, { ElementType, ReactNode, ComponentPropsWithoutRef, HTMLAttributes, ButtonHTMLAttributes, TextareaHTMLAttributes, InputHTMLAttributes } from 'react';
2
+ import * as react_jsx_runtime from 'react/jsx-runtime';
3
+
4
+ /**
5
+ * OpenContracts Design Tokens
6
+ *
7
+ * Core design values for the component library.
8
+ * CSS custom properties are defined in tokens.css
9
+ */
10
+ interface ColorScale {
11
+ accent: string;
12
+ accentHover: string;
13
+ accentActive: string;
14
+ fgPrimary: string;
15
+ fgSecondary: string;
16
+ fgTertiary: string;
17
+ fgInverse: string;
18
+ bgCanvas: string;
19
+ bgSurface: string;
20
+ bgSurfaceHover: string;
21
+ bgSidebar: string;
22
+ borderDefault: string;
23
+ borderStrong: string;
24
+ success: string;
25
+ warning: string;
26
+ error: string;
27
+ successBg: string;
28
+ warningBg: string;
29
+ errorBg: string;
30
+ }
31
+ interface SpacingScale {
32
+ xs: string;
33
+ sm: string;
34
+ md: string;
35
+ lg: string;
36
+ xl: string;
37
+ '2xl': string;
38
+ }
39
+ interface RadiusScale {
40
+ sm: string;
41
+ md: string;
42
+ lg: string;
43
+ full: string;
44
+ }
45
+ interface ShadowScale {
46
+ sm: string;
47
+ md: string;
48
+ lg: string;
49
+ xl: string;
50
+ inner: string;
51
+ accent: string;
52
+ accentLg: string;
53
+ }
54
+ interface FontSizeScale {
55
+ xs: string;
56
+ sm: string;
57
+ md: string;
58
+ lg: string;
59
+ xl: string;
60
+ '2xl': string;
61
+ '3xl': string;
62
+ }
63
+ interface AnimationScale {
64
+ durationFast: string;
65
+ durationNormal: string;
66
+ durationSlow: string;
67
+ durationSpin: string;
68
+ easingDefault: string;
69
+ easingEnter: string;
70
+ easingExit: string;
71
+ easingSpring: string;
72
+ }
73
+ interface ZIndexScale {
74
+ dropdown: string;
75
+ sticky: string;
76
+ overlay: string;
77
+ modal: string;
78
+ popover: string;
79
+ tooltip: string;
80
+ }
81
+ interface OpacityScale {
82
+ disabled: string;
83
+ loading: string;
84
+ hover: string;
85
+ focusRing: string;
86
+ overlay: string;
87
+ }
88
+ interface LineHeightScale {
89
+ tight: string;
90
+ normal: string;
91
+ relaxed: string;
92
+ }
93
+ interface BreakpointScale {
94
+ sm: string;
95
+ md: string;
96
+ lg: string;
97
+ xl: string;
98
+ }
99
+ interface Tokens {
100
+ colors: ColorScale;
101
+ spacing: SpacingScale;
102
+ radius: RadiusScale;
103
+ shadows: ShadowScale;
104
+ fontSizes: FontSizeScale;
105
+ animation: AnimationScale;
106
+ zIndex: ZIndexScale;
107
+ opacity: OpacityScale;
108
+ lineHeight: LineHeightScale;
109
+ breakpoints: BreakpointScale;
110
+ }
111
+ declare const tokens: Tokens;
112
+
113
+ /**
114
+ * Shared CSS Utilities
115
+ *
116
+ * Centralized styles for common patterns used across components.
117
+ * These reduce duplication and ensure consistency.
118
+ */
119
+ declare const utilitiesStyles = "\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-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-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n";
120
+
121
+ /**
122
+ * Common size scale used across components
123
+ */
124
+ type Size = 'sm' | 'md' | 'lg';
125
+ /**
126
+ * Status variants for feedback states
127
+ */
128
+ type Status = 'default' | 'success' | 'warning' | 'error';
129
+ /**
130
+ * Polymorphic component support
131
+ * Allows components to render as different elements while maintaining type safety
132
+ */
133
+ type PolymorphicComponentProp<C extends ElementType, Props = object> = Props & {
134
+ as?: C;
135
+ children?: ReactNode;
136
+ } & Omit<ComponentPropsWithoutRef<C>, keyof Props | 'as' | 'children'>;
137
+ type PolymorphicRef<C extends ElementType> = ComponentPropsWithoutRef<C>['ref'];
138
+
139
+ interface AppShellContextValue {
140
+ sidebarOpen: boolean;
141
+ sidebarWidth: number;
142
+ toggleSidebar: () => void;
143
+ setSidebarOpen: (open: boolean) => void;
144
+ }
145
+ declare const useAppShell: () => AppShellContextValue;
146
+ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
147
+ /** Default sidebar open state */
148
+ defaultSidebarOpen?: boolean;
149
+ /** Sidebar width in pixels */
150
+ sidebarWidth?: number;
151
+ /** Fixed viewport height (100vh) */
152
+ fixed?: boolean;
153
+ children?: ReactNode;
154
+ }
155
+ interface AppShellSidebarProps extends HTMLAttributes<HTMLElement> {
156
+ /** Width of the sidebar (overrides context) */
157
+ width?: number;
158
+ /** Show border on the right */
159
+ bordered?: boolean;
160
+ children?: ReactNode;
161
+ }
162
+ interface AppShellMainProps extends HTMLAttributes<HTMLElement> {
163
+ children?: ReactNode;
164
+ }
165
+ interface AppShellHeaderProps extends HTMLAttributes<HTMLElement> {
166
+ /** Fixed to top of viewport */
167
+ fixed?: boolean;
168
+ /** Height of header */
169
+ height?: number;
170
+ /** Show border on bottom */
171
+ bordered?: boolean;
172
+ children?: ReactNode;
173
+ }
174
+ declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
175
+ declare const AppShellSidebar: React.ForwardRefExoticComponent<AppShellSidebarProps & React.RefAttributes<HTMLElement>>;
176
+ declare const AppShellMain: React.ForwardRefExoticComponent<AppShellMainProps & React.RefAttributes<HTMLElement>>;
177
+ declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
178
+
179
+ declare const appShellStyles = "\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n";
180
+
181
+ interface BreadcrumbItem {
182
+ label: string;
183
+ href?: string;
184
+ onClick?: () => void;
185
+ }
186
+ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
187
+ /** Page title */
188
+ title: ReactNode;
189
+ /** Optional subtitle/description */
190
+ subtitle?: ReactNode;
191
+ /** Breadcrumb navigation */
192
+ breadcrumbs?: BreadcrumbItem[];
193
+ /** Actions (buttons, etc.) aligned to the right */
194
+ actions?: ReactNode;
195
+ /** Back button handler */
196
+ onBack?: () => void;
197
+ /** Tabs or secondary navigation below title */
198
+ tabs?: ReactNode;
199
+ children?: ReactNode;
200
+ }
201
+ declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
202
+
203
+ declare const pageHeaderStyles = "\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n";
204
+
205
+ type SplitDirection = 'horizontal' | 'vertical';
206
+ interface SplitPaneProps extends HTMLAttributes<HTMLDivElement> {
207
+ /** Split direction */
208
+ direction?: SplitDirection;
209
+ /** Initial size of the first pane (px or %) */
210
+ defaultSize?: number | string;
211
+ /** Minimum size of the first pane in px */
212
+ minSize?: number;
213
+ /** Maximum size of the first pane in px */
214
+ maxSize?: number;
215
+ /** Whether the split is resizable */
216
+ resizable?: boolean;
217
+ /** Callback when size changes */
218
+ onResize?: (size: number) => void;
219
+ /** First pane content */
220
+ children: [ReactNode, ReactNode];
221
+ }
222
+ interface PaneProps extends HTMLAttributes<HTMLDivElement> {
223
+ children?: ReactNode;
224
+ }
225
+ declare const SplitPane: React.ForwardRefExoticComponent<SplitPaneProps & React.RefAttributes<HTMLDivElement>>;
226
+ declare const Pane: React.ForwardRefExoticComponent<PaneProps & React.RefAttributes<HTMLDivElement>>;
227
+
228
+ declare const splitPaneStyles = "\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n";
229
+
230
+ type StackSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
231
+ type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
232
+ type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
233
+ interface StackProps extends HTMLAttributes<HTMLDivElement> {
234
+ /** Render as different element */
235
+ as?: ElementType;
236
+ /** Stack direction */
237
+ direction?: 'row' | 'column';
238
+ /** Gap between children */
239
+ gap?: StackSpacing;
240
+ /** Align items */
241
+ align?: StackAlign;
242
+ /** Justify content */
243
+ justify?: StackJustify;
244
+ /** Wrap children */
245
+ wrap?: boolean;
246
+ /** Fill available space */
247
+ flex?: boolean | number | string;
248
+ /** Inline display */
249
+ inline?: boolean;
250
+ children?: ReactNode;
251
+ }
252
+ interface HStackProps extends Omit<StackProps, 'direction'> {
253
+ }
254
+ interface VStackProps extends Omit<StackProps, 'direction'> {
255
+ }
256
+ declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
257
+ /** Horizontal stack (row direction) */
258
+ declare const HStack: React.ForwardRefExoticComponent<HStackProps & React.RefAttributes<HTMLDivElement>>;
259
+ /** Vertical stack (column direction) */
260
+ declare const VStack: React.ForwardRefExoticComponent<VStackProps & React.RefAttributes<HTMLDivElement>>;
261
+ /** Spacer - flexible space that fills available room */
262
+ declare const Spacer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
263
+ /** Divider - visual separator */
264
+ interface DividerProps extends HTMLAttributes<HTMLDivElement> {
265
+ orientation?: 'horizontal' | 'vertical';
266
+ }
267
+ declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLDivElement>>;
268
+
269
+ declare const stackStyles = "\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n";
270
+
271
+ type ScrollAreaType = 'auto' | 'always' | 'hover' | 'scroll';
272
+ interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
273
+ /** Scrollbar visibility behavior */
274
+ type?: ScrollAreaType;
275
+ /** Enable horizontal scrolling */
276
+ horizontal?: boolean;
277
+ /** Enable vertical scrolling (default) */
278
+ vertical?: boolean;
279
+ /** Custom scrollbar styling */
280
+ styled?: boolean;
281
+ children?: ReactNode;
282
+ }
283
+ declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
284
+
285
+ declare const scrollAreaStyles = "\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n";
286
+
287
+ type CardVariant = 'elevated' | 'flat' | 'outlined';
288
+ type CardPadding = 'none' | 'sm' | 'md' | 'lg';
289
+ interface CardProps extends HTMLAttributes<HTMLDivElement> {
290
+ variant?: CardVariant;
291
+ padding?: CardPadding;
292
+ interactive?: boolean;
293
+ children?: ReactNode;
294
+ }
295
+ interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
296
+ title?: ReactNode;
297
+ subtitle?: ReactNode;
298
+ action?: ReactNode;
299
+ children?: ReactNode;
300
+ }
301
+ declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
302
+ declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
303
+ declare const CardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
304
+ declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
305
+
306
+ declare const cardStyles = "\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n";
307
+
308
+ interface SidebarProps extends HTMLAttributes<HTMLElement> {
309
+ collapsed?: boolean;
310
+ activeId?: string;
311
+ onNavigate?: (id: string) => void;
312
+ children?: ReactNode;
313
+ }
314
+ interface SidebarHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
315
+ logo?: ReactNode;
316
+ title?: ReactNode;
317
+ children?: ReactNode;
318
+ }
319
+ interface SidebarItemProps extends HTMLAttributes<HTMLButtonElement> {
320
+ id: string;
321
+ icon?: ReactNode;
322
+ label: ReactNode;
323
+ badge?: ReactNode;
324
+ disabled?: boolean;
325
+ }
326
+ interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
327
+ title?: string;
328
+ children?: ReactNode;
329
+ }
330
+ declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLElement>>;
331
+ declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;
332
+ declare const SidebarNav: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
333
+ declare const SidebarSection: React.ForwardRefExoticComponent<SidebarSectionProps & React.RefAttributes<HTMLDivElement>>;
334
+ declare const SidebarItem: React.ForwardRefExoticComponent<SidebarItemProps & React.RefAttributes<HTMLButtonElement>>;
335
+ declare const SidebarFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
336
+
337
+ declare const sidebarStyles = "\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n";
338
+
339
+ interface NavItem {
340
+ id: string;
341
+ label: string;
342
+ href?: string;
343
+ onClick?: () => void;
344
+ }
345
+ interface UserMenuItem {
346
+ id: string;
347
+ label: string;
348
+ icon?: ReactNode;
349
+ onClick?: () => void;
350
+ danger?: boolean;
351
+ divider?: boolean;
352
+ }
353
+ interface NavBarProps extends HTMLAttributes<HTMLElement> {
354
+ /** Logo/brand element */
355
+ logo?: ReactNode;
356
+ /** Brand name text */
357
+ brandName?: string;
358
+ /** Version badge text */
359
+ version?: string;
360
+ /** Navigation items */
361
+ items?: NavItem[];
362
+ /** Currently active nav item id */
363
+ activeId?: string;
364
+ /** Callback when nav item is clicked */
365
+ onNavigate?: (id: string) => void;
366
+ /** User name for the dropdown */
367
+ userName?: string;
368
+ /** User avatar URL */
369
+ userAvatarUrl?: string;
370
+ /** User menu items */
371
+ userMenuItems?: UserMenuItem[];
372
+ /** Right-side actions (before user menu) */
373
+ actions?: ReactNode;
374
+ /** Hide user menu */
375
+ hideUserMenu?: boolean;
376
+ }
377
+ declare const NavBar: React.ForwardRefExoticComponent<NavBarProps & React.RefAttributes<HTMLElement>>;
378
+
379
+ declare const navBarStyles = "\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n";
380
+
381
+ type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
382
+ interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
383
+ open: boolean;
384
+ onClose: () => void;
385
+ size?: ModalSize;
386
+ closeOnOverlay?: boolean;
387
+ closeOnEscape?: boolean;
388
+ children?: ReactNode;
389
+ }
390
+ interface ModalHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
391
+ title?: ReactNode;
392
+ subtitle?: ReactNode;
393
+ onClose?: () => void;
394
+ showCloseButton?: boolean;
395
+ children?: ReactNode;
396
+ }
397
+ interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
398
+ children?: ReactNode;
399
+ }
400
+ declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
401
+ declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
402
+ declare const ModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
403
+ declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
404
+
405
+ declare const modalStyles = "\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n";
406
+
407
+ type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
408
+ interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
409
+ content: ReactNode;
410
+ placement?: TooltipPlacement;
411
+ delay?: number;
412
+ children: ReactNode;
413
+ }
414
+ declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
415
+
416
+ declare const tooltipStyles = "\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n";
417
+
418
+ type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
419
+ type PopoverTrigger = 'click' | 'hover';
420
+ interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
421
+ content: ReactNode;
422
+ placement?: PopoverPlacement;
423
+ trigger?: PopoverTrigger;
424
+ open?: boolean;
425
+ onOpenChange?: (open: boolean) => void;
426
+ children: ReactNode;
427
+ }
428
+ declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
429
+
430
+ declare const popoverStyles = "\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n";
431
+
432
+ type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
433
+ type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
434
+ interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
435
+ /** Image source URL */
436
+ src?: string;
437
+ /** Alt text for image */
438
+ alt?: string;
439
+ /** Fallback initials or icon */
440
+ fallback?: ReactNode;
441
+ /** Size variant */
442
+ size?: AvatarSize;
443
+ /** Online status indicator */
444
+ status?: AvatarStatus;
445
+ /** Use accent color background for AI/system avatars */
446
+ accent?: boolean;
447
+ /** Square shape instead of circle */
448
+ square?: boolean;
449
+ }
450
+ interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
451
+ /** Maximum avatars to show before +N */
452
+ max?: number;
453
+ /** Size of avatars */
454
+ size?: AvatarSize;
455
+ children: ReactNode;
456
+ }
457
+ declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
458
+ declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
459
+ /** AI Assistant avatar with animated gradient */
460
+ declare const AIAvatar: React.ForwardRefExoticComponent<Omit<AvatarProps, "fallback" | "accent"> & React.RefAttributes<HTMLDivElement>>;
461
+
462
+ declare const avatarStyles = "\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n";
463
+
464
+ type ChipVariant = 'filled' | 'outlined' | 'soft';
465
+ type ChipSize = 'sm' | 'md' | 'lg';
466
+ type ChipColor = 'default' | 'accent' | 'success' | 'warning' | 'error' | 'info';
467
+ interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
468
+ /** Visual variant */
469
+ variant?: ChipVariant;
470
+ /** Size */
471
+ size?: ChipSize;
472
+ /** Color scheme */
473
+ color?: ChipColor;
474
+ /** Icon before label */
475
+ icon?: ReactNode;
476
+ /** Icon after label */
477
+ endIcon?: ReactNode;
478
+ /** Selected/active state */
479
+ selected?: boolean;
480
+ /** Removable with X button */
481
+ removable?: boolean;
482
+ /** Remove callback */
483
+ onRemove?: () => void;
484
+ /** Render as non-interactive element */
485
+ static?: boolean;
486
+ children: ReactNode;
487
+ }
488
+ interface ChipGroupProps extends React.HTMLAttributes<HTMLDivElement> {
489
+ /** Gap between chips */
490
+ gap?: 'sm' | 'md';
491
+ children: ReactNode;
492
+ }
493
+ declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
494
+ declare const ChipGroup: React.ForwardRefExoticComponent<ChipGroupProps & React.RefAttributes<HTMLDivElement>>;
495
+ /** Suggestion chip for prompts */
496
+ interface SuggestionChipProps extends Omit<ChipProps, 'variant' | 'color'> {
497
+ /** Prompt icon */
498
+ promptIcon?: boolean;
499
+ }
500
+ declare const SuggestionChip: React.ForwardRefExoticComponent<SuggestionChipProps & React.RefAttributes<HTMLButtonElement>>;
501
+ /** Filter chip with toggle behavior */
502
+ interface FilterChipProps extends Omit<ChipProps, 'variant'> {
503
+ /** Checked state */
504
+ checked?: boolean;
505
+ /** Change handler */
506
+ onCheckedChange?: (checked: boolean) => void;
507
+ }
508
+ declare const FilterChip: React.ForwardRefExoticComponent<FilterChipProps & React.RefAttributes<HTMLButtonElement>>;
509
+
510
+ declare const chipStyles = "\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n";
511
+
512
+ type DocumentType = 'pdf' | 'doc' | 'docx' | 'txt' | 'xls' | 'xlsx' | 'ppt' | 'img' | 'unknown';
513
+ interface SourceCardProps extends HTMLAttributes<HTMLDivElement> {
514
+ /** Document title/name */
515
+ title: string;
516
+ /** Document type for icon */
517
+ type?: DocumentType;
518
+ /** Page or section reference */
519
+ reference?: string;
520
+ /** Brief excerpt or description */
521
+ excerpt?: string;
522
+ /** Confidence/relevance score (0-100) */
523
+ score?: number;
524
+ /** Custom icon */
525
+ icon?: ReactNode;
526
+ /** Click handler */
527
+ onOpen?: () => void;
528
+ /** Compact inline variant */
529
+ inline?: boolean;
530
+ }
531
+ interface SourcePillProps extends HTMLAttributes<HTMLButtonElement> {
532
+ /** Document name */
533
+ name: string;
534
+ /** Document type */
535
+ type?: DocumentType;
536
+ /** Reference (page, section) */
537
+ reference?: string;
538
+ /** Click handler */
539
+ onOpen?: () => void;
540
+ }
541
+ interface SourceListProps extends HTMLAttributes<HTMLDivElement> {
542
+ /** Section title */
543
+ title?: string;
544
+ /** Number of sources */
545
+ count?: number;
546
+ children: ReactNode;
547
+ }
548
+ declare const SourceCard: React.ForwardRefExoticComponent<SourceCardProps & React.RefAttributes<HTMLDivElement>>;
549
+ declare const SourcePill: React.ForwardRefExoticComponent<SourcePillProps & React.RefAttributes<HTMLButtonElement>>;
550
+ declare const SourceList: React.ForwardRefExoticComponent<SourceListProps & React.RefAttributes<HTMLDivElement>>;
551
+ /** Inline citation marker */
552
+ interface CitationProps extends HTMLAttributes<HTMLButtonElement> {
553
+ /** Citation number */
554
+ number: number;
555
+ /** Click handler */
556
+ onClick?: () => void;
557
+ }
558
+ declare const Citation: React.ForwardRefExoticComponent<CitationProps & React.RefAttributes<HTMLButtonElement>>;
559
+
560
+ declare const sourceCardStyles = "\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n";
561
+
562
+ type MessageRole = 'user' | 'assistant' | 'system';
563
+ type MessageStatus = 'sending' | 'sent' | 'error';
564
+ interface ChatMessageProps extends HTMLAttributes<HTMLDivElement> {
565
+ /** Message role determines styling */
566
+ role: MessageRole;
567
+ /** Avatar element */
568
+ avatar?: ReactNode;
569
+ /** Sender name */
570
+ name?: string;
571
+ /** Timestamp */
572
+ timestamp?: string;
573
+ /** Message status */
574
+ status?: MessageStatus;
575
+ /** Actions (copy, regenerate, etc.) */
576
+ actions?: ReactNode;
577
+ /** Is this message currently streaming? */
578
+ streaming?: boolean;
579
+ /** Message content */
580
+ children: ReactNode;
581
+ }
582
+ declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
583
+ interface ThinkingBlockProps extends HTMLAttributes<HTMLDivElement> {
584
+ /** Title for the thinking section */
585
+ title?: string;
586
+ /** Is it currently expanded? */
587
+ expanded?: boolean;
588
+ /** Toggle expand handler */
589
+ onToggle?: () => void;
590
+ /** Content of thinking */
591
+ children?: ReactNode;
592
+ }
593
+ declare const ThinkingBlock: React.ForwardRefExoticComponent<ThinkingBlockProps & React.RefAttributes<HTMLDivElement>>;
594
+ interface TypingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
595
+ /** Who is typing */
596
+ label?: string;
597
+ }
598
+ declare const TypingIndicator: React.ForwardRefExoticComponent<TypingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
599
+ type TaskStatus = 'pending' | 'running' | 'completed' | 'error';
600
+ interface TaskCardProps extends HTMLAttributes<HTMLDivElement> {
601
+ /** Task title */
602
+ title: string;
603
+ /** Task description */
604
+ description?: string;
605
+ /** Task status */
606
+ status?: TaskStatus;
607
+ /** Progress (0-100) */
608
+ progress?: number;
609
+ /** Icon */
610
+ icon?: ReactNode;
611
+ }
612
+ declare const TaskCard: React.ForwardRefExoticComponent<TaskCardProps & React.RefAttributes<HTMLDivElement>>;
613
+ interface MessageActionsProps extends HTMLAttributes<HTMLDivElement> {
614
+ children: ReactNode;
615
+ }
616
+ declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
617
+ interface ActionButtonProps extends HTMLAttributes<HTMLButtonElement> {
618
+ /** Icon */
619
+ icon: ReactNode;
620
+ /** Tooltip label */
621
+ label: string;
622
+ /** Active state */
623
+ active?: boolean;
624
+ }
625
+ declare const ActionButton: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<HTMLButtonElement>>;
626
+ interface ChatInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange' | 'onSubmit'> {
627
+ /** Current value */
628
+ value?: string;
629
+ /** Change handler */
630
+ onChange?: (value: string) => void;
631
+ /** Submit handler */
632
+ onSubmit?: (value: string) => void;
633
+ /** Placeholder text */
634
+ placeholder?: string;
635
+ /** Is submitting/loading */
636
+ loading?: boolean;
637
+ /** Left side actions (attach, etc.) */
638
+ leftActions?: ReactNode;
639
+ /** Right side actions (send, etc.) */
640
+ rightActions?: ReactNode;
641
+ /** Suggestion chips above input */
642
+ suggestions?: ReactNode;
643
+ }
644
+ declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
645
+ interface ChatContainerProps extends HTMLAttributes<HTMLDivElement> {
646
+ children: ReactNode;
647
+ }
648
+ declare const ChatContainer: React.ForwardRefExoticComponent<ChatContainerProps & React.RefAttributes<HTMLDivElement>>;
649
+ declare const ChatMessages: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
650
+
651
+ declare const chatStyles = "\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n";
652
+
653
+ type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'link';
654
+ type ButtonSize = 'sm' | 'md' | 'lg';
655
+ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
656
+ variant?: ButtonVariant;
657
+ size?: ButtonSize;
658
+ loading?: boolean;
659
+ fullWidth?: boolean;
660
+ leftIcon?: ReactNode;
661
+ rightIcon?: ReactNode;
662
+ as?: ElementType;
663
+ children?: ReactNode;
664
+ }
665
+ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
666
+ variant?: ButtonVariant;
667
+ size?: ButtonSize;
668
+ loading?: boolean;
669
+ 'aria-label': string;
670
+ children: ReactNode;
671
+ }
672
+ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
673
+ attached?: boolean;
674
+ children?: ReactNode;
675
+ }
676
+ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
677
+ declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
678
+ declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
679
+
680
+ declare const buttonStyles = "\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n";
681
+
682
+ type InputSize = 'sm' | 'md' | 'lg';
683
+ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
684
+ label?: string;
685
+ helperText?: string;
686
+ error?: string | boolean;
687
+ size?: InputSize;
688
+ leftIcon?: ReactNode;
689
+ rightIcon?: ReactNode;
690
+ leftAddon?: ReactNode;
691
+ rightAddon?: ReactNode;
692
+ fullWidth?: boolean;
693
+ }
694
+ declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
695
+
696
+ declare const inputStyles = "\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
697
+
698
+ interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
699
+ label?: string;
700
+ helperText?: string;
701
+ error?: string | boolean;
702
+ autoResize?: boolean;
703
+ maxRows?: number;
704
+ fullWidth?: boolean;
705
+ }
706
+ declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
707
+
708
+ declare const textareaStyles = "\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
709
+
710
+ type SelectSize = 'sm' | 'md' | 'lg';
711
+ interface SelectOption {
712
+ value: string;
713
+ label: string;
714
+ disabled?: boolean;
715
+ }
716
+ interface SelectOptionGroup {
717
+ label: string;
718
+ options: SelectOption[];
719
+ }
720
+ interface SelectProps {
721
+ label?: string;
722
+ placeholder?: string;
723
+ helperText?: string;
724
+ error?: string | boolean;
725
+ size?: SelectSize;
726
+ options: (SelectOption | SelectOptionGroup)[];
727
+ value?: string;
728
+ defaultValue?: string;
729
+ onChange?: (value: string) => void;
730
+ multiple?: boolean;
731
+ searchable?: boolean;
732
+ clearable?: boolean;
733
+ disabled?: boolean;
734
+ fullWidth?: boolean;
735
+ className?: string;
736
+ id?: string;
737
+ }
738
+ declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;
739
+
740
+ declare const selectStyles = "\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
741
+
742
+ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
743
+ label?: ReactNode;
744
+ indeterminate?: boolean;
745
+ error?: boolean;
746
+ }
747
+ interface CheckboxGroupProps {
748
+ value?: string[];
749
+ defaultValue?: string[];
750
+ onChange?: (value: string[]) => void;
751
+ orientation?: 'horizontal' | 'vertical';
752
+ className?: string;
753
+ children?: ReactNode;
754
+ }
755
+ declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
756
+ declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
757
+
758
+ declare const checkboxStyles = "\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n";
759
+
760
+ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
761
+ label?: ReactNode;
762
+ error?: boolean;
763
+ }
764
+ interface RadioGroupProps {
765
+ name?: string;
766
+ value?: string;
767
+ defaultValue?: string;
768
+ onChange?: (value: string) => void;
769
+ orientation?: 'horizontal' | 'vertical';
770
+ className?: string;
771
+ children?: ReactNode;
772
+ }
773
+ declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
774
+ declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
775
+
776
+ declare const radioStyles = "\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n";
777
+
778
+ type ToggleSize = 'sm' | 'md' | 'lg';
779
+ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
780
+ label?: ReactNode;
781
+ description?: string;
782
+ size?: ToggleSize;
783
+ error?: boolean;
784
+ }
785
+ declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
786
+ declare const Switch: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
787
+
788
+ declare const toggleStyles = "\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n";
789
+
790
+ interface FormFieldProps extends HTMLAttributes<HTMLDivElement> {
791
+ label?: string;
792
+ htmlFor?: string;
793
+ helperText?: string;
794
+ error?: string | boolean;
795
+ required?: boolean;
796
+ optional?: boolean;
797
+ children?: ReactNode;
798
+ }
799
+ declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
800
+
801
+ declare const formFieldStyles = "\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n";
802
+
803
+ type ToastVariant = 'success' | 'error' | 'warning' | 'info';
804
+ type ToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
805
+ interface ToastProps {
806
+ id: string;
807
+ variant?: ToastVariant;
808
+ title?: string;
809
+ description?: string;
810
+ duration?: number;
811
+ action?: ReactNode;
812
+ onClose?: () => void;
813
+ }
814
+ interface ToastProviderProps {
815
+ position?: ToastPosition;
816
+ children?: ReactNode;
817
+ }
818
+ declare const useToast: () => {
819
+ toast: (options: Omit<ToastProps, "id">) => string;
820
+ success: (title: string, options?: Omit<ToastProps, "id" | "title" | "variant">) => string;
821
+ error: (title: string, options?: Omit<ToastProps, "id" | "title" | "variant">) => string;
822
+ warning: (title: string, options?: Omit<ToastProps, "id" | "title" | "variant">) => string;
823
+ info: (title: string, options?: Omit<ToastProps, "id" | "title" | "variant">) => string;
824
+ dismiss: (id: string) => void;
825
+ };
826
+ declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
827
+ declare const ToastProvider: ({ position, children }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
828
+
829
+ declare const toastStyles = "\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n";
830
+
831
+ type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
832
+ type SkeletonAnimation = 'pulse' | 'wave' | 'none';
833
+ interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
834
+ variant?: SkeletonVariant;
835
+ animation?: SkeletonAnimation;
836
+ width?: number | string;
837
+ height?: number | string;
838
+ }
839
+ declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
840
+ interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
841
+ lines?: number;
842
+ lastLineWidth?: string;
843
+ }
844
+ declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
845
+ declare const SkeletonAvatar: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
846
+ declare const SkeletonButton: React.ForwardRefExoticComponent<Omit<SkeletonProps, "variant"> & React.RefAttributes<HTMLDivElement>>;
847
+ declare const DocumentCardSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
848
+ declare const TableRowSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
849
+ columns?: number;
850
+ } & React.RefAttributes<HTMLDivElement>>;
851
+ declare const ChatMessageSkeleton: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
852
+
853
+ declare const skeletonStyles = "\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n";
854
+
855
+ interface SearchSuggestion {
856
+ id: string;
857
+ label: string;
858
+ icon?: React.ReactNode;
859
+ }
860
+ interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'> {
861
+ shortcut?: string;
862
+ recentSearches?: string[];
863
+ suggestions?: SearchSuggestion[];
864
+ onSearch?: (query: string) => void;
865
+ onClear?: () => void;
866
+ loading?: boolean;
867
+ fullWidth?: boolean;
868
+ }
869
+ declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
870
+
871
+ declare const searchInputStyles = "\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n";
872
+
873
+ type ProgressSize = 'sm' | 'md' | 'lg';
874
+ type ProgressVariant = 'determinate' | 'indeterminate';
875
+ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
876
+ value?: number;
877
+ max?: number;
878
+ variant?: ProgressVariant;
879
+ size?: ProgressSize;
880
+ showLabel?: boolean;
881
+ color?: 'accent' | 'success' | 'warning' | 'error';
882
+ }
883
+ interface ProgressCircleProps extends HTMLAttributes<HTMLDivElement> {
884
+ value?: number;
885
+ max?: number;
886
+ size?: ProgressSize | number;
887
+ strokeWidth?: number;
888
+ showLabel?: boolean;
889
+ color?: 'accent' | 'success' | 'warning' | 'error';
890
+ }
891
+ interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {
892
+ size?: ProgressSize | number;
893
+ color?: string;
894
+ }
895
+ declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
896
+ declare const ProgressCircle: React.ForwardRefExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLDivElement>>;
897
+ declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
898
+
899
+ declare const progressStyles = "\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n";
900
+
901
+ type EmptyStateSize = 'sm' | 'md' | 'lg';
902
+ interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
903
+ icon?: ReactNode;
904
+ title: string;
905
+ description?: string;
906
+ action?: ReactNode;
907
+ secondaryAction?: ReactNode;
908
+ size?: EmptyStateSize;
909
+ }
910
+ declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
911
+ declare const EmptyDocumentIcon: () => react_jsx_runtime.JSX.Element;
912
+ declare const EmptySearchIcon: () => react_jsx_runtime.JSX.Element;
913
+ declare const EmptyFolderIcon: () => react_jsx_runtime.JSX.Element;
914
+ declare const EmptyInboxIcon: () => react_jsx_runtime.JSX.Element;
915
+ declare const EmptyNotificationIcon: () => react_jsx_runtime.JSX.Element;
916
+
917
+ declare const emptyStateStyles = "\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n";
918
+
919
+ type AlertVariant = 'info' | 'success' | 'warning' | 'error';
920
+ interface AlertProps extends HTMLAttributes<HTMLDivElement> {
921
+ variant?: AlertVariant;
922
+ title?: string;
923
+ icon?: ReactNode;
924
+ action?: ReactNode;
925
+ dismissible?: boolean;
926
+ onDismiss?: () => void;
927
+ children?: ReactNode;
928
+ }
929
+ interface BannerProps extends HTMLAttributes<HTMLDivElement> {
930
+ variant?: AlertVariant;
931
+ icon?: ReactNode;
932
+ action?: ReactNode;
933
+ dismissible?: boolean;
934
+ onDismiss?: () => void;
935
+ children?: ReactNode;
936
+ }
937
+ declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
938
+ declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAttributes<HTMLDivElement>>;
939
+
940
+ declare const alertStyles = "\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n";
941
+
942
+ type TabsVariant = 'line' | 'enclosed' | 'pills';
943
+ type TabsOrientation = 'horizontal' | 'vertical';
944
+ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
945
+ value?: string;
946
+ defaultValue?: string;
947
+ onChange?: (value: string) => void;
948
+ variant?: TabsVariant;
949
+ orientation?: TabsOrientation;
950
+ children?: ReactNode;
951
+ }
952
+ interface TabListProps extends HTMLAttributes<HTMLDivElement> {
953
+ children?: ReactNode;
954
+ }
955
+ interface TabProps extends HTMLAttributes<HTMLButtonElement> {
956
+ value: string;
957
+ disabled?: boolean;
958
+ icon?: ReactNode;
959
+ children?: ReactNode;
960
+ }
961
+ interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {
962
+ children?: ReactNode;
963
+ }
964
+ interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
965
+ value: string;
966
+ children?: ReactNode;
967
+ }
968
+ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
969
+ declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;
970
+ declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;
971
+ declare const TabPanels: React.ForwardRefExoticComponent<TabPanelsProps & React.RefAttributes<HTMLDivElement>>;
972
+ declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
973
+
974
+ declare const tabsStyles = "\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n";
975
+
976
+ type ResearchStatus = 'pending' | 'researching' | 'completed' | 'error';
977
+ interface ResearchCardProps extends HTMLAttributes<HTMLDivElement> {
978
+ /** Title of the research/analysis */
979
+ title: string;
980
+ /** Back button handler */
981
+ onBack?: () => void;
982
+ /** Actions for the header (share, export, etc.) */
983
+ headerActions?: ReactNode;
984
+ /** Content of the research */
985
+ children: ReactNode;
986
+ }
987
+ declare const ResearchCard: React.ForwardRefExoticComponent<ResearchCardProps & React.RefAttributes<HTMLDivElement>>;
988
+ interface UserQuestionProps extends HTMLAttributes<HTMLDivElement> {
989
+ /** Avatar element */
990
+ avatar?: ReactNode;
991
+ /** Question text */
992
+ children: ReactNode;
993
+ }
994
+ declare const UserQuestion: React.ForwardRefExoticComponent<UserQuestionProps & React.RefAttributes<HTMLDivElement>>;
995
+ interface AIResponseProps extends HTMLAttributes<HTMLDivElement> {
996
+ /** AI avatar/icon */
997
+ avatar?: ReactNode;
998
+ /** Status of the research */
999
+ status?: ResearchStatus;
1000
+ /** Number of steps completed */
1001
+ stepsCompleted?: number;
1002
+ /** Total steps */
1003
+ totalSteps?: number;
1004
+ /** Status text override */
1005
+ statusText?: string;
1006
+ /** Is the status expandable/collapsible? */
1007
+ expandable?: boolean;
1008
+ /** Expanded state */
1009
+ expanded?: boolean;
1010
+ /** Toggle expand handler */
1011
+ onToggle?: () => void;
1012
+ /** Sources badge content */
1013
+ sourcesBadge?: ReactNode;
1014
+ /** Response content */
1015
+ children?: ReactNode;
1016
+ }
1017
+ declare const AIResponse: React.ForwardRefExoticComponent<AIResponseProps & React.RefAttributes<HTMLDivElement>>;
1018
+ interface SourcesBadgeProps extends HTMLAttributes<HTMLButtonElement> {
1019
+ /** Number of sources */
1020
+ count: number;
1021
+ /** Source provider name */
1022
+ provider?: string;
1023
+ /** Provider icon */
1024
+ icon?: ReactNode;
1025
+ /** Click handler */
1026
+ onClick?: () => void;
1027
+ }
1028
+ declare const SourcesBadge: React.ForwardRefExoticComponent<SourcesBadgeProps & React.RefAttributes<HTMLButtonElement>>;
1029
+ interface ResearchSectionProps extends HTMLAttributes<HTMLDivElement> {
1030
+ /** Section heading */
1031
+ heading?: string;
1032
+ /** Content */
1033
+ children: ReactNode;
1034
+ }
1035
+ declare const ResearchSection: React.ForwardRefExoticComponent<ResearchSectionProps & React.RefAttributes<HTMLDivElement>>;
1036
+ interface StepItem {
1037
+ id: string;
1038
+ label: string;
1039
+ status: 'pending' | 'running' | 'completed' | 'error';
1040
+ description?: string;
1041
+ }
1042
+ interface StepsListProps extends HTMLAttributes<HTMLDivElement> {
1043
+ /** Steps to display */
1044
+ steps: StepItem[];
1045
+ }
1046
+ declare const StepsList: React.ForwardRefExoticComponent<StepsListProps & React.RefAttributes<HTMLDivElement>>;
1047
+
1048
+ declare const researchCardStyles = "\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n";
1049
+
1050
+ type ProjectType = 'knowledge-base' | 'folder' | 'corpus' | 'extract';
1051
+ interface ProjectPickerProps extends HTMLAttributes<HTMLDivElement> {
1052
+ /** Header title */
1053
+ title?: string;
1054
+ /** Subtitle (e.g., "3 projects available") */
1055
+ subtitle?: string;
1056
+ /** Is the picker open/expanded */
1057
+ open?: boolean;
1058
+ /** Toggle handler */
1059
+ onToggle?: () => void;
1060
+ /** Controlled open state */
1061
+ defaultOpen?: boolean;
1062
+ /** Children (ProjectItem components) */
1063
+ children: ReactNode;
1064
+ }
1065
+ declare const ProjectPicker: React.ForwardRefExoticComponent<ProjectPickerProps & React.RefAttributes<HTMLDivElement>>;
1066
+ interface ProjectItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
1067
+ /** Project ID */
1068
+ id: string;
1069
+ /** Project name */
1070
+ name: string;
1071
+ /** Description or metadata (e.g., "3,902 files" or "Internal knowledge base") */
1072
+ description?: string;
1073
+ /** Project type for icon */
1074
+ type?: ProjectType;
1075
+ /** Custom icon */
1076
+ icon?: ReactNode;
1077
+ /** Is this item selected/active */
1078
+ selected?: boolean;
1079
+ /** Selection handler */
1080
+ onSelect?: (id: string) => void;
1081
+ }
1082
+ declare const ProjectItem: React.ForwardRefExoticComponent<ProjectItemProps & React.RefAttributes<HTMLDivElement>>;
1083
+ interface ProjectSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
1084
+ /** Search value */
1085
+ value?: string;
1086
+ /** Change handler */
1087
+ onChange?: (value: string) => void;
1088
+ /** Placeholder text */
1089
+ placeholder?: string;
1090
+ }
1091
+ declare const ProjectSearch: React.ForwardRefExoticComponent<ProjectSearchProps & React.RefAttributes<HTMLInputElement>>;
1092
+
1093
+ declare const projectPickerStyles = "\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n";
1094
+
1095
+ interface SourcesPanelProps extends HTMLAttributes<HTMLDivElement> {
1096
+ /** Active tab value */
1097
+ activeTab?: string;
1098
+ /** Tab change handler */
1099
+ onTabChange?: (value: string) => void;
1100
+ /** Default active tab */
1101
+ defaultTab?: string;
1102
+ /** Children content */
1103
+ children: ReactNode;
1104
+ }
1105
+ declare const SourcesPanel: React.ForwardRefExoticComponent<SourcesPanelProps & React.RefAttributes<HTMLDivElement>>;
1106
+ interface PanelTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
1107
+ /** Active tab value */
1108
+ value?: string;
1109
+ /** Tab change handler */
1110
+ onChange?: (value: string) => void;
1111
+ /** Default value */
1112
+ defaultValue?: string;
1113
+ /** Children (PanelTab components) */
1114
+ children: ReactNode;
1115
+ }
1116
+ declare const PanelTabs: React.ForwardRefExoticComponent<PanelTabsProps & React.RefAttributes<HTMLDivElement>>;
1117
+ interface PanelTabProps extends HTMLAttributes<HTMLButtonElement> {
1118
+ /** Tab value */
1119
+ value: string;
1120
+ /** Icon */
1121
+ icon?: ReactNode;
1122
+ /** Tab label */
1123
+ children: ReactNode;
1124
+ }
1125
+ declare const PanelTab: React.ForwardRefExoticComponent<PanelTabProps & React.RefAttributes<HTMLButtonElement>>;
1126
+ interface PanelSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
1127
+ /** Search value */
1128
+ value?: string;
1129
+ /** Change handler */
1130
+ onChange?: (value: string) => void;
1131
+ /** Placeholder text */
1132
+ placeholder?: string;
1133
+ }
1134
+ declare const PanelSearch: React.ForwardRefExoticComponent<PanelSearchProps & React.RefAttributes<HTMLInputElement>>;
1135
+ interface PanelActionListProps extends HTMLAttributes<HTMLDivElement> {
1136
+ /** Children (PanelAction components) */
1137
+ children: ReactNode;
1138
+ }
1139
+ declare const PanelActionList: React.ForwardRefExoticComponent<PanelActionListProps & React.RefAttributes<HTMLDivElement>>;
1140
+ interface PanelActionProps extends HTMLAttributes<HTMLButtonElement> {
1141
+ /** Icon */
1142
+ icon?: ReactNode;
1143
+ /** Label text */
1144
+ label: string;
1145
+ /** Description text */
1146
+ description?: string;
1147
+ /** Click handler */
1148
+ onClick?: () => void;
1149
+ /** Is disabled */
1150
+ disabled?: boolean;
1151
+ }
1152
+ declare const PanelAction: React.ForwardRefExoticComponent<PanelActionProps & React.RefAttributes<HTMLButtonElement>>;
1153
+ interface PanelSectionProps extends HTMLAttributes<HTMLDivElement> {
1154
+ /** Section title */
1155
+ title?: string;
1156
+ /** Children content */
1157
+ children: ReactNode;
1158
+ }
1159
+ declare const PanelSection: React.ForwardRefExoticComponent<PanelSectionProps & React.RefAttributes<HTMLDivElement>>;
1160
+ declare const UploadIcon: () => react_jsx_runtime.JSX.Element;
1161
+ declare const FilesIcon: () => react_jsx_runtime.JSX.Element;
1162
+ declare const PromptsIcon: () => react_jsx_runtime.JSX.Element;
1163
+ declare const PlusIcon: () => react_jsx_runtime.JSX.Element;
1164
+ declare const IntegrationIcon: () => react_jsx_runtime.JSX.Element;
1165
+
1166
+ declare const sourcesPanelStyles = "\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n";
1167
+
1168
+ type HeroVariant = 'default' | 'centered' | 'split';
1169
+ type HeroSize = 'sm' | 'md' | 'lg';
1170
+ interface HeroProps extends HTMLAttributes<HTMLElement> {
1171
+ /** Visual variant */
1172
+ variant?: HeroVariant;
1173
+ /** Size controls padding */
1174
+ size?: HeroSize;
1175
+ /** Show floating background decorations */
1176
+ showDecorations?: boolean;
1177
+ /** Custom background gradient or color */
1178
+ background?: string;
1179
+ /** Content */
1180
+ children: ReactNode;
1181
+ }
1182
+ declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
1183
+ interface HeroBadgeProps extends HTMLAttributes<HTMLDivElement> {
1184
+ /** Icon to display before text */
1185
+ icon?: ReactNode;
1186
+ /** Badge text */
1187
+ children: ReactNode;
1188
+ }
1189
+ declare const HeroBadge: React.ForwardRefExoticComponent<HeroBadgeProps & React.RefAttributes<HTMLDivElement>>;
1190
+ interface HeroTitleProps extends HTMLAttributes<HTMLHeadingElement> {
1191
+ /** Use gradient text */
1192
+ gradient?: boolean;
1193
+ /** Heading level */
1194
+ as?: 'h1' | 'h2' | 'h3';
1195
+ /** Title text */
1196
+ children: ReactNode;
1197
+ }
1198
+ declare const HeroTitle: React.ForwardRefExoticComponent<HeroTitleProps & React.RefAttributes<HTMLHeadingElement>>;
1199
+ interface HeroSubtitleProps extends HTMLAttributes<HTMLParagraphElement> {
1200
+ /** Subtitle text */
1201
+ children: ReactNode;
1202
+ }
1203
+ declare const HeroSubtitle: React.ForwardRefExoticComponent<HeroSubtitleProps & React.RefAttributes<HTMLParagraphElement>>;
1204
+ interface HeroSearchProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onSubmit'> {
1205
+ /** Input placeholder */
1206
+ placeholder?: string;
1207
+ /** Input value */
1208
+ value?: string;
1209
+ /** Change handler */
1210
+ onChange?: (value: string) => void;
1211
+ /** Submit handler */
1212
+ onSubmit?: (value: string) => void;
1213
+ /** Button text */
1214
+ buttonText?: string;
1215
+ /** Button icon */
1216
+ buttonIcon?: ReactNode;
1217
+ /** Loading state */
1218
+ loading?: boolean;
1219
+ }
1220
+ declare const HeroSearch: React.ForwardRefExoticComponent<HeroSearchProps & React.RefAttributes<HTMLDivElement>>;
1221
+ interface HeroActionsProps extends HTMLAttributes<HTMLDivElement> {
1222
+ /** Action buttons/links */
1223
+ children: ReactNode;
1224
+ }
1225
+ declare const HeroActions: React.ForwardRefExoticComponent<HeroActionsProps & React.RefAttributes<HTMLDivElement>>;
1226
+ interface HeroActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
1227
+ /** Icon to display */
1228
+ icon?: ReactNode;
1229
+ /** Button text */
1230
+ children: ReactNode;
1231
+ }
1232
+ declare const HeroAction: React.ForwardRefExoticComponent<HeroActionProps & React.RefAttributes<HTMLButtonElement>>;
1233
+ interface HeroContentProps extends HTMLAttributes<HTMLDivElement> {
1234
+ /** Content alignment */
1235
+ align?: 'left' | 'center' | 'right';
1236
+ /** Content */
1237
+ children: ReactNode;
1238
+ }
1239
+ declare const HeroContent: React.ForwardRefExoticComponent<HeroContentProps & React.RefAttributes<HTMLDivElement>>;
1240
+ interface HeroMediaProps extends HTMLAttributes<HTMLDivElement> {
1241
+ /** Media content (image, illustration, etc.) */
1242
+ children: ReactNode;
1243
+ }
1244
+ declare const HeroMedia: React.ForwardRefExoticComponent<HeroMediaProps & React.RefAttributes<HTMLDivElement>>;
1245
+ declare const SparkleIcon: () => react_jsx_runtime.JSX.Element;
1246
+ declare const RocketIcon: () => react_jsx_runtime.JSX.Element;
1247
+
1248
+ declare const heroStyles = "\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n";
1249
+
1250
+ interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit' | 'size'> {
1251
+ /** Placeholder text */
1252
+ placeholder?: string;
1253
+ /** Current value */
1254
+ value?: string;
1255
+ /** Called when value changes */
1256
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
1257
+ /** Called when search is submitted */
1258
+ onSubmit?: (value: string) => void;
1259
+ /** Button text */
1260
+ buttonText?: string;
1261
+ /** Custom button content */
1262
+ buttonContent?: ReactNode;
1263
+ /** Show loading state */
1264
+ loading?: boolean;
1265
+ /** Size variant */
1266
+ size?: 'sm' | 'md' | 'lg';
1267
+ /** Custom search icon */
1268
+ icon?: ReactNode;
1269
+ /** Hide the search button */
1270
+ hideButton?: boolean;
1271
+ /** Additional class name */
1272
+ className?: string;
1273
+ }
1274
+ declare const SearchBox: React.ForwardRefExoticComponent<SearchBoxProps & React.RefAttributes<HTMLInputElement>>;
1275
+
1276
+ declare const searchBoxStyles = "\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n";
1277
+
1278
+ interface FilterTabItem {
1279
+ /** Unique identifier */
1280
+ id: string;
1281
+ /** Display label */
1282
+ label: string;
1283
+ /** Optional count badge */
1284
+ count?: string | number;
1285
+ /** Optional icon */
1286
+ icon?: ReactNode;
1287
+ /** Disabled state */
1288
+ disabled?: boolean;
1289
+ }
1290
+ interface FilterTabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
1291
+ /** Array of tab items */
1292
+ items: FilterTabItem[];
1293
+ /** Currently active tab id */
1294
+ value?: string;
1295
+ /** Called when tab changes */
1296
+ onChange?: (id: string) => void;
1297
+ /** Size variant */
1298
+ size?: 'sm' | 'md' | 'lg';
1299
+ /** Visual variant */
1300
+ variant?: 'pill' | 'underline';
1301
+ /** Additional class name */
1302
+ className?: string;
1303
+ }
1304
+ interface FilterTabProps extends HTMLAttributes<HTMLButtonElement> {
1305
+ /** Whether this tab is active */
1306
+ active?: boolean;
1307
+ /** Count badge */
1308
+ count?: string | number;
1309
+ /** Optional icon */
1310
+ icon?: ReactNode;
1311
+ /** Size variant */
1312
+ size?: 'sm' | 'md' | 'lg';
1313
+ /** Visual variant */
1314
+ variant?: 'pill' | 'underline';
1315
+ /** Disabled state */
1316
+ disabled?: boolean;
1317
+ /** Additional class name */
1318
+ className?: string;
1319
+ children: ReactNode;
1320
+ }
1321
+ declare const FilterTab: React.ForwardRefExoticComponent<FilterTabProps & React.RefAttributes<HTMLButtonElement>>;
1322
+ declare const FilterTabs: React.ForwardRefExoticComponent<FilterTabsProps & React.RefAttributes<HTMLDivElement>>;
1323
+
1324
+ declare const filterTabsStyles = "\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n";
1325
+
1326
+ interface FilterOption {
1327
+ value: string;
1328
+ label: string;
1329
+ count?: number;
1330
+ description?: string;
1331
+ }
1332
+ interface FilterSection {
1333
+ key: string;
1334
+ label: string;
1335
+ type: 'checkbox' | 'radio' | 'date-range';
1336
+ options?: FilterOption[];
1337
+ /** Enable search input for this section */
1338
+ searchable?: boolean;
1339
+ /** Placeholder text for search input */
1340
+ searchPlaceholder?: string;
1341
+ /** Loading state for async search */
1342
+ loading?: boolean;
1343
+ /** Max options to show before "Show more" */
1344
+ maxVisible?: number;
1345
+ /** Whether there are more options to load from server */
1346
+ hasMore?: boolean;
1347
+ }
1348
+ interface FilterValues {
1349
+ [key: string]: string[] | {
1350
+ from?: string;
1351
+ to?: string;
1352
+ };
1353
+ }
1354
+ interface FilterPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
1355
+ title?: string;
1356
+ sections: FilterSection[];
1357
+ values: FilterValues;
1358
+ onChange: (values: FilterValues) => void;
1359
+ /** Called when user types in a searchable section (debounced) */
1360
+ onSearch?: (sectionKey: string, query: string) => void;
1361
+ /** Called when user clicks "Load more" */
1362
+ onLoadMore?: (sectionKey: string) => void;
1363
+ onApply?: () => void;
1364
+ onCancel?: () => void;
1365
+ showFooter?: boolean;
1366
+ showQuickFilters?: boolean;
1367
+ quickFilterKeys?: string[];
1368
+ /** Debounce delay for search in ms */
1369
+ searchDebounce?: number;
1370
+ }
1371
+ declare const FilterPanel: React.ForwardRefExoticComponent<FilterPanelProps & React.RefAttributes<HTMLDivElement>>;
1372
+
1373
+ declare const filterPanelStyles = "\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n";
1374
+
1375
+ interface StatBlockProps extends HTMLAttributes<HTMLDivElement> {
1376
+ /** The main value to display */
1377
+ value: string | number;
1378
+ /** Primary label */
1379
+ label: string;
1380
+ /** Secondary description/sublabel */
1381
+ sublabel?: string;
1382
+ /** Optional icon */
1383
+ icon?: ReactNode;
1384
+ /** Size variant */
1385
+ size?: 'sm' | 'md' | 'lg';
1386
+ /** Color variant for the value */
1387
+ variant?: 'default' | 'accent' | 'muted';
1388
+ /** Text alignment */
1389
+ align?: 'left' | 'center';
1390
+ /** Additional class name */
1391
+ className?: string;
1392
+ }
1393
+ interface StatGridProps extends HTMLAttributes<HTMLDivElement> {
1394
+ /** Number of columns */
1395
+ columns?: 2 | 3 | 4;
1396
+ /** Gap between items */
1397
+ gap?: 'sm' | 'md' | 'lg';
1398
+ /** Additional class name */
1399
+ className?: string;
1400
+ children: ReactNode;
1401
+ }
1402
+ declare const StatBlock: React.ForwardRefExoticComponent<StatBlockProps & React.RefAttributes<HTMLDivElement>>;
1403
+ declare const StatGrid: React.ForwardRefExoticComponent<StatGridProps & React.RefAttributes<HTMLDivElement>>;
1404
+
1405
+ declare const statBlockStyles = "\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n";
1406
+
1407
+ type CollectionType = 'legislation' | 'contracts' | 'case-law' | 'knowledge' | 'default';
1408
+ interface CollectionCardProps extends HTMLAttributes<HTMLElement> {
1409
+ /** Collection type for icon and badge styling */
1410
+ type?: CollectionType;
1411
+ /** Badge text (e.g., "Legislation", "Contracts") */
1412
+ badge?: string;
1413
+ /** Status text (e.g., "Active discussion", "Recently updated") */
1414
+ status?: string;
1415
+ /** Collection title */
1416
+ title: string;
1417
+ /** Collection description */
1418
+ description?: string;
1419
+ /** Stats to display (e.g., "54 titles", "34.2K annotations") */
1420
+ stats?: string[];
1421
+ /** Custom icon override */
1422
+ icon?: ReactNode;
1423
+ /** Custom badge color */
1424
+ badgeColor?: {
1425
+ bg: string;
1426
+ color: string;
1427
+ };
1428
+ /** Click handler */
1429
+ onClick?: () => void;
1430
+ /** Additional class name */
1431
+ className?: string;
1432
+ }
1433
+ interface CollectionListProps extends HTMLAttributes<HTMLDivElement> {
1434
+ /** Gap between items */
1435
+ gap?: 'sm' | 'md' | 'lg';
1436
+ /** Additional class name */
1437
+ className?: string;
1438
+ children: ReactNode;
1439
+ }
1440
+ declare const CollectionCard: React.ForwardRefExoticComponent<CollectionCardProps & React.RefAttributes<HTMLElement>>;
1441
+ declare const CollectionList: React.ForwardRefExoticComponent<CollectionListProps & React.RefAttributes<HTMLDivElement>>;
1442
+
1443
+ declare const collectionCardStyles = "\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-collection-card__icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 10px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon {\n width: 40px;\n height: 40px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n";
1444
+
1445
+ interface ActivityItemData {
1446
+ /** Unique identifier */
1447
+ id: string | number;
1448
+ /** User/actor name */
1449
+ name: string;
1450
+ /** Avatar initials (fallback if no avatar) */
1451
+ initials?: string;
1452
+ /** Avatar image URL */
1453
+ avatarUrl?: string;
1454
+ /** Avatar background color */
1455
+ avatarColor?: string;
1456
+ /** Action verb (e.g., "annotated", "created", "published") */
1457
+ action: string;
1458
+ /** Target of the action */
1459
+ target: string;
1460
+ /** Target link URL */
1461
+ targetUrl?: string;
1462
+ /** Timestamp display string */
1463
+ time: string;
1464
+ /** Optional icon for the action */
1465
+ icon?: ReactNode;
1466
+ }
1467
+ interface ActivityItemProps extends HTMLAttributes<HTMLDivElement> {
1468
+ /** User/actor name */
1469
+ name: string;
1470
+ /** Avatar initials */
1471
+ initials?: string;
1472
+ /** Avatar image URL */
1473
+ avatarUrl?: string;
1474
+ /** Avatar background color */
1475
+ avatarColor?: string;
1476
+ /** Action verb */
1477
+ action: string;
1478
+ /** Target of the action */
1479
+ target: string;
1480
+ /** Target link URL */
1481
+ targetUrl?: string;
1482
+ /** Timestamp display string */
1483
+ time: string;
1484
+ /** Additional class name */
1485
+ className?: string;
1486
+ }
1487
+ interface ActivityFeedProps extends HTMLAttributes<HTMLDivElement> {
1488
+ /** Array of activity items */
1489
+ items?: ActivityItemData[];
1490
+ /** Show dividers between items */
1491
+ dividers?: boolean;
1492
+ /** "View all" link URL */
1493
+ viewAllUrl?: string;
1494
+ /** "View all" link text */
1495
+ viewAllText?: string;
1496
+ /** Called when view all is clicked */
1497
+ onViewAll?: () => void;
1498
+ /** Additional class name */
1499
+ className?: string;
1500
+ children?: ReactNode;
1501
+ }
1502
+ declare const ActivityItem: React.ForwardRefExoticComponent<ActivityItemProps & React.RefAttributes<HTMLDivElement>>;
1503
+ declare const ActivityFeed: React.ForwardRefExoticComponent<ActivityFeedProps & React.RefAttributes<HTMLDivElement>>;
1504
+
1505
+ declare const activityFeedStyles = "\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n";
1506
+
1507
+ interface ActionItemData {
1508
+ /** Unique identifier */
1509
+ id: string | number;
1510
+ /** Item label */
1511
+ label: string;
1512
+ /** Optional icon */
1513
+ icon?: ReactNode;
1514
+ /** Optional description */
1515
+ description?: string;
1516
+ /** Disabled state */
1517
+ disabled?: boolean;
1518
+ /** Link URL (renders as anchor) */
1519
+ href?: string;
1520
+ }
1521
+ interface ActionItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
1522
+ /** Item label */
1523
+ label?: string;
1524
+ /** Optional icon */
1525
+ icon?: ReactNode;
1526
+ /** Optional description */
1527
+ description?: string;
1528
+ /** Link URL (renders as anchor) */
1529
+ href?: string;
1530
+ /** Size variant */
1531
+ size?: 'sm' | 'md' | 'lg';
1532
+ /** Additional class name */
1533
+ className?: string;
1534
+ children?: ReactNode;
1535
+ }
1536
+ interface ActionListProps extends HTMLAttributes<HTMLDivElement> {
1537
+ /** Array of action items */
1538
+ items?: ActionItemData[];
1539
+ /** Called when an item is clicked */
1540
+ onItemClick?: (item: ActionItemData) => void;
1541
+ /** Size variant for items */
1542
+ size?: 'sm' | 'md' | 'lg';
1543
+ /** Visual variant */
1544
+ variant?: 'default' | 'card';
1545
+ /** Additional class name */
1546
+ className?: string;
1547
+ children?: ReactNode;
1548
+ }
1549
+ declare const ActionItem: React.ForwardRefExoticComponent<ActionItemProps & React.RefAttributes<HTMLButtonElement>>;
1550
+ declare const ActionList: React.ForwardRefExoticComponent<ActionListProps & React.RefAttributes<HTMLDivElement>>;
1551
+
1552
+ declare const actionListStyles = "\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n";
1553
+
1554
+ type ThreadStatus = 'open' | 'resolved' | 'closed' | 'archived';
1555
+ type ResourceType = 'document' | 'collection' | 'annotation' | 'comment' | 'clause' | 'user';
1556
+ type ReactionType = 'thumbsUp' | 'thumbsDown' | 'heart' | 'celebrate' | 'thinking' | 'eyes';
1557
+ interface ThreadViewProps extends HTMLAttributes<HTMLDivElement> {
1558
+ /** Thread title */
1559
+ title?: string;
1560
+ /** Thread status */
1561
+ status?: ThreadStatus;
1562
+ /** Whether thread is pinned */
1563
+ pinned?: boolean;
1564
+ /** Whether thread is locked (no new replies) */
1565
+ locked?: boolean;
1566
+ /** Max nesting depth for replies */
1567
+ maxDepth?: number;
1568
+ /** Set of collapsed reply IDs */
1569
+ collapsed?: Set<string>;
1570
+ /** Collapse toggle handler */
1571
+ onToggleCollapse?: (id: string) => void;
1572
+ children: ReactNode;
1573
+ }
1574
+ declare const ThreadView: React.ForwardRefExoticComponent<ThreadViewProps & React.RefAttributes<HTMLDivElement>>;
1575
+ interface ThreadPostProps extends HTMLAttributes<HTMLDivElement> {
1576
+ /** Post ID for collapse tracking */
1577
+ id?: string;
1578
+ /** Author avatar */
1579
+ avatar?: ReactNode;
1580
+ /** Author name */
1581
+ author: string;
1582
+ /** Author role/badge (e.g., "Attorney", "Moderator") */
1583
+ authorBadge?: string;
1584
+ /** Timestamp */
1585
+ timestamp?: string;
1586
+ /** Edited timestamp */
1587
+ editedAt?: string;
1588
+ /** Post content */
1589
+ children: ReactNode;
1590
+ /** Linked resources displayed below content */
1591
+ resources?: ReactNode;
1592
+ /** Reactions bar */
1593
+ reactions?: ReactNode;
1594
+ /** Action buttons (reply, edit, delete, etc.) */
1595
+ actions?: ReactNode;
1596
+ /** Reply count */
1597
+ replyCount?: number;
1598
+ /** Whether this post is highlighted/focused */
1599
+ highlighted?: boolean;
1600
+ /** Whether this post is the original/root post */
1601
+ isRoot?: boolean;
1602
+ }
1603
+ declare const ThreadPost: React.ForwardRefExoticComponent<ThreadPostProps & React.RefAttributes<HTMLDivElement>>;
1604
+ interface ThreadReplyProps extends Omit<ThreadPostProps, 'isRoot' | 'replyCount'> {
1605
+ /** Nested replies */
1606
+ replies?: ReactNode;
1607
+ /** Whether replies are collapsed */
1608
+ collapsed?: boolean;
1609
+ /** Collapse toggle handler */
1610
+ onToggleCollapse?: () => void;
1611
+ }
1612
+ declare const ThreadReply: React.ForwardRefExoticComponent<ThreadReplyProps & React.RefAttributes<HTMLDivElement>>;
1613
+ interface MentionProps extends HTMLAttributes<HTMLButtonElement> {
1614
+ /** User name */
1615
+ name: string;
1616
+ /** User ID for link/action */
1617
+ userId?: string;
1618
+ /** Avatar (small) */
1619
+ avatar?: ReactNode;
1620
+ /** Click handler */
1621
+ onClick?: () => void;
1622
+ }
1623
+ declare const Mention: React.ForwardRefExoticComponent<MentionProps & React.RefAttributes<HTMLButtonElement>>;
1624
+ interface LinkedResourceProps extends HTMLAttributes<HTMLButtonElement> {
1625
+ /** Resource type */
1626
+ type: ResourceType;
1627
+ /** Resource title/name */
1628
+ title: string;
1629
+ /** Resource ID */
1630
+ resourceId?: string;
1631
+ /** Reference (e.g., "Section 2.1", "Page 5") */
1632
+ reference?: string;
1633
+ /** Click handler */
1634
+ onClick?: () => void;
1635
+ }
1636
+ declare const LinkedResource: React.ForwardRefExoticComponent<LinkedResourceProps & React.RefAttributes<HTMLButtonElement>>;
1637
+ interface ResourceListProps extends HTMLAttributes<HTMLDivElement> {
1638
+ /** Section label */
1639
+ label?: string;
1640
+ children: ReactNode;
1641
+ }
1642
+ declare const ResourceList: React.ForwardRefExoticComponent<ResourceListProps & React.RefAttributes<HTMLDivElement>>;
1643
+ interface ReactionButtonProps extends HTMLAttributes<HTMLButtonElement> {
1644
+ /** Reaction type */
1645
+ reaction: ReactionType;
1646
+ /** Count */
1647
+ count?: number;
1648
+ /** Whether current user has reacted */
1649
+ active?: boolean;
1650
+ /** Click handler */
1651
+ onClick?: () => void;
1652
+ }
1653
+ declare const ReactionButton: React.ForwardRefExoticComponent<ReactionButtonProps & React.RefAttributes<HTMLButtonElement>>;
1654
+ interface ReactionBarProps extends HTMLAttributes<HTMLDivElement> {
1655
+ /** Add reaction button */
1656
+ onAddReaction?: () => void;
1657
+ children?: ReactNode;
1658
+ }
1659
+ declare const ReactionBar: React.ForwardRefExoticComponent<ReactionBarProps & React.RefAttributes<HTMLDivElement>>;
1660
+ interface ThreadActionProps extends HTMLAttributes<HTMLButtonElement> {
1661
+ /** Action icon */
1662
+ icon: ReactNode;
1663
+ /** Action label */
1664
+ label: string;
1665
+ /** Whether action is destructive */
1666
+ destructive?: boolean;
1667
+ }
1668
+ declare const ThreadAction: React.ForwardRefExoticComponent<ThreadActionProps & React.RefAttributes<HTMLButtonElement>>;
1669
+ interface ThreadInputProps extends HTMLAttributes<HTMLDivElement> {
1670
+ /** Placeholder text */
1671
+ placeholder?: string;
1672
+ /** Reply-to context */
1673
+ replyingTo?: ReactNode;
1674
+ /** Cancel reply handler */
1675
+ onCancelReply?: () => void;
1676
+ /** Input element (render prop or ChatInput) */
1677
+ children: ReactNode;
1678
+ }
1679
+ declare const ThreadInput: React.ForwardRefExoticComponent<ThreadInputProps & React.RefAttributes<HTMLDivElement>>;
1680
+ interface ThreadMetaProps extends HTMLAttributes<HTMLDivElement> {
1681
+ /** View count */
1682
+ views?: number;
1683
+ /** Reply count */
1684
+ replies?: number;
1685
+ /** Participant avatars */
1686
+ participants?: ReactNode;
1687
+ /** Last activity timestamp */
1688
+ lastActivity?: string;
1689
+ }
1690
+ declare const ThreadMeta: React.ForwardRefExoticComponent<ThreadMetaProps & React.RefAttributes<HTMLDivElement>>;
1691
+
1692
+ declare const threadStyles = "\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n";
1693
+
1694
+ type DiscussionCategory = 'general' | 'question' | 'announcement' | 'idea' | 'help' | 'show' | string;
1695
+ type DiscussionStatus = 'open' | 'answered' | 'resolved' | 'closed' | 'pinned';
1696
+ type DiscussionSortOption = 'newest' | 'oldest' | 'mostReplies' | 'recentActivity' | 'mostVotes';
1697
+ interface DiscussionAuthor {
1698
+ name: string;
1699
+ avatar?: ReactNode;
1700
+ badge?: string;
1701
+ }
1702
+ interface CategoryBadgeProps extends HTMLAttributes<HTMLSpanElement> {
1703
+ category: DiscussionCategory;
1704
+ }
1705
+ declare const CategoryBadge: React.ForwardRefExoticComponent<CategoryBadgeProps & React.RefAttributes<HTMLSpanElement>>;
1706
+ interface DiscussionItemProps extends HTMLAttributes<HTMLDivElement> {
1707
+ /** Unique identifier */
1708
+ id: string;
1709
+ /** Discussion title */
1710
+ title: string;
1711
+ /** Author information */
1712
+ author: DiscussionAuthor;
1713
+ /** Category/type */
1714
+ category?: DiscussionCategory;
1715
+ /** Discussion status */
1716
+ status?: DiscussionStatus;
1717
+ /** Preview/excerpt text */
1718
+ preview?: string;
1719
+ /** Tags/labels */
1720
+ tags?: string[];
1721
+ /** Reply count */
1722
+ replyCount?: number;
1723
+ /** View count */
1724
+ viewCount?: number;
1725
+ /** Upvote/reaction count */
1726
+ voteCount?: number;
1727
+ /** Whether current user has voted */
1728
+ hasVoted?: boolean;
1729
+ /** Participant avatars */
1730
+ participants?: ReactNode;
1731
+ /** Time since creation */
1732
+ createdAt?: string;
1733
+ /** Time since last activity */
1734
+ lastActivity?: string;
1735
+ /** Whether pinned */
1736
+ pinned?: boolean;
1737
+ /** Whether discussion is unread */
1738
+ unread?: boolean;
1739
+ /** Click handler */
1740
+ onClick?: () => void;
1741
+ /** Vote handler */
1742
+ onVote?: () => void;
1743
+ }
1744
+ declare const DiscussionItem: React.ForwardRefExoticComponent<DiscussionItemProps & React.RefAttributes<HTMLDivElement>>;
1745
+ interface DiscussionListProps extends HTMLAttributes<HTMLDivElement> {
1746
+ /** Visual variant */
1747
+ variant?: 'card' | 'compact' | 'minimal';
1748
+ /** Handler when item is clicked */
1749
+ onItemClick?: (id: string) => void;
1750
+ /** Empty state content */
1751
+ emptyState?: ReactNode;
1752
+ /** Loading state */
1753
+ loading?: boolean;
1754
+ /** Children (DiscussionItem components) */
1755
+ children?: ReactNode;
1756
+ }
1757
+ declare const DiscussionList: React.ForwardRefExoticComponent<DiscussionListProps & React.RefAttributes<HTMLDivElement>>;
1758
+ interface DiscussionFilterOption {
1759
+ id: string;
1760
+ label: string;
1761
+ count?: number;
1762
+ }
1763
+ interface DiscussionFiltersProps extends HTMLAttributes<HTMLDivElement> {
1764
+ /** Category filter options */
1765
+ categories?: DiscussionFilterOption[];
1766
+ /** Active category ID */
1767
+ activeCategory?: string;
1768
+ /** Category change handler */
1769
+ onCategoryChange?: (id: string) => void;
1770
+ /** Sort options */
1771
+ sortOptions?: {
1772
+ id: DiscussionSortOption;
1773
+ label: string;
1774
+ }[];
1775
+ /** Active sort option */
1776
+ activeSort?: DiscussionSortOption;
1777
+ /** Sort change handler */
1778
+ onSortChange?: (sort: DiscussionSortOption) => void;
1779
+ /** Search value */
1780
+ searchValue?: string;
1781
+ /** Search change handler */
1782
+ onSearchChange?: (value: string) => void;
1783
+ /** Search placeholder */
1784
+ searchPlaceholder?: string;
1785
+ }
1786
+ declare const DiscussionFilters: React.ForwardRefExoticComponent<DiscussionFiltersProps & React.RefAttributes<HTMLDivElement>>;
1787
+ interface NewDiscussionButtonProps extends HTMLAttributes<HTMLButtonElement> {
1788
+ /** Icon to display */
1789
+ icon?: ReactNode;
1790
+ /** Button text */
1791
+ children?: ReactNode;
1792
+ }
1793
+ declare const NewDiscussionButton: React.ForwardRefExoticComponent<NewDiscussionButtonProps & React.RefAttributes<HTMLButtonElement>>;
1794
+ interface DiscussionStatsProps extends HTMLAttributes<HTMLDivElement> {
1795
+ /** Total discussion count */
1796
+ totalCount?: number;
1797
+ /** Open/active count */
1798
+ openCount?: number;
1799
+ /** Answered/resolved count */
1800
+ answeredCount?: number;
1801
+ /** Participants count */
1802
+ participantCount?: number;
1803
+ }
1804
+ declare const DiscussionStats: React.ForwardRefExoticComponent<DiscussionStatsProps & React.RefAttributes<HTMLDivElement>>;
1805
+
1806
+ declare const discussionStyles = "\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n";
1807
+
1808
+ type FileSystemViewMode = 'list' | 'grid';
1809
+ type FileType = 'folder' | 'document' | 'pdf' | 'image' | 'spreadsheet' | 'presentation' | 'archive' | 'unknown';
1810
+ interface FileSystemItem {
1811
+ id: string;
1812
+ name: string;
1813
+ type: FileType;
1814
+ size?: number;
1815
+ modifiedAt?: string;
1816
+ createdAt?: string;
1817
+ path: string;
1818
+ parentId?: string | null;
1819
+ children?: FileSystemItem[];
1820
+ metadata?: Record<string, unknown>;
1821
+ }
1822
+ interface FileSystemContextValue {
1823
+ currentPath: string[];
1824
+ setCurrentPath: (path: string[]) => void;
1825
+ selectedItems: Set<string>;
1826
+ setSelectedItems: (items: Set<string>) => void;
1827
+ toggleSelection: (id: string, multi?: boolean) => void;
1828
+ viewMode: FileSystemViewMode;
1829
+ setViewMode: (mode: FileSystemViewMode) => void;
1830
+ expandedFolders: Set<string>;
1831
+ toggleFolder: (id: string) => void;
1832
+ navigateToFolder: (path: string[]) => void;
1833
+ navigateUp: () => void;
1834
+ }
1835
+ interface FileSystemProps extends HTMLAttributes<HTMLDivElement> {
1836
+ /** Initial path segments */
1837
+ initialPath?: string[];
1838
+ /** View mode: list or grid */
1839
+ defaultViewMode?: FileSystemViewMode;
1840
+ /** Callback when path changes */
1841
+ onPathChange?: (path: string[]) => void;
1842
+ /** Callback when selection changes */
1843
+ onSelectionChange?: (selectedIds: Set<string>) => void;
1844
+ /** Children components */
1845
+ children: ReactNode;
1846
+ }
1847
+ declare const useFileSystem: () => FileSystemContextValue;
1848
+ declare const FileSystem: React.ForwardRefExoticComponent<FileSystemProps & React.RefAttributes<HTMLDivElement>>;
1849
+ interface FileSystemLayoutProps extends HTMLAttributes<HTMLDivElement> {
1850
+ children: ReactNode;
1851
+ }
1852
+ declare const FileSystemLayout: React.ForwardRefExoticComponent<FileSystemLayoutProps & React.RefAttributes<HTMLDivElement>>;
1853
+ interface FileSystemSidebarProps extends HTMLAttributes<HTMLDivElement> {
1854
+ children: ReactNode;
1855
+ }
1856
+ declare const FileSystemSidebar: React.ForwardRefExoticComponent<FileSystemSidebarProps & React.RefAttributes<HTMLDivElement>>;
1857
+ interface FileSystemMainProps extends HTMLAttributes<HTMLDivElement> {
1858
+ children: ReactNode;
1859
+ }
1860
+ declare const FileSystemMain: React.ForwardRefExoticComponent<FileSystemMainProps & React.RefAttributes<HTMLDivElement>>;
1861
+
1862
+ interface FolderTreeProps extends HTMLAttributes<HTMLDivElement> {
1863
+ /** Root label displayed at top */
1864
+ rootLabel?: string;
1865
+ /** Whether root is clickable to navigate to root */
1866
+ rootNavigable?: boolean;
1867
+ /** Folder data to render */
1868
+ folders?: FileSystemItem[];
1869
+ /** Custom render for folder items */
1870
+ children?: ReactNode;
1871
+ }
1872
+ declare const FolderTree: React.ForwardRefExoticComponent<FolderTreeProps & React.RefAttributes<HTMLDivElement>>;
1873
+ interface FolderTreeItemProps extends HTMLAttributes<HTMLDivElement> {
1874
+ /** The folder item data */
1875
+ item: FileSystemItem;
1876
+ /** Nesting depth for indentation */
1877
+ depth?: number;
1878
+ /** Custom icon */
1879
+ icon?: ReactNode;
1880
+ }
1881
+ declare const FolderTreeItem: React.ForwardRefExoticComponent<FolderTreeItemProps & React.RefAttributes<HTMLDivElement>>;
1882
+
1883
+ interface FileListProps extends HTMLAttributes<HTMLDivElement> {
1884
+ /** Items to display */
1885
+ items?: FileSystemItem[];
1886
+ /** Show column headers (list view only) */
1887
+ showHeaders?: boolean;
1888
+ /** Empty state content */
1889
+ emptyState?: ReactNode;
1890
+ /** Custom children instead of items */
1891
+ children?: ReactNode;
1892
+ /** Callback when item is clicked */
1893
+ onItemClick?: (item: FileSystemItem) => void;
1894
+ /** Callback when item is double-clicked (open) */
1895
+ onItemOpen?: (item: FileSystemItem) => void;
1896
+ }
1897
+ declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLDivElement>>;
1898
+ interface FileListItemProps extends HTMLAttributes<HTMLDivElement> {
1899
+ /** The file/folder item */
1900
+ item: FileSystemItem;
1901
+ /** Custom icon override */
1902
+ icon?: ReactNode;
1903
+ /** Additional actions */
1904
+ actions?: ReactNode;
1905
+ }
1906
+ declare const FileListItem: React.ForwardRefExoticComponent<FileListItemProps & React.RefAttributes<HTMLDivElement>>;
1907
+
1908
+ interface FilePathBreadcrumbProps extends HTMLAttributes<HTMLDivElement> {
1909
+ /** Root label */
1910
+ rootLabel?: string;
1911
+ /** Custom separator between items */
1912
+ separator?: ReactNode;
1913
+ /** Path segments (overrides context) */
1914
+ path?: string[];
1915
+ /** Callback when segment is clicked */
1916
+ onNavigate?: (path: string[]) => void;
1917
+ }
1918
+ declare const FilePathBreadcrumb: React.ForwardRefExoticComponent<FilePathBreadcrumbProps & React.RefAttributes<HTMLDivElement>>;
1919
+
1920
+ interface FileSystemToolbarProps extends HTMLAttributes<HTMLDivElement> {
1921
+ /** Show view mode toggle */
1922
+ showViewToggle?: boolean;
1923
+ /** Show navigation buttons (back/up) */
1924
+ showNavigation?: boolean;
1925
+ /** Custom left actions */
1926
+ leftActions?: ReactNode;
1927
+ /** Custom right actions */
1928
+ rightActions?: ReactNode;
1929
+ /** Children for custom layout */
1930
+ children?: ReactNode;
1931
+ }
1932
+ declare const FileSystemToolbar: React.ForwardRefExoticComponent<FileSystemToolbarProps & React.RefAttributes<HTMLDivElement>>;
1933
+ interface ToolbarButtonProps extends HTMLAttributes<HTMLButtonElement> {
1934
+ /** Button variant */
1935
+ variant?: 'default' | 'primary';
1936
+ /** Icon to display */
1937
+ icon?: ReactNode;
1938
+ /** Disabled state */
1939
+ disabled?: boolean;
1940
+ /** Button type */
1941
+ type?: 'button' | 'submit' | 'reset';
1942
+ }
1943
+ declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
1944
+ declare const ToolbarSeparator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
1945
+
1946
+ declare const fileSystemStyles = "\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n";
1947
+
1948
+ /**
1949
+ * OpenContracts Component Library
1950
+ *
1951
+ * A design system built around transparent infrastructure,
1952
+ * visible connections, and warm precision.
1953
+ *
1954
+ * @package @opencontracts/ui
1955
+ */
1956
+
1957
+ declare const allStyles = "\n/* OpenContracts Design System - All Component Styles */\n\n/* Base utilities, tokens, and shared keyframes (must be first) */\n\n/* ============================================\n CSS Custom Properties - Design Tokens\n ============================================ */\n:root {\n /* ===========================================\n COLOR SYSTEM - Professional Legal Theme\n =========================================== */\n\n /* Accent: Deep Teal - professional, authoritative */\n --oc-accent: #0F766E;\n --oc-accent-hover: #0D9488;\n --oc-accent-active: #115E59;\n\n /* Foreground: Slate scale */\n --oc-fg-primary: #1E293B;\n --oc-fg-secondary: #475569;\n --oc-fg-tertiary: #94A3B8;\n --oc-fg-inverse: #FFFFFF;\n\n /* Background: Warm neutral surfaces */\n --oc-bg-canvas: #FAFAFA;\n --oc-bg-surface: #FFFFFF;\n --oc-bg-surface-hover: #F8FAFC;\n --oc-bg-subtle: #F1F5F9;\n --oc-bg-sidebar: #0F172A;\n\n /* Borders: Cool slate */\n --oc-border-default: #E2E8F0;\n --oc-border-strong: #CBD5E1;\n\n /* Semantic colors */\n --oc-success: #059669;\n --oc-warning: #D97706;\n --oc-error: #DC2626;\n --oc-success-bg: #ECFDF5;\n --oc-warning-bg: #FFFBEB;\n --oc-error-bg: #FEF2F2;\n\n /* ===========================================\n SPACING\n =========================================== */\n --oc-spacing-xs: 4px;\n --oc-spacing-sm: 8px;\n --oc-spacing-md: 16px;\n --oc-spacing-lg: 24px;\n --oc-spacing-xl: 32px;\n --oc-spacing-2xl: 48px;\n\n /* ===========================================\n RADIUS - Refined, slightly softer corners\n =========================================== */\n --oc-radius-sm: 6px;\n --oc-radius-md: 8px;\n --oc-radius-lg: 12px;\n --oc-radius-full: 9999px;\n\n /* ===========================================\n TYPOGRAPHY\n =========================================== */\n --oc-font-size-xs: 11px;\n --oc-font-size-sm: 13px;\n --oc-font-size-md: 15px;\n --oc-font-size-lg: 17px;\n --oc-font-size-xl: 20px;\n --oc-font-size-2xl: 24px;\n --oc-font-size-3xl: 32px;\n\n /* Line heights */\n --oc-line-height-tight: 1.25;\n --oc-line-height-normal: 1.5;\n --oc-line-height-relaxed: 1.75;\n\n /* ===========================================\n ANIMATION\n =========================================== */\n --oc-duration-fast: 0.15s;\n --oc-duration-normal: 0.2s;\n --oc-duration-slow: 0.3s;\n --oc-duration-spin: 0.8s;\n\n /* Easing curves */\n --oc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);\n --oc-easing-enter: cubic-bezier(0, 0, 0.2, 1);\n --oc-easing-exit: cubic-bezier(0.4, 0, 1, 1);\n --oc-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);\n\n /* ===========================================\n Z-INDEX SCALE\n =========================================== */\n --oc-z-dropdown: 100;\n --oc-z-sticky: 200;\n --oc-z-overlay: 300;\n --oc-z-modal: 400;\n --oc-z-popover: 500;\n --oc-z-tooltip: 600;\n\n /* ===========================================\n OPACITY\n =========================================== */\n --oc-opacity-disabled: 0.5;\n --oc-opacity-loading: 0.7;\n --oc-opacity-hover: 0.04;\n --oc-opacity-focus-ring: 0.2;\n --oc-opacity-overlay: 0.6;\n\n /* Breakpoints (for reference in JS, media queries use values directly) */\n --oc-breakpoint-sm: 640px;\n --oc-breakpoint-md: 768px;\n --oc-breakpoint-lg: 1024px;\n --oc-breakpoint-xl: 1280px;\n\n /* ===========================================\n SHADOWS - Subtle, clean\n =========================================== */\n --oc-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);\n --oc-shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 6px rgba(15, 23, 42, 0.03);\n --oc-shadow-lg: 0 4px 6px rgba(15, 23, 42, 0.05), 0 10px 15px rgba(15, 23, 42, 0.04);\n --oc-shadow-xl: 0 8px 16px rgba(15, 23, 42, 0.06), 0 20px 25px rgba(15, 23, 42, 0.05);\n --oc-shadow-inner: inset 0 1px 2px rgba(15, 23, 42, 0.03);\n --oc-shadow-accent: 0 4px 14px rgba(15, 118, 110, 0.2);\n --oc-shadow-accent-lg: 0 8px 24px rgba(15, 118, 110, 0.25);\n}\n\n/* ============================================\n Focus Ring Utility\n ============================================ */\n.oc-focus-ring:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Focus ring with glow effect (for inputs, etc.) */\n.oc-focus-glow:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px rgba(15, 118, 110, var(--oc-opacity-focus-ring, 0.15));\n}\n\n/* ============================================\n Disabled State Utility\n ============================================ */\n.oc-disabled,\n[disabled] {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* ============================================\n Loading State Utility\n ============================================ */\n.oc-loading {\n cursor: wait;\n pointer-events: none;\n}\n\n.oc-loading > * {\n opacity: var(--oc-opacity-loading, 0.7);\n}\n\n/* ============================================\n Shared Keyframe Animations\n ============================================ */\n\n/* Spinner rotation - used by Button, IconButton, Progress, SearchInput */\n@keyframes oc-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n/* Fade in with slight scale - used by Modal, Tooltip, Popover */\n@keyframes oc-fade-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* Fade out with slight scale */\n@keyframes oc-fade-out {\n from {\n opacity: 1;\n transform: scale(1);\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n}\n\n/* Slide up fade - used by chat messages, toasts */\n@keyframes oc-slide-up-fade {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Slide down fade - for dropdowns */\n@keyframes oc-slide-down-fade {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Pulse animation - for skeleton loading, thinking indicators */\n@keyframes oc-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Bounce animation - for typing indicators */\n@keyframes oc-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n }\n 30% {\n transform: translateY(-8px);\n }\n}\n\n/* Shimmer animation - for skeleton loading */\n@keyframes oc-shimmer {\n from { transform: translateX(-100%); }\n to { transform: translateX(100%); }\n}\n\n/* ============================================\n Transition Utilities\n ============================================ */\n.oc-transition-fast {\n transition-duration: var(--oc-duration-fast, 0.15s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-normal {\n transition-duration: var(--oc-duration-normal, 0.25s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-slow {\n transition-duration: var(--oc-duration-slow, 0.4s);\n transition-timing-function: var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-transition-spring {\n transition-timing-function: var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1));\n}\n\n/* ============================================\n Flexbox Utilities\n ============================================ */\n.oc-flex-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-flex-between {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.oc-flex-start {\n display: flex;\n align-items: center;\n justify-content: flex-start;\n}\n\n/* ============================================\n Text Utilities\n ============================================ */\n.oc-truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.oc-line-clamp-2 {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-line-clamp-3 {\n display: -webkit-box;\n -webkit-line-clamp: 3;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* ============================================\n Accessibility: Reduced Motion\n ============================================ */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n/* ============================================\n Screen Reader Only\n ============================================ */\n.oc-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-width: 0;\n}\n\n/* ============================================\n Premium Polish Effects\n ============================================ */\n\n/* Frosted glass overlay effect */\n.oc-frosted {\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n}\n\n.oc-frosted-light {\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n}\n\n/* Interactive lift effect on hover */\n.oc-lift {\n transition: transform var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n.oc-lift:hover {\n transform: translateY(-2px);\n}\n\n/* Press effect */\n.oc-press:active {\n transform: translateY(1px);\n}\n\n/* Focus glow effect for inputs */\n.oc-focus-glow-input:focus-within {\n box-shadow: var(--oc-shadow-inner, inset 0 1px 2px rgba(15, 23, 42, 0.03)),\n 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Smooth color transitions */\n.oc-color-transition {\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1)),\n border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default, cubic-bezier(0.4, 0, 0.2, 1));\n}\n\n/* ============================================\n Typography Polish\n ============================================ */\n\n/* Professional font feature settings */\n.oc-text {\n font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Heading typography - tighter letter-spacing for polish */\n.oc-heading {\n font-feature-settings: 'kern' 1, 'liga' 1;\n letter-spacing: -0.02em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Small caps for labels */\n.oc-label {\n font-feature-settings: 'kern' 1, 'smcp' 1;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n}\n\n/* Tabular numbers for data */\n.oc-tabular {\n font-feature-settings: 'tnum' 1, 'kern' 1;\n}\n\n/* ============================================\n Staggered List Animations\n ============================================ */\n\n/* Base stagger animation */\n@keyframes oc-stagger-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n/* Stagger animation utilities - apply to list items */\n.oc-stagger > * {\n animation: oc-stagger-in var(--oc-duration-normal, 0.25s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger > *:nth-child(6) { animation-delay: 250ms; }\n.oc-stagger > *:nth-child(7) { animation-delay: 300ms; }\n.oc-stagger > *:nth-child(8) { animation-delay: 350ms; }\n.oc-stagger > *:nth-child(9) { animation-delay: 400ms; }\n.oc-stagger > *:nth-child(10) { animation-delay: 450ms; }\n\n/* Fast stagger (25ms intervals) */\n.oc-stagger-fast > * {\n animation: oc-stagger-in var(--oc-duration-fast, 0.15s) var(--oc-easing-enter, cubic-bezier(0, 0, 0.2, 1)) backwards;\n}\n\n.oc-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-fast > *:nth-child(2) { animation-delay: 25ms; }\n.oc-stagger-fast > *:nth-child(3) { animation-delay: 50ms; }\n.oc-stagger-fast > *:nth-child(4) { animation-delay: 75ms; }\n.oc-stagger-fast > *:nth-child(5) { animation-delay: 100ms; }\n.oc-stagger-fast > *:nth-child(6) { animation-delay: 125ms; }\n.oc-stagger-fast > *:nth-child(7) { animation-delay: 150ms; }\n.oc-stagger-fast > *:nth-child(8) { animation-delay: 175ms; }\n.oc-stagger-fast > *:nth-child(9) { animation-delay: 200ms; }\n.oc-stagger-fast > *:nth-child(10) { animation-delay: 225ms; }\n\n/* Scale stagger - for cards/grid items */\n@keyframes oc-stagger-scale-in {\n from {\n opacity: 0;\n transform: scale(0.95);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n.oc-stagger-scale > * {\n animation: oc-stagger-scale-in var(--oc-duration-normal, 0.25s) var(--oc-easing-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;\n}\n\n.oc-stagger-scale > *:nth-child(1) { animation-delay: 0ms; }\n.oc-stagger-scale > *:nth-child(2) { animation-delay: 50ms; }\n.oc-stagger-scale > *:nth-child(3) { animation-delay: 100ms; }\n.oc-stagger-scale > *:nth-child(4) { animation-delay: 150ms; }\n.oc-stagger-scale > *:nth-child(5) { animation-delay: 200ms; }\n.oc-stagger-scale > *:nth-child(6) { animation-delay: 250ms; }\n\n\n\n/* AppShell - Main Application Container */\n.oc-app-shell {\n display: flex;\n flex-direction: column;\n min-height: 100%;\n background: var(--oc-bg-canvas);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-app-shell--fixed {\n height: 100vh;\n overflow: hidden;\n}\n\n/* AppShell Sidebar */\n.oc-app-shell-sidebar {\n --sidebar-width: 260px;\n position: relative;\n width: var(--sidebar-width);\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-surface);\n transition: width var(--oc-duration-normal) var(--oc-easing-default),\n margin var(--oc-duration-normal) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-app-shell-sidebar--bordered {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-sidebar--closed {\n width: 0;\n margin-left: calc(var(--sidebar-width) * -1);\n}\n\n.oc-app-shell-sidebar__content {\n width: var(--sidebar-width);\n height: 100%;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* AppShell Main */\n.oc-app-shell-main {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-width: 0;\n overflow: hidden;\n background: var(--oc-bg-canvas);\n}\n\n/* AppShell Header */\n.oc-app-shell-header {\n --header-height: 56px;\n height: var(--header-height);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: 0 var(--oc-spacing-lg);\n background: var(--oc-bg-canvas);\n}\n\n.oc-app-shell-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-app-shell-header--fixed {\n position: sticky;\n top: 0;\n z-index: var(--oc-z-sticky);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n background: rgba(255, 255, 255, 0.9);\n}\n\n/* Layout composition helpers */\n.oc-app-shell > .oc-app-shell-header {\n order: -1;\n}\n\n/* Horizontal layout for sidebar + main */\n.oc-app-shell:has(.oc-app-shell-sidebar) {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.oc-app-shell:has(.oc-app-shell-sidebar) > .oc-app-shell-header {\n width: 100%;\n flex-basis: 100%;\n}\n\n/* Dark sidebar variant */\n.oc-app-shell-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n border-right-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n/* PageHeader Component */\n.oc-page-header {\n padding: var(--oc-spacing-lg) var(--oc-spacing-xl);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Breadcrumbs */\n.oc-page-header__breadcrumbs {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-breadcrumbs {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--oc-spacing-xs);\n list-style: none;\n margin: 0;\n padding: 0;\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-breadcrumbs__item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-breadcrumbs__separator {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-breadcrumbs__link {\n color: var(--oc-fg-secondary);\n text-decoration: none;\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n padding: 2px 0;\n}\n\n.oc-breadcrumbs__link:hover {\n color: var(--oc-accent);\n}\n\n.oc-breadcrumbs__current {\n color: var(--oc-fg-primary);\n font-weight: 500;\n}\n\n/* Header Row */\n.oc-page-header__row {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-lg);\n}\n\n.oc-page-header__content {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-md);\n min-width: 0;\n flex: 1;\n}\n\n.oc-page-header__back {\n flex-shrink: 0;\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n margin-top: 2px;\n}\n\n.oc-page-header__back:hover {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n color: var(--oc-fg-primary);\n}\n\n.oc-page-header__text {\n min-width: 0;\n}\n\n.oc-page-header__title {\n margin: 0;\n font-size: var(--oc-font-size-2xl);\n font-weight: 600;\n letter-spacing: -0.02em;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-page-header__subtitle {\n margin: var(--oc-spacing-xs) 0 0;\n font-size: var(--oc-font-size-md);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-page-header__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n}\n\n/* Tabs */\n.oc-page-header__tabs {\n margin-top: var(--oc-spacing-lg);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* Compact variant */\n.oc-page-header--compact {\n padding: var(--oc-spacing-md) var(--oc-spacing-lg);\n}\n\n.oc-page-header--compact .oc-page-header__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Bordered variant */\n.oc-page-header--bordered {\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n/* With accent bar */\n.oc-page-header--accent {\n position: relative;\n}\n\n.oc-page-header--accent::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--oc-accent);\n}\n\n\n\n/* SplitPane Component */\n.oc-split-pane {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-split-pane--horizontal {\n flex-direction: row;\n}\n\n.oc-split-pane--vertical {\n flex-direction: column;\n}\n\n.oc-split-pane--dragging {\n user-select: none;\n}\n\n/* Panes */\n.oc-split-pane__pane {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n.oc-split-pane__pane--first {\n flex-shrink: 0;\n}\n\n.oc-split-pane__pane--second {\n flex: 1;\n min-width: 0;\n min-height: 0;\n}\n\n/* Handle */\n.oc-split-pane__handle {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal > .oc-split-pane__handle {\n width: 8px;\n cursor: col-resize;\n}\n\n.oc-split-pane--vertical > .oc-split-pane__handle {\n height: 8px;\n cursor: row-resize;\n}\n\n.oc-split-pane__handle:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n}\n\n.oc-split-pane__handle-bar {\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n transition: background 0.15s ease;\n}\n\n.oc-split-pane--horizontal .oc-split-pane__handle-bar {\n width: 2px;\n height: 32px;\n}\n\n.oc-split-pane--vertical .oc-split-pane__handle-bar {\n height: 2px;\n width: 32px;\n}\n\n.oc-split-pane__handle:hover .oc-split-pane__handle-bar,\n.oc-split-pane--dragging .oc-split-pane__handle-bar {\n background: var(--oc-accent);\n}\n\n/* Generic Pane */\n.oc-pane {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n}\n\n/* Panel with header pattern */\n.oc-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-panel__header {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm, 8px) var(--oc-spacing-md, 16px);\n border-bottom: 1px solid var(--oc-border-default, #E5E5E5);\n min-height: 48px;\n}\n\n.oc-panel__title {\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-panel__content {\n flex: 1;\n overflow: auto;\n}\n\n\n\n/* Stack Component */\n.oc-stack {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Spacer */\n.oc-spacer {\n flex: 1;\n}\n\n/* Divider */\n.oc-divider {\n flex-shrink: 0;\n background: var(--oc-border-default, #E5E5E5);\n}\n\n.oc-divider--horizontal {\n height: 1px;\n width: 100%;\n}\n\n.oc-divider--vertical {\n width: 1px;\n align-self: stretch;\n}\n\n/* Box - generic container with padding */\n.oc-box {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-box--padding-none { padding: 0; }\n.oc-box--padding-xs { padding: var(--oc-spacing-xs, 4px); }\n.oc-box--padding-sm { padding: var(--oc-spacing-sm, 8px); }\n.oc-box--padding-md { padding: var(--oc-spacing-md, 16px); }\n.oc-box--padding-lg { padding: var(--oc-spacing-lg, 24px); }\n.oc-box--padding-xl { padding: var(--oc-spacing-xl, 32px); }\n\n/* Center - center content both ways */\n.oc-center {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Container - max-width constrained container */\n.oc-container {\n width: 100%;\n margin-left: auto;\n margin-right: auto;\n padding-left: var(--oc-spacing-md, 16px);\n padding-right: var(--oc-spacing-md, 16px);\n}\n\n.oc-container--sm { max-width: 640px; }\n.oc-container--md { max-width: 768px; }\n.oc-container--lg { max-width: 1024px; }\n.oc-container--xl { max-width: 1280px; }\n.oc-container--full { max-width: 100%; }\n\n\n\n/* ScrollArea Component */\n.oc-scroll-area {\n position: relative;\n overflow: hidden;\n}\n\n/* Scroll behavior */\n.oc-scroll-area--vertical {\n overflow-y: auto;\n}\n\n.oc-scroll-area--horizontal {\n overflow-x: auto;\n}\n\n.oc-scroll-area--vertical.oc-scroll-area--horizontal {\n overflow: auto;\n}\n\n/* Type variants */\n.oc-scroll-area--auto {\n overflow-y: auto;\n}\n\n.oc-scroll-area--always {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--scroll {\n overflow-y: scroll;\n}\n\n.oc-scroll-area--hover {\n overflow-y: hidden;\n}\n\n.oc-scroll-area--hover:hover {\n overflow-y: auto;\n}\n\n/* Custom styled scrollbars */\n.oc-scroll-area--styled {\n scrollbar-width: thin;\n scrollbar-color: var(--oc-border-strong, #CCCCCC) transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb {\n background: var(--oc-border-strong, #CCCCCC);\n border-radius: 4px;\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-thumb:hover {\n background: var(--oc-fg-tertiary, #9B9B9B);\n border: 2px solid transparent;\n background-clip: padding-box;\n}\n\n.oc-scroll-area--styled::-webkit-scrollbar-corner {\n background: transparent;\n}\n\n/* Thin scrollbar variant */\n.oc-scroll-area--thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n}\n\n/* Dark mode scrollbar */\n.oc-scroll-area--dark {\n scrollbar-color: rgba(255, 255, 255, 0.3) transparent;\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n}\n\n.oc-scroll-area--dark::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n\n\n\n/* Card Component */\n.oc-card {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* Variants */\n.oc-card--elevated {\n box-shadow: var(--oc-shadow-md);\n}\n\n.oc-card--flat {\n box-shadow: none;\n}\n\n.oc-card--outlined {\n box-shadow: none;\n border: 1px solid var(--oc-border-default);\n}\n\n/* Padding */\n.oc-card--padding-none {\n padding: 0;\n}\n\n.oc-card--padding-sm {\n padding: var(--oc-spacing-sm);\n}\n\n.oc-card--padding-md {\n padding: var(--oc-spacing-md);\n}\n\n.oc-card--padding-lg {\n padding: var(--oc-spacing-lg);\n}\n\n/* Interactive */\n.oc-card--interactive {\n cursor: pointer;\n transition: box-shadow var(--oc-duration-fast) var(--oc-easing-default),\n transform var(--oc-duration-fast) var(--oc-easing-default),\n border-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-card--interactive:hover {\n box-shadow: var(--oc-shadow-lg);\n transform: translateY(-2px);\n}\n\n.oc-card--interactive.oc-card--outlined:hover {\n border-color: var(--oc-border-strong);\n}\n\n.oc-card--interactive:active {\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Card Header */\n.oc-card-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-card-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-card-header__title {\n font-size: var(--oc-font-size-lg);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-card-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n.oc-card-header__action {\n flex-shrink: 0;\n}\n\n/* Card Body */\n.oc-card-body {\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Card Footer */\n.oc-card-footer {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n margin-top: var(--oc-spacing-md);\n padding-top: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n}\n\n\n\n/* Sidebar Component */\n.oc-sidebar {\n display: flex;\n flex-direction: column;\n width: 260px;\n height: 100%;\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: width var(--oc-duration-normal) var(--oc-easing-default);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n.oc-sidebar--collapsed {\n width: 64px;\n}\n\n/* Sidebar Header */\n.oc-sidebar-header {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n min-height: 56px;\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-sidebar-header__logo {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-accent);\n border-radius: var(--oc-radius-md);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-header__title {\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n letter-spacing: -0.01em;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n color: var(--oc-fg-primary);\n}\n\n/* Sidebar Nav */\n.oc-sidebar-nav {\n flex: 1;\n overflow-y: auto;\n padding: var(--oc-spacing-sm);\n}\n\n/* Sidebar Section */\n.oc-sidebar-section {\n margin-bottom: var(--oc-spacing-md);\n}\n\n.oc-sidebar-section:first-child {\n margin-top: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__title {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary);\n padding: var(--oc-spacing-sm);\n margin-bottom: var(--oc-spacing-xs);\n}\n\n.oc-sidebar-section__items {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n/* Sidebar Item */\n.oc-sidebar-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: 8px 12px;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n position: relative;\n}\n\n.oc-sidebar-item:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active:hover {\n background: var(--oc-accent-hover);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-sidebar-item--disabled:hover {\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-sidebar-item__icon {\n flex-shrink: 0;\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n transition: color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-primary);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__icon,\n.oc-sidebar-item--active:hover .oc-sidebar-item__icon {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item__label {\n flex: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-sidebar-item__badge {\n flex-shrink: 0;\n font-size: 10px;\n font-weight: 600;\n padding: 2px 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar-item--active .oc-sidebar-item__badge {\n background: rgba(255, 255, 255, 0.2);\n}\n\n/* Sidebar Footer */\n.oc-sidebar-footer {\n padding: var(--oc-spacing-md);\n border-top: 1px solid var(--oc-border-default);\n margin-top: auto;\n}\n\n/* Dark variant */\n.oc-sidebar--dark {\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-header {\n border-bottom-color: rgba(255, 255, 255, 0.1);\n}\n\n.oc-sidebar--dark .oc-sidebar-header__title {\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-section__title {\n color: rgba(255, 255, 255, 0.4);\n}\n\n.oc-sidebar--dark .oc-sidebar-item {\n color: rgba(255, 255, 255, 0.7);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover {\n background: rgba(255, 255, 255, 0.08);\n color: var(--oc-fg-inverse);\n}\n\n.oc-sidebar--dark .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.5);\n}\n\n.oc-sidebar--dark .oc-sidebar-item:hover .oc-sidebar-item__icon {\n color: rgba(255, 255, 255, 0.9);\n}\n\n.oc-sidebar--dark .oc-sidebar-footer {\n border-top-color: rgba(255, 255, 255, 0.1);\n}\n\n\n\n /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR - Top Navigation Bar\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n .oc-navbar {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-wrap: wrap;\n padding: 12px 24px;\n background: var(--oc-bg-sidebar, #0F172A);\n color: white;\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n }\n\n .oc-navbar__left {\n display: flex;\n align-items: center;\n gap: 32px;\n }\n\n /* Brand */\n .oc-navbar__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n color: white;\n }\n\n .oc-navbar__logo {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .oc-navbar__brand-name {\n font-weight: 600;\n font-size: 15px;\n white-space: nowrap;\n }\n\n .oc-navbar__version.oc-chip {\n --chip-bg: rgba(255, 255, 255, 0.1);\n --chip-border: rgba(255, 255, 255, 0.2);\n --chip-text: rgba(255, 255, 255, 0.8);\n }\n\n /* Desktop Navigation */\n .oc-navbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n\n .oc-navbar__link {\n padding: 8px 12px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 14px;\n font-weight: 500;\n border-radius: 6px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Right Side */\n .oc-navbar__right {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .oc-navbar__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n /* User Dropdown */\n .oc-navbar-user {\n position: relative;\n }\n\n .oc-navbar-user__trigger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 6px 10px 6px 6px;\n background: transparent;\n border: none;\n border-radius: 8px;\n color: rgba(255, 255, 255, 0.9);\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .oc-navbar-user__trigger:hover {\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar-user__name {\n font-size: 14px;\n font-weight: 500;\n }\n\n .oc-navbar-user__chevron {\n transition: transform 0.2s ease;\n opacity: 0.7;\n }\n\n .oc-navbar-user__chevron--open {\n transform: rotate(180deg);\n }\n\n .oc-navbar-user__backdrop {\n position: fixed;\n inset: 0;\n z-index: var(--oc-z-dropdown, 100);\n }\n\n .oc-navbar-user__menu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n min-width: 180px;\n padding: 6px;\n background: var(--oc-bg-surface, white);\n border-radius: 10px;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n z-index: calc(var(--oc-z-dropdown, 100) + 1);\n animation: oc-navbar-dropdown-slide 0.15s ease;\n }\n\n @keyframes oc-navbar-dropdown-slide {\n from {\n opacity: 0;\n transform: translateY(-4px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .oc-navbar-user__item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 10px 12px;\n background: transparent;\n border: none;\n border-radius: 6px;\n color: var(--oc-fg-secondary, #475569);\n font-size: 14px;\n font-weight: 500;\n font-family: inherit;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n }\n\n .oc-navbar-user__item:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n }\n\n .oc-navbar-user__item--danger {\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item--danger:hover {\n background: var(--oc-error-bg, #FEF2F2);\n color: var(--oc-error, #DC2626);\n }\n\n .oc-navbar-user__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n }\n\n .oc-navbar-user__divider {\n height: 1px;\n margin: 6px 0;\n background: var(--oc-border-default, #E2E8F0);\n }\n\n /* Mobile Menu Toggle */\n .oc-navbar__mobile-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n padding: 0;\n background: rgba(255, 255, 255, 0.1);\n border: none;\n border-radius: 8px;\n color: white;\n cursor: pointer;\n transition: background 0.15s ease;\n }\n\n .oc-navbar__mobile-toggle:hover {\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Mobile Menu */\n .oc-navbar__mobile-menu {\n display: none;\n flex-direction: column;\n gap: 4px;\n width: 100%;\n padding: 16px 0 8px;\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n margin-top: 12px;\n }\n\n .oc-navbar__mobile-link {\n padding: 12px 16px;\n color: rgba(255, 255, 255, 0.7);\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n border-radius: 8px;\n transition: all 0.15s ease;\n }\n\n .oc-navbar__mobile-link:hover {\n color: white;\n background: rgba(255, 255, 255, 0.1);\n }\n\n .oc-navbar__mobile-link--active {\n color: white;\n background: rgba(255, 255, 255, 0.15);\n }\n\n /* Responsive */\n @media (max-width: 1100px) {\n .oc-navbar__nav {\n display: none;\n }\n\n .oc-navbar__mobile-toggle {\n display: flex;\n }\n\n .oc-navbar__mobile-menu {\n display: flex;\n }\n }\n\n @media (max-width: 768px) {\n .oc-navbar {\n padding: 12px 16px;\n }\n\n .oc-navbar-user__name,\n .oc-navbar-user__chevron {\n display: none;\n }\n\n .oc-navbar-user__trigger {\n padding: 4px;\n }\n\n .oc-navbar__version {\n display: none;\n }\n }\n\n @media (max-width: 480px) {\n .oc-navbar__brand-name {\n display: none;\n }\n }\n\n\n\n/* Modal Overlay */\n.oc-modal-overlay {\n position: fixed;\n inset: 0;\n background: rgba(15, 23, 42, 0.4);\n backdrop-filter: blur(4px);\n -webkit-backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--oc-spacing-md);\n z-index: var(--oc-z-modal);\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Modal */\n.oc-modal {\n background: var(--oc-bg-canvas);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-xl);\n max-height: calc(100vh - 32px);\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-normal) var(--oc-easing-spring);\n}\n\n/* Modal Sizes */\n.oc-modal--sm { width: 100%; max-width: 400px; }\n.oc-modal--md { width: 100%; max-width: 500px; }\n.oc-modal--lg { width: 100%; max-width: 640px; }\n.oc-modal--xl { width: 100%; max-width: 800px; }\n.oc-modal--full { width: 100%; max-width: calc(100vw - 32px); height: calc(100vh - 32px); }\n\n/* Modal Header */\n.oc-modal-header {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-lg);\n padding-bottom: 0;\n}\n\n.oc-modal-header__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-modal-header__title {\n font-size: var(--oc-font-size-xl);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n letter-spacing: -0.01em;\n}\n\n.oc-modal-header__subtitle {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n margin-top: var(--oc-spacing-xs);\n line-height: var(--oc-line-height-normal);\n}\n\n/* Close Button */\n.oc-modal-close {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: background var(--oc-duration-fast) var(--oc-easing-default),\n color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-modal-close:hover {\n background: var(--oc-bg-surface-hover);\n color: var(--oc-fg-primary);\n}\n\n/* Modal Body */\n.oc-modal-body {\n flex: 1;\n padding: var(--oc-spacing-lg);\n overflow-y: auto;\n color: var(--oc-fg-primary);\n font-size: var(--oc-font-size-md);\n line-height: var(--oc-line-height-relaxed);\n}\n\n/* Modal Footer */\n.oc-modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-lg);\n padding-top: 0;\n}\n\n\n\n/* Tooltip Trigger */\n.oc-tooltip-trigger {\n display: inline-flex;\n}\n\n/* Tooltip */\n.oc-tooltip {\n position: absolute;\n z-index: var(--oc-z-tooltip);\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n background: var(--oc-bg-sidebar);\n color: var(--oc-fg-inverse);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: var(--oc-font-size-xs);\n border-radius: var(--oc-radius-md);\n white-space: nowrap;\n pointer-events: none;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-tooltip--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-tooltip--bottom {\n transform: translateX(-50%);\n}\n\n.oc-tooltip--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-tooltip--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Popover Trigger */\n.oc-popover-trigger {\n display: inline-flex;\n}\n\n/* Popover */\n.oc-popover {\n position: absolute;\n z-index: var(--oc-z-popover);\n min-width: 200px;\n padding: var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n animation: oc-fade-in var(--oc-duration-fast) var(--oc-easing-enter);\n}\n\n/* Placement */\n.oc-popover--top {\n transform: translateX(-50%) translateY(-100%);\n}\n\n.oc-popover--bottom {\n transform: translateX(-50%);\n}\n\n.oc-popover--left {\n transform: translateX(-100%) translateY(-50%);\n}\n\n.oc-popover--right {\n transform: translateY(-50%);\n}\n\n\n\n/* Avatar Component */\n.oc-avatar {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: linear-gradient(135deg, #E5E5E5 0%, #D4D4D4 100%);\n color: var(--oc-fg-secondary, #6B6B6B);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 600;\n overflow: hidden;\n flex-shrink: 0;\n user-select: none;\n}\n\n.oc-avatar--square {\n border-radius: var(--oc-radius-md, 8px);\n}\n\n/* Sizes */\n.oc-avatar--xs { font-size: 10px; }\n.oc-avatar--sm { font-size: 12px; }\n.oc-avatar--md { font-size: 14px; }\n.oc-avatar--lg { font-size: 16px; }\n.oc-avatar--xl { font-size: 20px; }\n\n/* Accent variant (for AI/system) */\n.oc-avatar--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n/* Image */\n.oc-avatar__image {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n/* Fallback */\n.oc-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n}\n\n/* Status indicator */\n.oc-avatar__status {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 25%;\n height: 25%;\n min-width: 8px;\n min-height: 8px;\n border-radius: 50%;\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n.oc-avatar__status--online {\n background: var(--oc-success, #10B981);\n}\n\n.oc-avatar__status--offline {\n background: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-avatar__status--busy {\n background: var(--oc-error, #EF4444);\n}\n\n.oc-avatar__status--away {\n background: var(--oc-warning, #F59E0B);\n}\n\n/* AI Avatar */\n.oc-avatar--ai {\n background: var(--oc-accent);\n animation: oc-avatar-ai-pulse 3s ease-in-out infinite;\n}\n\n@keyframes oc-avatar-ai-pulse {\n 0%, 100% {\n box-shadow: 0 0 0 0 rgba(8, 145, 178, 0.4);\n }\n 50% {\n box-shadow: 0 0 0 4px rgba(8, 145, 178, 0);\n }\n}\n\n.oc-avatar__ai-icon {\n width: 60%;\n height: 60%;\n}\n\n/* Avatar Group */\n.oc-avatar-group {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-avatar-group__item {\n margin-left: -8px;\n}\n\n.oc-avatar-group__item:first-child {\n margin-left: 0;\n}\n\n.oc-avatar-group__item .oc-avatar {\n border: 2px solid white;\n box-sizing: content-box;\n}\n\n\n\n/* Chip Component */\n.oc-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n user-select: none;\n}\n\n.oc-chip--static {\n cursor: default;\n}\n\n/* Sizes */\n.oc-chip--sm {\n height: 24px;\n padding: 0 10px;\n font-size: 12px;\n}\n\n.oc-chip--md {\n height: 32px;\n padding: 0 14px;\n font-size: 13px;\n}\n\n.oc-chip--lg {\n height: 40px;\n padding: 0 18px;\n font-size: 14px;\n}\n\n/* Icons */\n.oc-chip__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-chip--sm .oc-chip__icon { margin-left: -2px; }\n.oc-chip--md .oc-chip__icon { margin-left: -4px; }\n.oc-chip--lg .oc-chip__icon { margin-left: -4px; }\n\n.oc-chip__icon--end {\n margin-left: 0 !important;\n}\n\n.oc-chip--sm .oc-chip__icon--end { margin-right: -2px; }\n.oc-chip--md .oc-chip__icon--end { margin-right: -4px; }\n.oc-chip--lg .oc-chip__icon--end { margin-right: -4px; }\n\n/* Label */\n.oc-chip__label {\n display: flex;\n align-items: center;\n}\n\n/* Remove button */\n.oc-chip__remove {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n margin-left: 2px;\n border: none;\n background: transparent;\n color: inherit;\n opacity: 0.6;\n cursor: pointer;\n border-radius: 50%;\n transition: opacity 0.15s ease, background 0.15s ease;\n}\n\n.oc-chip--sm .oc-chip__remove { margin-right: -4px; width: 16px; height: 16px; }\n.oc-chip--md .oc-chip__remove { margin-right: -6px; width: 20px; height: 20px; }\n.oc-chip--lg .oc-chip__remove { margin-right: -6px; width: 24px; height: 24px; }\n\n.oc-chip__remove:hover {\n opacity: 1;\n background: rgba(0, 0, 0, 0.1);\n}\n\n/* ========== VARIANTS ========== */\n\n/* Filled */\n.oc-chip--filled.oc-chip--default {\n background: var(--oc-fg-primary, #1A1A1A);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--accent {\n background: var(--oc-accent);\n color: white;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chip--filled.oc-chip--success {\n background: linear-gradient(135deg, var(--oc-success, #10B981) 0%, #059669 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--warning {\n background: linear-gradient(135deg, var(--oc-warning, #F59E0B) 0%, #D97706 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--error {\n background: linear-gradient(135deg, var(--oc-error, #EF4444) 0%, #DC2626 100%);\n color: white;\n}\n\n.oc-chip--filled.oc-chip--info {\n background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);\n color: white;\n}\n\n/* Soft */\n.oc-chip--soft.oc-chip--default {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chip--soft.oc-chip--accent {\n background: rgba(8, 145, 178, 0.1);\n color: var(--oc-accent);\n}\n\n.oc-chip--soft.oc-chip--success {\n background: var(--oc-success-bg, #ECFDF5);\n color: #059669;\n}\n\n.oc-chip--soft.oc-chip--warning {\n background: var(--oc-warning-bg, #FFFBEB);\n color: #B45309;\n}\n\n.oc-chip--soft.oc-chip--error {\n background: var(--oc-error-bg, #FEF2F2);\n color: #DC2626;\n}\n\n.oc-chip--soft.oc-chip--info {\n background: #EFF6FF;\n color: #2563EB;\n}\n\n/* Outlined */\n.oc-chip--outlined {\n background: transparent;\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E5E5E5);\n}\n\n.oc-chip--outlined.oc-chip--default {\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n.oc-chip--outlined.oc-chip--accent {\n box-shadow: inset 0 0 0 1px var(--oc-accent);\n color: var(--oc-accent);\n}\n\n.oc-chip--outlined.oc-chip--success {\n box-shadow: inset 0 0 0 1px var(--oc-success, #10B981);\n color: #059669;\n}\n\n.oc-chip--outlined.oc-chip--warning {\n box-shadow: inset 0 0 0 1px var(--oc-warning, #F59E0B);\n color: #B45309;\n}\n\n.oc-chip--outlined.oc-chip--error {\n box-shadow: inset 0 0 0 1px var(--oc-error, #EF4444);\n color: #DC2626;\n}\n\n.oc-chip--outlined.oc-chip--info {\n box-shadow: inset 0 0 0 1px #3B82F6;\n color: #2563EB;\n}\n\n/* Hover states */\n.oc-chip:not(.oc-chip--static):hover {\n transform: translateY(-1px);\n}\n\n.oc-chip--soft:not(.oc-chip--static):hover {\n filter: brightness(0.95);\n}\n\n.oc-chip--outlined:not(.oc-chip--static):hover {\n background: var(--oc-bg-surface, #F8F8F8);\n}\n\n.oc-chip--filled:not(.oc-chip--static):hover {\n filter: brightness(1.05);\n}\n\n/* Selected state */\n.oc-chip--selected {\n box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.2);\n}\n\n/* Active state */\n.oc-chip:not(.oc-chip--static):active {\n transform: translateY(0);\n}\n\n/* Chip Group */\n.oc-chip-group {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n}\n\n.oc-chip-group--gap-sm {\n gap: 6px;\n}\n\n.oc-chip-group--gap-md {\n gap: 10px;\n}\n\n\n\n/* Source Card */\n.oc-source-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-lg, 12px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n transition: all 0.15s ease;\n}\n\n.oc-source-card--clickable {\n cursor: pointer;\n}\n\n.oc-source-card--clickable:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n transform: translateY(-1px);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);\n}\n\n.oc-source-card--inline {\n padding: 8px 12px;\n display: inline-flex;\n gap: 8px;\n}\n\n/* Document icon */\n.oc-source__icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 8px);\n background: linear-gradient(135deg, var(--icon-color, #6B6B6B) 0%, color-mix(in srgb, var(--icon-color, #6B6B6B), black 20%) 100%);\n color: white;\n position: relative;\n}\n\n.oc-source-card--inline .oc-source__icon {\n width: 32px;\n height: 32px;\n}\n\n.oc-source__icon svg {\n opacity: 0.3;\n}\n\n.oc-source__icon-label {\n position: absolute;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: 0.05em;\n}\n\n/* Content */\n.oc-source-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-source-card__header {\n display: flex;\n align-items: baseline;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-source-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-card__ref {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n white-space: nowrap;\n}\n\n.oc-source-card__excerpt {\n margin: 6px 0 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n line-height: 1.5;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n/* Score */\n.oc-source-card__score {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n}\n\n.oc-source-card__score-bar {\n width: 40px;\n height: 4px;\n background: var(--oc-border-default, #E5E5E5);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-source-card__score-bar::after {\n content: '';\n display: block;\n width: var(--score, 0%);\n height: 100%;\n background: var(--oc-accent);\n border-radius: 2px;\n}\n\n.oc-source-card__score-label {\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Arrow */\n.oc-source-card__arrow {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.15s ease;\n}\n\n.oc-source-card--clickable:hover .oc-source-card__arrow {\n transform: translateX(2px);\n color: var(--oc-accent);\n}\n\n/* Source Pill */\n.oc-source-pill {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 28px;\n padding: 0 10px;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E5E5E5);\n border-radius: var(--oc-radius-md, 8px);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 12px;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-source-pill:hover {\n background: var(--oc-bg-surface-hover, #F0F0F0);\n border-color: var(--pill-color, var(--oc-border-strong, #CCCCCC));\n}\n\n.oc-source-pill__icon {\n display: flex;\n color: var(--pill-color, var(--oc-fg-tertiary, #9B9B9B));\n}\n\n.oc-source-pill__name {\n font-weight: 500;\n color: var(--oc-fg-primary, #1A1A1A);\n max-width: 120px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-source-pill__ref {\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-weight: 400;\n}\n\n/* Source List */\n.oc-source-list {\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-source-list__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n}\n\n.oc-source-list__title {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #6B6B6B);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-source-list__count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n.oc-source-list__items {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n/* Citation marker */\n.oc-citation {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n margin: 0 2px;\n background: var(--oc-accent);\n color: white;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n font-size: 11px;\n font-weight: 600;\n border-radius: 4px;\n border: none;\n cursor: pointer;\n vertical-align: middle;\n transition: all 0.15s ease;\n box-shadow: 0 1px 3px rgba(8, 145, 178, 0.3);\n}\n\n.oc-citation:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 6px rgba(8, 145, 178, 0.4);\n}\n\n\n\n/* ============ Chat Container ============ */\n.oc-chat-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 24px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n/* ============ Chat Message ============ */\n.oc-chat-message {\n display: flex;\n gap: 12px;\n max-width: 100%;\n animation: oc-message-in 0.3s ease;\n}\n\n@keyframes oc-message-in {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-chat-message__avatar {\n flex-shrink: 0;\n margin-top: 2px;\n}\n\n.oc-chat-message__container {\n flex: 1;\n min-width: 0;\n max-width: 720px;\n}\n\n/* User messages */\n.oc-chat-message--user {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message--user .oc-chat-message__container {\n align-items: flex-end;\n display: flex;\n flex-direction: column;\n}\n\n/* Header */\n.oc-chat-message__header {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-chat-message--user .oc-chat-message__header {\n flex-direction: row-reverse;\n}\n\n.oc-chat-message__name {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #9B9B9B);\n}\n\n/* Bubble */\n.oc-chat-message__bubble {\n position: relative;\n padding: 14px 18px;\n border-radius: 18px;\n line-height: 1.6;\n}\n\n.oc-chat-message--assistant .oc-chat-message__bubble {\n background: var(--oc-bg-surface, #F8F8F8);\n border-top-left-radius: 4px;\n color: var(--oc-fg-primary, #1A1A1A);\n}\n\n.oc-chat-message--user .oc-chat-message__bubble {\n background: var(--oc-accent);\n border-top-right-radius: 4px;\n color: white;\n box-shadow: 0 2px 12px rgba(8, 145, 178, 0.25);\n}\n\n.oc-chat-message--system .oc-chat-message__bubble {\n background: transparent;\n padding: 8px 0;\n text-align: center;\n color: var(--oc-fg-tertiary, #9B9B9B);\n font-size: 13px;\n}\n\n.oc-chat-message__content {\n font-size: 15px;\n}\n\n.oc-chat-message__content p {\n margin: 0 0 12px;\n}\n\n.oc-chat-message__content p:last-child {\n margin-bottom: 0;\n}\n\n/* Streaming cursor */\n.oc-chat-message__cursor {\n display: inline-block;\n width: 2px;\n height: 1.1em;\n background: var(--oc-accent);\n margin-left: 2px;\n vertical-align: text-bottom;\n animation: oc-cursor-blink 1s ease infinite;\n}\n\n@keyframes oc-cursor-blink {\n 0%, 50% { opacity: 1; }\n 51%, 100% { opacity: 0; }\n}\n\n/* Actions */\n.oc-chat-message__actions {\n margin-top: 8px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-chat-message:hover .oc-chat-message__actions {\n opacity: 1;\n}\n\n/* Error state */\n.oc-chat-message__error {\n display: flex;\n align-items: center;\n gap: 6px;\n margin-top: 8px;\n font-size: 13px;\n color: var(--oc-error, #EF4444);\n}\n\n/* ============ Typing Indicator ============ */\n.oc-typing-indicator {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 0;\n}\n\n.oc-typing-indicator__dots {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: 18px;\n border-top-left-radius: 4px;\n}\n\n.oc-typing-indicator__dot {\n width: 8px;\n height: 8px;\n background: var(--oc-fg-tertiary, #9B9B9B);\n border-radius: 50%;\n animation: oc-typing-bounce 1.4s ease infinite;\n}\n\n.oc-typing-indicator__dot:nth-child(2) {\n animation-delay: 0.2s;\n}\n\n.oc-typing-indicator__dot:nth-child(3) {\n animation-delay: 0.4s;\n}\n\n@keyframes oc-typing-bounce {\n 0%, 60%, 100% {\n transform: translateY(0);\n background: var(--oc-fg-tertiary);\n }\n 30% {\n transform: translateY(-8px);\n background: var(--oc-accent);\n }\n}\n\n.oc-typing-indicator__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #6B6B6B);\n}\n\n/* ============ Thinking Block ============ */\n.oc-thinking-block {\n background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(8, 145, 178, 0.02) 100%);\n border: 1px solid rgba(8, 145, 178, 0.15);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n margin: 12px 0;\n}\n\n.oc-thinking-block__header {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n text-align: left;\n}\n\n.oc-thinking-block__indicator {\n display: flex;\n gap: 3px;\n}\n\n.oc-thinking-block__dot {\n width: 6px;\n height: 6px;\n background: var(--oc-accent);\n border-radius: 50%;\n animation: oc-thinking-pulse 1.5s ease infinite;\n}\n\n.oc-thinking-block__dot:nth-child(2) { animation-delay: 0.3s; }\n.oc-thinking-block__dot:nth-child(3) { animation-delay: 0.6s; }\n\n@keyframes oc-thinking-pulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.2); }\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__dot {\n animation: none;\n opacity: 0.5;\n}\n\n.oc-thinking-block__title {\n flex: 1;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent);\n}\n\n.oc-thinking-block__chevron {\n color: var(--oc-fg-tertiary, #9B9B9B);\n transition: transform 0.2s ease;\n}\n\n.oc-thinking-block--expanded .oc-thinking-block__chevron {\n transform: rotate(180deg);\n}\n\n.oc-thinking-block__content {\n padding: 0 16px 16px;\n font-size: 13px;\n color: var(--oc-fg-secondary);\n line-height: 1.6;\n border-top: 1px solid rgba(8, 145, 178, 0.1);\n margin-top: 0;\n padding-top: 12px;\n}\n\n/* ============ Task Card ============ */\n.oc-task-card {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 12px 14px;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n border-left: 3px solid var(--oc-border-default);\n}\n\n.oc-task-card--running {\n border-left-color: var(--oc-accent);\n background: linear-gradient(90deg, rgba(8, 145, 178, 0.05) 0%, var(--oc-bg-surface) 100%);\n}\n\n.oc-task-card--completed {\n border-left-color: var(--oc-success, #10B981);\n}\n\n.oc-task-card--error {\n border-left-color: var(--oc-error, #EF4444);\n}\n\n.oc-task-card__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-task-card--pending .oc-task-card__icon { color: var(--oc-fg-tertiary); }\n.oc-task-card--running .oc-task-card__icon { color: var(--oc-accent); }\n.oc-task-card--completed .oc-task-card__icon { color: var(--oc-success); }\n.oc-task-card--error .oc-task-card__icon { color: var(--oc-error); }\n\n.oc-task-card__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(8, 145, 178, 0.2);\n border-top-color: var(--oc-accent);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n@keyframes oc-spin {\n to { transform: rotate(360deg); }\n}\n\n.oc-task-card__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-task-card__title {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-task-card__desc {\n font-size: 13px;\n color: var(--oc-fg-secondary);\n margin-top: 2px;\n}\n\n.oc-task-card__progress {\n margin-top: 8px;\n height: 4px;\n background: var(--oc-border-default);\n border-radius: 2px;\n overflow: hidden;\n}\n\n.oc-task-card__progress-bar {\n height: 100%;\n width: var(--progress, 0%);\n background: var(--oc-accent);\n border-radius: 2px;\n transition: width 0.3s ease;\n}\n\n/* ============ Message Actions ============ */\n.oc-message-actions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-action-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md);\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-action-button:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n}\n\n.oc-action-button--active {\n color: var(--oc-accent);\n}\n\n.oc-action-button--active:hover {\n color: var(--oc-accent);\n background: rgba(8, 145, 178, 0.1);\n}\n\n/* ============ Chat Input ============ */\n.oc-chat-input {\n flex-shrink: 0;\n padding: 16px 24px 24px;\n background: var(--oc-bg-canvas);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-chat-input__suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 12px;\n}\n\n.oc-chat-input__container {\n display: flex;\n align-items: flex-end;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface);\n border-radius: 24px;\n border: 1px solid transparent;\n transition: all 0.2s ease;\n}\n\n.oc-chat-input__container:focus-within {\n background: var(--oc-bg-canvas);\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-chat-input__left,\n.oc-chat-input__right {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-chat-input__textarea {\n flex: 1;\n min-height: 24px;\n max-height: 200px;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n line-height: 1.5;\n color: var(--oc-fg-primary);\n resize: none;\n outline: none;\n}\n\n.oc-chat-input__textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-chat-input__send {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--oc-accent);\n color: white;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);\n}\n\n.oc-chat-input__send:hover:not(:disabled) {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(8, 145, 178, 0.4);\n}\n\n.oc-chat-input__send:disabled {\n background: var(--oc-border-default);\n color: var(--oc-fg-tertiary);\n box-shadow: none;\n cursor: not-allowed;\n}\n\n.oc-chat-input__spinner {\n width: 18px;\n height: 18px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n/* Loading state */\n.oc-chat-input--loading .oc-chat-input__container {\n opacity: 0.7;\n}\n\n\n\n/* Button */\n.oc-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--oc-spacing-sm);\n border: none;\n border-radius: var(--oc-radius-md);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n text-decoration: none;\n white-space: nowrap;\n}\n\n.oc-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Sizes */\n.oc-button--sm {\n height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-button--md {\n height: 36px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-button--lg {\n height: 44px;\n padding: 0 var(--oc-spacing-lg);\n font-size: var(--oc-font-size-md);\n}\n\n/* Primary variant - flat, modern */\n.oc-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n box-shadow: var(--oc-shadow-sm);\n}\n\n.oc-button--primary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-hover);\n box-shadow: var(--oc-shadow-md);\n transform: translateY(-1px);\n}\n\n.oc-button--primary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-accent-active);\n transform: translateY(0);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Secondary variant */\n.oc-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-button--secondary:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-button--secondary:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Ghost variant */\n.oc-button--ghost {\n background: transparent;\n color: var(--oc-fg-primary);\n}\n\n.oc-button--ghost:hover:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface);\n}\n\n.oc-button--ghost:active:not(:disabled):not(.oc-button--loading) {\n background: var(--oc-bg-surface-hover);\n}\n\n/* Danger variant */\n.oc-button--danger {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-button--danger:hover:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.9);\n}\n\n.oc-button--danger:active:not(:disabled):not(.oc-button--loading) {\n filter: brightness(0.85);\n}\n\n/* Link variant */\n.oc-button--link {\n background: transparent;\n color: var(--oc-accent);\n padding: 0;\n height: auto;\n}\n\n.oc-button--link:hover:not(:disabled):not(.oc-button--loading) {\n color: var(--oc-accent-hover);\n text-decoration: underline;\n}\n\n/* States */\n.oc-button--full-width {\n width: 100%;\n}\n\n.oc-button--disabled,\n.oc-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-button--loading {\n cursor: wait;\n}\n\n.oc-button--loading .oc-button__label {\n opacity: var(--oc-opacity-loading);\n}\n\n/* Button parts */\n.oc-button__spinner {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-button__spinner-icon {\n width: 16px;\n height: 16px;\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n.oc-button__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-button__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-button--lg .oc-button__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-button__label {\n display: inline-flex;\n align-items: center;\n}\n\n/* IconButton */\n.oc-icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n background: transparent;\n color: var(--oc-fg-secondary);\n}\n\n.oc-icon-button:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* IconButton sizes */\n.oc-icon-button--sm {\n width: 28px;\n height: 28px;\n}\n\n.oc-icon-button--md {\n width: 32px;\n height: 32px;\n}\n\n.oc-icon-button--lg {\n width: 40px;\n height: 40px;\n}\n\n.oc-icon-button svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-icon-button--lg svg {\n width: 20px;\n height: 20px;\n}\n\n/* IconButton variants */\n.oc-icon-button--ghost:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-icon-button--ghost:active:not(:disabled) {\n background: var(--oc-bg-surface-hover);\n}\n\n.oc-icon-button--primary {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-icon-button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover);\n}\n\n.oc-icon-button--primary:active:not(:disabled) {\n background: var(--oc-accent-active);\n}\n\n.oc-icon-button--secondary {\n background: var(--oc-bg-canvas);\n color: var(--oc-fg-primary);\n border: 1px solid var(--oc-border-default);\n}\n\n.oc-icon-button--secondary:hover:not(:disabled) {\n background: var(--oc-bg-surface);\n border-color: var(--oc-border-strong);\n}\n\n.oc-icon-button--danger {\n color: var(--oc-error);\n}\n\n.oc-icon-button--danger:hover:not(:disabled) {\n background: var(--oc-error-bg);\n}\n\n.oc-icon-button--link {\n color: var(--oc-accent);\n}\n\n.oc-icon-button--link:hover:not(:disabled) {\n color: var(--oc-accent-hover);\n}\n\n.oc-icon-button--disabled,\n.oc-icon-button:disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-icon-button--loading {\n cursor: wait;\n}\n\n.oc-icon-button__spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* ButtonGroup */\n.oc-button-group {\n display: inline-flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-button-group--attached {\n gap: 0;\n}\n\n.oc-button-group--attached > .oc-button {\n border-radius: 0;\n}\n\n.oc-button-group--attached > .oc-button:first-child {\n border-radius: var(--oc-radius-md) 0 0 var(--oc-radius-md);\n}\n\n.oc-button-group--attached > .oc-button:last-child {\n border-radius: 0 var(--oc-radius-md) var(--oc-radius-md) 0;\n}\n\n.oc-button-group--attached > .oc-button--secondary:not(:first-child) {\n border-left: none;\n}\n\n\n\n/* Input wrapper */\n.oc-input-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-input-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Input container */\n.oc-input-container {\n display: flex;\n align-items: stretch;\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n overflow: hidden;\n}\n\n.oc-input-container:focus-within {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-input-container--error {\n border-color: var(--oc-error);\n}\n\n.oc-input-container--error:focus-within {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-input-container--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-input-container--sm {\n min-height: 32px;\n}\n\n.oc-input-container--md {\n min-height: 36px;\n}\n\n.oc-input-container--lg {\n min-height: 44px;\n}\n\n/* Field wrapper */\n.oc-input-field {\n display: flex;\n align-items: center;\n flex: 1;\n position: relative;\n}\n\n/* Input element */\n.oc-input {\n flex: 1;\n width: 100%;\n height: 100%;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n padding: 0 var(--oc-spacing-sm);\n outline: none;\n}\n\n.oc-input-container--sm .oc-input {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-input-container--lg .oc-input {\n font-size: var(--oc-font-size-md);\n padding: 0 var(--oc-spacing-md);\n}\n\n.oc-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-input:disabled {\n cursor: not-allowed;\n}\n\n.oc-input--has-left-icon {\n padding-left: calc(var(--oc-spacing-sm) + 24px);\n}\n\n.oc-input--has-right-icon {\n padding-right: calc(var(--oc-spacing-sm) + 24px);\n}\n\n/* Icons */\n.oc-input-icon {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n pointer-events: none;\n}\n\n.oc-input-icon--left {\n left: var(--oc-spacing-sm);\n}\n\n.oc-input-icon--right {\n right: var(--oc-spacing-sm);\n}\n\n.oc-input-icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Addons */\n.oc-input-addon {\n display: flex;\n align-items: center;\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-surface);\n color: var(--oc-fg-secondary);\n font-size: var(--oc-font-size-sm);\n border-color: inherit;\n white-space: nowrap;\n}\n\n.oc-input-addon--left {\n border-right: 1px solid var(--oc-border-default);\n}\n\n.oc-input-addon--right {\n border-left: 1px solid var(--oc-border-default);\n}\n\n/* Helper and error text */\n.oc-input-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-input-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Textarea wrapper */\n.oc-textarea-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-textarea-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-textarea-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Textarea element */\n.oc-textarea {\n width: 100%;\n padding: var(--oc-spacing-sm);\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n line-height: var(--oc-line-height-normal);\n color: var(--oc-fg-primary);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n resize: vertical;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-textarea:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-textarea::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n.oc-textarea--error {\n border-color: var(--oc-error);\n}\n\n.oc-textarea--error:focus {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-textarea--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n resize: none;\n}\n\n.oc-textarea--auto-resize {\n resize: none;\n overflow-y: hidden;\n}\n\n/* Helper and error text */\n.oc-textarea-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-textarea-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Select wrapper */\n.oc-select-wrapper {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n position: relative;\n}\n\n.oc-select-wrapper--full-width {\n width: 100%;\n}\n\n/* Label */\n.oc-select-label {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n/* Trigger */\n.oc-select-trigger {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n cursor: pointer;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger:focus {\n outline: none;\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--sm {\n min-height: 32px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-select-trigger--md {\n min-height: 36px;\n padding: 0 var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-select-trigger--lg {\n min-height: 44px;\n padding: 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-md);\n}\n\n.oc-select-trigger--open {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-select-trigger--error {\n border-color: var(--oc-error);\n}\n\n.oc-select-trigger--error:focus,\n.oc-select-trigger--error.oc-select-trigger--open {\n border-color: var(--oc-error);\n box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);\n}\n\n.oc-select-trigger--disabled {\n background: var(--oc-bg-surface);\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Value and placeholder */\n.oc-select-value {\n flex: 1;\n color: var(--oc-fg-primary);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-select-placeholder {\n flex: 1;\n color: var(--oc-fg-tertiary);\n}\n\n/* Search input */\n.oc-select-search {\n flex: 1;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: inherit;\n color: var(--oc-fg-primary);\n outline: none;\n min-width: 0;\n}\n\n.oc-select-search::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Indicators */\n.oc-select-indicators {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n flex-shrink: 0;\n}\n\n.oc-select-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n padding: 0;\n}\n\n.oc-select-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n.oc-select-chevron {\n color: var(--oc-fg-tertiary);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-trigger--open .oc-select-chevron {\n transform: rotate(180deg);\n}\n\n/* Dropdown */\n.oc-select-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 240px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n list-style: none;\n}\n\n/* Option */\n.oc-select-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n border-radius: var(--oc-radius-sm);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-select-option:hover,\n.oc-select-option--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-select-option--selected {\n color: var(--oc-accent);\n font-weight: 500;\n}\n\n.oc-select-option--disabled {\n color: var(--oc-fg-tertiary);\n cursor: not-allowed;\n}\n\n.oc-select-option--disabled:hover {\n background: transparent;\n}\n\n.oc-select-check {\n flex-shrink: 0;\n color: var(--oc-accent);\n}\n\n/* Option group */\n.oc-select-group {\n list-style: none;\n}\n\n.oc-select-group:not(:first-child) {\n margin-top: var(--oc-spacing-xs);\n padding-top: var(--oc-spacing-xs);\n border-top: 1px solid var(--oc-border-default);\n}\n\n.oc-select-group-label {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-select-group-options {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Empty state */\n.oc-select-empty {\n padding: var(--oc-spacing-md);\n text-align: center;\n color: var(--oc-fg-tertiary);\n font-size: var(--oc-font-size-sm);\n}\n\n/* Helper and error text */\n.oc-select-helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n.oc-select-error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Checkbox wrapper */\n.oc-checkbox-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-checkbox-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-checkbox-wrapper--error .oc-checkbox-box {\n border-color: var(--oc-error);\n}\n\n/* Checkbox box */\n.oc-checkbox-box {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-sm);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-checkbox-box--checked,\n.oc-checkbox-box--indeterminate {\n background: var(--oc-accent);\n border-color: var(--oc-accent);\n}\n\n.oc-checkbox-wrapper:hover:not(.oc-checkbox-wrapper--disabled) .oc-checkbox-box:not(.oc-checkbox-box--checked):not(.oc-checkbox-box--indeterminate) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-checkbox-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-checkbox-input:focus-visible + .oc-checkbox-icon,\n.oc-checkbox-box:has(.oc-checkbox-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Check icon */\n.oc-checkbox-icon {\n width: 12px;\n height: 12px;\n color: var(--oc-fg-inverse);\n pointer-events: none;\n}\n\n/* Label */\n.oc-checkbox-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Checkbox group */\n.oc-checkbox-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-checkbox-group--vertical {\n flex-direction: column;\n}\n\n.oc-checkbox-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Radio wrapper */\n.oc-radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-radio-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-radio-wrapper--error .oc-radio-circle {\n border-color: var(--oc-error);\n}\n\n/* Radio circle */\n.oc-radio-circle {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n border: 1.5px solid var(--oc-border-strong);\n border-radius: var(--oc-radius-full);\n background: var(--oc-bg-canvas);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-radio-circle--checked {\n border-color: var(--oc-accent);\n}\n\n.oc-radio-wrapper:hover:not(.oc-radio-wrapper--disabled) .oc-radio-circle:not(.oc-radio-circle--checked) {\n border-color: var(--oc-accent);\n}\n\n/* Hidden input */\n.oc-radio-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-radio-circle:has(.oc-radio-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Dot */\n.oc-radio-dot {\n width: 6px;\n height: 6px;\n border-radius: var(--oc-radius-full);\n background: var(--oc-accent);\n}\n\n/* Label */\n.oc-radio-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n/* Radio group */\n.oc-radio-group {\n display: flex;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-radio-group--vertical {\n flex-direction: column;\n}\n\n.oc-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n\n\n/* Toggle wrapper */\n.oc-toggle-wrapper {\n display: inline-flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n cursor: pointer;\n user-select: none;\n}\n\n.oc-toggle-wrapper--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n/* Toggle track */\n.oc-toggle-track {\n position: relative;\n display: inline-flex;\n align-items: center;\n background: var(--oc-border-default);\n border-radius: var(--oc-radius-full);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-toggle-track--sm {\n width: 28px;\n height: 16px;\n}\n\n.oc-toggle-track--md {\n width: 36px;\n height: 20px;\n}\n\n.oc-toggle-track--lg {\n width: 44px;\n height: 24px;\n}\n\n.oc-toggle-track--checked {\n background: var(--oc-accent);\n}\n\n.oc-toggle-track--error {\n background: var(--oc-error);\n}\n\n.oc-toggle-wrapper:hover:not(.oc-toggle-wrapper--disabled) .oc-toggle-track:not(.oc-toggle-track--checked) {\n background: var(--oc-border-strong);\n}\n\n/* Hidden input */\n.oc-toggle-input {\n position: absolute;\n width: 100%;\n height: 100%;\n opacity: 0;\n margin: 0;\n cursor: inherit;\n}\n\n.oc-toggle-track:has(.oc-toggle-input:focus-visible) {\n outline: 2px solid var(--oc-accent);\n outline-offset: 2px;\n}\n\n/* Toggle thumb */\n.oc-toggle-thumb {\n position: absolute;\n background: var(--oc-fg-inverse);\n border-radius: var(--oc-radius-full);\n box-shadow: var(--oc-shadow-sm);\n transition: transform var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toggle-track--sm .oc-toggle-thumb {\n width: 12px;\n height: 12px;\n left: 2px;\n}\n\n.oc-toggle-track--md .oc-toggle-thumb {\n width: 16px;\n height: 16px;\n left: 2px;\n}\n\n.oc-toggle-track--lg .oc-toggle-thumb {\n width: 20px;\n height: 20px;\n left: 2px;\n}\n\n.oc-toggle-track--checked.oc-toggle-track--sm .oc-toggle-thumb {\n transform: translateX(12px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--md .oc-toggle-thumb {\n transform: translateX(16px);\n}\n\n.oc-toggle-track--checked.oc-toggle-track--lg .oc-toggle-thumb {\n transform: translateX(20px);\n}\n\n/* Content */\n.oc-toggle-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-toggle-label {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toggle-description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n line-height: var(--oc-line-height-tight);\n}\n\n\n\n/* Form field */\n.oc-form-field {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Label */\n.oc-form-field__label {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n}\n\n.oc-form-field__required {\n color: var(--oc-error);\n}\n\n.oc-form-field__optional {\n font-weight: 400;\n color: var(--oc-fg-tertiary);\n}\n\n/* Control */\n.oc-form-field__control {\n display: flex;\n flex-direction: column;\n}\n\n/* Helper text */\n.oc-form-field__helper {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n margin: 0;\n}\n\n/* Error text */\n.oc-form-field__error {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-error);\n margin: 0;\n}\n\n\n\n/* Toast container */\n.oc-toast-container {\n position: fixed;\n z-index: var(--oc-z-tooltip);\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-md);\n pointer-events: none;\n max-width: 420px;\n width: 100%;\n}\n\n.oc-toast-container--top-right {\n top: 0;\n right: 0;\n}\n\n.oc-toast-container--top-left {\n top: 0;\n left: 0;\n}\n\n.oc-toast-container--bottom-right {\n bottom: 0;\n right: 0;\n}\n\n.oc-toast-container--bottom-left {\n bottom: 0;\n left: 0;\n}\n\n.oc-toast-container--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.oc-toast-container--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/* Toast */\n.oc-toast {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n box-shadow: var(--oc-shadow-lg);\n pointer-events: auto;\n animation: oc-slide-up-fade var(--oc-duration-normal) var(--oc-easing-enter);\n}\n\n/* Toast icon */\n.oc-toast__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-toast--success .oc-toast__icon {\n color: var(--oc-success);\n}\n\n.oc-toast--error .oc-toast__icon {\n color: var(--oc-error);\n}\n\n.oc-toast--warning .oc-toast__icon {\n color: var(--oc-warning);\n}\n\n.oc-toast--info .oc-toast__icon {\n color: var(--oc-accent);\n}\n\n/* Toast content */\n.oc-toast__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-toast__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-toast__description {\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n margin-top: 2px;\n}\n\n/* Toast action */\n.oc-toast__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n/* Toast close button */\n.oc-toast__close {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-toast__close:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n\n\n/* Skeleton base */\n.oc-skeleton {\n background: var(--oc-bg-surface);\n display: block;\n}\n\n/* Variants */\n.oc-skeleton--text {\n height: 1em;\n border-radius: var(--oc-radius-sm);\n transform-origin: 0 55%;\n transform: scale(1, 0.8);\n}\n\n.oc-skeleton--circular {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-skeleton--rectangular {\n border-radius: 0;\n}\n\n.oc-skeleton--rounded {\n border-radius: var(--oc-radius-md);\n}\n\n/* Animations */\n.oc-skeleton--pulse {\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.oc-skeleton--wave {\n position: relative;\n overflow: hidden;\n}\n\n.oc-skeleton--wave::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.5),\n transparent\n );\n animation: oc-skeleton-wave 1.5s linear infinite;\n}\n\n@keyframes oc-skeleton-wave {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n/* Skeleton text */\n.oc-skeleton-text {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n}\n\n/* Document card skeleton */\n.oc-skeleton-document-card {\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-lg);\n overflow: hidden;\n width: 200px;\n}\n\n.oc-skeleton-document-card__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm);\n}\n\n/* Table row skeleton */\n.oc-skeleton-table-row {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-md);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-bottom: 1px solid var(--oc-border-default);\n}\n\n.oc-skeleton-table-row > .oc-skeleton {\n flex: 1;\n}\n\n/* Chat message skeleton */\n.oc-skeleton-chat-message {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n}\n\n.oc-skeleton-chat-message__content {\n display: flex;\n flex-direction: column;\n gap: var(--oc-spacing-xs);\n flex: 1;\n}\n\n\n\n/* Search input wrapper */\n.oc-search-input-wrapper {\n position: relative;\n display: inline-flex;\n flex-direction: column;\n}\n\n.oc-search-input-wrapper--full-width {\n width: 100%;\n}\n\n/* Search input container */\n.oc-search-input-container {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n padding: 0 var(--oc-spacing-sm);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n min-height: 36px;\n transition: border-color var(--oc-duration-fast) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-container--focused {\n border-color: var(--oc-accent);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n/* Search icon */\n.oc-search-input-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-spinner {\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n/* Input field */\n.oc-search-input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n outline: none;\n}\n\n.oc-search-input::placeholder {\n color: var(--oc-fg-tertiary);\n}\n\n/* Clear button */\n.oc-search-input-clear {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-search-input-clear:hover {\n background: var(--oc-bg-surface);\n color: var(--oc-fg-primary);\n}\n\n/* Shortcut badge */\n.oc-search-input-shortcut {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 2px 6px;\n font-family: inherit;\n font-size: var(--oc-font-size-xs);\n color: var(--oc-fg-tertiary);\n background: var(--oc-bg-surface);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-sm);\n flex-shrink: 0;\n}\n\n/* Dropdown */\n.oc-search-input-dropdown {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n margin-top: var(--oc-spacing-xs);\n padding: var(--oc-spacing-xs);\n background: var(--oc-bg-canvas);\n border: 1px solid var(--oc-border-default);\n border-radius: var(--oc-radius-md);\n box-shadow: var(--oc-shadow-lg);\n max-height: 300px;\n overflow-y: auto;\n z-index: var(--oc-z-dropdown);\n}\n\n.oc-search-input-dropdown-header {\n padding: var(--oc-spacing-xs) var(--oc-spacing-sm);\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.oc-search-input-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n padding: var(--oc-spacing-sm);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-primary);\n text-align: left;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-search-input-dropdown-item:hover,\n.oc-search-input-dropdown-item--highlighted {\n background: var(--oc-bg-surface);\n}\n\n.oc-search-input-dropdown-item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary);\n flex-shrink: 0;\n}\n\n.oc-search-input-dropdown-item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n\n\n/* Progress bar */\n.oc-progress {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n width: 100%;\n}\n\n.oc-progress__track {\n flex: 1;\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-full);\n overflow: hidden;\n}\n\n.oc-progress--sm .oc-progress__track {\n height: 4px;\n}\n\n.oc-progress--md .oc-progress__track {\n height: 6px;\n}\n\n.oc-progress--lg .oc-progress__track {\n height: 8px;\n}\n\n.oc-progress__bar {\n height: 100%;\n border-radius: var(--oc-radius-full);\n transition: width var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress--accent .oc-progress__bar {\n background: var(--oc-accent);\n}\n\n.oc-progress--success .oc-progress__bar {\n background: var(--oc-success);\n}\n\n.oc-progress--warning .oc-progress__bar {\n background: var(--oc-warning);\n}\n\n.oc-progress--error .oc-progress__bar {\n background: var(--oc-error);\n}\n\n/* Indeterminate animation */\n.oc-progress--indeterminate .oc-progress__bar {\n width: 30%;\n animation: oc-progress-indeterminate 1.5s ease-in-out infinite;\n}\n\n@keyframes oc-progress-indeterminate {\n 0% {\n transform: translateX(-100%);\n }\n 50% {\n transform: translateX(200%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}\n\n.oc-progress__label {\n font-size: var(--oc-font-size-xs);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n min-width: 3ch;\n text-align: right;\n}\n\n/* Progress circle */\n.oc-progress-circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-progress-circle__track {\n stroke: var(--oc-bg-surface);\n}\n\n.oc-progress-circle__bar {\n transition: stroke-dashoffset var(--oc-duration-slow) var(--oc-easing-default);\n}\n\n.oc-progress-circle--accent .oc-progress-circle__bar {\n stroke: var(--oc-accent);\n}\n\n.oc-progress-circle--success .oc-progress-circle__bar {\n stroke: var(--oc-success);\n}\n\n.oc-progress-circle--warning .oc-progress-circle__bar {\n stroke: var(--oc-warning);\n}\n\n.oc-progress-circle--error .oc-progress-circle__bar {\n stroke: var(--oc-error);\n}\n\n.oc-progress-circle__label {\n position: absolute;\n font-size: var(--oc-font-size-xs);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Spinner */\n.oc-spinner {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-accent);\n animation: oc-spin var(--oc-duration-spin) linear infinite;\n}\n\n\n\n/* Empty state */\n.oc-empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n padding: var(--oc-spacing-xl);\n}\n\n/* Sizes */\n.oc-empty-state--sm {\n padding: var(--oc-spacing-md);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon {\n margin-bottom: var(--oc-spacing-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__icon svg {\n width: 32px;\n height: 32px;\n}\n\n.oc-empty-state--sm .oc-empty-state__title {\n font-size: var(--oc-font-size-sm);\n}\n\n.oc-empty-state--sm .oc-empty-state__description {\n font-size: var(--oc-font-size-xs);\n}\n\n.oc-empty-state--md {\n padding: var(--oc-spacing-xl);\n}\n\n.oc-empty-state--lg {\n padding: var(--oc-spacing-2xl);\n}\n\n.oc-empty-state--lg .oc-empty-state__icon svg {\n width: 64px;\n height: 64px;\n}\n\n.oc-empty-state--lg .oc-empty-state__title {\n font-size: var(--oc-font-size-xl);\n}\n\n/* Icon */\n.oc-empty-state__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: var(--oc-spacing-md);\n color: var(--oc-fg-tertiary);\n}\n\n.oc-empty-state__icon svg {\n width: 48px;\n height: 48px;\n}\n\n/* Title */\n.oc-empty-state__title {\n margin: 0 0 var(--oc-spacing-xs);\n font-size: var(--oc-font-size-md);\n font-weight: 600;\n color: var(--oc-fg-primary);\n}\n\n/* Description */\n.oc-empty-state__description {\n margin: 0 0 var(--oc-spacing-md);\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n max-width: 320px;\n}\n\n/* Actions */\n.oc-empty-state__actions {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex-wrap: wrap;\n justify-content: center;\n}\n\n\n\n/* Alert */\n.oc-alert {\n display: flex;\n align-items: flex-start;\n gap: var(--oc-spacing-sm);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border-radius: var(--oc-radius-md);\n border: 1px solid;\n}\n\n.oc-alert--info {\n background: rgba(8, 145, 178, 0.06);\n border-color: rgba(8, 145, 178, 0.2);\n}\n\n.oc-alert--success {\n background: var(--oc-success-bg);\n border-color: rgba(5, 150, 105, 0.2);\n}\n\n.oc-alert--warning {\n background: var(--oc-warning-bg);\n border-color: rgba(217, 119, 6, 0.2);\n}\n\n.oc-alert--error {\n background: var(--oc-error-bg);\n border-color: rgba(220, 38, 38, 0.2);\n}\n\n.oc-alert__icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-top: 2px;\n}\n\n.oc-alert--info .oc-alert__icon {\n color: var(--oc-accent);\n}\n\n.oc-alert--success .oc-alert__icon {\n color: var(--oc-success);\n}\n\n.oc-alert--warning .oc-alert__icon {\n color: var(--oc-warning);\n}\n\n.oc-alert--error .oc-alert__icon {\n color: var(--oc-error);\n}\n\n.oc-alert__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-alert__title {\n font-size: var(--oc-font-size-sm);\n font-weight: 600;\n color: var(--oc-fg-primary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__description {\n font-size: var(--oc-font-size-sm);\n color: var(--oc-fg-secondary);\n line-height: var(--oc-line-height-tight);\n}\n\n.oc-alert__title + .oc-alert__description {\n margin-top: 2px;\n}\n\n.oc-alert__action {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n}\n\n.oc-alert__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: var(--oc-fg-tertiary);\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-alert__dismiss:hover {\n background: rgba(0, 0, 0, 0.05);\n color: var(--oc-fg-primary);\n}\n\n/* Banner */\n.oc-banner {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n width: 100%;\n}\n\n.oc-banner--info {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--success {\n background: var(--oc-success);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--warning {\n background: var(--oc-warning);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner--error {\n background: var(--oc-error);\n color: var(--oc-fg-inverse);\n}\n\n.oc-banner__content {\n display: flex;\n align-items: center;\n gap: var(--oc-spacing-sm);\n flex: 1;\n justify-content: center;\n}\n\n.oc-banner__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-banner__text {\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n}\n\n.oc-banner__action {\n display: flex;\n align-items: center;\n}\n\n.oc-banner__action button,\n.oc-banner__action a {\n color: inherit;\n text-decoration: underline;\n font-weight: 600;\n}\n\n.oc-banner__dismiss {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--oc-radius-sm);\n opacity: 0.8;\n transition: opacity var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-banner__dismiss:hover {\n opacity: 1;\n}\n\n\n\n/* Tabs container */\n.oc-tabs {\n display: flex;\n flex-direction: column;\n}\n\n.oc-tabs--vertical {\n flex-direction: row;\n}\n\n/* Tab list */\n.oc-tab-list {\n display: flex;\n gap: var(--oc-spacing-xs);\n}\n\n.oc-tabs--horizontal .oc-tab-list {\n flex-direction: row;\n}\n\n.oc-tabs--vertical .oc-tab-list {\n flex-direction: column;\n border-right: 1px solid var(--oc-border-default);\n padding-right: var(--oc-spacing-sm);\n margin-right: var(--oc-spacing-md);\n}\n\n/* Line variant */\n.oc-tabs--line .oc-tab-list {\n border-bottom: 1px solid var(--oc-border-default);\n gap: 0;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab-list {\n border-bottom: none;\n border-right: 1px solid var(--oc-border-default);\n}\n\n/* Tab button */\n.oc-tab {\n display: inline-flex;\n align-items: center;\n gap: var(--oc-spacing-xs);\n padding: var(--oc-spacing-sm) var(--oc-spacing-md);\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-sm);\n font-weight: 500;\n color: var(--oc-fg-secondary);\n cursor: pointer;\n transition: all var(--oc-duration-fast) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-tab:hover:not(.oc-tab--disabled) {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--selected {\n color: var(--oc-fg-primary);\n}\n\n.oc-tab--disabled {\n opacity: var(--oc-opacity-disabled);\n cursor: not-allowed;\n}\n\n.oc-tab:focus-visible {\n outline: 2px solid var(--oc-accent);\n outline-offset: -2px;\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n/* Line variant tab */\n.oc-tabs--line .oc-tab {\n position: relative;\n border-radius: 0;\n margin-bottom: -1px;\n}\n\n.oc-tabs--line .oc-tab::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: transparent;\n transition: background-color var(--oc-duration-fast) var(--oc-easing-default);\n}\n\n.oc-tabs--line .oc-tab--selected::after {\n background: var(--oc-accent);\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab {\n margin-bottom: 0;\n margin-right: -1px;\n}\n\n.oc-tabs--line.oc-tabs--vertical .oc-tab::after {\n bottom: auto;\n left: auto;\n top: 0;\n right: 0;\n width: 2px;\n height: 100%;\n}\n\n/* Enclosed variant */\n.oc-tabs--enclosed .oc-tab-list {\n background: var(--oc-bg-surface);\n border-radius: var(--oc-radius-md);\n padding: var(--oc-spacing-xs);\n}\n\n.oc-tabs--enclosed .oc-tab {\n border-radius: var(--oc-radius-sm);\n}\n\n.oc-tabs--enclosed .oc-tab--selected {\n background: var(--oc-bg-canvas);\n box-shadow: var(--oc-shadow-sm);\n}\n\n/* Pills variant */\n.oc-tabs--pills .oc-tab {\n border-radius: var(--oc-radius-full);\n}\n\n.oc-tabs--pills .oc-tab--selected {\n background: var(--oc-accent);\n color: var(--oc-fg-inverse);\n}\n\n.oc-tabs--pills .oc-tab:hover:not(.oc-tab--disabled):not(.oc-tab--selected) {\n background: var(--oc-bg-surface);\n}\n\n/* Tab panels */\n.oc-tab-panels {\n flex: 1;\n}\n\n.oc-tab-panel {\n padding: var(--oc-spacing-md) 0;\n}\n\n.oc-tabs--vertical .oc-tab-panel {\n padding: 0;\n}\n\n.oc-tab-panel:focus {\n outline: none;\n}\n\n\n\n/* ============ Research Card Container ============ */\n.oc-research-card {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-research-card__header {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-research-card__back {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n flex-shrink: 0;\n}\n\n.oc-research-card__back:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-research-card__title {\n flex: 1;\n margin: 0;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-card__actions {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-research-card__content {\n flex: 1;\n padding: 20px;\n overflow-y: auto;\n}\n\n/* ============ User Question ============ */\n.oc-user-question {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n margin-bottom: 20px;\n}\n\n.oc-user-question__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-user-question__text {\n flex: 1;\n font-size: 15px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #0F172A);\n padding-top: 4px;\n}\n\n/* ============ AI Response ============ */\n.oc-ai-response {\n margin-bottom: 20px;\n}\n\n.oc-ai-response__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 12px;\n}\n\n.oc-ai-response__avatar {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-ai-response__avatar-icon {\n width: 28px;\n height: 28px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-md, 6px);\n background: var(--oc-fg-primary, #0F172A);\n color: white;\n font-size: 14px;\n font-weight: 700;\n}\n\n.oc-ai-response__status {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: default;\n transition: all 0.15s ease;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status {\n cursor: pointer;\n}\n\n.oc-ai-response--expandable .oc-ai-response__status:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-ai-response__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-ai-response__status-text {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-ai-response--researching .oc-ai-response__status-text {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-ai-response--error .oc-ai-response__status-text {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-ai-response__chevron {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-ai-response--expanded .oc-ai-response__chevron {\n transform: rotate(180deg);\n}\n\n.oc-ai-response__sources {\n margin-bottom: 16px;\n margin-left: 42px;\n}\n\n.oc-ai-response__content {\n margin-left: 42px;\n}\n\n/* ============ Sources Badge ============ */\n.oc-sources-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n background: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-sources-badge:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-sources-badge__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n overflow: hidden;\n}\n\n.oc-sources-badge__icon img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n}\n\n.oc-sources-badge__text {\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-sources-badge__arrow {\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.15s ease;\n}\n\n.oc-sources-badge:hover .oc-sources-badge__arrow {\n transform: translateX(2px);\n}\n\n/* ============ Research Section ============ */\n.oc-research-section {\n margin-bottom: 24px;\n}\n\n.oc-research-section:last-child {\n margin-bottom: 0;\n}\n\n.oc-research-section__heading {\n margin: 0 0 12px;\n font-size: 17px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-research-section__body {\n font-size: 15px;\n line-height: 1.7;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-research-section__body p {\n margin: 0 0 12px;\n}\n\n.oc-research-section__body p:last-child {\n margin-bottom: 0;\n}\n\n/* ============ Steps List ============ */\n.oc-steps-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n margin-bottom: 16px;\n}\n\n.oc-steps-list__item {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px;\n border-radius: var(--oc-radius-sm, 4px);\n}\n\n.oc-steps-list__indicator {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-steps-list__number {\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-tertiary, #94A3B8);\n font-size: 11px;\n font-weight: 600;\n}\n\n.oc-steps-list__item--completed .oc-steps-list__indicator {\n color: var(--oc-success, #059669);\n}\n\n.oc-steps-list__item--running .oc-steps-list__indicator {\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-steps-list__item--error .oc-steps-list__indicator {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-steps-list__spinner {\n width: 14px;\n height: 14px;\n border: 2px solid var(--oc-border-default, #E2E8F0);\n border-top-color: var(--oc-accent, #0891B2);\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-steps-list__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-steps-list__label {\n display: block;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n line-height: 1.4;\n}\n\n.oc-steps-list__item--pending .oc-steps-list__label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-steps-list__desc {\n display: block;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n\n\n/* ============ Project Picker Container ============ */\n.oc-project-picker {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n.oc-project-picker__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n padding: 16px 20px;\n border: none;\n border-bottom: 1px solid transparent;\n background: transparent;\n cursor: pointer;\n text-align: left;\n transition: all 0.15s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__header {\n border-bottom-color: var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-picker__header:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-picker__header-content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-picker__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-project-picker__subtitle {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-picker__chevron {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: transform 0.2s ease;\n}\n\n.oc-project-picker--open .oc-project-picker__chevron {\n transform: rotate(180deg);\n}\n\n.oc-project-picker__list {\n display: flex;\n flex-direction: column;\n padding: 8px;\n}\n\n/* ============ Project Item ============ */\n.oc-project-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 12px 14px;\n border-radius: var(--oc-radius-md, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n outline: none;\n}\n\n.oc-project-item:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-project-item:focus-visible {\n box-shadow: 0 0 0 2px var(--oc-accent, #0891B2);\n}\n\n.oc-project-item--selected {\n background: var(--oc-bg-surface, #F8FAFC);\n box-shadow: inset 0 0 0 1px var(--oc-border-default, #E2E8F0);\n}\n\n.oc-project-item--selected:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-project-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-project-item__name {\n font-size: 15px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__desc {\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-project-item__icon {\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n transition: color 0.15s ease;\n}\n\n.oc-project-item:hover .oc-project-item__icon {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-project-item--selected .oc-project-item__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n/* ============ Project Search ============ */\n.oc-project-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 14px;\n margin: 8px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-project-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-project-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-project-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-project-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Sources Panel Container ============ */\n.oc-sources-panel {\n display: flex;\n flex-direction: column;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-lg, 8px);\n box-shadow: var(--oc-shadow-lg);\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n/* ============ Panel Tabs ============ */\n.oc-panel-tabs {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 12px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-panel-tab {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n border: 1px solid transparent;\n border-bottom: none;\n border-radius: var(--oc-radius-md, 6px) var(--oc-radius-md, 6px) 0 0;\n background: transparent;\n color: var(--oc-fg-secondary, #475569);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: -1px;\n}\n\n.oc-panel-tab:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab--selected {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-border-default, #E2E8F0);\n border-bottom-color: var(--oc-bg-canvas, #FFFFFF);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 18px;\n height: 18px;\n color: currentColor;\n}\n\n.oc-panel-tab__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-panel-tab__label {\n white-space: nowrap;\n}\n\n/* ============ Panel Search ============ */\n.oc-panel-search {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n margin: 12px;\n background: var(--oc-bg-surface, #F8FAFC);\n border-radius: var(--oc-radius-md, 6px);\n border: 1px solid transparent;\n transition: all 0.15s ease;\n}\n\n.oc-panel-search:focus-within {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-accent, #0891B2);\n box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15);\n}\n\n.oc-panel-search__icon {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-search__input {\n flex: 1;\n min-width: 0;\n padding: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 14px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-panel-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Action List ============ */\n.oc-panel-action-list {\n display: flex;\n flex-direction: column;\n padding: 0 8px 8px;\n}\n\n/* ============ Panel Action ============ */\n.oc-panel-action {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n padding: 12px 14px;\n border: none;\n border-radius: var(--oc-radius-md, 6px);\n background: transparent;\n text-align: left;\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-panel-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n}\n\n.oc-panel-action:active {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-panel-action--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.oc-panel-action--disabled:hover {\n background: transparent;\n}\n\n.oc-panel-action__icon {\n flex-shrink: 0;\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--oc-radius-sm, 4px);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-panel-action__icon svg {\n width: 20px;\n height: 20px;\n}\n\n.oc-panel-action__icon img {\n width: 20px;\n height: 20px;\n object-fit: contain;\n}\n\n.oc-panel-action__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.oc-panel-action__label {\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-panel-action__desc {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* ============ Panel Section ============ */\n.oc-panel-section {\n padding: 0 12px 12px;\n}\n\n.oc-panel-section__title {\n margin: 0 0 8px;\n padding: 0 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-panel-section__content {\n display: flex;\n flex-direction: column;\n}\n\n/* ============ Integration Colors ============ */\n.oc-panel-action--docvault .oc-panel-action__icon {\n color: #E85B5B;\n}\n\n.oc-panel-action--filenexus .oc-panel-action__icon {\n color: #1B4F72;\n}\n\n.oc-panel-action--clouddrive .oc-panel-action__icon {\n color: #038387;\n}\n\n.oc-panel-action--upload .oc-panel-action__icon {\n color: var(--oc-accent, #0891B2);\n}\n\n\n\n/* ============ Hero Container ============ */\n.oc-hero {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: linear-gradient(180deg, rgba(8, 145, 178, 0.03) 0%, transparent 100%);\n}\n\n.oc-hero__inner {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n/* Size variants */\n.oc-hero--sm {\n padding: 48px 24px;\n}\n\n.oc-hero--md {\n padding: 80px 24px;\n}\n\n.oc-hero--lg {\n padding: 120px 24px;\n}\n\n/* Layout variants */\n.oc-hero--centered {\n text-align: center;\n}\n\n.oc-hero--centered .oc-hero__inner {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.oc-hero--split .oc-hero__inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n align-items: center;\n}\n\n/* ============ Hero Decorations ============ */\n.oc-hero__decorations {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n}\n\n.oc-hero:not(.oc-hero--with-decorations) .oc-hero__decorations {\n display: none;\n}\n\n.oc-hero__decoration {\n position: absolute;\n color: var(--oc-accent, #0891B2);\n opacity: 0.08;\n}\n\n.oc-hero__decoration--1 {\n top: 15%;\n left: 10%;\n animation: oc-hero-float 8s ease-in-out infinite;\n}\n\n.oc-hero__decoration--2 {\n top: 40%;\n left: 5%;\n opacity: 0.06;\n animation: oc-hero-float 10s ease-in-out infinite reverse;\n}\n\n.oc-hero__decoration--3 {\n top: 20%;\n right: 8%;\n opacity: 0.05;\n animation: oc-hero-float 9s ease-in-out infinite;\n}\n\n.oc-hero__decoration--4 {\n top: 50%;\n right: 12%;\n opacity: 0.07;\n animation: oc-hero-float 11s ease-in-out infinite reverse;\n}\n\n@keyframes oc-hero-float {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(5deg); }\n}\n\n/* ============ Hero Badge ============ */\n.oc-hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-sm);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 24px;\n}\n\n.oc-hero-badge__icon {\n display: flex;\n align-items: center;\n color: var(--oc-accent, #0891B2);\n}\n\n.oc-hero-badge__text {\n white-space: nowrap;\n}\n\n/* ============ Hero Title ============ */\n.oc-hero-title {\n margin: 0 0 16px;\n font-size: 48px;\n font-weight: 700;\n line-height: 1.2;\n color: var(--oc-fg-primary, #0F172A);\n letter-spacing: -0.02em;\n}\n\n.oc-hero-title--gradient {\n background: linear-gradient(135deg, var(--oc-fg-primary, #0F172A) 0%, var(--oc-accent, #0891B2) 100%);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n/* ============ Hero Subtitle ============ */\n.oc-hero-subtitle {\n margin: 0 0 32px;\n max-width: 560px;\n font-size: 17px;\n line-height: 1.6;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-hero--centered .oc-hero-subtitle {\n margin-left: auto;\n margin-right: auto;\n}\n\n/* ============ Hero Search ============ */\n.oc-hero-search {\n display: flex;\n align-items: center;\n gap: 12px;\n width: 100%;\n max-width: 600px;\n padding: 8px 8px 8px 20px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border-radius: var(--oc-radius-full, 9999px);\n box-shadow: var(--oc-shadow-lg);\n margin-bottom: 24px;\n}\n\n.oc-hero-search__input {\n flex: 1;\n min-width: 0;\n padding: 8px 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: 15px;\n color: var(--oc-fg-primary, #0F172A);\n outline: none;\n}\n\n.oc-hero-search__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-hero-search__button {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 12px 20px;\n background: var(--oc-accent, #0891B2);\n color: white;\n border: none;\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n}\n\n.oc-hero-search__button:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0E7490);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-accent);\n}\n\n.oc-hero-search__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.oc-hero-search__spinner {\n width: 16px;\n height: 16px;\n border: 2px solid rgba(255, 255, 255, 0.3);\n border-top-color: white;\n border-radius: 50%;\n animation: oc-spin 0.8s linear infinite;\n}\n\n.oc-hero-search--loading {\n opacity: 0.8;\n}\n\n/* ============ Hero Actions ============ */\n.oc-hero-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-hero--split .oc-hero-actions {\n justify-content: flex-start;\n}\n\n/* ============ Hero Action Button ============ */\n.oc-hero-action {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 6px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-hero-action:hover {\n background: var(--oc-bg-surface, #F8FAFC);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #0F172A);\n}\n\n.oc-hero-action__icon {\n display: flex;\n align-items: center;\n color: currentColor;\n}\n\n/* ============ Hero Content (for split layout) ============ */\n.oc-hero-content {\n display: flex;\n flex-direction: column;\n}\n\n.oc-hero-content--left {\n align-items: flex-start;\n text-align: left;\n}\n\n.oc-hero-content--center {\n align-items: center;\n text-align: center;\n}\n\n.oc-hero-content--right {\n align-items: flex-end;\n text-align: right;\n}\n\n/* ============ Hero Media ============ */\n.oc-hero-media {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-hero-media img,\n.oc-hero-media svg {\n max-width: 100%;\n height: auto;\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 1024px) {\n .oc-hero--split .oc-hero__inner {\n grid-template-columns: 1fr;\n gap: 32px;\n text-align: center;\n }\n\n .oc-hero--split .oc-hero-content {\n align-items: center;\n }\n\n .oc-hero--split .oc-hero-actions {\n justify-content: center;\n }\n\n .oc-hero-media {\n order: -1;\n }\n}\n\n@media (max-width: 768px) {\n .oc-hero--sm {\n padding: 32px 16px;\n }\n\n .oc-hero--md {\n padding: 48px 16px;\n }\n\n .oc-hero--lg {\n padding: 64px 16px;\n }\n\n .oc-hero-title {\n font-size: 32px;\n }\n\n .oc-hero-subtitle {\n font-size: 15px;\n margin-bottom: 24px;\n }\n\n .oc-hero-search {\n flex-direction: column;\n padding: 12px;\n border-radius: var(--oc-radius-lg, 8px);\n gap: 8px;\n }\n\n .oc-hero-search__input {\n width: 100%;\n text-align: center;\n }\n\n .oc-hero-search__button {\n width: 100%;\n }\n\n .oc-hero__decorations {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .oc-hero-title {\n font-size: 26px;\n }\n\n .oc-hero-badge {\n font-size: 11px;\n padding: 6px 12px;\n }\n\n .oc-hero-action {\n width: 100%;\n justify-content: center;\n }\n\n .oc-hero-actions {\n flex-direction: column;\n width: 100%;\n }\n}\n\n\n\n/* ============================================\n SearchBox Component\n ============================================ */\n\n.oc-search-box {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-search-box:focus-within {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* Size variants */\n.oc-search-box--sm {\n padding: 8px 12px;\n gap: 10px;\n}\n\n.oc-search-box--sm .oc-search-box__input {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--sm .oc-search-box__button {\n padding: 6px 14px;\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-search-box--lg {\n padding: 16px 20px;\n gap: 14px;\n}\n\n.oc-search-box--lg .oc-search-box__input {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-search-box--lg .oc-search-box__button {\n padding: 10px 24px;\n font-size: var(--oc-font-size-md, 15px);\n}\n\n/* Icon */\n.oc-search-box__icon {\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* Input */\n.oc-search-box__input {\n flex: 1;\n min-width: 0;\n border: none;\n background: transparent;\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-fg-primary, #1E293B);\n outline: none;\n}\n\n.oc-search-box__input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-search-box__input:disabled {\n cursor: not-allowed;\n}\n\n/* Button */\n.oc-search-box__button {\n padding: 8px 20px;\n background: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.oc-search-box__button:hover:not(:disabled) {\n background: #1E293B;\n}\n\n.oc-search-box__button:active:not(:disabled) {\n background: #0F172A;\n}\n\n.oc-search-box__button:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Loading state */\n.oc-search-box--loading {\n pointer-events: none;\n}\n\n.oc-search-box__spinner {\n animation: oc-spin var(--oc-duration-spin, 0.8s) linear infinite;\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-search-box {\n flex-wrap: wrap;\n }\n\n .oc-search-box__input {\n flex: 1 1 100%;\n order: 1;\n }\n\n .oc-search-box__icon {\n order: 0;\n }\n\n .oc-search-box__button {\n order: 2;\n width: 100%;\n margin-top: 8px;\n }\n}\n\n\n\n/* ============================================\n FilterTabs Component\n ============================================ */\n\n.oc-filter-tabs {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-filter-tabs--underline {\n gap: 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* FilterTab */\n.oc-filter-tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n font-family: inherit;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n white-space: nowrap;\n}\n\n.oc-filter-tab:hover:not(:disabled) {\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #475569);\n}\n\n.oc-filter-tab--active {\n background: #1E293B;\n border-color: #1E293B;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--active:hover:not(:disabled) {\n background: #334155;\n border-color: #334155;\n color: var(--oc-fg-inverse, #FFFFFF);\n}\n\n.oc-filter-tab--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-filter-tab--sm {\n padding: 6px 12px;\n font-size: var(--oc-font-size-xs, 12px);\n gap: 4px;\n}\n\n.oc-filter-tab--lg {\n padding: 10px 18px;\n font-size: var(--oc-font-size-md, 15px);\n gap: 8px;\n}\n\n/* Underline variant */\n.oc-filter-tab--underline {\n border: none;\n border-radius: 0;\n border-bottom: 2px solid transparent;\n padding: 12px 16px;\n margin-bottom: -1px;\n}\n\n.oc-filter-tab--underline:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-bottom-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active {\n background: transparent;\n color: var(--oc-accent, #0F766E);\n border-bottom-color: var(--oc-accent, #0F766E);\n}\n\n.oc-filter-tab--underline.oc-filter-tab--active:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n/* Icon */\n.oc-filter-tab__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-filter-tab__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-filter-tab--sm .oc-filter-tab__icon svg {\n width: 14px;\n height: 14px;\n}\n\n.oc-filter-tab--lg .oc-filter-tab__icon svg {\n width: 18px;\n height: 18px;\n}\n\n/* Label */\n.oc-filter-tab__label {\n flex-shrink: 0;\n}\n\n/* Count badge */\n.oc-filter-tab__count {\n font-size: 0.85em;\n opacity: 0.7;\n}\n\n.oc-filter-tab--active .oc-filter-tab__count {\n opacity: 0.8;\n}\n\n\n\n .oc-filter-panel {\n width: 320px;\n max-height: 520px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n box-shadow: var(--oc-shadow-lg, 0 8px 16px rgba(15, 23, 42, 0.06));\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n\n .oc-filter-panel__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__title {\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0;\n }\n\n .oc-filter-panel__clear {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n background: none;\n border: none;\n padding: 4px 8px;\n margin: -4px -8px;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__clear:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__clear:disabled {\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: not-allowed;\n }\n\n .oc-filter-panel__clear:disabled:hover {\n background: transparent;\n }\n\n .oc-filter-panel__body {\n flex: 1;\n overflow-y: auto;\n padding: 8px 0;\n }\n\n .oc-filter-panel__section {\n padding: 8px 20px;\n }\n\n .oc-filter-panel__section:not(:last-child) {\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n padding-bottom: 16px;\n margin-bottom: 8px;\n }\n\n .oc-filter-panel__section-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__section-title {\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n margin: 0;\n }\n\n .oc-filter-panel__section-count {\n font-size: 11px;\n font-weight: 600;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n padding: 2px 6px;\n border-radius: var(--oc-radius-full, 9999px);\n }\n\n /* Section search input */\n .oc-filter-panel__search {\n position: relative;\n margin-bottom: 12px;\n }\n\n .oc-filter-panel__search-icon {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n align-items: center;\n }\n\n .oc-filter-panel__search-input {\n width: 100%;\n padding: 8px 32px 8px 32px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__search-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n background: var(--oc-bg-surface, white);\n }\n\n .oc-filter-panel__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__search-clear {\n position: absolute;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 18px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border: none;\n border-radius: 50%;\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: background 0.15s, color 0.15s;\n padding: 0;\n }\n\n .oc-filter-panel__search-clear:hover {\n background: var(--oc-border-default, #E2E8F0);\n color: var(--oc-fg-secondary, #475569);\n }\n\n /* Options list */\n .oc-filter-panel__options {\n display: flex;\n flex-direction: column;\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n }\n\n .oc-filter-panel__option {\n display: flex;\n align-items: flex-start;\n gap: 10px;\n padding: 8px 12px;\n margin: 0 -12px;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.1s;\n }\n\n .oc-filter-panel__option:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n /* Checkbox styles */\n .oc-filter-panel__checkbox {\n width: 18px;\n height: 18px;\n border-radius: 4px;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__checkbox--checked {\n border-color: var(--oc-accent, #0F766E);\n background: var(--oc-accent, #0F766E);\n }\n\n /* Radio styles */\n .oc-filter-panel__radio {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n border: 2px solid var(--oc-border-strong, #CBD5E1);\n background: white;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: all 0.15s;\n flex-shrink: 0;\n margin-top: 1px;\n }\n\n .oc-filter-panel__radio--checked {\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__radio-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--oc-accent, #0F766E);\n }\n\n /* Option content */\n .oc-filter-panel__option-content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n .oc-filter-panel__option-label {\n font-size: 14px;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-description {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.3;\n }\n\n .oc-filter-panel__option-count {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n margin-top: 2px;\n }\n\n /* Loading state */\n .oc-filter-panel__loading {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n }\n\n .oc-filter-panel__spinner {\n animation: oc-filter-spin 0.8s linear infinite;\n }\n\n @keyframes oc-filter-spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Empty state */\n .oc-filter-panel__empty {\n padding: 12px;\n font-size: 13px;\n color: var(--oc-fg-tertiary, #94A3B8);\n text-align: center;\n font-style: italic;\n }\n\n /* Show more button */\n .oc-filter-panel__show-more {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n margin: 4px -12px 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background 0.15s;\n }\n\n .oc-filter-panel__show-more:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__show-more svg {\n transition: transform 0.2s;\n }\n\n /* Date inputs */\n .oc-filter-panel__date-inputs {\n display: flex;\n gap: 12px;\n }\n\n .oc-filter-panel__date-field {\n flex: 1;\n }\n\n .oc-filter-panel__date-label {\n display: block;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n margin-bottom: 6px;\n }\n\n .oc-filter-panel__date-input {\n width: 100%;\n padding: 8px 12px;\n font-size: 13px;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n outline: none;\n transition: border-color 0.15s, box-shadow 0.15s;\n }\n\n .oc-filter-panel__date-input:focus {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n }\n\n /* Footer */\n .oc-filter-panel__footer {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FAFAFA);\n flex-shrink: 0;\n }\n\n .oc-filter-panel__footer-spacer {\n flex: 1;\n }\n\n .oc-filter-panel__active-count {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n }\n\n .oc-filter-panel__active-count strong {\n color: var(--oc-accent, #0F766E);\n font-weight: 600;\n }\n\n /* Buttons */\n .oc-filter-panel__btn {\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: background 0.15s, border-color 0.15s;\n }\n\n .oc-filter-panel__btn--secondary {\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__btn--secondary:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n }\n\n .oc-filter-panel__btn--primary {\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n }\n\n .oc-filter-panel__btn--primary:hover {\n background: var(--oc-accent-hover, #0D9488);\n }\n\n /* Quick filter chips */\n .oc-filter-panel__quick-filters {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 12px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n }\n\n .oc-filter-panel__quick-chip {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s;\n }\n\n .oc-filter-panel__quick-chip:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n }\n\n .oc-filter-panel__quick-chip--active {\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.08);\n border-color: var(--oc-accent, #0F766E);\n }\n\n .oc-filter-panel__quick-chip-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 14px;\n height: 14px;\n margin-right: -4px;\n border-radius: 50%;\n background: transparent;\n border: none;\n padding: 0;\n cursor: pointer;\n color: inherit;\n opacity: 0.6;\n transition: opacity 0.15s;\n }\n\n .oc-filter-panel__quick-chip-remove:hover {\n opacity: 1;\n }\n\n\n\n/* ============================================\n StatBlock Component\n ============================================ */\n\n.oc-stat-block {\n display: flex;\n gap: 12px;\n}\n\n.oc-stat-block--center {\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n\n.oc-stat-block--left {\n align-items: flex-start;\n}\n\n/* Icon */\n.oc-stat-block__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-stat-block__icon svg {\n width: 24px;\n height: 24px;\n}\n\n/* Content */\n.oc-stat-block__content {\n min-width: 0;\n}\n\n/* Value */\n.oc-stat-block__value {\n font-size: 36px;\n font-weight: 400;\n line-height: 1;\n margin-bottom: 4px;\n font-feature-settings: 'tnum' 1;\n}\n\n.oc-stat-block--default .oc-stat-block__value {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-stat-block--accent .oc-stat-block__value {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-stat-block--muted .oc-stat-block__value {\n color: var(--oc-fg-secondary, #64748B);\n}\n\n/* Label */\n.oc-stat-block__label {\n font-size: var(--oc-font-size-md, 15px);\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n/* Sublabel */\n.oc-stat-block__sublabel {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n line-height: 1.4;\n}\n\n/* Size variants */\n.oc-stat-block--sm .oc-stat-block__value {\n font-size: 24px;\n}\n\n.oc-stat-block--sm .oc-stat-block__label {\n font-size: var(--oc-font-size-sm, 13px);\n}\n\n.oc-stat-block--sm .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-xs, 11px);\n}\n\n.oc-stat-block--sm .oc-stat-block__icon {\n width: 36px;\n height: 36px;\n}\n\n.oc-stat-block--sm .oc-stat-block__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-stat-block--lg .oc-stat-block__value {\n font-size: 48px;\n}\n\n.oc-stat-block--lg .oc-stat-block__label {\n font-size: var(--oc-font-size-lg, 17px);\n}\n\n.oc-stat-block--lg .oc-stat-block__sublabel {\n font-size: var(--oc-font-size-md, 15px);\n}\n\n.oc-stat-block--lg .oc-stat-block__icon {\n width: 56px;\n height: 56px;\n}\n\n.oc-stat-block--lg .oc-stat-block__icon svg {\n width: 28px;\n height: 28px;\n}\n\n/* ============================================\n StatGrid Component\n ============================================ */\n\n.oc-stat-grid {\n display: grid;\n}\n\n/* Columns */\n.oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n}\n\n.oc-stat-grid--cols-3 {\n grid-template-columns: repeat(3, 1fr);\n}\n\n.oc-stat-grid--cols-4 {\n grid-template-columns: repeat(4, 1fr);\n}\n\n/* Gap */\n.oc-stat-grid--gap-sm {\n gap: 16px 24px;\n}\n\n.oc-stat-grid--gap-md {\n gap: 32px 48px;\n}\n\n.oc-stat-grid--gap-lg {\n gap: 48px 64px;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .oc-stat-grid--cols-4 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--cols-3 {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (max-width: 480px) {\n .oc-stat-grid--cols-4,\n .oc-stat-grid--cols-3,\n .oc-stat-grid--cols-2 {\n grid-template-columns: repeat(2, 1fr);\n }\n\n .oc-stat-grid--gap-md {\n gap: 24px 32px;\n }\n\n .oc-stat-grid--gap-lg {\n gap: 32px 40px;\n }\n\n .oc-stat-block__value {\n font-size: 28px;\n }\n}\n\n\n\n/* ============================================\n CollectionCard Component\n ============================================ */\n\n.oc-collection-card {\n display: flex;\n gap: 16px;\n padding: 20px;\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n transition: border-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default),\n box-shadow var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-collection-card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n\n.oc-collection-card--clickable {\n cursor: pointer;\n}\n\n.oc-collection-card--clickable:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* Icon */\n.oc-collection-card__icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--oc-bg-surface-hover, #F8FAFC);\n border-radius: var(--oc-radius-md, 10px);\n color: var(--oc-fg-secondary, #64748B);\n flex-shrink: 0;\n}\n\n.oc-collection-card__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-collection-card__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Header */\n.oc-collection-card__header {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n flex-wrap: wrap;\n}\n\n/* Badge */\n.oc-collection-card__badge {\n padding: 3px 10px;\n border-radius: 12px;\n font-size: 12px;\n font-weight: 600;\n white-space: nowrap;\n}\n\n/* Status */\n.oc-collection-card__status {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* Title */\n.oc-collection-card__title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 6px;\n line-height: 1.4;\n}\n\n/* Description */\n.oc-collection-card__description {\n font-size: var(--oc-font-size-sm, 14px);\n line-height: 1.5;\n color: var(--oc-fg-secondary, #64748B);\n margin: 0 0 12px;\n}\n\n/* Stats */\n.oc-collection-card__stats {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-collection-card__stats span {\n display: inline-flex;\n align-items: center;\n}\n\n.oc-collection-card__stats span:not(:last-child)::after {\n content: '\u2022';\n margin-left: 6px;\n opacity: 0.5;\n}\n\n/* ============================================\n CollectionList Component\n ============================================ */\n\n.oc-collection-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-collection-list--gap-sm {\n gap: 12px;\n}\n\n.oc-collection-list--gap-md {\n gap: 16px;\n}\n\n.oc-collection-list--gap-lg {\n gap: 24px;\n}\n\n/* Responsive */\n@media (max-width: 640px) {\n .oc-collection-card {\n padding: 16px;\n gap: 12px;\n }\n\n .oc-collection-card__icon {\n width: 40px;\n height: 40px;\n }\n\n .oc-collection-card__title {\n font-size: 15px;\n }\n\n .oc-collection-card__description {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActivityFeed Component\n ============================================ */\n\n.oc-activity-feed {\n display: flex;\n flex-direction: column;\n}\n\n.oc-activity-feed__list {\n display: flex;\n flex-direction: column;\n}\n\n/* ActivityItem */\n.oc-activity-item {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n padding: 14px 0;\n}\n\n.oc-activity-feed--dividers .oc-activity-item {\n border-bottom: 1px solid var(--oc-bg-subtle, #F1F5F9);\n}\n\n.oc-activity-feed--dividers .oc-activity-item:last-child {\n border-bottom: none;\n}\n\n/* Avatar */\n.oc-activity-item__avatar {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n font-weight: 600;\n color: var(--oc-fg-inverse, #FFFFFF);\n flex-shrink: 0;\n background-size: cover;\n background-position: center;\n}\n\n/* Content */\n.oc-activity-item__content {\n flex: 1;\n min-width: 0;\n}\n\n/* Text */\n.oc-activity-item__text {\n font-size: var(--oc-font-size-sm, 14px);\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n line-height: 1.4;\n}\n\n/* Name */\n.oc-activity-item__name {\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* Target */\n.oc-activity-item__target {\n color: var(--oc-accent, #0F766E);\n text-decoration: none;\n}\n\na.oc-activity-item__target:hover {\n text-decoration: underline;\n}\n\n/* Time */\n.oc-activity-item__time {\n font-size: var(--oc-font-size-sm, 13px);\n color: var(--oc-fg-tertiary, #94A3B8);\n margin-top: 2px;\n}\n\n/* View All Link */\n.oc-activity-feed__view-all {\n display: block;\n text-align: center;\n font-size: var(--oc-font-size-sm, 14px);\n font-weight: 500;\n color: var(--oc-fg-secondary, #64748B);\n text-decoration: none;\n padding: 12px;\n margin-top: 8px;\n background: transparent;\n border: none;\n cursor: pointer;\n font-family: inherit;\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-activity-feed__view-all:hover {\n color: var(--oc-accent, #0F766E);\n}\n\n/* Responsive */\n@media (max-width: 480px) {\n .oc-activity-item {\n gap: 10px;\n padding: 12px 0;\n }\n\n .oc-activity-item__avatar {\n width: 32px;\n height: 32px;\n font-size: 11px;\n }\n\n .oc-activity-item__text {\n font-size: 13px;\n }\n}\n\n\n\n/* ============================================\n ActionList Component\n ============================================ */\n\n.oc-action-list {\n display: flex;\n flex-direction: column;\n}\n\n.oc-action-list--card {\n background: var(--oc-bg-surface, #FFFFFF);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n padding: 8px;\n}\n\n/* ActionItem */\n.oc-action-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 14px 16px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: var(--oc-font-size-md, 15px);\n color: var(--oc-accent, #0F766E);\n cursor: pointer;\n transition: background-color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n text-decoration: none;\n width: 100%;\n}\n\n.oc-action-item:hover:not(:disabled) {\n background: rgba(15, 118, 110, 0.05);\n}\n\n.oc-action-item:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-action-item--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n/* Size variants */\n.oc-action-item--sm {\n padding: 10px 12px;\n gap: 10px;\n font-size: var(--oc-font-size-sm, 14px);\n}\n\n.oc-action-item--lg {\n padding: 16px 20px;\n gap: 14px;\n font-size: var(--oc-font-size-lg, 16px);\n}\n\n/* Icon */\n.oc-action-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--oc-fg-tertiary, #94A3B8);\n flex-shrink: 0;\n}\n\n.oc-action-item__icon svg {\n width: 18px;\n height: 18px;\n}\n\n.oc-action-item--sm .oc-action-item__icon svg {\n width: 16px;\n height: 16px;\n}\n\n.oc-action-item--lg .oc-action-item__icon svg {\n width: 20px;\n height: 20px;\n}\n\n/* Content */\n.oc-action-item__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n/* Label */\n.oc-action-item__label {\n font-weight: 500;\n}\n\n/* Description */\n.oc-action-item__description {\n font-size: 0.85em;\n color: var(--oc-fg-tertiary, #94A3B8);\n font-weight: 400;\n}\n\n/* Card variant items */\n.oc-action-list--card .oc-action-item {\n padding: 12px 14px;\n}\n\n.oc-action-list--card .oc-action-item:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F8FAFC);\n}\n\n\n\n/* ============ Thread View Container ============ */\n.oc-thread-view {\n display: flex;\n flex-direction: column;\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-view__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n padding: 16px 20px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-view__title {\n flex: 1;\n min-width: 200px;\n margin: 0;\n font-size: 18px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-view__pin,\n.oc-thread-view__status,\n.oc-thread-view__locked {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 12px;\n font-weight: 500;\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-view__pin {\n background: rgba(217, 119, 6, 0.1);\n color: var(--oc-warning, #D97706);\n}\n\n.oc-thread-view__status--resolved {\n background: rgba(5, 150, 105, 0.1);\n color: var(--oc-success, #059669);\n}\n\n.oc-thread-view__status--closed {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-view__status--archived {\n background: rgba(100, 116, 139, 0.1);\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-view__locked {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-view__content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n gap: 0;\n}\n\n/* Pinned thread styling */\n.oc-thread-view--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n}\n\n/* Locked thread */\n.oc-thread-view--locked .oc-thread-view__content {\n opacity: 0.85;\n}\n\n/* ============ Thread Post (Main Post) ============ */\n.oc-thread-post {\n display: flex;\n gap: 14px;\n padding: 20px 0;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n@keyframes oc-thread-fade-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.oc-thread-post--root {\n padding-top: 0;\n}\n\n.oc-thread-post--highlighted {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin: 0 -20px;\n padding-left: 20px;\n padding-right: 20px;\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-thread-post__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-post__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-post__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 8px;\n}\n\n.oc-thread-post__author {\n font-size: 14px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-post__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__edited {\n font-size: 12px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-post__body {\n font-size: 15px;\n line-height: 1.65;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-post__body p {\n margin: 0 0 12px;\n}\n\n.oc-thread-post__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-post__resources {\n margin-top: 14px;\n}\n\n.oc-thread-post__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n margin-top: 14px;\n}\n\n.oc-thread-post__reactions {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-thread-post__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-post:hover .oc-thread-post__actions {\n opacity: 1;\n}\n\n.oc-thread-post__reply-count {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-left: auto;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-thread-post__reply-count svg {\n opacity: 0.6;\n}\n\n/* ============ Thread Reply (Nested) ============ */\n.oc-thread-reply {\n position: relative;\n display: flex;\n flex-direction: column;\n padding-left: 24px;\n}\n\n.oc-thread-reply__connector {\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 24px;\n display: flex;\n justify-content: center;\n}\n\n.oc-thread-reply__line {\n width: 2px;\n height: 100%;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: 1px;\n}\n\n.oc-thread-reply:last-child .oc-thread-reply__line {\n height: 32px;\n}\n\n.oc-thread-reply__content {\n display: flex;\n gap: 12px;\n padding: 14px 0;\n animation: oc-thread-fade-in 0.3s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__content {\n padding: 10px 0;\n}\n\n.oc-thread-reply--highlighted .oc-thread-reply__content {\n background: linear-gradient(90deg, rgba(15, 118, 110, 0.05) 0%, transparent 100%);\n margin-left: -12px;\n padding-left: 12px;\n border-radius: var(--oc-radius-md, 8px);\n}\n\n.oc-thread-reply__avatar {\n flex-shrink: 0;\n}\n\n.oc-thread-reply__main {\n flex: 1;\n min-width: 0;\n}\n\n.oc-thread-reply__header {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 8px;\n margin-bottom: 6px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__header {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__author {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n background: rgba(15, 118, 110, 0.1);\n color: var(--oc-accent, #0F766E);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-thread-reply__time {\n font-size: 11px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__edited {\n font-size: 11px;\n font-style: italic;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-reply__body {\n font-size: 14px;\n line-height: 1.6;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__body p {\n margin: 0 0 10px;\n}\n\n.oc-thread-reply__body p:last-child {\n margin-bottom: 0;\n}\n\n.oc-thread-reply__resources {\n margin-top: 10px;\n}\n\n.oc-thread-reply__footer {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n margin-top: 10px;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__footer {\n margin-top: 0;\n}\n\n.oc-thread-reply__reactions {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-thread-reply__actions {\n display: flex;\n align-items: center;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s ease;\n}\n\n.oc-thread-reply:hover .oc-thread-reply__actions {\n opacity: 1;\n}\n\n.oc-thread-reply__toggle {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n margin-left: auto;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-reply__toggle:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-reply__toggle-icon {\n transition: transform 0.2s ease;\n}\n\n.oc-thread-reply--collapsed .oc-thread-reply__toggle-icon {\n transform: rotate(-90deg);\n}\n\n.oc-thread-reply__replies {\n margin-top: 4px;\n}\n\n/* Depth indentation limits */\n.oc-thread-reply--depth-1 { padding-left: 24px; }\n.oc-thread-reply--depth-2 { padding-left: 20px; }\n.oc-thread-reply--depth-3 { padding-left: 16px; }\n.oc-thread-reply--depth-4 { padding-left: 12px; }\n\n/* ============ Mention ============ */\n.oc-mention {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 2px 8px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n vertical-align: baseline;\n}\n\n.oc-mention:hover {\n background: rgba(15, 118, 110, 0.2);\n color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-mention__avatar {\n display: flex;\n align-items: center;\n margin-right: 2px;\n}\n\n.oc-mention__at {\n opacity: 0.7;\n}\n\n.oc-mention__name {\n font-weight: 600;\n}\n\n/* ============ Linked Resource ============ */\n.oc-linked-resource {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 4px 10px;\n font-size: 13px;\n font-family: inherit;\n color: var(--resource-color, var(--oc-fg-secondary));\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-sm, 6px);\n cursor: pointer;\n transition: all 0.15s ease;\n text-decoration: none;\n}\n\n.oc-linked-resource:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--resource-color, var(--oc-border-default));\n transform: translateY(-1px);\n}\n\n.oc-linked-resource__icon {\n display: flex;\n align-items: center;\n opacity: 0.8;\n}\n\n.oc-linked-resource__title {\n font-weight: 500;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 200px;\n}\n\n.oc-linked-resource__ref {\n font-size: 11px;\n font-weight: 400;\n color: var(--oc-fg-tertiary, #94A3B8);\n padding-left: 6px;\n border-left: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n/* Resource type colors */\n.oc-linked-resource--document { --resource-color: var(--oc-info, #0891B2); }\n.oc-linked-resource--collection { --resource-color: var(--oc-warning, #D97706); }\n.oc-linked-resource--annotation { --resource-color: var(--oc-accent, #0F766E); }\n.oc-linked-resource--comment { --resource-color: var(--oc-fg-secondary, #475569); }\n.oc-linked-resource--clause { --resource-color: var(--oc-success, #059669); }\n.oc-linked-resource--user { --resource-color: var(--oc-accent, #0F766E); }\n\n/* ============ Resource List ============ */\n.oc-resource-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-resource-list__label {\n font-size: 12px;\n font-weight: 500;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-resource-list__items {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n/* ============ Reaction Button ============ */\n.oc-reaction-button {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 14px;\n font-family: inherit;\n background: var(--oc-bg-surface, #F8F8F8);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-button:hover {\n background: var(--oc-bg-canvas, #FFFFFF);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n transform: scale(1.05);\n}\n\n.oc-reaction-button--active {\n background: rgba(15, 118, 110, 0.1);\n border-color: rgba(15, 118, 110, 0.3);\n}\n\n.oc-reaction-button--active:hover {\n background: rgba(15, 118, 110, 0.15);\n}\n\n.oc-reaction-button__emoji {\n font-size: 14px;\n line-height: 1;\n}\n\n.oc-reaction-button__count {\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-reaction-button--active .oc-reaction-button__count {\n color: var(--oc-accent, #0F766E);\n}\n\n/* ============ Reaction Bar ============ */\n.oc-reaction-bar {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.oc-reaction-bar__add {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: 1px dashed var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-reaction-bar__add:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n border-color: var(--oc-fg-tertiary, #94A3B8);\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* ============ Thread Action ============ */\n.oc-thread-action {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 6px 10px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-action:hover {\n background: var(--oc-bg-surface, #F8F8F8);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-thread-action--destructive {\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action--destructive:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n.oc-thread-action__label {\n white-space: nowrap;\n}\n\n/* ============ Thread Input ============ */\n.oc-thread-input {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 16px 20px;\n border-top: 1px solid var(--oc-border-default, #E2E8F0);\n background: var(--oc-bg-canvas, #FFFFFF);\n}\n\n.oc-thread-input__replying {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: var(--oc-bg-surface, #F8F8F8);\n border-radius: var(--oc-radius-md, 8px);\n font-size: 13px;\n}\n\n.oc-thread-input__replying-label {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-thread-input__cancel {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n margin-left: auto;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-thread-input__cancel:hover {\n background: rgba(220, 38, 38, 0.1);\n color: var(--oc-error, #DC2626);\n}\n\n/* ============ Thread Meta ============ */\n.oc-thread-meta {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding: 12px 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-thread-meta__item {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n}\n\n.oc-thread-meta__item svg {\n opacity: 0.6;\n}\n\n.oc-thread-meta__participants {\n display: flex;\n align-items: center;\n}\n\n.oc-thread-meta__activity {\n margin-left: auto;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n\n\n/* ============ Category Badge ============ */\n.oc-category-badge {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 3px 8px;\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--category-color, var(--oc-fg-secondary, #475569));\n background: color-mix(in srgb, var(--category-color, var(--oc-fg-secondary)) 10%, transparent);\n border-radius: var(--oc-radius-sm, 6px);\n white-space: nowrap;\n}\n\n.oc-category-badge__label {\n line-height: 1;\n}\n\n/* ============ Discussion List ============ */\n.oc-discussion-list {\n display: flex;\n flex-direction: column;\n gap: 1px;\n background: var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n overflow: hidden;\n}\n\n.oc-discussion-list--card {\n gap: 12px;\n background: transparent;\n}\n\n.oc-discussion-list--compact,\n.oc-discussion-list--minimal {\n border: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-discussion-list--loading {\n gap: 0;\n}\n\n.oc-discussion-list__loading {\n display: flex;\n flex-direction: column;\n gap: 1px;\n}\n\n.oc-discussion-list__skeleton {\n height: 80px;\n background: var(--oc-bg-surface, #F8F8F8);\n animation: oc-skeleton-pulse 1.5s ease-in-out infinite;\n}\n\n.oc-discussion-list__skeleton:nth-child(2) {\n animation-delay: 0.1s;\n}\n\n.oc-discussion-list__skeleton:nth-child(3) {\n animation-delay: 0.2s;\n}\n\n@keyframes oc-skeleton-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* ============ Discussion Item - Card Variant ============ */\n.oc-discussion-item--card {\n display: flex;\n gap: 16px;\n padding: 16px 20px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item--card:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));\n transform: translateY(-1px);\n}\n\n.oc-discussion-item--card:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n.oc-discussion-item--card.oc-discussion-item--pinned {\n border-left: 3px solid var(--oc-warning, #D97706);\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.03) 0%, transparent 30%);\n}\n\n.oc-discussion-item--card.oc-discussion-item--unread {\n border-left: 3px solid var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item--card.oc-discussion-item--answered,\n.oc-discussion-item--card.oc-discussion-item--resolved {\n border-left: 3px solid var(--oc-success, #059669);\n}\n\n/* Vote column */\n.oc-discussion-item__votes {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 40px;\n padding-top: 2px;\n}\n\n.oc-discussion-item__vote-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: var(--oc-bg-canvas, #FAFAFA);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-item__vote-btn:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-accent, #0F766E);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__vote-btn--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-item__vote-btn--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-discussion-item__vote-count {\n font-size: 13px;\n font-weight: 600;\n color: var(--oc-fg-secondary, #475569);\n}\n\n/* Main content */\n.oc-discussion-item__main {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.oc-discussion-item__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__header-left {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-item__status-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-discussion-item__status-icon--resolved {\n color: var(--oc-success, #059669);\n}\n\n.oc-discussion-item__status-icon--pinned {\n color: var(--oc-warning, #D97706);\n}\n\n.oc-discussion-item__activity {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n.oc-discussion-item__title {\n margin: 0;\n font-size: 15px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n line-height: 1.4;\n}\n\n.oc-discussion-item--card .oc-discussion-item__title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item--unread .oc-discussion-item__title {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-discussion-item__preview {\n margin: 0;\n font-size: 14px;\n line-height: 1.5;\n color: var(--oc-fg-secondary, #475569);\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.oc-discussion-item__tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n}\n\n.oc-discussion-item__tag {\n display: inline-block;\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item__footer {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n margin-top: 4px;\n}\n\n.oc-discussion-item__author {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.oc-discussion-item__author-name {\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-item__author-badge {\n display: inline-flex;\n padding: 2px 6px;\n font-size: 10px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.1);\n border-radius: var(--oc-radius-sm, 6px);\n}\n\n.oc-discussion-item__created {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item__stats {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-discussion-item__stat {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item__stat svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Item - Compact Variant ============ */\n.oc-discussion-item--compact {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--compact:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--compact:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--compact.oc-discussion-item--pinned {\n background: linear-gradient(90deg, rgba(217, 119, 6, 0.05) 0%, transparent 20%);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__leading {\n display: flex;\n align-items: center;\n gap: 8px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__title {\n font-size: 14px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tags {\n gap: 4px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__tag {\n font-size: 10px;\n padding: 1px 6px;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__meta {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-shrink: 0;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--compact .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n.oc-discussion-item--compact .oc-discussion-item__time {\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n white-space: nowrap;\n}\n\n/* ============ Discussion Item - Minimal Variant ============ */\n.oc-discussion-item--minimal {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 10px 14px;\n background: var(--oc-bg-surface, white);\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\n.oc-discussion-item--minimal:hover {\n background: var(--oc-bg-surface-hover, #F8F8F8);\n}\n\n.oc-discussion-item--minimal:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: -2px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__avatar {\n flex-shrink: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__content {\n flex: 1;\n min-width: 0;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__title {\n font-size: 14px;\n margin-bottom: 2px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__byline {\n font-size: 12px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__time::before {\n content: '\\00B7';\n margin: 0 6px;\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n background: var(--oc-bg-canvas, #FAFAFA);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-item--minimal .oc-discussion-item__replies svg {\n opacity: 0.6;\n}\n\n/* ============ Discussion Filters ============ */\n.oc-discussion-filters {\n display: flex;\n flex-direction: column;\n gap: 16px;\n padding-bottom: 16px;\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n margin-bottom: 16px;\n}\n\n.oc-discussion-filters__categories {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.oc-discussion-filters__category {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n font-size: 13px;\n font-weight: 500;\n font-family: inherit;\n color: var(--oc-fg-secondary, #475569);\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-full, 9999px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__category:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n}\n\n.oc-discussion-filters__category--active {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-discussion-filters__category--active:hover {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n}\n\n.oc-discussion-filters__count {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-width: 20px;\n height: 20px;\n padding: 0 6px;\n font-size: 11px;\n font-weight: 600;\n background: rgba(0, 0, 0, 0.1);\n border-radius: var(--oc-radius-full, 9999px);\n}\n\n.oc-discussion-filters__category--active .oc-discussion-filters__count {\n background: rgba(255, 255, 255, 0.2);\n}\n\n.oc-discussion-filters__actions {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: wrap;\n}\n\n.oc-discussion-filters__search {\n position: relative;\n flex: 1;\n min-width: 200px;\n max-width: 400px;\n}\n\n.oc-discussion-filters__search-icon {\n position: absolute;\n left: 12px;\n top: 50%;\n transform: translateY(-50%);\n color: var(--oc-fg-tertiary, #94A3B8);\n pointer-events: none;\n}\n\n.oc-discussion-filters__search-input {\n width: 100%;\n padding: 10px 12px 10px 38px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__search-input:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n.oc-discussion-filters__search-input::placeholder {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-discussion-filters__sort {\n padding: 10px 32px 10px 12px;\n font-size: 14px;\n font-family: inherit;\n color: var(--oc-fg-primary, #1E293B);\n background: var(--oc-bg-surface, white) url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\") right 8px center/20px no-repeat;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n appearance: none;\n transition: all 0.15s ease;\n}\n\n.oc-discussion-filters__sort:focus {\n outline: none;\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);\n}\n\n/* ============ New Discussion Button ============ */\n.oc-new-discussion-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 10px 18px;\n font-size: 14px;\n font-weight: 600;\n font-family: inherit;\n color: white;\n background: var(--oc-accent, #0F766E);\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all 0.15s ease;\n}\n\n.oc-new-discussion-btn:hover {\n background: var(--oc-accent-hover, #0D9488);\n transform: translateY(-1px);\n box-shadow: var(--oc-shadow-md, 0 4px 6px rgba(15, 23, 42, 0.05));\n}\n\n.oc-new-discussion-btn:active {\n transform: translateY(0);\n}\n\n.oc-new-discussion-btn:focus-visible {\n outline: 2px solid var(--oc-accent, #0F766E);\n outline-offset: 2px;\n}\n\n/* ============ Discussion Stats ============ */\n.oc-discussion-stats {\n display: flex;\n align-items: center;\n gap: 24px;\n padding: 12px 0;\n}\n\n.oc-discussion-stats__item {\n display: flex;\n align-items: baseline;\n gap: 6px;\n}\n\n.oc-discussion-stats__value {\n font-size: 18px;\n font-weight: 700;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-discussion-stats__label {\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-discussion-stats__item--answered .oc-discussion-stats__value {\n color: var(--oc-success, #059669);\n}\n\n/* ============ Responsive ============ */\n@media (max-width: 768px) {\n .oc-discussion-item--card {\n flex-direction: column;\n gap: 12px;\n }\n\n .oc-discussion-item__votes {\n flex-direction: row;\n min-width: unset;\n gap: 8px;\n order: -1;\n }\n\n .oc-discussion-item__footer {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .oc-discussion-item__stats {\n width: 100%;\n justify-content: flex-start;\n }\n\n .oc-discussion-filters__categories {\n overflow-x: auto;\n flex-wrap: nowrap;\n padding-bottom: 8px;\n margin-bottom: -8px;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-discussion-filters__category {\n flex-shrink: 0;\n }\n\n .oc-discussion-filters__actions {\n flex-direction: column;\n align-items: stretch;\n }\n\n .oc-discussion-filters__search {\n max-width: none;\n }\n\n .oc-discussion-filters__sort {\n width: 100%;\n }\n\n .oc-discussion-stats {\n flex-wrap: wrap;\n gap: 16px;\n }\n}\n\n@media (max-width: 480px) {\n .oc-discussion-item--compact,\n .oc-discussion-item--minimal {\n padding: 10px 12px;\n }\n\n .oc-discussion-item--compact .oc-discussion-item__meta {\n flex-direction: column;\n align-items: flex-end;\n gap: 4px;\n }\n\n .oc-new-discussion-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM CONTAINER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-filesystem {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--oc-bg-canvas, #FAFAFA);\n font-family: var(--oc-font-family, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);\n}\n\n.oc-filesystem__layout {\n display: flex;\n flex: 1;\n overflow: hidden;\n}\n\n.oc-filesystem__sidebar {\n width: 240px;\n min-width: 240px;\n background: var(--oc-bg-surface, white);\n border-right: 1px solid var(--oc-border-default, #E2E8F0);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-filesystem__main {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree {\n display: flex;\n flex-direction: column;\n padding: 8px;\n overflow-y: auto;\n}\n\n.oc-folder-tree__root {\n display: flex;\n align-items: center;\n gap: 8px;\n width: 100%;\n padding: 10px 12px;\n margin-bottom: 4px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n text-align: left;\n}\n\n.oc-folder-tree__root:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree__root--active {\n background: rgba(15, 118, 110, 0.08);\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree__root-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-folder-tree__root-label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree__content {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOLDER TREE ITEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-folder-tree-item {\n display: flex;\n flex-direction: column;\n}\n\n.oc-folder-tree-item__row {\n display: flex;\n align-items: center;\n gap: 2px;\n padding: 4px 8px;\n border-radius: var(--oc-radius-md, 8px);\n transition: background var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__row:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-folder-tree-item--active > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.08);\n}\n\n.oc-folder-tree-item--in-path > .oc-folder-tree-item__row {\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-folder-tree-item__toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n flex-shrink: 0;\n}\n\n.oc-folder-tree-item__toggle:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-folder-tree-item__toggle--hidden {\n visibility: hidden;\n}\n\n.oc-folder-tree-item__chevron--expanded {\n transform: rotate(90deg);\n}\n\n.oc-folder-tree-item__button {\n display: flex;\n align-items: center;\n gap: 8px;\n flex: 1;\n min-width: 0;\n padding: 6px 8px;\n background: transparent;\n border: none;\n font-family: inherit;\n font-size: 13px;\n font-weight: 400;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n text-align: left;\n border-radius: var(--oc-radius-sm, 6px);\n transition: color var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-folder-tree-item__button:hover {\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__button {\n font-weight: 500;\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: #F59E0B;\n}\n\n.oc-folder-tree-item--active .oc-folder-tree-item__icon {\n color: var(--oc-accent, #0F766E);\n}\n\n.oc-folder-tree-item__label {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.oc-folder-tree-item__children {\n display: flex;\n flex-direction: column;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE PATH BREADCRUMB\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-breadcrumb {\n display: flex;\n align-items: center;\n}\n\n.oc-file-breadcrumb__list {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 2px;\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.oc-file-breadcrumb__item {\n display: flex;\n align-items: center;\n gap: 2px;\n}\n\n.oc-file-breadcrumb__link {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-file-breadcrumb__link:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-file-breadcrumb__link--active {\n color: var(--oc-fg-primary, #1E293B);\n cursor: default;\n}\n\n.oc-file-breadcrumb__link--active:hover {\n background: transparent;\n}\n\n.oc-file-breadcrumb__icon {\n flex-shrink: 0;\n color: inherit;\n}\n\n.oc-file-breadcrumb__separator {\n flex-shrink: 0;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILESYSTEM TOOLBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-fs-toolbar {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--oc-bg-surface, white);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n}\n\n.oc-fs-toolbar__left {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.oc-fs-toolbar__center {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.oc-fs-toolbar__right {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-left: auto;\n}\n\n.oc-fs-toolbar__nav {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.oc-fs-toolbar__nav-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n padding: 0;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__nav-btn:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__nav-btn:disabled {\n opacity: var(--oc-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n.oc-fs-toolbar__view-toggle {\n display: flex;\n align-items: center;\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-radius: var(--oc-radius-md, 8px);\n padding: 3px;\n}\n\n.oc-fs-toolbar__view-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n padding: 0;\n background: transparent;\n border: none;\n border-radius: var(--oc-radius-sm, 6px);\n color: var(--oc-fg-tertiary, #94A3B8);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__view-btn:hover {\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-fs-toolbar__view-btn--active {\n background: var(--oc-bg-surface, white);\n color: var(--oc-fg-primary, #1E293B);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-fs-toolbar__button {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 8px 14px;\n background: transparent;\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-md, 8px);\n font-family: inherit;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-secondary, #475569);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n}\n\n.oc-fs-toolbar__button:hover:not(:disabled) {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n border-color: var(--oc-border-strong, #CBD5E1);\n color: var(--oc-fg-primary, #1E293B);\n}\n\n.oc-fs-toolbar__button--primary {\n background: var(--oc-accent, #0F766E);\n border-color: var(--oc-accent, #0F766E);\n color: white;\n}\n\n.oc-fs-toolbar__button--primary:hover:not(:disabled) {\n background: var(--oc-accent-hover, #0D9488);\n border-color: var(--oc-accent-hover, #0D9488);\n color: white;\n}\n\n.oc-fs-toolbar__button-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.oc-fs-toolbar__separator {\n width: 1px;\n height: 24px;\n background: var(--oc-border-default, #E2E8F0);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.oc-file-list__header {\n display: flex;\n align-items: center;\n padding: 10px 16px;\n background: var(--oc-bg-canvas, #FAFAFA);\n border-bottom: 1px solid var(--oc-border-default, #E2E8F0);\n font-size: 11px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__header-cell {\n flex-shrink: 0;\n}\n\n.oc-file-list__header-cell--name {\n flex: 1;\n min-width: 0;\n}\n\n.oc-file-list__header-cell--modified {\n width: 140px;\n}\n\n.oc-file-list__header-cell--size {\n width: 100px;\n text-align: right;\n}\n\n.oc-file-list__content {\n flex: 1;\n overflow-y: auto;\n padding: 8px;\n}\n\n.oc-file-list--list .oc-file-list__content {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 4px 8px;\n}\n\n.oc-file-list--grid .oc-file-list__content {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));\n gap: 12px;\n padding: 16px;\n}\n\n.oc-file-list__empty {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 48px 24px;\n}\n\n.oc-file-list__empty-content {\n text-align: center;\n max-width: 300px;\n}\n\n.oc-file-list__empty-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 16px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list__empty-title {\n font-size: 16px;\n font-weight: 600;\n color: var(--oc-fg-primary, #1E293B);\n margin: 0 0 8px;\n}\n\n.oc-file-list__empty-description {\n font-size: 14px;\n color: var(--oc-fg-secondary, #475569);\n margin: 0;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - LIST VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--list {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n background: transparent;\n border: 1px solid transparent;\n border-radius: var(--oc-radius-md, 8px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--list:hover {\n background: var(--oc-bg-surface-hover, #F1F5F9);\n}\n\n.oc-file-list-item--list:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--list.oc-file-list-item--selected {\n background: rgba(15, 118, 110, 0.08);\n border-color: rgba(15, 118, 110, 0.2);\n}\n\n.oc-file-list-item__cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n font-size: 13px;\n color: var(--oc-fg-secondary, #475569);\n}\n\n.oc-file-list-item__cell--name {\n flex: 1;\n min-width: 0;\n gap: 12px;\n}\n\n.oc-file-list-item__cell--modified {\n width: 140px;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__cell--size {\n width: 100px;\n justify-content: flex-end;\n font-size: 12px;\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n.oc-file-list-item__name-text {\n flex: 1;\n min-width: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE LIST ITEM - GRID VIEW\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item--grid {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 16px 12px;\n background: var(--oc-bg-surface, white);\n border: 1px solid var(--oc-border-default, #E2E8F0);\n border-radius: var(--oc-radius-lg, 12px);\n cursor: pointer;\n transition: all var(--oc-duration-fast, 0.15s) var(--oc-easing-default);\n outline: none;\n}\n\n.oc-file-list-item--grid:hover {\n border-color: var(--oc-border-strong, #CBD5E1);\n box-shadow: var(--oc-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.04));\n}\n\n.oc-file-list-item--grid:focus-visible {\n border-color: var(--oc-accent, #0F766E);\n box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);\n}\n\n.oc-file-list-item--grid.oc-file-list-item--selected {\n border-color: var(--oc-accent, #0F766E);\n background: rgba(15, 118, 110, 0.04);\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon {\n width: 48px;\n height: 48px;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__icon svg {\n width: 100%;\n height: 100%;\n}\n\n.oc-file-list-item--grid .oc-file-list-item__name {\n width: 100%;\n text-align: center;\n font-size: 13px;\n font-weight: 500;\n color: var(--oc-fg-primary, #1E293B);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FILE ICONS\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.oc-file-list-item__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 32px;\n height: 32px;\n}\n\n.oc-file-list-item__icon--folder {\n color: #F59E0B;\n}\n\n.oc-file-list-item__icon--pdf {\n color: #DC2626;\n}\n\n.oc-file-list-item__icon--document {\n color: #2563EB;\n}\n\n.oc-file-list-item__icon--image {\n color: #059669;\n}\n\n.oc-file-list-item__icon--spreadsheet {\n color: #059669;\n}\n\n.oc-file-list-item__icon--presentation {\n color: #EA580C;\n}\n\n.oc-file-list-item__icon--archive {\n color: #7C3AED;\n}\n\n.oc-file-list-item__icon--unknown {\n color: var(--oc-fg-tertiary, #94A3B8);\n}\n\n/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n@media (max-width: 768px) {\n .oc-filesystem__sidebar {\n display: none;\n }\n\n .oc-file-list__header-cell--modified,\n .oc-file-list-item__cell--modified {\n display: none;\n }\n\n .oc-file-list__header-cell--size,\n .oc-file-list-item__cell--size {\n width: 80px;\n }\n\n .oc-file-breadcrumb__list {\n overflow-x: auto;\n flex-wrap: nowrap;\n -webkit-overflow-scrolling: touch;\n }\n\n .oc-fs-toolbar {\n padding: 10px 12px;\n gap: 8px;\n }\n}\n\n";
1958
+
1959
+ export { AIAvatar, AIResponse, type AIResponseProps, ActionButton, type ActionButtonProps, ActionItem, type ActionItemData, type ActionItemProps, ActionList, type ActionListProps, ActivityFeed, type ActivityFeedProps, ActivityItem, type ActivityItemData, type ActivityItemProps, Alert, type AlertProps, type AlertVariant, type AnimationScale, AppShell, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, type AppShellProps, AppShellSidebar, type AppShellSidebarProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type AvatarStatus, Banner, type BannerProps, type BreadcrumbItem, type BreakpointScale, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, CardFooter, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardVariant, CategoryBadge, type CategoryBadgeProps, ChatContainer, type ChatContainerProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatMessageSkeleton, ChatMessages, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipColor, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipVariant, Citation, type CitationProps, CollectionCard, type CollectionCardProps, CollectionList, type CollectionListProps, type CollectionType, type ColorScale, type DiscussionAuthor, type DiscussionCategory, type DiscussionFilterOption, DiscussionFilters, type DiscussionFiltersProps, DiscussionItem, type DiscussionItemProps, DiscussionList, type DiscussionListProps, type DiscussionSortOption, DiscussionStats, type DiscussionStatsProps, type DiscussionStatus, Divider, type DividerProps, DocumentCardSkeleton, type DocumentType, EmptyDocumentIcon, EmptyFolderIcon, EmptyInboxIcon, EmptyNotificationIcon, EmptySearchIcon, EmptyState, type EmptyStateProps, type EmptyStateSize, FileList, FileListItem, type FileListItemProps, type FileListProps, FilePathBreadcrumb, type FilePathBreadcrumbProps, FileSystem, type FileSystemContextValue, type FileSystemItem, FileSystemLayout, type FileSystemLayoutProps, FileSystemMain, type FileSystemMainProps, type FileSystemProps, FileSystemSidebar, type FileSystemSidebarProps, FileSystemToolbar, type FileSystemToolbarProps, type FileSystemViewMode, type FileType, FilesIcon, FilterChip, type FilterChipProps, type FilterOption, FilterPanel, type FilterPanelProps, type FilterSection, FilterTab, type FilterTabItem, type FilterTabProps, FilterTabs, type FilterTabsProps, type FilterValues, FolderTree, FolderTreeItem, type FolderTreeItemProps, type FolderTreeProps, type FontSizeScale, FormField, type FormFieldProps, HStack, type HStackProps, Hero, HeroAction, type HeroActionProps, HeroActions, type HeroActionsProps, HeroBadge, type HeroBadgeProps, HeroContent, type HeroContentProps, HeroMedia, type HeroMediaProps, type HeroProps, HeroSearch, type HeroSearchProps, type HeroSize, HeroSubtitle, type HeroSubtitleProps, HeroTitle, type HeroTitleProps, type HeroVariant, IconButton, type IconButtonProps, Input, type InputProps, type InputSize, IntegrationIcon, type LineHeightScale, LinkedResource, type LinkedResourceProps, Mention, type MentionProps, MessageActions, type MessageActionsProps, type MessageRole, type MessageStatus, Modal, ModalBody, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, NavBar, type NavBarProps, type NavItem, NewDiscussionButton, type NewDiscussionButtonProps, type OpacityScale, PageHeader, type PageHeaderProps, Pane, type PaneProps, PanelAction, PanelActionList, type PanelActionListProps, type PanelActionProps, PanelSearch, type PanelSearchProps, PanelSection, type PanelSectionProps, PanelTab, type PanelTabProps, PanelTabs, type PanelTabsProps, PlusIcon, type PolymorphicComponentProp, type PolymorphicRef, Popover, type PopoverPlacement, type PopoverProps, type PopoverTrigger, Progress, ProgressCircle, type ProgressCircleProps, type ProgressProps, type ProgressSize, type ProgressVariant, ProjectItem, type ProjectItemProps, ProjectPicker, type ProjectPickerProps, ProjectSearch, type ProjectSearchProps, type ProjectType, PromptsIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RadiusScale, ReactionBar, type ReactionBarProps, ReactionButton, type ReactionButtonProps, type ReactionType, ResearchCard, type ResearchCardProps, ResearchSection, type ResearchSectionProps, type ResearchStatus, ResourceList, type ResourceListProps, type ResourceType, RocketIcon, ScrollArea, type ScrollAreaProps, type ScrollAreaType, SearchBox, type SearchBoxProps, SearchInput, type SearchInputProps, type SearchSuggestion, Select, type SelectOption, type SelectOptionGroup, type SelectProps, type SelectSize, type ShadowScale, Sidebar, SidebarFooter, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SidebarSection, type SidebarSectionProps, type Size, Skeleton, type SkeletonAnimation, SkeletonAvatar, SkeletonButton, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SourceCard, type SourceCardProps, SourceList, type SourceListProps, SourcePill, type SourcePillProps, SourcesBadge, type SourcesBadgeProps, SourcesPanel, type SourcesPanelProps, Spacer, type SpacingScale, SparkleIcon, Spinner, type SpinnerProps, type SplitDirection, SplitPane, type SplitPaneProps, Stack, type StackAlign, type StackJustify, type StackProps, type StackSpacing, StatBlock, type StatBlockProps, StatGrid, type StatGridProps, type Status, type StepItem, StepsList, type StepsListProps, SuggestionChip, type SuggestionChipProps, Switch, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, TableRowSkeleton, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, TaskCard, type TaskCardProps, type TaskStatus, Textarea, type TextareaProps, ThinkingBlock, type ThinkingBlockProps, ThreadAction, type ThreadActionProps, ThreadInput, type ThreadInputProps, ThreadMeta, type ThreadMetaProps, ThreadPost, type ThreadPostProps, ThreadReply, type ThreadReplyProps, type ThreadStatus, ThreadView, type ThreadViewProps, Toast, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type Tokens, ToolbarButton, type ToolbarButtonProps, ToolbarSeparator, Tooltip, type TooltipPlacement, type TooltipProps, TypingIndicator, type TypingIndicatorProps, UploadIcon, type UserMenuItem, UserQuestion, type UserQuestionProps, VStack, type VStackProps, type ZIndexScale, actionListStyles, activityFeedStyles, alertStyles, allStyles, appShellStyles, avatarStyles, buttonStyles, cardStyles, chatStyles, checkboxStyles, chipStyles, collectionCardStyles, discussionStyles, emptyStateStyles, fileSystemStyles, filterPanelStyles, filterTabsStyles, formFieldStyles, heroStyles, inputStyles, modalStyles, navBarStyles, pageHeaderStyles, popoverStyles, progressStyles, projectPickerStyles, radioStyles, researchCardStyles, scrollAreaStyles, searchBoxStyles, searchInputStyles, selectStyles, sidebarStyles, skeletonStyles, sourceCardStyles, sourcesPanelStyles, splitPaneStyles, stackStyles, statBlockStyles, tabsStyles, textareaStyles, threadStyles, toastStyles, toggleStyles, tokens, tooltipStyles, useAppShell, useFileSystem, useToast, utilitiesStyles };