@sybilion/uilib 1.0.20

package/src/components/ui/AnalysesSelector/AnalysesSelector.tsx

@@ -0,0 +1,369 @@
+import cn from 'classnames';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { AnalysisLineIcon } from '#uilib/components/ui/AnalysisLineIcon';
+import { Badge } from '#uilib/components/ui/Badge';
+import { Button } from '#uilib/components/ui/Button';
+import { LabelWithId } from '#uilib/components/ui/LabelWithId';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#uilib/components/ui/Select';
+import { TextShimmer } from '#uilib/components/ui/TextShimmer/TextShimmer';
+import { getLatestByUpdatedAt } from '#uilib/utils/analysisDate';
+import { EyeClosedIcon, EyeIcon } from '@phosphor-icons/react';
+
+import S from './AnalysesSelector.styl';
+import type {
+  AnalysesSelectorItem,
+  AnalysesSelectorProps,
+} from './AnalysesSelector.types';
+
+const isFailed = (item: AnalysesSelectorItem) =>
+  item.status?.toLowerCase() === 'fail';
+
+const isDashedIcon = (item: AnalysesSelectorItem) => item.id !== -1;
+
+const defaultIsAnalysisInProgress = (status?: string) =>
+  ['pending', 'running', 'cancelling'].includes(status?.toLowerCase() ?? '');
+
+function renderItemContent(item: AnalysesSelectorItem) {
+  const failed = isFailed(item);
+
+  if (failed) {
+    return (
+      <Badge variant="red" squared>
+        failed
+      </Badge>
+    );
+  }
+
+  const color = item.color || 'var(--foreground)';
+
+  return (
+    <AnalysisLineIcon
+      color={color}
+      variant={isDashedIcon(item) ? 'dashed' : 'solid'}
+    />
+  );
+}
+
+function renderIcon(icon: AnalysesSelectorItem['icon']) {
+  if (!icon) return null;
+  if (typeof icon === 'string') {
+    return <img src={icon} alt="" className={S.icon} />;
+  }
+  return <span className={S.icon}>{icon}</span>;
+}
+
+export 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,
+}: AnalysesSelectorProps) {
+  const historicalAutoSelectedRef = useRef(false);
+  const hiddenSeries = hiddenSeriesProp;
+
+  const toggleSeries = (analysisId: number | string) => {
+    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<number>();
+    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: string) => {
+    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: AnalysesSelectorItem) => {
+    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: AnalysesSelectorItem) => {
+    if (!enableToggleHidden && !preventDeselection) return null;
+    return hiddenSeries.has(`forecast_${item.id}`) ? (
+      <EyeClosedIcon />
+    ) : (
+      <EyeIcon />
+    );
+  };
+
+  const renderLabelWithId = (item: AnalysesSelectorItem) => (
+    <LabelWithId
+      className={cn(S.label, S.itemLabelWithId)}
+      id={String(item.id)}
+      label={
+        isAnalysisInProgressProp(item.status) ? (
+          <TextShimmer as="span">{item.label}</TextShimmer>
+        ) : (
+          item.label
+        )
+      }
+    />
+  );
+
+  const renderSelectItem = (item: AnalysesSelectorItem) => (
+    <div className={S.selectItemContent}>
+      {renderItemContent(item)}
+      {renderIcon(item.icon)}
+      {renderLabelWithId(item)}
+      {renderEyeIcon(item)}
+    </div>
+  );
+
+  if (inlineMode) {
+    return (
+      <div
+        className={cn(
+          S.root,
+          S[`variant-${variant}`],
+          selectedItems.length === 1 && S.single,
+          className,
+        )}
+      >
+        {selectedItems.map(item => (
+          <div
+            key={item.id}
+            className={cn(
+              S.item,
+              disabled && S.disabled,
+              item.id === -1 && S.historical,
+              item.dimmed && S.dimmed,
+            )}
+            onClick={() => !disabled && handleItemClick(item)}
+          >
+            {renderIcon(item.icon)}
+            {renderItemContent(item)}
+            {renderLabelWithId(item)}
+          </div>
+        ))}
+        {unselectedItems.length > 0 && (
+          <Select
+            value=""
+            onValueChange={handleSelectValue}
+            disabled={disabled}
+          >
+            <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,
+              }}
+            >
+              <SelectValue placeholder={selectPlaceholder} />
+            </SelectTrigger>
+            <SelectContent>
+              {unselectedItems.map(item => (
+                <SelectItem key={item.id} value={String(item.id)}>
+                  {renderSelectItem(item)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+      </div>
+    );
+  }
+
+  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 (
+    <div className={cn(S.root, className)}>
+      <Select
+        value={selectValue}
+        onValueChange={handleSelectValue}
+        disabled={disabled}
+      >
+        <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}
+        >
+          <SelectValue placeholder={selectPlaceholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {items.map(item => (
+            <SelectItem
+              key={item.id}
+              value={String(item.id)}
+              selected={String(item.id) === selectValue}
+            >
+              {renderSelectItem(item)}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

package/src/components/ui/AnalysesSelector/AnalysesSelector.types.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+
+import { SelectTriggerProps } from '#uilib/components/ui/Select/Select.types';
+
+export interface AnalysesSelectorItem {
+  id: number;
+  label: string;
+  color?: string;
+  status?: string;
+  icon?: ReactNode;
+  updated_at?: string;
+}
+
+export interface AnalysesSelectorProps {
+  items: AnalysesSelectorItem[];
+  /** Single id, set, or array. Omit or `undefined` = nothing selected (Select falls back to first item for display). */
+  selectedIds?: Set<number> | number[] | number;
+  onItemToggle: (id: number) => void;
+  inlineMode?: boolean;
+  placeholder?: string;
+  disabled?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'clear';
+  darker?: boolean;
+  className?: string;
+  triggerProps?: SelectTriggerProps;
+  /** For failed items: optional callback when failed item is clicked (e.g. open re-run modal) */
+  onFailedItemClick?: (id: number) => void;
+  /** Show historical item as first in the list */
+  showHistorical?: boolean;
+  enableToggleHidden?: boolean;
+  maxVisibleItems?: number;
+  /** When true, prevents deselection and shows maxVisibleItems inline + rest in dropdown */
+  preventDeselection?: boolean;
+  /** Hidden series keys, e.g. `historical`, `forecast_<analysisId>` (app-owned state). */
+  hiddenSeries?: Set<string>;
+  /** Toggle hidden/visible for an analysis id (maps to `forecast_<id>` internally). */
+  onToggleSeries?: (analysisId: number | string) => void;
+  /** Override default pending/running/cancelling detection for labels. */
+  isAnalysisInProgress?: (status?: string) => boolean;
+}

package/src/components/ui/AnalysesSelector/index.ts

@@ -0,0 +1,5 @@
+export { AnalysesSelector } from './AnalysesSelector';
+export type {
+  AnalysesSelectorItem,
+  AnalysesSelectorProps,
+} from './AnalysesSelector.types';

package/src/components/ui/AnalysisLineIcon/AnalysisLineIcon.styl

@@ -0,0 +1,22 @@
+.lineIcon
+  display flex
+  align-items center
+  gap 2px
+  flex-shrink 0
+  height 12px
+
+.line
+  display flex
+  align-items center
+  flex-shrink 0
+  width 18px
+  height 1.5px
+  max-height @height
+  border-radius var(--p-1)
+
+.dot
+  width 6px
+  height 6px
+  transform rotate(45deg)
+  flex-shrink 0
+  margin-left -2px

package/src/components/ui/AnalysisLineIcon/AnalysisLineIcon.styl.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'dot': string;
+  'line': string;
+  'lineIcon': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/AnalysisLineIcon/AnalysisLineIcon.tsx

@@ -0,0 +1,47 @@
+import S from './AnalysisLineIcon.styl';
+
+export type AnalysisLineIconVariant = 'dashed' | 'solid';
+
+export interface AnalysisLineIconProps {
+  color?: string;
+  variant: AnalysisLineIconVariant;
+}
+
+function DashedLine({ color }: { color: string }) {
+  return (
+    <svg
+      className={S.line}
+      width={18}
+      height={2}
+      viewBox="0 0 18 2"
+      fill="currentColor"
+      style={{ color }}
+    >
+      <line
+        x1={0}
+        y1={1}
+        x2={18}
+        y2={1}
+        stroke="currentColor"
+        strokeWidth={2}
+        strokeDasharray="3 3"
+      />
+    </svg>
+  );
+}
+
+export function AnalysisLineIcon({
+  color = 'var(--foreground)',
+  variant,
+}: AnalysisLineIconProps) {
+  return (
+    <div className={S.lineIcon}>
+      {variant === 'dashed' ? (
+        <DashedLine color={color} />
+      ) : (
+        <div className={S.line} style={{ backgroundColor: color }} />
+      )}
+      <div className={S.dot} style={{ backgroundColor: color }} />
+    </div>
+  );
+}

package/src/components/ui/AnalysisLineIcon/index.ts

@@ -0,0 +1,5 @@
+export {
+  AnalysisLineIcon,
+  type AnalysisLineIconProps,
+  type AnalysisLineIconVariant,
+} from './AnalysisLineIcon';

package/src/components/ui/AppHeader/AppHeader.styl

@@ -0,0 +1,73 @@
+@import '../../../lib/theme.styl'
+
+.root
+  display flex
+  align-items center
+  align-self flex-end
+  width 100%
+  max-width calc(100vw - var(--sidebar-width) - var(--p-3))
+  min-height var(--header-height)
+  background-color var(--color-background)
+
+.content
+  display flex
+  align-items center
+  justify-content flex-end
+  width 100%
+  padding 0 var(--p-9)
+  gap 2rem
+
+.logo
+  display flex
+  align-items center
+  gap 0.5rem
+
+  font-weight 400
+  font-size 1.5rem
+  color var(--color-foreground)
+  text-decoration none
+  white-space nowrap
+
+  svg
+    display inline-flex
+    height 32px
+    width auto
+    transition transform 0.1s ease-in-out
+
+  &:hover svg
+    transform scale(1.05)
+
+.nav
+  display flex
+  align-items center
+  justify-content center
+  gap 1.5rem
+  flex 1
+
+  @media (max-width: units(MOBILE, 'px'))
+    display none
+
+.navLink
+  font-size 0.875rem
+  font-weight 400
+  color var(--color-muted-foreground)
+  text-decoration none
+  transition color 0.2s ease
+
+  &:hover
+    color var(--color-foreground)
+
+.actions
+  display flex
+  align-items center
+  gap var(--p-4)
+  margin-right var(--p-2)
+
+  @media (max-width: units(MOBILE, 'px'))
+    gap var(--p-1)
+
+.pageHeaderActionsAnchor
+  display flex
+  align-items center
+  gap var(--p-4)
+  flex-shrink 0

package/src/components/ui/AppHeader/AppHeader.styl.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'actions': string;
+  'content': string;
+  'logo': string;
+  'nav': string;
+  'navLink': string;
+  'pageHeaderActionsAnchor': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/AppHeader/AppHeader.tsx

@@ -0,0 +1,37 @@
+import cn from 'classnames';
+import { ReactNode, useLayoutEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import S from './AppHeader.styl';
+import { PAGE_HEADER_ID } from './appChromeAnchors';
+
+export type AppHeaderProps = {
+  className?: string;
+  /** Override default anchor id when multiple headers exist (e.g. docs demos). */
+  anchorId?: string;
+};
+
+export function AppHeaderHost({
+  className,
+  anchorId = PAGE_HEADER_ID,
+}: AppHeaderProps) {
+  return <header className={cn(S.root, className)} id={anchorId} />;
+}
+
+export type AppHeaderPortalProps = {
+  children: ReactNode;
+};
+
+export function AppHeaderPortal({ children }: AppHeaderPortalProps) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
+
+  useLayoutEffect(() => {
+    setContainer(document.getElementById(PAGE_HEADER_ID));
+  }, []);
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(children, container);
+}

package/src/components/ui/AppHeader/appChromeAnchors.ts

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

package/src/components/ui/AppHeader/index.ts

@@ -0,0 +1,3 @@
+export type { AppHeaderProps, AppHeaderPortalProps } from './AppHeader';
+export { AppHeaderHost, AppHeaderPortal } from './AppHeader';
+export { PAGE_HEADER_ID } from './appChromeAnchors';

package/src/components/ui/Avatar/Avatar.styl

@@ -0,0 +1,31 @@
+.root
+  position relative
+  display flex
+  align-items center
+  justify-content center
+  overflow hidden
+  border-radius 100%
+
+  &.size-sm
+    width 24px
+    height 24px
+  &.size-md
+    width 32px
+    height 32px
+  &.size-lg
+    width 48px
+    height 48px
+
+.image
+  aspect-ratio 1/1
+  width 100%
+  height 100%
+  object-fit cover
+
+.fallback
+  display flex
+  align-items center
+  justify-content center
+  width 100%
+  height 100%
+  background-color var(--muted)

package/src/components/ui/Avatar/Avatar.styl.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'fallback': string;
+  'image': string;
+  'root': string;
+  'size-lg': string;
+  'size-md': string;
+  'size-sm': string;
+}
+export const cssExports: CssExports;
+export default cssExports;