Spaces:
Runtime error
Runtime error
| /* @ds-bundle: {"format":3,"namespace":"ChanCompassSpectrum2DesignSystem_b52b37","components":[{"name":"Button","sourcePath":"components/actions/Button.jsx"},{"name":"Card","sourcePath":"components/containers/Card.jsx"},{"name":"InlineAlert","sourcePath":"components/containers/InlineAlert.jsx"},{"name":"Checkbox","sourcePath":"components/forms/Checkbox.jsx"},{"name":"Field","sourcePath":"components/forms/Field.jsx"},{"name":"Switch","sourcePath":"components/forms/Switch.jsx"},{"name":"Tabs","sourcePath":"components/navigation/Tabs.jsx"},{"name":"Badge","sourcePath":"components/status/Badge.jsx"},{"name":"SignalBadge","sourcePath":"components/status/SignalBadge.jsx"},{"name":"StatusLight","sourcePath":"components/status/StatusLight.jsx"}],"sourceHashes":{"components/actions/Button.jsx":"c9f7501c202c","components/containers/Card.jsx":"9316d0c88d32","components/containers/InlineAlert.jsx":"5ceb8bdaac5f","components/forms/Checkbox.jsx":"59c34e791a76","components/forms/Field.jsx":"39157a609b42","components/forms/Switch.jsx":"38f4684e0ef2","components/navigation/Tabs.jsx":"5488bca491fa","components/status/Badge.jsx":"3e62358e3a0b","components/status/SignalBadge.jsx":"df7989e74422","components/status/StatusLight.jsx":"f7d206a1642b"},"inlinedExternals":[],"unexposedExports":[]} */ | |
| (() => { | |
| const __ds_ns = (window.ChanCompassSpectrum2DesignSystem_b52b37 = window.ChanCompassSpectrum2DesignSystem_b52b37 || {}); | |
| const __ds_scope = {}; | |
| (__ds_ns.__errors = __ds_ns.__errors || []); | |
| // components/actions/Button.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| /* Inject component CSS once. Spectrum 2 buttons: fully-rounded "pill" by | |
| default, medium height 32px, 600 weight, soft state transitions. */ | |
| const CSS = ` | |
| .s2-btn{ | |
| --_bg: var(--accent); --_bgh: var(--accent-hover); --_bgd: var(--accent-down); | |
| --_fg: var(--text-on-accent); --_bd: transparent; | |
| display:inline-flex; align-items:center; justify-content:center; gap:var(--space-100); | |
| font:var(--font-weight-semibold) var(--font-size-100)/1 var(--font-sans); | |
| height:var(--control-height-md); padding:0 var(--space-250); | |
| border-radius:var(--radius-full); border:var(--border-width-200) solid var(--_bd); | |
| background:var(--_bg); color:var(--_fg); cursor:pointer; white-space:nowrap; | |
| transition:var(--transition-colors), transform var(--duration-fast) var(--ease-out); | |
| user-select:none; | |
| } | |
| .s2-btn:hover{ background:var(--_bgh); } | |
| .s2-btn:active{ background:var(--_bgd); transform:scale(.98); } | |
| .s2-btn:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); } | |
| .s2-btn[disabled]{ background:var(--surface-subtle); color:var(--text-disabled); border-color:transparent; cursor:default; transform:none; } | |
| .s2-btn--square{ border-radius:var(--radius-default); } | |
| .s2-btn--sm{ height:var(--control-height-sm); padding:0 var(--space-200); font-size:var(--font-size-75); } | |
| .s2-btn--lg{ height:var(--control-height-lg); padding:0 var(--space-300); font-size:var(--font-size-200); } | |
| /* secondary — outline */ | |
| .s2-btn--secondary{ --_bg:var(--surface-card); --_fg:var(--text-body); --_bd:var(--border-strong); } | |
| .s2-btn--secondary:hover{ --_bg:var(--surface-subtle); --_bd:var(--text-secondary); } | |
| .s2-btn--secondary:active{ --_bg:var(--s2-gray-100); } | |
| /* negative */ | |
| .s2-btn--negative{ --_bg:var(--negative); --_bgh:var(--negative-hover); --_bgd:var(--s2-red-1100); } | |
| /* quiet — no chrome until hover */ | |
| .s2-btn--quiet{ --_bg:transparent; --_fg:var(--text-body); --_bd:transparent; } | |
| .s2-btn--quiet:hover{ --_bg:var(--surface-subtle); } | |
| .s2-btn--quiet:active{ --_bg:var(--s2-gray-100); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const el = document.createElement('style'); | |
| el.textContent = CSS; | |
| el.dataset.s2 = 'button'; | |
| document.head.appendChild(el); | |
| injected = true; | |
| } | |
| } | |
| function Button({ | |
| variant = 'accent', | |
| size = 'md', | |
| shape = 'pill', | |
| icon, | |
| children, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const cls = ['s2-btn', variant !== 'accent' && `s2-btn--${variant}`, size !== 'md' && `s2-btn--${size}`, shape === 'square' && 's2-btn--square', className].filter(Boolean).join(' '); | |
| return /*#__PURE__*/React.createElement("button", _extends({ | |
| className: cls | |
| }, rest), icon, children); | |
| } | |
| Object.assign(__ds_scope, { Button }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/actions/Button.jsx", error: String((e && e.message) || e) }); } | |
| // components/containers/Card.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-card{ | |
| background:var(--surface-card); border:var(--border-width-100) solid var(--border-hairline); | |
| border-radius:var(--card-radius); box-shadow:var(--shadow-raised); | |
| overflow:clip; | |
| } | |
| .s2-card--elevated{ box-shadow:var(--shadow-elevated); } | |
| .s2-card--flat{ box-shadow:none; } | |
| .s2-card--quiet{ background:transparent; border:none; box-shadow:none; } | |
| .s2-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-200); padding:var(--space-250) var(--space-300) 0; } | |
| .s2-card__titles{ display:flex; flex-direction:column; gap:2px; } | |
| .s2-card__title{ font:var(--type-h3); color:var(--text-heading); } | |
| .s2-card__subtitle{ font:var(--type-detail); color:var(--text-muted); } | |
| .s2-card__body{ padding:var(--space-250) var(--space-300) var(--space-300); } | |
| .s2-card__head + .s2-card__body{ padding-top:var(--space-200); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'card'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function Card({ | |
| title, | |
| subtitle, | |
| action, | |
| elevation = 'raised', | |
| children, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const cls = ['s2-card', elevation !== 'raised' && `s2-card--${elevation}`, className].filter(Boolean).join(' '); | |
| const hasHead = title || subtitle || action; | |
| return /*#__PURE__*/React.createElement("section", _extends({ | |
| className: cls | |
| }, rest), hasHead && /*#__PURE__*/React.createElement("header", { | |
| className: "s2-card__head" | |
| }, /*#__PURE__*/React.createElement("div", { | |
| className: "s2-card__titles" | |
| }, title && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-card__title" | |
| }, title), subtitle && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-card__subtitle" | |
| }, subtitle)), action), /*#__PURE__*/React.createElement("div", { | |
| className: "s2-card__body" | |
| }, children)); | |
| } | |
| Object.assign(__ds_scope, { Card }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/containers/Card.jsx", error: String((e && e.message) || e) }); } | |
| // components/containers/InlineAlert.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| /* Spectrum 2 in-line message. A framed notice tied to a region of the page. | |
| `ai` variant is the signature accent-framed panel used for local-LLM output. */ | |
| const CSS = ` | |
| .s2-alert{ | |
| display:flex; gap:var(--space-150); padding:var(--space-200) var(--space-250); | |
| border-radius:var(--radius-lg); border:var(--border-width-100) solid var(--border-default); | |
| background:var(--surface-card); font:var(--type-body); color:var(--text-body); | |
| } | |
| .s2-alert__icon{ flex:none; width:18px; height:18px; display:grid; place-items:center; margin-top:1px; } | |
| .s2-alert__body{ display:flex; flex-direction:column; gap:2px; min-width:0; } | |
| .s2-alert__title{ font:var(--type-ui-bold); color:var(--text-heading); } | |
| .s2-alert--informative{ border-color:var(--accent); background:var(--informative-subtle); } | |
| .s2-alert--informative .s2-alert__icon{ color:var(--accent); } | |
| .s2-alert--positive{ border-color:var(--positive); background:var(--positive-subtle); } | |
| .s2-alert--positive .s2-alert__icon{ color:var(--positive); } | |
| .s2-alert--negative{ border-color:var(--negative); background:var(--negative-subtle); } | |
| .s2-alert--negative .s2-alert__icon{ color:var(--negative); } | |
| .s2-alert--notice{ border-color:var(--notice); background:var(--notice-subtle); } | |
| .s2-alert--notice .s2-alert__icon{ color:var(--notice); } | |
| .s2-alert--ai{ | |
| border:var(--border-width-200) solid var(--accent); border-inline-start-width:6px; | |
| border-radius:var(--radius-lg); background:var(--surface-card); box-shadow:var(--shadow-accent); | |
| } | |
| .s2-alert--ai .s2-alert__title{ color:var(--accent-text); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'alert'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| const ICONS = { | |
| informative: 'M9 1a8 8 0 100 16A8 8 0 009 1zm0 3.2a1.1 1.1 0 110 2.2 1.1 1.1 0 010-2.2zM10.2 14H7.8v-.9l.9-.2V9.1l-.9-.2V8h2.4v4.9l.9.2v.9z', | |
| positive: 'M9 1a8 8 0 100 16A8 8 0 009 1zm4.2 5.4l-5 5.2a.7.7 0 01-1 0L4.8 9a.7.7 0 011-1l1.9 1.9 4.5-4.6a.7.7 0 011 1z', | |
| negative: 'M9 1a8 8 0 100 16A8 8 0 009 1zm1.1 11.8H7.9v-2.2h2.2v2.2zm0-3.6H7.9V4.2h2.2v5z', | |
| notice: 'M9.9 1.6l7 12.1a1 1 0 01-.9 1.5H2a1 1 0 01-.9-1.5l7-12.1a1 1 0 011.8 0zM7.9 6.2v3.8h2.2V6.2H7.9zm0 5.2v2h2.2v-2H7.9z', | |
| ai: 'M9 1l1.8 4.3L15 7l-4.2 1.7L9 13 7.2 8.7 3 7l4.2-1.7L9 1z' | |
| }; | |
| function InlineAlert({ | |
| variant = 'informative', | |
| title, | |
| icon, | |
| children, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const path = ICONS[variant] || ICONS.informative; | |
| return /*#__PURE__*/React.createElement("div", _extends({ | |
| className: ['s2-alert', `s2-alert--${variant}`, className].filter(Boolean).join(' ') | |
| }, rest), /*#__PURE__*/React.createElement("span", { | |
| className: "s2-alert__icon" | |
| }, icon || /*#__PURE__*/React.createElement("svg", { | |
| width: "18", | |
| height: "18", | |
| viewBox: "0 0 18 18", | |
| fill: "currentColor" | |
| }, /*#__PURE__*/React.createElement("path", { | |
| d: path | |
| }))), /*#__PURE__*/React.createElement("div", { | |
| className: "s2-alert__body" | |
| }, title && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-alert__title" | |
| }, title), children && /*#__PURE__*/React.createElement("div", null, children))); | |
| } | |
| Object.assign(__ds_scope, { InlineAlert }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/containers/InlineAlert.jsx", error: String((e && e.message) || e) }); } | |
| // components/forms/Checkbox.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-check{ display:inline-flex; align-items:center; gap:var(--space-100); cursor:pointer; font:var(--type-ui); color:var(--text-body); user-select:none; } | |
| .s2-check input{ position:absolute; opacity:0; width:0; height:0; } | |
| .s2-check__box{ | |
| width:16px; height:16px; flex:none; border-radius:var(--radius-sm); | |
| border:var(--border-width-200) solid var(--border-field); background:var(--surface-card); | |
| display:grid; place-items:center; transition:var(--transition-colors); | |
| } | |
| .s2-check:hover .s2-check__box{ border-color:var(--text-secondary); } | |
| .s2-check__box svg{ width:11px; height:11px; opacity:0; color:#fff; } | |
| .s2-check input:checked + .s2-check__box{ background:var(--accent); border-color:var(--accent); } | |
| .s2-check input:checked + .s2-check__box svg{ opacity:1; } | |
| .s2-check input:focus-visible + .s2-check__box{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); } | |
| .s2-check input:disabled + .s2-check__box{ background:var(--surface-subtle); border-color:var(--border-default); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'checkbox'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function Checkbox({ | |
| checked, | |
| onChange, | |
| children, | |
| disabled = false, | |
| ...rest | |
| }) { | |
| useCSS(); | |
| return /*#__PURE__*/React.createElement("label", { | |
| className: "s2-check" | |
| }, /*#__PURE__*/React.createElement("input", _extends({ | |
| type: "checkbox", | |
| checked: checked, | |
| onChange: onChange, | |
| disabled: disabled | |
| }, rest)), /*#__PURE__*/React.createElement("span", { | |
| className: "s2-check__box" | |
| }, /*#__PURE__*/React.createElement("svg", { | |
| viewBox: "0 0 12 12", | |
| fill: "none" | |
| }, /*#__PURE__*/React.createElement("path", { | |
| d: "M1 6l3.2 3.5L11 2.5", | |
| stroke: "currentColor", | |
| strokeWidth: "2", | |
| strokeLinecap: "round", | |
| strokeLinejoin: "round" | |
| }))), children && /*#__PURE__*/React.createElement("span", null, children)); | |
| } | |
| Object.assign(__ds_scope, { Checkbox }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Checkbox.jsx", error: String((e && e.message) || e) }); } | |
| // components/forms/Field.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-field{ display:flex; flex-direction:column; gap:var(--space-75); } | |
| .s2-field__label{ font:var(--type-ui-bold); color:var(--text-heading); } | |
| .s2-field__req{ color:var(--negative); margin-inline-start:2px; } | |
| .s2-field__input{ | |
| height:var(--control-height-md); padding:0 var(--space-150); | |
| font:var(--type-ui); color:var(--text-body); | |
| background:var(--surface-card); | |
| border:var(--border-width-200) solid var(--border-field); | |
| border-radius:var(--field-radius); outline:none; | |
| transition:var(--transition-colors), box-shadow var(--duration-fast) var(--ease-out); | |
| } | |
| .s2-field__input::placeholder{ color:var(--text-muted); } | |
| .s2-field__input:hover{ border-color:var(--text-secondary); } | |
| .s2-field__input:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); } | |
| .s2-field--textarea .s2-field__input{ height:auto; padding:var(--space-150); resize:vertical; line-height:var(--line-height-body); font-family:var(--font-sans); } | |
| .s2-field--mono .s2-field__input{ font-family:var(--font-code); font-size:var(--font-size-75); } | |
| .s2-field--invalid .s2-field__input{ border-color:var(--negative); } | |
| .s2-field--invalid .s2-field__input:focus{ box-shadow:0 0 0 1px var(--negative); } | |
| .s2-field__help{ font:var(--type-detail); color:var(--text-muted); } | |
| .s2-field--invalid .s2-field__help{ color:var(--negative); } | |
| .s2-field__input:disabled{ background:var(--surface-subtle); color:var(--text-disabled); border-color:var(--border-default); cursor:default; } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const el = document.createElement('style'); | |
| el.textContent = CSS; | |
| el.dataset.s2 = 'field'; | |
| document.head.appendChild(el); | |
| injected = true; | |
| } | |
| } | |
| function Field({ | |
| label, | |
| value, | |
| onChange, | |
| placeholder, | |
| type = 'text', | |
| multiline = false, | |
| rows = 4, | |
| mono = false, | |
| required = false, | |
| invalid = false, | |
| help, | |
| disabled = false, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const cls = ['s2-field', multiline && 's2-field--textarea', mono && 's2-field--mono', invalid && 's2-field--invalid', className].filter(Boolean).join(' '); | |
| const inputProps = { | |
| className: 's2-field__input', | |
| value, | |
| onChange, | |
| placeholder, | |
| disabled, | |
| ...rest | |
| }; | |
| return /*#__PURE__*/React.createElement("label", { | |
| className: cls | |
| }, label && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-field__label" | |
| }, label, required && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-field__req" | |
| }, "*")), multiline ? /*#__PURE__*/React.createElement("textarea", _extends({ | |
| rows: rows | |
| }, inputProps)) : /*#__PURE__*/React.createElement("input", _extends({ | |
| type: type | |
| }, inputProps)), help && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-field__help" | |
| }, help)); | |
| } | |
| Object.assign(__ds_scope, { Field }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Field.jsx", error: String((e && e.message) || e) }); } | |
| // components/forms/Switch.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-switch{ display:inline-flex; align-items:center; gap:var(--space-150); cursor:pointer; font:var(--type-ui); color:var(--text-body); user-select:none; } | |
| .s2-switch input{ position:absolute; opacity:0; width:0; height:0; } | |
| .s2-switch__track{ | |
| width:32px; height:18px; flex:none; border-radius:var(--radius-full); | |
| background:var(--s2-gray-300); position:relative; transition:background var(--duration-fast) var(--ease-out); | |
| } | |
| .s2-switch__track::after{ | |
| content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; | |
| border-radius:var(--radius-full); background:#fff; box-shadow:var(--shadow-raised); | |
| transition:transform var(--duration-default) var(--ease-out); | |
| } | |
| .s2-switch:hover .s2-switch__track{ background:var(--s2-gray-400); } | |
| .s2-switch input:checked + .s2-switch__track{ background:var(--accent); } | |
| .s2-switch input:checked + .s2-switch__track::after{ transform:translateX(14px); } | |
| .s2-switch input:focus-visible + .s2-switch__track{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:var(--focus-ring-offset); } | |
| .s2-switch input:disabled + .s2-switch__track{ background:var(--border-default); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'switch'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function Switch({ | |
| checked, | |
| onChange, | |
| children, | |
| disabled = false, | |
| ...rest | |
| }) { | |
| useCSS(); | |
| return /*#__PURE__*/React.createElement("label", { | |
| className: "s2-switch" | |
| }, /*#__PURE__*/React.createElement("input", _extends({ | |
| type: "checkbox", | |
| role: "switch", | |
| checked: checked, | |
| onChange: onChange, | |
| disabled: disabled | |
| }, rest)), /*#__PURE__*/React.createElement("span", { | |
| className: "s2-switch__track" | |
| }), children && /*#__PURE__*/React.createElement("span", null, children)); | |
| } | |
| Object.assign(__ds_scope, { Switch }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/forms/Switch.jsx", error: String((e && e.message) || e) }); } | |
| // components/navigation/Tabs.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| /* Spectrum 2 quiet tabs with an accent underline — the primary navigation in | |
| Chan Compass (Signals / Rotation / News / Research / Automation / Model). */ | |
| const CSS = ` | |
| .s2-tabs{ display:flex; gap:var(--space-300); border-bottom:var(--border-width-200) solid var(--border-default); } | |
| .s2-tab{ | |
| appearance:none; background:none; border:none; cursor:pointer; | |
| padding:var(--space-150) 2px; margin-bottom:-2px; | |
| font:var(--font-weight-semibold) var(--font-size-200)/1.2 var(--font-sans); | |
| color:var(--text-muted); border-bottom:var(--border-width-200) solid transparent; | |
| display:inline-flex; align-items:center; gap:var(--space-100); | |
| transition:var(--transition-colors); | |
| } | |
| .s2-tab:hover{ color:var(--text-body); } | |
| .s2-tab--selected{ color:var(--accent); border-bottom-color:var(--accent); } | |
| .s2-tab:focus-visible{ outline:var(--focus-ring-width) solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm); } | |
| .s2-tab__count{ | |
| font:var(--font-weight-semibold) var(--font-size-50)/1 var(--font-sans); | |
| background:var(--surface-subtle); color:var(--text-secondary); | |
| padding:2px 6px; border-radius:var(--radius-full); | |
| } | |
| .s2-tab--selected .s2-tab__count{ background:var(--accent-subtle); color:var(--accent-text); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'tabs'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function Tabs({ | |
| items = [], | |
| value, | |
| onChange, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| return /*#__PURE__*/React.createElement("div", _extends({ | |
| className: ['s2-tabs', className].filter(Boolean).join(' '), | |
| role: "tablist" | |
| }, rest), items.map(it => { | |
| const id = typeof it === 'string' ? it : it.id; | |
| const label = typeof it === 'string' ? it : it.label; | |
| const selected = id === value; | |
| return /*#__PURE__*/React.createElement("button", { | |
| key: id, | |
| role: "tab", | |
| "aria-selected": selected, | |
| className: ['s2-tab', selected && 's2-tab--selected'].filter(Boolean).join(' '), | |
| onClick: () => onChange && onChange(id) | |
| }, typeof it === 'object' && it.icon, label, typeof it === 'object' && it.count != null && /*#__PURE__*/React.createElement("span", { | |
| className: "s2-tab__count" | |
| }, it.count)); | |
| })); | |
| } | |
| Object.assign(__ds_scope, { Tabs }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/navigation/Tabs.jsx", error: String((e && e.message) || e) }); } | |
| // components/status/Badge.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-badge{ | |
| display:inline-flex; align-items:center; gap:var(--space-75); | |
| height:20px; padding:0 var(--space-150); border-radius:var(--radius-full); | |
| font:var(--font-weight-semibold) var(--font-size-75)/1 var(--font-sans); | |
| white-space:nowrap; | |
| } | |
| .s2-badge--neutral{ background:var(--surface-subtle); color:var(--text-secondary); } | |
| .s2-badge--accent{ background:var(--accent-subtle); color:var(--accent-text); } | |
| .s2-badge--positive{ background:var(--positive-subtle); color:var(--positive-hover); } | |
| .s2-badge--negative{ background:var(--negative-subtle); color:var(--negative-hover); } | |
| .s2-badge--notice{ background:var(--notice-subtle); color:var(--notice); } | |
| .s2-badge--bold{ color:#fff; } | |
| .s2-badge--bold.s2-badge--accent{ background:var(--accent); } | |
| .s2-badge--bold.s2-badge--positive{ background:var(--positive); } | |
| .s2-badge--bold.s2-badge--negative{ background:var(--negative); } | |
| .s2-badge--bold.s2-badge--neutral{ background:var(--text-secondary); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'badge'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function Badge({ | |
| variant = 'neutral', | |
| bold = false, | |
| children, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const cls = ['s2-badge', `s2-badge--${variant}`, bold && 's2-badge--bold', className].filter(Boolean).join(' '); | |
| return /*#__PURE__*/React.createElement("span", _extends({ | |
| className: cls | |
| }, rest), children); | |
| } | |
| Object.assign(__ds_scope, { Badge }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/Badge.jsx", error: String((e && e.message) || e) }); } | |
| // components/status/SignalBadge.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| /* Domain component: the BUY / SELL / HOLD / WAIT signal pill that drives the | |
| Signals table. Maps a Chan-engine action to a Spectrum 2 semantic color. */ | |
| const CSS = ` | |
| .s2-signal{ | |
| display:inline-flex; align-items:center; gap:6px; | |
| height:24px; padding:0 var(--space-150); border-radius:var(--radius-full); | |
| font:var(--font-weight-bold) var(--font-size-75)/1 var(--font-sans); | |
| letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:#fff; | |
| } | |
| .s2-signal__glyph{ width:7px; height:7px; border-radius:var(--radius-full); background:currentColor; opacity:.9; } | |
| .s2-signal--buy{ background:var(--positive); } | |
| .s2-signal--sell{ background:var(--negative); } | |
| .s2-signal--hold{ background:var(--accent); } | |
| .s2-signal--wait{ background:var(--surface-subtle); color:var(--text-secondary); } | |
| .s2-signal--watch{ background:var(--notice); } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'signal'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| const MAP = { | |
| BUY: 'buy', | |
| SELL: 'sell', | |
| HOLD: 'hold', | |
| WAIT: 'wait', | |
| WATCH: 'watch' | |
| }; | |
| function SignalBadge({ | |
| action = 'WAIT', | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const key = String(action).toUpperCase(); | |
| const kind = MAP[key] || 'wait'; | |
| return /*#__PURE__*/React.createElement("span", _extends({ | |
| className: ['s2-signal', `s2-signal--${kind}`, className].filter(Boolean).join(' ') | |
| }, rest), /*#__PURE__*/React.createElement("span", { | |
| className: "s2-signal__glyph" | |
| }), key); | |
| } | |
| Object.assign(__ds_scope, { SignalBadge }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/SignalBadge.jsx", error: String((e && e.message) || e) }); } | |
| // components/status/StatusLight.jsx | |
| try { (() => { | |
| function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } | |
| const CSS = ` | |
| .s2-status{ display:inline-flex; align-items:center; gap:var(--space-100); font:var(--type-ui); color:var(--text-body); } | |
| .s2-status__dot{ width:9px; height:9px; flex:none; border-radius:var(--radius-full); background:var(--flat); } | |
| .s2-status--positive .s2-status__dot{ background:var(--positive); } | |
| .s2-status--negative .s2-status__dot{ background:var(--negative); } | |
| .s2-status--notice .s2-status__dot{ background:var(--notice); } | |
| .s2-status--accent .s2-status__dot{ background:var(--accent); } | |
| .s2-status--neutral .s2-status__dot{ background:var(--text-muted); } | |
| .s2-status--live .s2-status__dot{ box-shadow:0 0 0 0 currentColor; animation:s2-pulse 1.8s var(--ease-out) infinite; color:var(--positive); } | |
| @keyframes s2-pulse{ 0%{ box-shadow:0 0 0 0 rgba(0,122,57,.35);} 70%{ box-shadow:0 0 0 6px rgba(0,122,57,0);} 100%{ box-shadow:0 0 0 0 rgba(0,122,57,0);} } | |
| `; | |
| let injected = false; | |
| function useCSS() { | |
| if (typeof document !== 'undefined' && !injected) { | |
| const e = document.createElement('style'); | |
| e.textContent = CSS; | |
| e.dataset.s2 = 'status'; | |
| document.head.appendChild(e); | |
| injected = true; | |
| } | |
| } | |
| function StatusLight({ | |
| variant = 'neutral', | |
| live = false, | |
| children, | |
| className = '', | |
| ...rest | |
| }) { | |
| useCSS(); | |
| const cls = ['s2-status', `s2-status--${variant}`, live && 's2-status--live', className].filter(Boolean).join(' '); | |
| return /*#__PURE__*/React.createElement("span", _extends({ | |
| className: cls | |
| }, rest), /*#__PURE__*/React.createElement("span", { | |
| className: "s2-status__dot" | |
| }), children); | |
| } | |
| Object.assign(__ds_scope, { StatusLight }); | |
| })(); } catch (e) { __ds_ns.__errors.push({ path: "components/status/StatusLight.jsx", error: String((e && e.message) || e) }); } | |
| __ds_ns.Button = __ds_scope.Button; | |
| __ds_ns.Card = __ds_scope.Card; | |
| __ds_ns.InlineAlert = __ds_scope.InlineAlert; | |
| __ds_ns.Checkbox = __ds_scope.Checkbox; | |
| __ds_ns.Field = __ds_scope.Field; | |
| __ds_ns.Switch = __ds_scope.Switch; | |
| __ds_ns.Tabs = __ds_scope.Tabs; | |
| __ds_ns.Badge = __ds_scope.Badge; | |
| __ds_ns.SignalBadge = __ds_scope.SignalBadge; | |
| __ds_ns.StatusLight = __ds_scope.StatusLight; | |
| })(); |