@mt-gloss/ui 0.0.9 → 0.0.10

package/lib/wrappers/Actionable/Actionable.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface ActionableProps {
+    /** Called when the child is activated (click or Enter/Space key) */
+    onAction?: (e: React.SyntheticEvent) => void;
+    /** Disable the actionable behavior */
+    disabled?: boolean;
+    /** ARIA role for the wrapped element (default: 'button') */
+    role?: string;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants action behavior (click + keyboard) to any child element.
+ * Adds onClick, onKeyDown (Enter/Space), tabIndex, and role='button'.
+ *
+ * Usage: <Actionable onAction={handleClick}><Card>...</Card></Actionable>
+ */
+export declare const Actionable: React.ForwardRefExoticComponent<ActionableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/AsyncLoader/AsyncLoader.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface AsyncLoaderProps {
+    color?: 'blue' | 'green';
+    isLoading?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * AsyncLoader -- Wrapper tier. SVG perimeter-tracing animation wrapper.
+ * Strips className/style from consumer API.
+ */
+export declare const AsyncLoader: React.ForwardRefExoticComponent<AsyncLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export { AsyncLoader as PresetAsyncLoader };
+export type { AsyncLoaderProps as PresetAsyncLoaderProps };

package/lib/wrappers/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ButtonGroupProps {
+    children: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    attached?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+    fullWidth?: boolean;
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+}
+export interface ButtonGroupContextValue {
+    size?: 'sm' | 'md' | 'lg';
+    variant?: string;
+    isInGroup: boolean;
+}
+export declare const ButtonGroupContext: React.Context<ButtonGroupContextValue>;
+/**
+ * ButtonGroup -- Wrapper tier. Groups related buttons with context propagation.
+ * Locked-down API (no className/style).
+ */
+export declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroup as PresetButtonGroup };
+export type { ButtonGroupProps as PresetButtonGroupProps };

package/lib/wrappers/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export interface CheckboxGroupOption<T = string> {
+    value: T;
+    label: React.ReactNode;
+    disabled?: boolean;
+    helperText?: string;
+}
+export interface CheckboxGroupProps<T = string> {
+    value?: T[];
+    defaultValue?: T[];
+    onChange?: (value: T[]) => void;
+    options?: CheckboxGroupOption<T>[];
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    helperText?: string;
+    status?: 'default' | 'success' | 'error';
+    required?: boolean;
+    disabled?: boolean;
+    name?: string;
+}
+export interface CheckboxGroupContextValue<T = string> {
+    values: T[];
+    toggle: (value: T) => void;
+    isSelected: (value: T) => boolean;
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name?: string;
+    };
+    isInGroup: boolean;
+}
+export declare function useCheckboxGroupContext<T = string>(): CheckboxGroupContextValue<T> | null;
+/**
+ * CheckboxGroup -- Wrapper tier. Manages multiple checkbox selections.
+ * Locked-down API (no className/style).
+ */
+export declare function CheckboxGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, }: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CheckboxGroup {
+    var displayName: string;
+}
+export interface GroupCheckboxProps {
+    value: string;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    helperText?: string;
+}
+export declare const GroupCheckbox: React.ForwardRefExoticComponent<GroupCheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export { CheckboxGroup as PresetCheckboxGroup };
+export type { CheckboxGroupProps as PresetCheckboxGroupProps };

package/lib/wrappers/Dismissible/Dismissible.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface DismissibleProps {
+    /** Called when the element should be dismissed */
+    onDismiss?: () => void;
+    /** Dismiss on Escape key press (default: true) */
+    dismissOnEscape?: boolean;
+    /** Dismiss on click outside the element (default: true) */
+    dismissOnClickOutside?: boolean;
+    /** Show a close button (renders an X button as first child, not via cloneElement) */
+    showCloseButton?: boolean;
+    /** Disable dismiss behavior */
+    disabled?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants dismiss behavior to any child element.
+ * Adds Escape key listener, click-outside detection, and optional close button.
+ *
+ * Usage: <Dismissible onDismiss={handleClose}><Panel>...</Panel></Dismissible>
+ *
+ * Note: Uses native DOM event listeners (not Floating UI) since Dismissible
+ * doesn't need floating/positioning. For positioned overlays, use BaseOverlay instead.
+ */
+export declare const Dismissible: React.ForwardRefExoticComponent<DismissibleProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/Expandable/Expandable.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface ExpandableProps {
+    /** Whether the content is expanded */
+    expanded: boolean;
+    /** Optional trigger element rendered before the expandable content */
+    trigger?: React.ReactNode;
+    /** Called when the trigger is clicked (for controlled expand/collapse) */
+    onToggle?: () => void;
+    /** Animation duration in seconds (default: 0.2) */
+    duration?: number;
+    children: React.ReactNode;
+}
+/**
+ * Functional Wrapper: animated expand/collapse toggle.
+ * Uses Framer Motion AnimatePresence for smooth height animation.
+ * Falls back to basic show/hide if framer-motion is not installed.
+ *
+ * Usage:
+ *   <Expandable expanded={isOpen} trigger={<Button onClick={toggle}>Toggle</Button>}>
+ *     <div>Collapsible content here</div>
+ *   </Expandable>
+ */
+export declare const Expandable: React.ForwardRefExoticComponent<ExpandableProps & React.RefAttributes<HTMLDivElement>>;

package/lib/wrappers/InputGroup/InputGroup.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface InputGroupProps {
+    children: React.ReactNode;
+    attached?: boolean;
+}
+export interface InputAddonProps {
+    children: React.ReactNode;
+    position?: 'left' | 'right';
+}
+/**
+ * InputGroup -- Wrapper tier. Groups inputs with addons.
+ * Locked-down API (no className/style).
+ */
+export declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * InputAddon -- Wrapper tier. Prepend/append content to inputs.
+ */
+export declare const InputAddon: React.ForwardRefExoticComponent<InputAddonProps & React.RefAttributes<HTMLSpanElement>>;
+export { InputGroup as PresetInputGroup, InputAddon as PresetInputAddon };
+export type { InputGroupProps as PresetInputGroupProps, InputAddonProps as PresetInputAddonProps };

package/lib/wrappers/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,52 @@
+import { default as React } from 'react';
+export interface RadioGroupOption<T = string> {
+    value: T;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps<T = string> {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    options?: RadioGroupOption<T>[];
+    children?: React.ReactNode;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'sm' | 'md' | 'lg';
+    label?: string;
+    helperText?: string;
+    status?: 'default' | 'success' | 'error';
+    required?: boolean;
+    disabled?: boolean;
+    name: string;
+}
+export interface RadioGroupContextValue<T = string> {
+    value: T | undefined;
+    select: (value: T) => void;
+    isSelected: (value: T) => boolean;
+    groupProps: {
+        size?: 'sm' | 'md' | 'lg';
+        status?: 'default' | 'success' | 'error';
+        disabled?: boolean;
+        name: string;
+    };
+    isInGroup: boolean;
+}
+export declare function useRadioGroupContext<T = string>(): RadioGroupContextValue<T> | null;
+/**
+ * RadioGroup -- Wrapper tier. Manages single-choice selections.
+ * Locked-down API (no className/style).
+ */
+export declare function RadioGroup<T = string>({ value, defaultValue, onChange, options, children, orientation, size, label, helperText, status, required, disabled, name, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+export interface GroupRadioProps {
+    value: string;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const GroupRadio: React.ForwardRefExoticComponent<GroupRadioProps & React.RefAttributes<HTMLInputElement>>;
+export { RadioGroup as PresetRadioGroup };
+export type { RadioGroupProps as PresetRadioGroupProps };

package/lib/wrappers/Selectable/Selectable.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface SelectableProps {
+    /** Whether the child is currently selected */
+    selected?: boolean;
+    /** Called when selection state should change */
+    onSelect?: (selected: boolean, e: React.SyntheticEvent) => void;
+    /** Disable selection */
+    disabled?: boolean;
+    /** Show a checkbox indicator alongside the child */
+    showCheckbox?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants selection behavior to any child element.
+ * Adds click toggle, aria-selected, and optional checkbox indicator.
+ *
+ * Usage: <Selectable selected={isSelected} onSelect={handleSelect}><Card>...</Card></Selectable>
+ */
+export declare const Selectable: React.ForwardRefExoticComponent<SelectableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/Sortable/Sortable.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface SortableProps {
+    /** Unique ID for this sortable item (must match SortableContext items) */
+    id: string | number;
+    /** Disable drag behavior */
+    disabled?: boolean;
+    children: React.ReactElement;
+}
+/**
+ * Functional Wrapper: grants drag-to-reorder behavior to any child element.
+ * Requires @dnd-kit/sortable as optional peer dep. Falls back to passthrough if not installed.
+ *
+ * IMPORTANT: Consumer must wrap the list in DndContext + SortableContext from @dnd-kit/core.
+ * This wrapper only handles individual item sortable behavior.
+ *
+ * Usage:
+ *   <DndContext onDragEnd={handleDragEnd}>
+ *     <SortableContext items={ids}>
+ *       {items.map(item => (
+ *         <Sortable id={item.id} key={item.id}>
+ *           <Card>{item.name}</Card>
+ *         </Sortable>
+ *       ))}
+ *     </SortableContext>
+ *   </DndContext>
+ */
+export declare const Sortable: React.ForwardRefExoticComponent<SortableProps & React.RefAttributes<HTMLElement>>;

package/lib/wrappers/SortableZones/SortableZones.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { ZoneConfig } from './useSortableZones';
+export interface SortableZonesProps<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    onZoneChange?: (zones: ZoneConfig<T>[]) => void;
+    /** Render the zone container. Receives zone key and the zone's current items. */
+    renderZone: (zoneKey: string, items: T[]) => React.ReactNode;
+    /** Render a single item inside a zone. */
+    renderItem: (item: T) => React.ReactNode;
+    /** Render the drag overlay (floating item while dragging). Falls back to renderItem if omitted. */
+    renderDragOverlay?: (item: T) => React.ReactNode;
+}
+/**
+ * SortableZones — multi-zone drag/drop wrapper on top of @dnd-kit/core.
+ *
+ * Supports within-zone reorder and cross-zone drag with optional maxItems cap per zone.
+ * Uses useSortableZones hook for state management.
+ * Falls back to passive rendering if @dnd-kit/core is not installed.
+ *
+ * Generic over T extends { id: string }. No reptime-specific types. D-04, D-06, D-11 compliant.
+ */
+export declare function SortableZones<T extends {
+    id: string;
+}>(props: SortableZonesProps<T>): React.ReactElement;
+export declare namespace SortableZones {
+    var displayName: string;
+}
+export type { ZoneConfig, UseSortableZonesConfig, SortableZonesState } from './useSortableZones';
+export { useSortableZones } from './useSortableZones';
+export type { ZoneKey } from './useSortableZones';

package/lib/wrappers/SortableZones/index.d.ts

@@ -0,0 +1,4 @@
+export { SortableZones } from './SortableZones';
+export type { SortableZonesProps } from './SortableZones';
+export { useSortableZones } from './useSortableZones';
+export type { ZoneConfig, ZoneKey, UseSortableZonesConfig, SortableZonesState } from './useSortableZones';

package/lib/wrappers/SortableZones/useSortableZones.d.ts

@@ -0,0 +1,66 @@
+export type ZoneKey = string;
+export interface ZoneConfig<T extends {
+    id: string;
+}> {
+    zoneKey: ZoneKey;
+    items: T[];
+    maxItems?: number;
+}
+export interface SortableZonesState<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    activeZone: ZoneKey | null;
+    activeItem: T | null;
+    getZoneProps: (zoneKey: ZoneKey) => {
+        id: string;
+        'data-zone-key': string;
+    };
+    getItemProps: (item: T) => {
+        id: string;
+        'data-item-id': string;
+        'data-zone-key': ZoneKey;
+    };
+}
+export interface UseSortableZonesConfig<T extends {
+    id: string;
+}> {
+    zones: ZoneConfig<T>[];
+    onZoneChange?: (zones: ZoneConfig<T>[]) => void;
+}
+/**
+ * useSortableZones — zone-aware multi-container drag/drop state hook.
+ *
+ * Pure React hook (useState, useCallback). Does NOT import DndContext —
+ * SortableZones.tsx connects the event handlers to DndContext callbacks.
+ *
+ * Uncontrolled by default: zones state is initialised from config.zones and
+ * managed internally. Call onZoneChange to sync back to parent.
+ *
+ * Generic over T extends { id: string }. No reptime-specific types. D-06, D-04, D-11 compliant.
+ */
+export declare function useSortableZones<T extends {
+    id: string;
+}>(config: UseSortableZonesConfig<T>): SortableZonesState<T> & {
+    handleDragStart: (event: {
+        active: {
+            id: string;
+        };
+    }) => void;
+    handleDragOver: (event: {
+        active: {
+            id: string;
+        };
+        over: {
+            id: string;
+        } | null;
+    }) => void;
+    handleDragEnd: (event: {
+        active: {
+            id: string;
+        };
+        over: {
+            id: string;
+        } | null;
+    }) => void;
+};

package/lib/wrappers/Transition/Transition.d.ts

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { AnimationPresetName } from '../../utils/animations';
+interface AnimatedElementProps {
+    className?: string;
+    style?: React.CSSProperties;
+    'data-state'?: string;
+}
+export interface TransitionProps {
+    show: boolean;
+    animation?: AnimationPresetName | {
+        enter: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+        exit: {
+            from: React.CSSProperties;
+            to: React.CSSProperties;
+        };
+    };
+    duration?: number;
+    easing?: string;
+    delay?: number;
+    unmountOnExit?: boolean;
+    onEnter?: () => void;
+    onEntered?: () => void;
+    onExit?: () => void;
+    onExited?: () => void;
+    children: React.ReactElement<AnimatedElementProps>;
+}
+/**
+ * Transition -- Wrapper tier. Self-contained enter/exit animation.
+ * Strips className/style from consumer API.
+ */
+export declare function Transition({ show, animation, duration: customDuration, easing: customEasing, delay, unmountOnExit, onEnter, onEntered, onExit, onExited, children, ...rest }: TransitionProps): React.ReactElement<AnimatedElementProps, string | React.JSXElementConstructor<any>> | null;
+export declare namespace Transition {
+    var displayName: string;
+}
+export interface TransitionGroupProps {
+    children: React.ReactNode;
+}
+/**
+ * TransitionGroup -- Wrapper tier. Container for animated lists.
+ */
+export declare function TransitionGroup({ children }: TransitionGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TransitionGroup {
+    var displayName: string;
+}
+export { Transition as PresetTransition, TransitionGroup as PresetTransitionGroup };
+export type { TransitionProps as PresetTransitionProps, TransitionGroupProps as PresetTransitionGroupProps };

package/lib/wrappers/index.d.ts

@@ -0,0 +1,25 @@
+export { mergeRefs, mergeHandlers } from './utils';
+export { Actionable } from './Actionable/Actionable';
+export type { ActionableProps } from './Actionable/Actionable';
+export { Selectable } from './Selectable/Selectable';
+export type { SelectableProps } from './Selectable/Selectable';
+export { Dismissible } from './Dismissible/Dismissible';
+export type { DismissibleProps } from './Dismissible/Dismissible';
+export { Sortable } from './Sortable/Sortable';
+export type { SortableProps } from './Sortable/Sortable';
+export { Expandable } from './Expandable/Expandable';
+export type { ExpandableProps } from './Expandable/Expandable';
+export { ButtonGroup, ButtonGroupContext } from './ButtonGroup/ButtonGroup';
+export type { ButtonGroupProps, ButtonGroupContextValue } from './ButtonGroup/ButtonGroup';
+export { InputGroup, InputAddon } from './InputGroup/InputGroup';
+export type { InputGroupProps, InputAddonProps } from './InputGroup/InputGroup';
+export { CheckboxGroup, useCheckboxGroupContext, GroupCheckbox } from './CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxGroupOption, CheckboxGroupContextValue, GroupCheckboxProps } from './CheckboxGroup/CheckboxGroup';
+export { RadioGroup, useRadioGroupContext, GroupRadio } from './RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioGroupOption, RadioGroupContextValue, GroupRadioProps } from './RadioGroup/RadioGroup';
+export { AsyncLoader } from './AsyncLoader/AsyncLoader';
+export type { AsyncLoaderProps } from './AsyncLoader/AsyncLoader';
+export { Transition, TransitionGroup } from './Transition/Transition';
+export type { TransitionProps, TransitionGroupProps } from './Transition/Transition';
+export { SortableZones, useSortableZones } from './SortableZones';
+export type { SortableZonesProps, ZoneConfig, ZoneKey, UseSortableZonesConfig, SortableZonesState } from './SortableZones';

package/lib/wrappers/utils.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+/**
+ * Merge multiple React refs into one. Supports callback refs and RefObjects.
+ */
+export declare function mergeRefs<T>(...refs: (React.Ref<T> | undefined | null)[]): React.RefCallback<T>;
+/**
+ * Chain two event handlers. Calls child handler first, then wrapper handler.
+ * If child handler calls e.preventDefault(), wrapper handler still runs.
+ */
+export declare function mergeHandlers<E extends React.SyntheticEvent>(childHandler?: ((e: E) => void) | null, wrapperHandler?: ((e: E) => void) | null): ((e: E) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mt-gloss/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "publishConfig": {
     "access": "restricted"
@@ -20,12 +20,34 @@
       },
       "default": "./index.js"
     },
+    "./internals": {
+      "import": {
+        "types": "./internals.d.ts",
+        "default": "./internals.js"
+      },
+      "default": "./internals.js"
+    },
+    "./catalog": {
+      "import": {
+        "types": "./catalog.d.ts",
+        "default": "./catalog.js"
+      },
+      "require": {
+        "types": "./catalog.d.ts",
+        "default": "./catalog.js"
+      },
+      "default": "./catalog.js"
+    },
     "./styles.css": "./index.css"
   },
   "files": [
     "index.js",
     "index.d.ts",
     "index.css",
+    "internals.js",
+    "internals.d.ts",
+    "catalog.js",
+    "catalog.d.ts",
     "lib/**/*.d.ts",
     "README.md"
   ],
@@ -41,7 +63,10 @@
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
     "date-fns": "^3.0.0 || ^4.0.0",
-    "@mt-gloss/utils": ">=0.0.1"
+    "@mt-gloss/utils": ">=0.0.1",
+    "@floating-ui/react": ">=0.27.0",
+    "framer-motion": ">=12.0.0",
+    "zod": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@mui/material": {
@@ -76,6 +101,15 @@
     },
     "@mui/x-date-pickers-pro": {
       "optional": true
+    },
+    "@floating-ui/react": {
+      "optional": true
+    },
+    "framer-motion": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
     }
   },
   "optionalDependencies": {

package/index.css

@@ -1 +0,0 @@
-@keyframes gloss-skeleton-breathe{0%,to{opacity:1}50%{opacity:.5}}.gloss-skeleton-shimmer{animation:gloss-skeleton-breathe 2s ease-in-out infinite}.gloss-skeleton-block{background-color:#e5e7eb;border-radius:6px}.gloss-skeleton-header{background-color:#d1d5db}@keyframes gloss-quadrant-progress{0%{transform:translate(-100%)}to{transform:translate(250%)}}.gloss-quadrant-progress-bar{position:absolute;top:0;left:0;right:0;height:2px;overflow:hidden;border-radius:2px 2px 0 0;background:transparent;z-index:10}.gloss-quadrant-progress-bar__fill{height:100%;width:40%;background:#4f46e5;animation:gloss-quadrant-progress 1.5s ease-in-out infinite;transform-origin:left center}@keyframes gloss-content-reveal{0%{opacity:0}to{opacity:1}}.gloss-content-reveal{animation:gloss-content-reveal .15s ease forwards}.gloss-metric-data-stale{filter:blur(4px);transition:filter .3s ease-out;will-change:filter}.gloss-metric-data-fresh{filter:blur(0px);transition:filter .2s ease-in}.MuiDataGrid-root .gloss-tabular-nums{font-family:Plus Jakarta Sans,sans-serif;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-optical-sizing:auto;font-weight:500;font-style:normal;text-rendering:optimizeLegibility}.MuiDataGrid-root .MuiDataGrid-cell{font-family:Plus Jakarta Sans,sans-serif;font-optical-sizing:auto;text-rendering:optimizeLegibility;padding:unset;padding:0 16px;background-color:unset;box-sizing:border-box}.MuiDataGrid-root .MuiDataGrid-cell .gloss-currency{color:#9ca3af;font-weight:400;font-size:.85em;margin-right:1px;vertical-align:baseline}.MuiDataGrid-root .MuiDataGrid-cell .gloss-cents{color:#9ca3af;font-weight:400;font-size:.85em;vertical-align:baseline}.MuiDataGrid-root .MuiDataGrid-cell .gloss-date-value{color:#6b7280;font-weight:400;font-size:.8125rem}.MuiDataGrid-root .MuiDataGrid-cell .gloss-date-year{opacity:.6}.MuiDataGrid-root .MuiDataGrid-cell a{color:#374151;position:relative;text-decoration:none}.MuiDataGrid-root .MuiDataGrid-cell.gloss-drillable a,.MuiDataGrid-root .MuiDataGrid-cell.gloss-primary-column a{text-decoration:none}.MuiDataGrid-root .MuiDataGrid-row:hover .MuiDataGrid-cell.gloss-drillable a,.MuiDataGrid-root .MuiDataGrid-row:hover .MuiDataGrid-cell.gloss-primary-column a{text-decoration:underline;text-decoration-style:dashed;text-decoration-color:#9ca3af;text-underline-offset:3px;cursor:pointer}.MuiDataGrid-root .MuiDataGrid-cell.gloss-primary-column{color:#374151;font-weight:500}.MuiDataGrid-root .gloss-order-id{text-transform:uppercase;color:#6b7280;font-size:.8125rem;font-weight:500;letter-spacing:-.01em}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes barIn{0%{opacity:0}to{opacity:1}}.gloss-chart-control-bar{position:relative;padding:15px 15px 8px}.gloss-chart-control-bar__track{position:absolute;background:#0000000f;border-radius:10px;z-index:1}.gloss-chart-control-bar__shapes{position:absolute;inset:0;z-index:2;pointer-events:none}.gloss-chart-control-bar__interactive{position:relative;z-index:3}.gloss-chart-control-bar__row-2-overlay{position:absolute;left:0;right:0;top:100%;z-index:4}.gloss-chart-control-bar__row-1{display:flex;align-items:center;min-height:0;width:100%;animation:barIn .5s cubic-bezier(.16,1,.3,1) both}.gloss-chart-control-bar__datepicker{margin-left:auto}.gloss-unified-context-menu__item--disabled{opacity:.5;cursor:not-allowed}.gloss-unified-context-menu__subtitle{font-size:11px;color:#9ca3af;line-height:1.2}.gloss-unified-context-menu__external-icon{color:#9ca3af;font-size:14px;margin-left:auto;opacity:.6}.hybrid-date-picker{position:relative;display:inline-block}.hybrid-date-picker__compare-badge{position:absolute;top:-4px;right:-4px;font-size:14px!important;color:#2563eb;background-color:#fff;border-radius:50%;padding:1px;box-shadow:0 1px 3px #00000026;transition:opacity .2s,transform .2s;opacity:1;transform:scale(1);pointer-events:none}.hybrid-date-picker__active-banner{background:linear-gradient(to right,#16a34a14,#10b98114);border-bottom:1px solid rgba(22,163,74,.15);padding:10px 12px}.hybrid-date-picker__active-banner-label{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:#22c55e;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.hybrid-date-picker__active-banner-content{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background-color:#fff;border-radius:8px;border:1px solid rgba(22,163,74,.2);cursor:pointer;transition:background-color .2s,border-color .2s}.hybrid-date-picker__active-banner-content:hover{background-color:#16a34a0a}.hybrid-date-picker__active-banner-content--selected{border-color:#16a34a66;box-shadow:0 0 0 1px #16a34a1a}.hybrid-date-picker__quick-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;background-color:#f9fafb;border-bottom:1px solid #e5e7eb}.hybrid-date-picker__content{overflow:hidden}.hybrid-date-picker__markets-list{padding:8px}.hybrid-date-picker__markets-list-add{margin-top:8px;padding-top:8px;border-top:1px solid #f3f4f6}.hybrid-date-picker__events-section-header{font-size:11px;font-weight:600;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;padding:8px 0 4px}.hybrid-date-picker__events-section-header:not(:first-child){margin-top:12px;border-top:1px solid #e5e7eb;padding-top:12px}.hybrid-date-picker__footer{background-color:#f9fafb;border-top:1px solid #e5e7eb}.hybrid-date-picker__footer-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px}.hybrid-date-picker__footer-drawer-trigger{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;transition:background-color .2s}.hybrid-date-picker__footer-drawer-trigger:hover{background-color:#f3f4f6}.hybrid-date-picker__footer-drawer-trigger-icon{transition:transform .2s}.hybrid-date-picker__footer-drawer-trigger-icon--expanded{transform:rotate(180deg)}.hybrid-date-picker__footer-drawer-content{padding:8px 12px;display:flex;gap:8px;border-top:1px solid #e5e7eb}.hybrid-date-picker__footer-drawer-range-label{display:inline-flex;align-items:center;cursor:pointer;padding:2px 4px;border-radius:4px;transition:background-color .2s;white-space:nowrap}.hybrid-date-picker__footer-drawer-range-label:hover{background-color:#0000000f}.range-card{display:flex;position:relative;flex:1;min-width:0;padding:8px;border-radius:6px;border:1px solid #e5e7eb;background-color:#fff;cursor:pointer;transition:border-color .2s,box-shadow .2s}.range-card:hover{border-color:#d1d5db}.range-card--active{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}.range-card--active.range-card--green{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e}.range-card--active.range-card--amber{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b}.range-card__color-bar{width:4px;border-radius:2px;margin-right:8px;flex-shrink:0}.range-card--blue .range-card__color-bar{background-color:#4f46e5}.range-card--green .range-card__color-bar{background-color:#22c55e}.range-card--amber .range-card__color-bar{background-color:#f59e0b}.range-card__content{flex:1;min-width:0}.range-card__header{display:flex;align-items:center;gap:6px;margin-bottom:2px}.range-card__label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase}.range-card__indicator{width:8px;height:8px;border-radius:50%;border:2px solid #d1d5db}.range-card__indicator--active{background-color:#4f46e5;border-color:#4f46e5}.range-card--green .range-card__indicator--active{background-color:#22c55e;border-color:#22c55e}.range-card--amber .range-card__indicator--active{background-color:#f59e0b;border-color:#f59e0b}.range-card__preset{font-size:13px;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.range-card__dates{font-size:11px;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.range-card__remove{position:absolute;top:2px;right:2px;padding:2px;opacity:0;transition:opacity .2s}.range-card:hover .range-card__remove{opacity:1}.range-card--empty{border-style:dashed}.range-card--empty .range-card__color-bar{border-style:dashed;border-width:0 0 0 4px;background:transparent;width:0;margin-right:12px}.range-card--empty.range-card--blue .range-card__color-bar{border-color:#4f46e5}.range-card--empty.range-card--green .range-card__color-bar{border-color:#22c55e}.range-card--empty.range-card--amber .range-card__color-bar{border-color:#f59e0b}.range-card-add{display:flex;align-items:center;justify-content:center;min-width:40px;border-radius:6px;border:1px dashed #d1d5db;background-color:transparent;cursor:pointer;transition:border-color .2s,background-color .2s}.range-card-add:hover{border-color:#4f46e5;background-color:#4f46e50a}.mini-calendar{--cell-size: 40px;--font-size: 12px;--header-font-size: 14px;--padding: 12px;--dot-size: 4px;--dot-offset: 10px;padding:var(--padding);font-family:Inter,sans-serif;font-variant-numeric:tabular-nums}.mini-calendar__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--padding)}.mini-calendar__header .MuiTypography-root{font-size:var(--header-font-size)}.mini-calendar__grid{display:grid;grid-template-columns:repeat(7,var(--cell-size));gap:2px 0;justify-content:center}.mini-calendar__day-header{height:calc(var(--cell-size) * .6);display:flex;align-items:center;justify-content:center;font-size:calc(var(--font-size) - 1px);font-weight:500;color:#6b7280}.mini-calendar__day{position:relative;width:var(--cell-size);height:var(--cell-size);border-radius:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-size);cursor:pointer;transition:background-color .2s,color .2s;color:#374151;background:transparent}.mini-calendar__day:hover:not(.mini-calendar__day--start):not(.mini-calendar__day--end):not(.mini-calendar__day--single):not(.mini-calendar__day--in-range):not(.mini-calendar__day--empty):not(.mini-calendar__day--disabled){background-color:#f3f4f6;border-radius:50%}.mini-calendar__day--empty{cursor:default}.mini-calendar__day--single{background-color:#4f46e5;color:#fff;font-weight:500;border-radius:50%}.mini-calendar__day--single:hover{background-color:#4338ca}.mini-calendar__day--start{background-color:#4f46e5;color:#fff;font-weight:500;border-radius:50% 0 0 50%}.mini-calendar__day--start:hover{background-color:#4338ca}.mini-calendar__day--end{background-color:#4f46e5;color:#fff;font-weight:500;border-radius:0 50% 50% 0}.mini-calendar__day--end:hover{background-color:#4338ca}.mini-calendar__day--in-range{background-color:#4f46e5;color:#fff;border-radius:0}.mini-calendar__day--disabled{color:#d1d5db;cursor:not-allowed;background:transparent}.mini-calendar__day--disabled:hover{background:transparent}.mini-calendar__day--disabled-in-range{background-color:#d1d5db;color:#9ca3af;border-radius:0;cursor:default}.mini-calendar__day--disabled-in-range:hover{background-color:#d1d5db}.mini-calendar__day--disabled-end{background-color:#d1d5db;color:#9ca3af;border-radius:0 50% 50% 0;cursor:default}.mini-calendar__day--disabled-end:hover{background-color:#d1d5db}.mini-calendar__day--today:not(.mini-calendar__day--start):not(.mini-calendar__day--end):not(.mini-calendar__day--single):not(.mini-calendar__day--in-range){font-weight:700}.mini-calendar__day--market:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%);margin-top:var(--dot-offset);width:var(--dot-size);height:var(--dot-size);background-color:#4f46e5;border-radius:50%}.mini-calendar__day--market.mini-calendar__day--in-range:after,.mini-calendar__day--market.mini-calendar__day--start:after,.mini-calendar__day--market.mini-calendar__day--end:after,.mini-calendar__day--market.mini-calendar__day--single:after{background-color:#fff}.mini-calendar__day--disabled.mini-calendar__day--market:after{background-color:#d1d5db}.mini-calendar__day--market.mini-calendar__day--disabled-in-range:after,.mini-calendar__day--market.mini-calendar__day--disabled-end:after{background-color:#fff}.mini-calendar__day--secondary.mini-calendar__day--single{background-color:#22c55e}.mini-calendar__day--secondary.mini-calendar__day--single:hover{background-color:#1a9a49}.mini-calendar__day--secondary.mini-calendar__day--start{background-color:#22c55e}.mini-calendar__day--secondary.mini-calendar__day--start:hover{background-color:#1a9a49}.mini-calendar__day--secondary.mini-calendar__day--end{background-color:#22c55e}.mini-calendar__day--secondary.mini-calendar__day--end:hover{background-color:#1a9a49}.mini-calendar__day--secondary.mini-calendar__day--in-range{background-color:#22c55e}.mini-calendar__day--tertiary.mini-calendar__day--single{background-color:#f59e0b}.mini-calendar__day--tertiary.mini-calendar__day--single:hover{background-color:#c57f08}.mini-calendar__day--tertiary.mini-calendar__day--start{background-color:#f59e0b}.mini-calendar__day--tertiary.mini-calendar__day--start:hover{background-color:#c57f08}.mini-calendar__day--tertiary.mini-calendar__day--end{background-color:#f59e0b}.mini-calendar__day--tertiary.mini-calendar__day--end:hover{background-color:#c57f08}.mini-calendar__day--tertiary.mini-calendar__day--in-range{background-color:#f59e0b}.mini-calendar__legend{display:flex;align-items:center;justify-content:space-between;margin-top:var(--padding);padding-top:calc(var(--padding) * .8);border-top:1px solid #f3f4f6}.mini-calendar__legend-item{display:flex;align-items:center;gap:6px}.mini-calendar__legend-dot{width:calc(var(--dot-size) + 2px);height:calc(var(--dot-size) + 2px);border-radius:50%}.mini-calendar__legend-dot--market{background-color:#4f46e5}.market-edit-modal__header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #f3f4f6}.market-edit-modal__content{padding:16px}.market-edit-modal__field{margin-bottom:12px}.market-edit-modal__field:last-child{margin-bottom:0}.market-edit-modal__label{display:block;font-size:12px;font-weight:500;color:#6b7280;margin-bottom:4px}.market-edit-modal__input{width:100%;padding:8px 10px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;transition:border-color .2s,box-shadow .2s}.market-edit-modal__input:focus{outline:none;border-color:#4f46e5;box-shadow:0 0 0 2px #4f46e526}.market-edit-modal__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.market-edit-modal__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background-color:#f9fafb;border-top:1px solid #f3f4f6}.timeframe-toggle .MuiToggleButton-root.Mui-selected{background-color:#4f46e5;color:#fff}.gloss-grid{width:100%;position:relative}.gloss-grid__container{display:grid;overflow:visible;position:relative;width:100%}.gloss-grid__slot{min-width:0;min-height:0}.gloss-grid__slot--dragging{opacity:.4}.gloss-grid__empty-slot{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;border:2px dashed transparent;border-radius:12px;background:#00000004;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}.gloss-grid__empty-slot:hover{border-color:#4f46e5;background:#4f46e50a}.gloss-grid__drag-overlay{box-shadow:0 8px 24px #00000026;cursor:grabbing;z-index:100;border-radius:12px}.gloss-grid__pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 0;margin-top:4px}.gloss-grid__pagination-dots{display:flex;align-items:center;gap:6px}.gloss-grid__pagination-dot{width:8px;height:8px;border-radius:50%;background:#e5e7eb;border:none;padding:0;cursor:pointer;transition:width .2s ease,background-color .2s ease}.gloss-grid__pagination-dot--active{width:20px;border-radius:4px;background:#4f46e5}.gloss-grid__pagination-chevron{background:none;border:none;font-size:18px;color:#6b7280;cursor:pointer;padding:4px 8px;border-radius:4px}.gloss-grid__pagination-chevron:hover:not(:disabled){background:#f3f4f6;color:#111827}.gloss-grid__pagination-chevron--disabled{opacity:.3;cursor:default}@keyframes spinner{to{transform:rotate(360deg)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes dash-rotate{0%{stroke-dashoffset:400}to{stroke-dashoffset:0}}.gloss-tabbed-data-view .MuiTabs-indicator{display:none}.gloss-tabbed-data-view .MuiTab-root{display:flex;align-items:center;position:relative;background-color:transparent;border:1px solid transparent;border-bottom:none;border-radius:0;margin-bottom:0;margin-left:0;margin-right:4px;padding:8px 16px 8px 12px;box-shadow:none;text-transform:none;font-weight:500;font-size:.8rem;opacity:1;transition:color .15s ease,background-color .15s ease,border-color .15s ease}.gloss-tabbed-data-view .MuiTab-root .MuiSvgIcon-root{margin-right:6px;font-size:14px;color:#9ca3af}.gloss-tabbed-data-view .MuiTab-root .tab-line-1{display:flex;align-items:center}.gloss-tabbed-data-view .MuiTab-root .tab-line-1 span{font-family:Plus Jakarta Sans,sans-serif;font-size:14px;font-weight:500;line-height:1.2;text-transform:capitalize;color:#6b7280;text-align:left;transition:color .15s ease}.gloss-tabbed-data-view .MuiTab-root .MuiTab-icon{position:relative;right:auto;top:auto;margin-left:12px}.gloss-tabbed-data-view .MuiTab-root .MuiTab-icon .MuiIconButton-root{color:#9ca3af;padding:2px}.gloss-tabbed-data-view .MuiTab-root .MuiTab-icon .MuiIconButton-root:hover{color:#111827;background-color:#0000000a}.gloss-tabbed-data-view .MuiTab-root .MuiTab-icon .MuiIconButton-root .MuiSvgIcon-root{font-size:14px}.gloss-tabbed-data-view .MuiTab-root:has(.MuiTab-icon){padding-right:0}.gloss-tabbed-data-view .MuiTab-root:hover{background-color:#f9fafb;border-radius:6px 6px 0 0}.gloss-tabbed-data-view .MuiTab-root:hover .tab-line-1 span{color:#374151}.gloss-tabbed-data-view .MuiTab-root:hover .MuiSvgIcon-root{color:#6b7280}.gloss-tabbed-data-view .MuiTab-root.Mui-selected{background-color:#fff;border:1px solid rgba(0,0,0,.06);border-bottom:1px solid #ffffff;box-shadow:0 -1px 3px #0000000d;border-radius:8px 8px 0 0;margin-bottom:-1px;z-index:10;padding:8px 8px 8px 16px}.gloss-tabbed-data-view .MuiTab-root.Mui-selected .MuiSvgIcon-root{color:#111827}.gloss-tabbed-data-view .MuiTab-root.Mui-selected .tab-line-1 span{font-weight:600;color:#374151}.gloss-tabbed-data-view .MuiTab-root.Mui-selected .MuiTab-icon .MuiIconButton-root{color:#6b7280}.gloss-tabbed-data-view .MuiTab-root.Mui-selected .MuiTab-icon .MuiIconButton-root:hover{color:#111827}.gloss-tabbed-data-view .MuiTab-root.Mui-selected:hover{background-color:#fff}.gloss-tabbed-data-view .MuiTabs-root .Mui-selected svg{fill:#111827;color:#111827}.gloss-tabbed-data-view .MuiTab-iconWrapper{margin-left:8px;margin-right:-4px}