@sybilion/uilib 1.0.20

package/README.md

@@ -0,0 +1,138 @@
+# Sybilion Design System
+
+React UI components (Stylus modules, Radix primitives, Recharts).
+
+> This package does **not** embed app-specific contexts or API clients; the host app passes data and callbacks via props.
+
+## Install from GitHub
+
+Point your package manager at the repository (branch or tag as needed). **Prebuilt ESM** under `dist/esm` is committed to the repo, so consumers **do not** need to run `yarn build` inside `uilib` for the default install path.
+
+```bash
+yarn add uilib@github:Mir-Insight/uilib#main
+```
+
+Equivalent in `package.json`:
+
+```json
+{
+  "dependencies": {
+    "uilib": "github:Mir-Insight/uilib#main"
+  }
+}
+```
+
+### GitHub Packages + bare `uilib` imports
+
+When consuming the published GitHub Packages build (`@Mir-Insight/uilib`) but
+keeping existing imports as `from 'uilib'`, add a bundler alias and matching
+TypeScript paths in the host app:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "uilib": ["node_modules/@Mir-Insight/uilib"],
+      "uilib/*": ["node_modules/@Mir-Insight/uilib/*"]
+    }
+  }
+}
+```
+
+Webpack example:
+
+```js
+resolve: {
+  alias: {
+    uilib: path.join(paths.modules, '@Mir-Insight/uilib'),
+  },
+}
+```
+
+CI installs from GitHub Packages also need npm auth:
+
+```text
+@Mir-Insight:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=<token with read:packages>
+always-auth=true
+```
+
+### Default: prebuilt (`dist/esm`)
+
+The package [`exports`](./package.json) entry `.` resolves to Rollup output and generated declarations:
+
+```ts
+import { Button } from 'uilib';
+```
+
+Use this when you want **compiled** ESM (CSS modules processed; no Stylus loader required for `uilib`). Ensure your bundler still handles standard JS/CSS imports from `node_modules` as usual.
+
+### Optional: source (`src`)
+
+To compile `uilib` from **TypeScript + Stylus** in your app (same as older workflows), import from the `./src` subpath:
+
+```ts
+import { Button } from 'uilib/src';
+```
+
+Deep imports are supported via `uilib/src/...` (maps to files under [`src/`](./src)). Internal `#uilib/...` imports resolve through this package’s [`imports`](./package.json) field when bundling source.
+
+## Bundling from source (`uilib` / `uilib/src`)
+
+If you use **`uilib/src`** (or deep imports under `uilib/src/`), the host app must **compile** those files like application code:
+
+1. **Include `uilib` in the TypeScript/JSX pipeline** — e.g. extend `babel-loader` / `ts-loader` `include` so it matches `node_modules/uilib` (and not only your app `src`):
+
+   ```js
+   include: [paths.src, /node_modules\/uilib/],
+   ```
+
+2. **Apply the same Stylus/CSS-module rules** to files under `node_modules/uilib` as you use for your own `.styl` imports.
+
+3. **Do not remap `#uilib`** — internal imports use the subpath pattern `#uilib/...`, resolved via this package’s `package.json` [`imports`](./package.json) field. Keep your app’s own alias (for example `@` → app `src`) as usual; it does not conflict with `#uilib`.
+
+If you only use the **default** entry (`import from 'uilib'`), you typically **do not** need Stylus/TS compilation for `uilib` in the consumer Webpack config.
+
+## Peer dependencies
+
+Install these in the consuming app:
+
+- `react` and `react-dom` (>= 18)
+- `react-router-dom` (>= 6) — required for components that use `Link` or routing-aware layout (for example `PageFooter`, `Breadcrumbs`)
+- `@homecode/ui` (>= 4.17) — still required for Scroll/LS-related pieces until those are replaced
+
+`@homecode/ui` is a **peer** dependency only (it is not listed under `dependencies`). The app must provide a single installed copy. Bundling `@homecode/ui` as a nested dependency of `uilib` previously pulled a second `react` and caused **invalid hook call** errors in components such as `DropZone`.
+
+Runtime dependencies of this package (Recharts, Radix, `motion`, `vaul`, `@vimeo/player`, etc.) are declared in `package.json` and should be satisfied by the consumer’s install tree.
+
+## Maintainers: keeping `dist/` in sync
+
+After changing library **source**, regenerate and commit the prebuilt output:
+
+```bash
+yarn build
+```
+
+Then commit the updated `dist/` tree so GitHub installs stay up to date.
+
+## Integration notes (injected props)
+
+These areas expect the **app** to supply behavior or data (not vendored from product code):
+
+- **Chat** — `ChatContext` exports types and hooks only. Implement `ChatContext.Provider` with `ChatContextType` in the app. Use `renderMessageChart` (or equivalent props) where charts appear inside messages.
+- **ChartAreaInteractive** — pass legend/overlay controls such as `toggleLegendSeries`, `ensureAnalysisSeriesVisible`, `hiddenSeries`, and `overlayForecastData` (use an empty object only if quantiles are entirely prop-driven).
+- **PageFooter** — `versionLink` (empty string hides the version badge), `versionLabel`, and optional `children` between the logo block and copyright (debug UI, forms, etc. stay in the app).
+- **Breadcrumbs** / **PageHeader** — `clientLogo`, `companyName`, and breadcrumb item data.
+- **RegionSelector** — geographic options via the `regions` prop (no drivers-data import inside the library).
+- **AnalysesSelector** / chart legends — hidden-series `Set` and toggle callbacks owned by the app.
+
+## Scripts (this repo)
+
+| Script            | Description                                         |
+| ----------------- | --------------------------------------------------- |
+| `yarn dev`        | Webpack dev server for the docs app                 |
+| `yarn docs:build` | Production build of docs to `build/`                |
+| `yarn build`      | Rollup ESM build to `dist/esm`                      |
+| `yarn build:ship` | Same as `yarn build` (refresh `dist` before commit) |
+| `yarn ts`         | Typecheck (`tsc --noEmit`)                          |
+| `yarn tests`      | Jest smoke tests                                    |

package/dist/esm/components/ui/AnalysesSelector/AnalysesSelector.js

@@ -0,0 +1,188 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useRef, useMemo, useEffect } from 'react';
+import { AnalysisLineIcon } from '../AnalysisLineIcon/AnalysisLineIcon.js';
+import { Badge } from '../Badge/Badge.js';
+import { LabelWithId } from '../LabelWithId/LabelWithId.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../Select/Select.js';
+import { TextShimmer } from '../TextShimmer/TextShimmer.js';
+import { getLatestByUpdatedAt } from '../../../utils/analysisDate.js';
+import { EyeClosedIcon, EyeIcon } from '@phosphor-icons/react';
+import S from './AnalysesSelector.styl.js';
+
+const isFailed = (item) => item.status?.toLowerCase() === 'fail';
+const isDashedIcon = (item) => item.id !== -1;
+const defaultIsAnalysisInProgress = (status) => ['pending', 'running', 'cancelling'].includes(status?.toLowerCase() ?? '');
+function renderItemContent(item) {
+    const failed = isFailed(item);
+    if (failed) {
+        return (jsx(Badge, { variant: "red", squared: true, children: "failed" }));
+    }
+    const color = item.color || 'var(--foreground)';
+    return (jsx(AnalysisLineIcon, { color: color, variant: isDashedIcon(item) ? 'dashed' : 'solid' }));
+}
+function renderIcon(icon) {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        return jsx("img", { src: icon, alt: "", className: S.icon });
+    }
+    return jsx("span", { className: S.icon, children: icon });
+}
+function AnalysesSelector({ items, selectedIds, onItemToggle, inlineMode = false, placeholder, disabled, size = 'md', variant = 'default', darker = false, className, triggerProps, onFailedItemClick, showHistorical = true, enableToggleHidden = false, maxVisibleItems = 1, preventDeselection = false, hiddenSeries: hiddenSeriesProp = new Set(), onToggleSeries = () => { }, isAnalysisInProgress: isAnalysisInProgressProp = defaultIsAnalysisInProgress, }) {
+    const historicalAutoSelectedRef = useRef(false);
+    const hiddenSeries = hiddenSeriesProp;
+    const toggleSeries = (analysisId) => {
+        onToggleSeries(analysisId);
+    };
+    const latestAnalysisIds = useMemo(() => {
+        const analysesOnly = items.filter(item => !isFailed(item) && !item.label?.includes('Manually adjusted'));
+        return new Set(getLatestByUpdatedAt(analysesOnly, maxVisibleItems).map(i => i.id));
+    }, [items, maxVisibleItems]);
+    const selectedSet = useMemo(() => {
+        if (selectedIds === undefined)
+            return new Set();
+        if (typeof selectedIds === 'number')
+            return new Set([selectedIds]);
+        return new Set(Array.isArray(selectedIds) ? selectedIds : Array.from(selectedIds));
+    }, [selectedIds]);
+    // In inlineMode, show Historical + selected analyses (limited by maxVisibleItems)
+    const selectedItems = useMemo(() => {
+        if (inlineMode) {
+            const list = [];
+            if (showHistorical) {
+                list.push({
+                    id: -1,
+                    label: 'Historical',
+                    dimmed: hiddenSeries.has('historical'),
+                });
+            }
+            // Filter by selectedIds, exclude failed items and user series
+            const analysesOnly = items.filter(item => selectedSet.has(item.id) &&
+                !isFailed(item) &&
+                !item.label?.includes('Manually adjusted'));
+            // Limit to maxVisibleItems, preferring latest by updated_at
+            const sorted = getLatestByUpdatedAt(analysesOnly, analysesOnly.length);
+            const limited = sorted.slice(0, maxVisibleItems);
+            const limitedItems = limited.map(item => ({
+                ...item,
+                dimmed: hiddenSeries.has(`forecast_${item.id}`),
+            }));
+            return list.concat(limitedItems);
+        }
+        // Non-inlineMode: keep original behavior
+        const list = [];
+        if (showHistorical) {
+            list.push({
+                id: -1,
+                label: 'Historical',
+            });
+        }
+        return list.concat(items.filter(item => selectedSet.has(item.id)));
+    }, [
+        items,
+        selectedSet,
+        showHistorical,
+        inlineMode,
+        hiddenSeries,
+        maxVisibleItems,
+    ]);
+    const unselectedItems = useMemo(() => {
+        if (inlineMode) {
+            if (preventDeselection) {
+                // When preventDeselection is true, show items beyond maxVisibleItems in dropdown
+                // even though they're selected
+                const analysesOnly = items.filter(item => selectedSet.has(item.id) &&
+                    !isFailed(item) &&
+                    !item.label?.includes('Manually adjusted'));
+                const sorted = getLatestByUpdatedAt(analysesOnly, analysesOnly.length);
+                const visibleItems = sorted.slice(0, maxVisibleItems);
+                const visibleIds = new Set(visibleItems.map(item => item.id));
+                return items.filter(item => selectedSet.has(item.id) && !visibleIds.has(item.id));
+            }
+            // In inlineMode, show items that are not selected
+            return items.filter(item => !selectedSet.has(item.id));
+        }
+        // Non-inlineMode: show items that are not in latestAnalysisIds
+        return items.filter(item => !latestAnalysisIds.has(item.id));
+    }, [
+        items,
+        latestAnalysisIds,
+        selectedSet,
+        inlineMode,
+        preventDeselection,
+        maxVisibleItems,
+    ]);
+    useEffect(() => {
+        if (!showHistorical) {
+            historicalAutoSelectedRef.current = false;
+            return;
+        }
+        const isSelected = selectedIds === undefined
+            ? false
+            : typeof selectedIds === 'number'
+                ? selectedIds === -1
+                : Array.isArray(selectedIds)
+                    ? selectedIds.includes(-1)
+                    : selectedIds.has(-1);
+        if (!historicalAutoSelectedRef.current && !isSelected) {
+            historicalAutoSelectedRef.current = true;
+            onItemToggle(-1);
+        }
+    }, [showHistorical, selectedIds, onItemToggle]);
+    const handleSelectValue = (value) => {
+        if (!value)
+            return;
+        const id = /^-?\d+$/.test(value) ? parseInt(value, 10) : value;
+        const item = items.find(i => i.id === id || String(i.id) === value);
+        if (!item)
+            return;
+        // Use handleItemClick to properly handle both selection and visibility toggling
+        handleItemClick(item);
+    };
+    const handleItemClick = (item) => {
+        if (isFailed(item) && onFailedItemClick) {
+            onFailedItemClick(item.id);
+        }
+        else if (preventDeselection || (inlineMode && enableToggleHidden)) {
+            // When preventDeselection is true, or in inlineMode with enableToggleHidden,
+            // toggle hidden series instead of selection
+            toggleSeries(item.id);
+        }
+        else {
+            // Non-inlineMode: keep original behavior
+            onItemToggle(item.id);
+        }
+    };
+    const selectPlaceholder = placeholder ??
+        (inlineMode ? `+ ${unselectedItems.length}` : `${items.length} analyses`);
+    const renderEyeIcon = (item) => {
+        if (!enableToggleHidden && !preventDeselection)
+            return null;
+        return hiddenSeries.has(`forecast_${item.id}`) ? (jsx(EyeClosedIcon, {})) : (jsx(EyeIcon, {}));
+    };
+    const renderLabelWithId = (item) => (jsx(LabelWithId, { className: cn(S.label, S.itemLabelWithId), id: String(item.id), label: isAnalysisInProgressProp(item.status) ? (jsx(TextShimmer, { as: "span", children: item.label })) : (item.label) }));
+    const renderSelectItem = (item) => (jsxs("div", { className: S.selectItemContent, children: [renderItemContent(item), renderIcon(item.icon), renderLabelWithId(item), renderEyeIcon(item)] }));
+    if (inlineMode) {
+        return (jsxs("div", { className: cn(S.root, S[`variant-${variant}`], selectedItems.length === 1 && S.single, className), children: [selectedItems.map(item => (jsxs("div", { className: cn(S.item, disabled && S.disabled, item.id === -1 && S.historical, item.dimmed && S.dimmed), onClick: () => !disabled && handleItemClick(item), children: [renderIcon(item.icon), renderItemContent(item), renderLabelWithId(item)] }, item.id))), unselectedItems.length > 0 && (jsxs(Select, { value: "", onValueChange: handleSelectValue, disabled: disabled, children: [jsx(SelectTrigger, { size: size, variant: variant, className: S.selectTrigger, darker: darker, style: {
+                                minWidth: 'auto',
+                                height: 'auto',
+                                fontSize: 'var(--text-xs)',
+                                pointerEvents: items.length < 2 && unselectedItems.length === 0
+                                    ? 'none'
+                                    : undefined,
+                            }, children: jsx(SelectValue, { placeholder: selectPlaceholder }) }), jsx(SelectContent, { children: unselectedItems.map(item => (jsx(SelectItem, { value: String(item.id), children: renderSelectItem(item) }, item.id))) })] }))] }));
+    }
+    if (items.length === 0)
+        return null;
+    const selectedId = items.find(item => selectedSet.has(item.id))?.id ?? items[0]?.id;
+    const selectValue = selectedId != null ? String(selectedId) : '';
+    return (jsx("div", { className: cn(S.root, className), children: jsxs(Select, { value: selectValue, onValueChange: handleSelectValue, disabled: disabled, children: [jsx(SelectTrigger, { size: size, variant: variant, darker: darker, className: S.selectTrigger, hideChevron: items.length < 2, style: {
+                        minWidth: 'auto',
+                        height: 'auto',
+                        fontSize: 'var(--text-xs)',
+                        pointerEvents: items.length < 2 ? 'none' : undefined,
+                    }, ...triggerProps, children: jsx(SelectValue, { placeholder: selectPlaceholder }) }), jsx(SelectContent, { children: items.map(item => (jsx(SelectItem, { value: String(item.id), selected: String(item.id) === selectValue, children: renderSelectItem(item) }, item.id))) })] }) }));
+}
+
+export { AnalysesSelector };

package/dist/esm/components/ui/AnalysesSelector/AnalysesSelector.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".AnalysesSelector_root__V8v0T{align-items:center;display:flex;flex-wrap:wrap;justify-content:flex-start}.AnalysesSelector_variant-default__lbURP.AnalysesSelector_single__rAPT6{background-color:var(--background);border-radius:var(--p-4);padding:0 var(--p-2)}.AnalysesSelector_item__d3pDt{align-items:center;cursor:pointer;display:flex;gap:var(--p-2);margin:var(--p-1);transition:opacity .2s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ,.AnalysesSelector_item__d3pDt:hover{opacity:.5}.AnalysesSelector_item__d3pDt.AnalysesSelector_disabled__6JhJQ:hover{opacity:.8}.AnalysesSelector_item__d3pDt.AnalysesSelector_historical__hAqpN{pointer-events:none}.AnalysesSelector_item__d3pDt.AnalysesSelector_dimmed__mYWY7{opacity:.5}.AnalysesSelector_icon__1Tb0U{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;position:relative;width:16px}.AnalysesSelector_label__m-9Ml{flex-grow:1;font-size:var(--text-xs);white-space:nowrap}.AnalysesSelector_selectItemContent__iRsNR{align-items:center;display:flex;gap:var(--p-2);width:100%}.AnalysesSelector_selectTrigger__Avjkd{font-size:var(--text-xs);height:auto;min-width:auto}.AnalysesSelector_selectTriggerLabelWithId__C32ph{display:flex}.AnalysesSelector_itemLabelWithId__8c0mY{align-items:center;display:flex;flex-grow:1;min-width:0}";
+var S = {"root":"AnalysesSelector_root__V8v0T","variant-default":"AnalysesSelector_variant-default__lbURP","single":"AnalysesSelector_single__rAPT6","item":"AnalysesSelector_item__d3pDt","disabled":"AnalysesSelector_disabled__6JhJQ","historical":"AnalysesSelector_historical__hAqpN","dimmed":"AnalysesSelector_dimmed__mYWY7","icon":"AnalysesSelector_icon__1Tb0U","label":"AnalysesSelector_label__m-9Ml","selectItemContent":"AnalysesSelector_selectItemContent__iRsNR","selectTrigger":"AnalysesSelector_selectTrigger__Avjkd","selectTriggerLabelWithId":"AnalysesSelector_selectTriggerLabelWithId__C32ph","itemLabelWithId":"AnalysesSelector_itemLabelWithId__8c0mY"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/AnalysisLineIcon/AnalysisLineIcon.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import S from './AnalysisLineIcon.styl.js';
+
+function DashedLine({ color }) {
+    return (jsx("svg", { className: S.line, width: 18, height: 2, viewBox: "0 0 18 2", fill: "currentColor", style: { color }, children: jsx("line", { x1: 0, y1: 1, x2: 18, y2: 1, stroke: "currentColor", strokeWidth: 2, strokeDasharray: "3 3" }) }));
+}
+function AnalysisLineIcon({ color = 'var(--foreground)', variant, }) {
+    return (jsxs("div", { className: S.lineIcon, children: [variant === 'dashed' ? (jsx(DashedLine, { color: color })) : (jsx("div", { className: S.line, style: { backgroundColor: color } })), jsx("div", { className: S.dot, style: { backgroundColor: color } })] }));
+}
+
+export { AnalysisLineIcon };

package/dist/esm/components/ui/AnalysisLineIcon/AnalysisLineIcon.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".AnalysisLineIcon_lineIcon__6J0g1{align-items:center;display:flex;flex-shrink:0;gap:2px;height:12px}.AnalysisLineIcon_line__q3yQG{align-items:center;border-radius:var(--p-1);display:flex;flex-shrink:0;height:1.5px;max-height:1.5px;width:18px}.AnalysisLineIcon_dot__Be8Dj{flex-shrink:0;height:6px;margin-left:-2px;transform:rotate(45deg);width:6px}";
+var S = {"lineIcon":"AnalysisLineIcon_lineIcon__6J0g1","line":"AnalysisLineIcon_line__q3yQG","dot":"AnalysisLineIcon_dot__Be8Dj"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/AppHeader/AppHeader.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useState, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import S from './AppHeader.styl.js';
+import { PAGE_HEADER_ID } from './appChromeAnchors.js';
+
+function AppHeaderHost({ className, anchorId = PAGE_HEADER_ID, }) {
+    return jsx("header", { className: cn(S.root, className), id: anchorId });
+}
+function AppHeaderPortal({ children }) {
+    const [container, setContainer] = useState(null);
+    useLayoutEffect(() => {
+        setContainer(document.getElementById(PAGE_HEADER_ID));
+    }, []);
+    if (!container) {
+        return null;
+    }
+    return createPortal(children, container);
+}
+
+export { AppHeaderHost, AppHeaderPortal };

package/dist/esm/components/ui/AppHeader/AppHeader.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.AppHeader_root__SdbDv{align-items:center;align-self:flex-end;background-color:var(--color-background);display:flex;max-width:calc(100vw - var(--sidebar-width) - var(--p-3));min-height:var(--header-height);width:100%}.AppHeader_content__kyxem{align-items:center;display:flex;gap:2rem;justify-content:flex-end;padding:0 var(--p-9);width:100%}.AppHeader_logo__v31FX{align-items:center;color:var(--color-foreground);display:flex;font-size:1.5rem;font-weight:400;gap:.5rem;text-decoration:none;white-space:nowrap}.AppHeader_logo__v31FX svg{display:inline-flex;height:32px;transition:transform .1s ease-in-out;width:auto}.AppHeader_logo__v31FX:hover svg{transform:scale(1.05)}.AppHeader_nav__ahN1p{align-items:center;display:flex;flex:1;gap:1.5rem;justify-content:center}@media (max-width:units(768px,\"px\")){.AppHeader_nav__ahN1p{display:none}}.AppHeader_navLink__z43jY{color:var(--color-muted-foreground);font-size:.875rem;font-weight:400;text-decoration:none;transition:color .2s ease}.AppHeader_navLink__z43jY:hover{color:var(--color-foreground)}.AppHeader_actions__QuxEF{align-items:center;display:flex;gap:var(--p-4);margin-right:var(--p-2)}@media (max-width:units(768px,\"px\")){.AppHeader_actions__QuxEF{gap:var(--p-1)}}.AppHeader_pageHeaderActionsAnchor__qzQMs{align-items:center;display:flex;flex-shrink:0;gap:var(--p-4)}";
+var S = {"root":"AppHeader_root__SdbDv","content":"AppHeader_content__kyxem","logo":"AppHeader_logo__v31FX","nav":"AppHeader_nav__ahN1p","navLink":"AppHeader_navLink__z43jY","actions":"AppHeader_actions__QuxEF","pageHeaderActionsAnchor":"AppHeader_pageHeaderActionsAnchor__qzQMs"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/AppHeader/appChromeAnchors.js

@@ -0,0 +1,4 @@
+/** DOM anchor id for portaling page-level header actions into `AppHeader`. */
+const PAGE_HEADER_ID = 'page-header';
+
+export { PAGE_HEADER_ID };

package/dist/esm/components/ui/Avatar/Avatar.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import S from './Avatar.styl.js';
+
+function Avatar({ className, size = 'md', ...props }) {
+    return (jsx(AvatarPrimitive.Root, { "data-slot": "avatar", ...props, className: cn(S.root, S[`size-${size}`], className) }));
+}
+function AvatarImage({ className, ...props }) {
+    return (jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn(S.image, className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn(S.fallback, className), ...props }));
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/dist/esm/components/ui/Avatar/Avatar.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Avatar_root__lZo1y{align-items:center;border-radius:100%;display:flex;justify-content:center;overflow:hidden;position:relative}.Avatar_root__lZo1y.Avatar_size-sm__J2omi{height:24px;width:24px}.Avatar_root__lZo1y.Avatar_size-md__PcGQD{height:32px;width:32px}.Avatar_root__lZo1y.Avatar_size-lg__iGlUz{height:48px;width:48px}.Avatar_image__quSH0{aspect-ratio:1/1;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.Avatar_fallback__QI0c0{align-items:center;background-color:var(--muted);display:flex;height:100%;justify-content:center;width:100%}";
+var S = {"root":"Avatar_root__lZo1y","size-sm":"Avatar_size-sm__J2omi","size-md":"Avatar_size-md__PcGQD","size-lg":"Avatar_size-lg__iGlUz","image":"Avatar_image__quSH0","fallback":"Avatar_fallback__QI0c0"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Badge/Badge.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Slot } from '@radix-ui/react-slot';
+import S from './Badge.styl.js';
+
+function Badge({ className, variant = 'default', asChild = false, squared = false, ...props }) {
+    const Comp = asChild ? Slot : 'div';
+    return (jsx(Comp, { "data-slot": "badge", className: cn(S.root, variant && S[`variant-${variant}`], squared && S.squared, className), ...props }));
+}
+
+export { Badge };

package/dist/esm/components/ui/Badge/Badge.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Badge_root__gVZZ-{align-items:center;border-color:transparent;border-radius:.75rem;display:inline-flex;flex-shrink:0;font-family:var(--font-family-body);font-size:.75rem;font-weight:400;gap:.375rem;justify-content:center;line-height:1rem;overflow:hidden;padding:2px var(--p-2);transition:background-color .2s,color .2s;white-space:nowrap;width:-moz-fit-content;width:fit-content}.Badge_root__gVZZ-.Badge_squared__dpe-t{border-radius:var(--p-1)}.Badge_root__gVZZ->svg{height:.75rem;pointer-events:none;width:.75rem}.Badge_root__gVZZ-.Badge_variant-default__pYlwv{background-color:var(--sb-slate-50);color:var(--sb-slate-600)}a.Badge_root__gVZZ-.Badge_variant-default__pYlwv:hover{background-color:var(--sb-slate-100)}.dark .Badge_root__gVZZ-.Badge_variant-default__pYlwv{background-color:var(--sb-slate-900);color:var(--sb-slate-400)}a.dark .Badge_root__gVZZ-.Badge_variant-default__pYlwv:hover{background-color:var(--sb-slate-800)}.Badge_root__gVZZ-.Badge_variant-outline__73s9y{background-color:transparent;border:1px solid var(--border);color:var(--foreground)}a.Badge_root__gVZZ-.Badge_variant-outline__73s9y:hover{background-color:var(--accent);color:var(--accent-foreground)}.Badge_root__gVZZ-.Badge_variant-red__h3aUo{background-color:var(--sb-red-50);color:var(--sb-red-600)}a.Badge_root__gVZZ-.Badge_variant-red__h3aUo:hover{background-color:var(--sb-red-100)}.dark .Badge_root__gVZZ-.Badge_variant-red__h3aUo{background-color:var(--sb-red-900);color:var(--sb-red-400)}a.dark .Badge_root__gVZZ-.Badge_variant-red__h3aUo:hover{background-color:var(--sb-red-800)}.Badge_root__gVZZ-.Badge_variant-green__u7N8I{background-color:var(--sb-green-50);color:var(--sb-green-600)}a.Badge_root__gVZZ-.Badge_variant-green__u7N8I:hover{background-color:var(--sb-green-100)}.dark .Badge_root__gVZZ-.Badge_variant-green__u7N8I{background-color:var(--sb-green-900);color:var(--sb-green-400)}a.dark .Badge_root__gVZZ-.Badge_variant-green__u7N8I:hover{background-color:var(--sb-green-800)}.Badge_root__gVZZ-.Badge_variant-yellow__jEzv5{background-color:var(--sb-yellow-50);color:var(--sb-yellow-600)}a.Badge_root__gVZZ-.Badge_variant-yellow__jEzv5:hover{background-color:var(--sb-yellow-100)}.dark .Badge_root__gVZZ-.Badge_variant-yellow__jEzv5{background-color:var(--sb-yellow-900);color:var(--sb-yellow-400)}a.dark .Badge_root__gVZZ-.Badge_variant-yellow__jEzv5:hover{background-color:var(--sb-yellow-800)}";
+var S = {"root":"Badge_root__gVZZ-","squared":"Badge_squared__dpe-t","variant-default":"Badge_variant-default__pYlwv","variant-outline":"Badge_variant-outline__73s9y","variant-red":"Badge_variant-red__h3aUo","variant-green":"Badge_variant-green__u7N8I","variant-yellow":"Badge_variant-yellow__jEzv5"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { CaretRight, DotsThree } from '@phosphor-icons/react';
+import { Slot } from '@radix-ui/react-slot';
+import S from './Breadcrumb.styl.js';
+
+function Breadcrumb({ ...props }) {
+    return jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (jsx("ol", { "data-slot": "breadcrumb-list", className: cn(S.breadcrumbList, className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (jsx("li", { "data-slot": "breadcrumb-item", className: cn(S.breadcrumbItem, className), ...props }));
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    return (jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(S.breadcrumbLink, className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn(S.breadcrumbPage, className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn(S.breadcrumbSeparator, className), ...props, children: children ?? jsx(CaretRight, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn(S.breadcrumbEllipsis, className), ...props, children: [jsx(DotsThree, { className: "size-4" }), jsx("span", { className: "sr-only", children: "More" })] }));
+}
+
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/esm/components/ui/Breadcrumb/Breadcrumb.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Breadcrumb_breadcrumbList__fxko-{align-items:center;color:var(--muted-foreground);display:flex;flex-wrap:wrap;font-size:.875rem;gap:.375rem;line-height:1.25rem;list-style:none;overflow-wrap:break-word;word-break:break-word}@media (min-width:640px){.Breadcrumb_breadcrumbList__fxko-{gap:.625rem}}.Breadcrumb_breadcrumbItem__zzJZp{align-items:center;display:inline-flex;gap:.375rem}.Breadcrumb_breadcrumbLink__8anDt{transition:color .15s ease}.Breadcrumb_breadcrumbLink__8anDt:hover{color:var(--foreground)}.Breadcrumb_breadcrumbPage__qj9wm{color:var(--foreground);font-weight:400}.Breadcrumb_breadcrumbSeparator__sUDW3{align-items:center;display:flex}.Breadcrumb_breadcrumbSeparator__sUDW3>svg{flex-shrink:0;height:.875rem;width:.875rem}.Breadcrumb_breadcrumbEllipsis__9jWWP{align-items:center;display:flex;height:2.25rem;justify-content:center;width:2.25rem}";
+var S = {"breadcrumbList":"Breadcrumb_breadcrumbList__fxko-","breadcrumbItem":"Breadcrumb_breadcrumbItem__zzJZp","breadcrumbLink":"Breadcrumb_breadcrumbLink__8anDt","breadcrumbPage":"Breadcrumb_breadcrumbPage__qj9wm","breadcrumbSeparator":"Breadcrumb_breadcrumbSeparator__sUDW3","breadcrumbEllipsis":"Breadcrumb_breadcrumbEllipsis__9jWWP"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Button/Button.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { Slot } from '@radix-ui/react-slot';
+import S from './Button.styl.js';
+
+const sizeClass = (s) => s === 'sm' ? S.sizeSm : s === 'md' ? S.sizeMd : S.sizeLg;
+function Button({ className, variant = 'default', size = 'md', icon = false, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'button';
+    return (jsx(Comp, { "data-slot": "button", className: cn(S.root, S[variant], icon ? S.sizeIcon : sizeClass(size), className), ...props }));
+}
+
+export { Button };

package/dist/esm/components/ui/Button/Button.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = ".Button_root__NT88y{align-items:center;border:0;border-radius:14px;cursor:pointer;display:inline-flex;flex-shrink:0;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;gap:8px;justify-content:center;line-height:20px;outline:none;transition:all .15s;white-space:nowrap}.Button_root__NT88y:disabled{opacity:.5;pointer-events:none}.Button_root__NT88y:focus-visible{border-color:var(--ring);ring:3px var(--ring-50)}.Button_root__NT88y[aria-invalid=true]{border-color:var(--destructive);ring:3px var(--destructive-200)}.Button_root__NT88y svg{flex-shrink:0;pointer-events:none}.Button_default__xZ4lt{background-color:var(--primary);color:var(--primary-foreground)}.Button_default__xZ4lt:hover{background-color:var(--sb-gray-800)}.Button_destructive__g1Ume{background-color:var(--destructive);color:#fff}.Button_destructive__g1Ume:hover{background-color:var(--destructive-900)}.Button_destructive__g1Ume:focus-visible{ring:3px var(--destructive-200)}.dark .Button_destructive__g1Ume{background-color:var(--destructive-600)}.dark .Button_destructive__g1Ume:focus-visible{ring:3px var(--destructive-400)}.Button_outline__E4R5l{background-color:var(--background);border:1px solid var(--border)}.Button_outline__E4R5l:hover{background-color:var(--sb-gray-50);border-color:var(--border)}.dark .Button_outline__E4R5l{background-color:var(--sb-gray-900);border-color:var(--border)}.dark .Button_outline__E4R5l:hover{background-color:var(--sb-gray-800)}.Button_secondary__ptn3U{background-color:var(--secondary);color:var(--secondary-foreground)}.Button_secondary__ptn3U:hover{background-color:var(--secondary-800)}.Button_ghost__okHgV:hover{background-color:var(--accent);color:var(--accent-foreground)}.dark .Button_ghost__okHgV:hover{background-color:var(--accent-500)}.Button_link__yHy2o{color:var(--primary);text-decoration:underline;text-underline-offset:4px}.Button_link__yHy2o:hover{text-decoration:underline}.Button_sizeMd__7MeqU{min-height:48px;padding:14px 16px}.Button_sizeMd__7MeqU:has(>svg){padding-left:14px;padding-right:14px}.Button_sizeSm__skgOG{border-radius:14px;gap:6px;height:36px;padding:0 12px}.Button_sizeSm__skgOG:has(>svg){padding-left:10px;padding-right:10px}.Button_sizeLg__Xfon-{border-radius:14px;height:40px;padding:0 24px}.Button_sizeLg__Xfon-:has(>svg){padding-left:16px;padding-right:16px}.Button_sizeIcon__9ef49{height:36px;padding:0;width:36px}";
+var S = {"root":"Button_root__NT88y","default":"Button_default__xZ4lt","destructive":"Button_destructive__g1Ume","outline":"Button_outline__E4R5l","secondary":"Button_secondary__ptn3U","ghost":"Button_ghost__okHgV","link":"Button_link__yHy2o","sizeMd":"Button_sizeMd__7MeqU","sizeSm":"Button_sizeSm__skgOG","sizeLg":"Button_sizeLg__Xfon-","sizeIcon":"Button_sizeIcon__9ef49"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Card/Card.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import cn from 'classnames';
+import { useRef, useEffect } from 'react';
+import { TextWithDeferTooltip } from '../TextWithDeferTooltip/TextWithDeferTooltip.js';
+import { Scroll } from '@homecode/ui';
+import S from './Card.styl.js';
+
+const SCROLL_OFFSET = 300;
+function Card({ className, paddingSize = 'm', ...props }) {
+    return (jsx("div", { className: cn(S.root, S[`padding-${paddingSize}`], className), ...props }));
+}
+function LinkCard({ className, ...props }) {
+    return (jsx("a", { target: "_blank", rel: "noopener noreferrer", "data-slot": "link-card", className: cn(S.root, className), ...props }));
+}
+function CardHeader({ className, icon, iconWithBackground = false, textsClassName, title, titleClassName, description, descriptionClassName, children, tooltipProps, ...props }) {
+    return (jsxs("div", { "data-slot": "card-header", className: cn(S.header, className), ...props, children: [icon && (jsx("div", { className: cn(S.icon, iconWithBackground && S.withBackground), children: icon })), children, (title || description) && (jsxs("div", { className: cn(S.headerText, textsClassName), children: [title && (jsx(CardTitle, { className: titleClassName, ...tooltipProps, children: title })), description && (jsx(CardDescription, { className: descriptionClassName, ...tooltipProps, children: description }))] }))] }));
+}
+function CardTitle({ className, ...props }) {
+    return (jsx(TextWithDeferTooltip, { maxWidth: 400, "data-slot": "card-title", className: cn(S.title, className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (jsx(TextWithDeferTooltip, { maxWidth: 400, "data-slot": "card-description", className: cn(S.description, className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (jsx("div", { "data-slot": "card-action", className: cn(S.action, className), ...props }));
+}
+function CardContent({ className, centered, fullHeight, noScroll, children, autoScrollBottom, ...props }) {
+    const contentRef = useRef(null);
+    const contentDiv = (jsx("div", { "data-slot": "card-content", className: cn(className, centered && S.centered, fullHeight && S.fullHeight), ...props, children: children }));
+    useEffect(() => {
+        if (!noScroll && autoScrollBottom) {
+            const inner = contentRef.current?.firstChild;
+            if (!inner)
+                return;
+            if (inner.scrollHeight > SCROLL_OFFSET) {
+                inner.scrollTo({
+                    top: inner?.scrollHeight - inner.offsetHeight - SCROLL_OFFSET,
+                    behavior: 'instant',
+                });
+            }
+            setTimeout(() => {
+                const top = inner.scrollHeight + 1000;
+                inner.scrollTo({ top, behavior: 'smooth' });
+            }, 0);
+        }
+    }, [noScroll, autoScrollBottom]);
+    if (noScroll)
+        return contentDiv;
+    return (
+    // @ts-ignore
+    jsx(Scroll, { y: true, autoHide: true, fadeSize: "m", className: S.scroll, ref: contentRef, children: contentDiv }));
+}
+function CardFooter({ className, ...props }) {
+    return (jsx("div", { "data-slot": "card-footer", className: cn(S.footer, className), ...props }));
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, LinkCard };

package/dist/esm/components/ui/Card/Card.styl.js

@@ -0,0 +1,7 @@
+import styleInject from 'style-inject';
+
+var css_248z = "@media (max-width:768px){:root{--page-x-padding:var(--p-6);--page-y-padding:var(--p-6)}}.Card_root__8q1qb{background-color:var(--card);border-radius:20px;color:var(--card-foreground);display:flex;flex-direction:column;gap:var(--p-4);max-height:100%;position:relative}.Card_root__8q1qb.Card_padding-s__lpLdw{padding:var(--p-4)}.Card_root__8q1qb.Card_padding-m__TvrUr{padding:var(--p-6)}.Card_root__8q1qb.Card_padding-l__lRXKf{padding:var(--p-8)}.Card_header__5P3LR{align-items:flex-start;display:flex;flex-direction:column;font-size:var(--text-base);justify-content:space-between}.Card_header__5P3LR:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__-gwqq{align-items:center;border-radius:calc(var(--p-4) - 2px);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-shrink:0;height:var(--p-12);justify-content:center;width:var(--p-12)}.Card_icon__-gwqq.Card_withBackground__v0pKJ{background:var(--page-color);box-shadow:none}.Card_icon__-gwqq>img,.Card_icon__-gwqq>svg{height:var(--p-5);width:var(--p-5)}.Card_headerText__GEqp9{flex-grow:1;overflow:hidden}.Card_scroll__iUPCa{max-height:100%;overflow:hidden;padding-right:var(--p-6);width:calc(100% + var(--p-6))}.Card_scroll__iUPCa [data-slot=card-content]{padding-right:1px}.Card_centered__BIpG2,.Card_fullHeight__EU9J4{display:flex;flex-direction:column}.Card_centered__BIpG2{align-items:center;justify-content:center}.Card_fullHeight__EU9J4{flex-grow:1}.Card_description__gjvqz,.Card_title__wDAJw{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.Card_title__wDAJw{font-size:var(--text-lg);font-weight:500;line-height:var(--p-7);overflow:hidden}.Card_description__gjvqz{color:var(--muted-foreground);font-size:var(--text-sm);max-width:100%;word-break:break-word}.Card_action__Y2YHY{grid-column-start:2;grid-row-span:2;align-self:start;grid-row-start:1;justify-self:end}.Card_footer__T0BW7{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}.Card_footer__T0BW7.border-t{padding-top:24px}";
+var S = {"root":"Card_root__8q1qb","padding-s":"Card_padding-s__lpLdw","padding-m":"Card_padding-m__TvrUr","padding-l":"Card_padding-l__lRXKf","header":"Card_header__5P3LR","icon":"Card_icon__-gwqq","withBackground":"Card_withBackground__v0pKJ","headerText":"Card_headerText__GEqp9","scroll":"Card_scroll__iUPCa","centered":"Card_centered__BIpG2","fullHeight":"Card_fullHeight__EU9J4","title":"Card_title__wDAJw","description":"Card_description__gjvqz","action":"Card_action__Y2YHY","footer":"Card_footer__T0BW7"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/components/ui/Chart/Chart.context.js

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+const ChartContext = createContext(null);
+function useChart() {
+    const context = useContext(ChartContext);
+    if (!context)
+        throw new Error('useChart must be used within a <ChartContainer />');
+    return context;
+}
+
+export { ChartContext, useChart };

package/dist/esm/components/ui/Chart/Chart.helpers.js

@@ -0,0 +1,9 @@
+function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== 'object' || payload === null) {
+        return config[key];
+    }
+    // Simple direct lookup first
+    return config[key] || undefined;
+}
+
+export { getPayloadConfigFromPayload };