@sybilion/uilib 1.2.23 → 1.2.26

package/dist/esm/types/src/components/widgets/DriverMap/MapBackground/MapBackground.d.ts

@@ -0,0 +1 @@
+export declare function MapBackground(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/driverCategoryIcon.d.ts

@@ -0,0 +1 @@
+export declare const getCategoryIcon: (category: string | undefined | null) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/widgets/DriverMap/driverMapGeography.d.ts

@@ -0,0 +1,80 @@
+export interface DriverData {
+    id: string;
+    name: string;
+    region: string[];
+    category: string;
+    isPublic: boolean;
+    importance: number;
+    direction: number;
+    lag: string;
+    coordinates: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+    normalized_series?: {
+        [date: string]: number | null;
+    };
+    rawImportance?: any;
+    summary?: string;
+    src_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+    tgt_region?: {
+        name: string;
+        coordinates: {
+            x: number;
+            y: number;
+        };
+    } | null;
+}
+export interface RegionMapping {
+    [key: string]: {
+        x: number;
+        y: number;
+        continent: string;
+    };
+}
+export interface AnalysisInfo {
+    id: string;
+    name: string;
+    driverCount: number;
+    path: string;
+}
+export interface DatasetInfo {
+    id: string;
+    name: string;
+    analyses: AnalysisInfo[];
+}
+interface GeographicCoordinates {
+    latitude: number;
+    longitude: number;
+    continent: string;
+}
+export declare const geographicCoordinates: {
+    [key: string]: GeographicCoordinates;
+};
+export declare function geographicToSVG(lat: number, lng: number): {
+    x: number;
+    y: number;
+};
+export declare function svgToPercentage(svgX: number, svgY: number): {
+    x: number;
+    y: number;
+};
+export declare function getContinentFromRegion(region: string): string | null;
+export declare function getPreciseCoordinates(region: string): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export declare function getResponsiveCoordinates(region: string, existingDrivers?: DriverData[], mapContainerWidth?: number, mapContainerHeight?: number): {
+    x: number;
+    y: number;
+    continent: string;
+};
+export {};

package/dist/esm/types/src/components/widgets/DriverMap/driverMapSelection.d.ts

@@ -0,0 +1,3 @@
+import type { DriverData } from './driverMapGeography';
+export declare const getDriverImportance: (driver: DriverData) => any;
+export declare const getHighestImportanceDriver: (drivers: DriverData[]) => number | null;

package/dist/esm/types/src/components/widgets/DriverMap/index.d.ts

@@ -0,0 +1,8 @@
+export { DriverMap, type DriverMapProps } from './DriverMap';
+export type { DriverData } from './driverMapGeography';
+export { getCategoryIcon } from './driverCategoryIcon';
+export { getDriverImportance, getHighestImportanceDriver, } from './driverMapSelection';
+export { geographicCoordinates, geographicToSVG, getContinentFromRegion, getPreciseCoordinates, getResponsiveCoordinates, svgToPercentage, } from './driverMapGeography';
+export { MapBackground } from './MapBackground/MapBackground';
+export { LoadingSpinner } from './LoadingSpinner/LoadingSpinner';
+export type { BadgeSize } from './DriverIcon/DriverIcon';

package/dist/esm/types/src/docs/pages/DriverMapPage.d.ts

@@ -0,0 +1 @@
+export default function DriverMapPage(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/docs/registry.d.ts

@@ -8,7 +8,7 @@ export type DocEntry = {
     }>;
 };
 /** Sidebar group order */
-export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
+export declare const DOC_SECTION_ORDER: readonly ["Forms", "Feedback", "Layout", "Navigation", "Widgets", "Overlays", "Data display", "Charts", "Chat", "Media", "Misc"];
 export declare const DOC_DEFAULT_SLUG = "button";
 export declare const DOC_REGISTRY: DocEntry[];
 export declare const docPageComponents: Record<string, LazyExoticComponent<ComponentType<object>>>;

package/dist/esm/types/src/hooks/index.d.ts

@@ -1 +1,2 @@
 export { useIsMobile } from './useIsMobile';
+export { default as useEvent, type UseEventParams } from './useEvent';

package/dist/esm/types/src/index.d.ts

@@ -60,6 +60,7 @@ export * from './components/ui/Tooltip';
 export * from './components/ui/VimeoEmbed';
 export * from './components/ui/WorkspaceAppSwitcher';
 export * from './components/widgets/SidebarDatasetsItemsGrouped';
+export * from './components/widgets/DriverMap';
 export * from './components/widgets/SybilionAppHeader';
 export * from './components/widgets/SybilionAuthLayout';
 export * from './components/widgets/SybilionSignInPanel';

package/dist/esm/types/src/sybilion-auth/SybilionAuthProvider.d.ts

@@ -1,6 +1,6 @@
 import { type RedirectLoginOptions } from '@auth0/auth0-react';
 import type { JSX, ReactNode } from 'react';
-import type { SybilionSDK } from '@sybilion/sdk';
+import type { SybilionSDK } from '@sybilion/platform-sdk';
 /** Origin (`scheme://host:port`) for paths like `/api/v1/...`; derived from SDK URL layout. */
 export declare function getSybilionApiOriginFromSdk(sdk: SybilionSDK): string;
 export type SybilionAuthProviderProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sybilion/uilib",
-  "version": "1.2.23",
+  "version": "1.2.26",
   "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
   "publishConfig": {
     "access": "public",
@@ -111,7 +111,7 @@
   },
   "peerDependencies": {
     "@auth0/auth0-react": "^2.3.1",
-    "@sybilion/sdk": ">=0.0.1",
+    "@sybilion/platform-sdk": ">=0.0.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-router-dom": ">=6.0.0",
@@ -121,7 +121,7 @@
     "@auth0/auth0-react": {
       "optional": true
     },
-    "@sybilion/sdk": {
+    "@sybilion/platform-sdk": {
       "optional": true
     },
     "vite": {
@@ -130,7 +130,7 @@
   },
   "devDependencies": {
     "@auth0/auth0-react": "^2.3.1",
-    "@sybilion/sdk": "file:../sdk",
+    "@sybilion/platform-sdk": "file:../sdk",
     "@babel/core": "^7.20.12",
     "@babel/preset-typescript": "^7.21.0",
     "@homecode/ui": "^4.30.6",

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

@@ -11,6 +11,10 @@
 
   background-color var(--color-background)
 
+  @media (max-width MOBILE)
+    padding-left 200px
+    max-width 100%
+
   @media (min-width MOBILE)
     :global([data-slot='sidebar-wrapper'][data-state='collapsed']) &
       padding-left 200px

package/src/components/ui/Card/Card.styl

@@ -52,6 +52,7 @@
 .headerText
   flex-grow 1
   overflow hidden
+  width 100%
 
 .scroll
   max-height 100%

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl

@@ -18,7 +18,9 @@
 .deleteBtn
   flex-shrink 0
   border-radius 50px
-  opacity 0.3
+  opacity 0
+  pointer-events none
 
 .wrapper:hover .deleteBtn
   opacity 1
+  pointer-events auto

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -54,7 +54,7 @@ export function ChatSelector({
         (firstMessage.text.length > 30 ? '...' : '')
       );
     }
-    return `Chat ${chat.session_id}`;
+    return 'New chat';
   };
 
   return (

package/src/components/ui/DropdownMenu/DropdownMenu.tsx

@@ -44,6 +44,7 @@ function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  collisionPadding = 8,
   elevation = 'sm',
   ...props
 }: DropdownMenuContentProps) {
@@ -52,6 +53,7 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         className={cn(S.content, S[`elevation-${elevation}`], className)}
         {...props}
       />
@@ -201,11 +203,13 @@ function DropdownMenuSubTrigger({
 
 function DropdownMenuSubContent({
   className,
+  collisionPadding = 8,
   ...props
 }: DropdownMenuSubContentProps) {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
+      collisionPadding={collisionPadding}
       className={cn(S.subContent, className)}
       {...props}
     />

package/src/components/ui/NavUserHeader/NavUserHeader.tsx

@@ -2,6 +2,7 @@ import cn from 'classnames';
 import { useMemo } from 'react';
 
 import { useTheme } from '#uilib/contexts/theme-context';
+import { useIsMobile } from '#uilib/hooks/useIsMobile';
 import {
   MoonIcon,
   SignOutIcon,
@@ -25,7 +26,7 @@ import S from './NavUserHeader.styl';
 import type { NavUserHeaderProps } from './NavUserHeader.types';
 
 export function NavUserHeader({
-  variant = 'default',
+  variant,
   isLoading = false,
   isAuthenticated,
   user = null,
@@ -37,6 +38,8 @@ export function NavUserHeader({
   onThemeToggle: onThemeToggleFromHost,
 }: NavUserHeaderProps) {
   const docsTheme = useTheme();
+  const isMobile = useIsMobile();
+  const effectiveVariant = variant ?? (isMobile ? 'compact' : 'default');
   const hostControlsTheme =
     themeFromHost !== undefined && onThemeToggleFromHost !== undefined;
   const theme = hostControlsTheme ? themeFromHost : docsTheme.theme;
@@ -106,10 +109,13 @@ export function NavUserHeader({
         <Button
           variant="ghost"
           size="sm"
-          className={cn(S.userButton, variant === 'compact' && S.compact)}
+          className={cn(
+            S.userButton,
+            effectiveVariant === 'compact' && S.compact,
+          )}
         >
           {avatar}
-          {variant === 'default' && (
+          {effectiveVariant === 'default' && (
             <>
               {userIdentity}
               <ChevronDownIcon className={S.iconSm} />

package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.styl

@@ -21,6 +21,18 @@
   &:hover
     background-color var(--muted)
 
+  @media (max-width MOBILE)
+    max-width none
+    margin-left 0 !important
+    padding-right var(--p-1) !important
+    gap 0
+
+    .textCol
+      display none
+
+    .chevron
+      display none
+
 .iconTile
   position relative
   display flex

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

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'chevron': string;
   'icon': string;
   'iconTile': string;
   'item': string;

package/src/components/ui/WorkspaceAppSwitcher/WorkspaceAppSwitcher.tsx

@@ -124,7 +124,7 @@ export function WorkspaceAppSwitcher({
             <span className={S.name}>{displayApp.displayName}</span>
             <span className={S.sub}>{displayApp.subtitle}</span>
           </span>
-          <ChevronDown size={12} />
+          <ChevronDown className={S.chevron} size={12} aria-hidden />
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.constants.json

@@ -0,0 +1,3 @@
+{
+  "FADE_DURATION": 300
+}

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl

@@ -0,0 +1,125 @@
+@import '../../../../lib/theme.styl';
+json('./DriverIcon.constants.json')
+
+$dur = unit(FADE_DURATION, 'ms')
+$msOffset = 30ms
+
+.root
+  position absolute
+  transform translateX(-50%) translateY(-50%)
+  cursor pointer
+  outline none
+
+  &:hover
+    transition transform 300ms ease-out
+
+  &:focus
+    outline none
+
+.loadingHidden
+  opacity 0
+  pointer-events none
+
+.badge
+  padding 0.25rem
+  transition all $dur ease-out
+  pointer-events none
+
+  opacity 0
+  transform translateY(10px)
+
+  svg
+    height 20px
+    width 20px
+
+.size-s
+.size-s .badge
+  width 2rem
+  height 2rem
+  border-radius 10px
+.size-m
+.size-m .badge
+  width 2.5rem
+  height 2.5rem
+  border-radius 12px
+.size-l
+.size-l .badge
+  width 3rem
+  height 3rem
+  border-radius 14px
+
+
+// show/hide animations
+.visible .badge
+  transition $dur ease-out
+  transition-property opacity, transform
+  opacity 1
+  transform translateY(0)
+
+  span
+    transition box-shadow 0s .1s ease-out
+
+for $i in (1..6)
+  .root:nth-child({$i}) .badge
+    transition-delay ($i * $msOffset)
+  .visible:nth-child({$i}) .badge
+    transition-delay ($i * ($msOffset * 2))
+  .hidden:nth-child({$i}) .badge
+    transition-duration 'calc(%s - %s)' % ($dur ($i * $msOffset))
+
+
+// Hover
+.root:hover
+  z-index 10
+
+  .badge
+    box-shadow 0 0 0 1px var(--background)
+    transform scale(1.1)
+    transition-delay 0ms
+    transition-duration .2s
+
+.selected .badge
+.selected:hover .badge
+  transform scale(1.1)
+
+  // span
+  box-shadow inset 0 0 0 3px var(--sb-cyan-400)
+
+  :global(.dark) &
+    box-shadow inset 0 0 0 2px var(--sb-cyan-500)
+
+.root:not(.selected):hover .icon
+  transform scale(1.05)
+
+
+.tooltipContent
+  max-width 20rem
+  border 1px solid var(--border)
+  background-color var(--popover)
+  color var(--popover-foreground)
+  font-size 0.75rem
+  font-family var(--font-family-body)
+  box-shadow 0 10px 15px -3px rgba(0, 0, 0, 0.1)
+
+.tooltipCategory
+  color var(--muted-foreground)
+  display flex
+  align-items center
+  gap 0.25rem
+
+.tooltipCategoryIcon
+  height 0.75rem
+  width 0.75rem
+  color var(--muted-foreground)
+
+.tooltipCategoryText
+  line-clamp(1)
+  overflow hidden
+
+.tooltipName
+  font-weight normal
+
+.tooltipSpacing
+  display flex
+  flex-direction column
+  gap 0.25rem

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.styl.d.ts

@@ -0,0 +1,22 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'badge': string;
+  'hidden': string;
+  'icon': string;
+  'loadingHidden': string;
+  'root': string;
+  'selected': string;
+  'size-l': string;
+  'size-m': string;
+  'size-s': string;
+  'tooltipCategory': string;
+  'tooltipCategoryIcon': string;
+  'tooltipCategoryText': string;
+  'tooltipContent': string;
+  'tooltipName': string;
+  'tooltipSpacing': string;
+  'visible': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/widgets/DriverMap/DriverIcon/DriverIcon.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import cn from 'classnames';
+
+import { Badge } from '#uilib/components/ui/Badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#uilib/components/ui/Tooltip';
+
+import { getCategoryIcon } from '../driverCategoryIcon';
+import type { DriverData } from '../driverMapGeography';
+import S from './DriverIcon.styl';
+
+export const BADGE_SIZES = {
+  s: 's',
+  m: 'm',
+  l: 'l',
+} as const;
+
+export type BadgeSize = (typeof BADGE_SIZES)[keyof typeof BADGE_SIZES];
+
+interface DriverIconProps {
+  driver: DriverData;
+  size: BadgeSize;
+  isSelected: boolean;
+  onClick: () => void;
+  isVisible: boolean;
+  isLoading?: boolean;
+}
+
+export function DriverIcon({
+  driver,
+  size,
+  isSelected,
+  onClick,
+  isVisible,
+  isLoading = false,
+}: DriverIconProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        className={cn(
+          S.root,
+          S[`size-${size}`],
+          isSelected && S.selected,
+          isVisible ? S.visible : S.hidden,
+          isLoading && S.loadingHidden,
+        )}
+      >
+        <button
+          type="button"
+          onClick={onClick}
+          style={{
+            left: `${driver.coordinates.x}%`,
+            top: `${driver.coordinates.y}%`,
+            zIndex: isSelected ? 2 : '',
+          }}
+        >
+          <Badge className={S.badge}>
+            <div className={S.icon}>{getCategoryIcon(driver.category)}</div>
+          </Badge>
+        </button>
+      </TooltipTrigger>
+
+      <TooltipContent side="top" className={S.tooltipContent}>
+        <div className={S.tooltipSpacing}>
+          <div className={S.tooltipCategory}>
+            <span className={S.tooltipCategoryIcon}>
+              {getCategoryIcon(driver.category)}
+            </span>
+            <span className={S.tooltipCategoryText}>{driver.category}</span>
+          </div>
+          <div className={S.tooltipName}>{driver.name}</div>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}