even-toolkit 0.5.2 → 1.0.1

package/package.json

@@ -1,90 +1,311 @@
 {
   "name": "even-toolkit",
-  "version": "0.5.2",
-  "description": "Shared library for building Even Realities G2 glasses apps — bridge, display, gestures, action bars, timers, and more.",
+  "version": "1.0.1",
+  "description": "Design system & component library for Even Realities G2 smart glasses apps — 55+ web components, 191 pixel-art icons, glasses SDK bridge, and design tokens.",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/glasses/index.js",
+  "types": "./dist/glasses/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/glasses/index.d.ts",
+      "import": "./dist/glasses/index.js"
     },
     "./types": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/types.js"
+      "types": "./dist/glasses/types.d.ts",
+      "import": "./dist/glasses/types.js"
     },
     "./bridge": {
-      "types": "./dist/bridge.d.ts",
-      "import": "./dist/bridge.js"
+      "types": "./dist/glasses/bridge.d.ts",
+      "import": "./dist/glasses/bridge.js"
     },
     "./useGlasses": {
-      "types": "./dist/useGlasses.d.ts",
-      "import": "./dist/useGlasses.js"
+      "types": "./dist/glasses/useGlasses.d.ts",
+      "import": "./dist/glasses/useGlasses.js"
     },
     "./useFlashPhase": {
-      "types": "./dist/useFlashPhase.d.ts",
-      "import": "./dist/useFlashPhase.js"
+      "types": "./dist/glasses/useFlashPhase.d.ts",
+      "import": "./dist/glasses/useFlashPhase.js"
     },
     "./action-bar": {
-      "types": "./dist/action-bar.d.ts",
-      "import": "./dist/action-bar.js"
+      "types": "./dist/glasses/action-bar.d.ts",
+      "import": "./dist/glasses/action-bar.js"
     },
     "./action-map": {
-      "types": "./dist/action-map.d.ts",
-      "import": "./dist/action-map.js"
+      "types": "./dist/glasses/action-map.d.ts",
+      "import": "./dist/glasses/action-map.js"
     },
     "./gestures": {
-      "types": "./dist/gestures.d.ts",
-      "import": "./dist/gestures.js"
+      "types": "./dist/glasses/gestures.d.ts",
+      "import": "./dist/glasses/gestures.js"
     },
     "./keyboard": {
-      "types": "./dist/keyboard.d.ts",
-      "import": "./dist/keyboard.js"
+      "types": "./dist/glasses/keyboard.d.ts",
+      "import": "./dist/glasses/keyboard.js"
     },
     "./timer-display": {
-      "types": "./dist/timer-display.d.ts",
-      "import": "./dist/timer-display.js"
+      "types": "./dist/glasses/timer-display.d.ts",
+      "import": "./dist/glasses/timer-display.js"
     },
     "./text-utils": {
-      "types": "./dist/text-utils.d.ts",
-      "import": "./dist/text-utils.js"
+      "types": "./dist/glasses/text-utils.d.ts",
+      "import": "./dist/glasses/text-utils.js"
     },
     "./layout": {
-      "types": "./dist/layout.d.ts",
-      "import": "./dist/layout.js"
+      "types": "./dist/glasses/layout.d.ts",
+      "import": "./dist/glasses/layout.js"
     },
     "./canvas-renderer": {
-      "types": "./dist/canvas-renderer.d.ts",
-      "import": "./dist/canvas-renderer.js"
+      "types": "./dist/glasses/canvas-renderer.d.ts",
+      "import": "./dist/glasses/canvas-renderer.js"
     },
     "./composer": {
-      "types": "./dist/composer.d.ts",
-      "import": "./dist/composer.js"
+      "types": "./dist/glasses/composer.d.ts",
+      "import": "./dist/glasses/composer.js"
     },
     "./png-utils": {
-      "types": "./dist/png-utils.d.ts",
-      "import": "./dist/png-utils.js"
+      "types": "./dist/glasses/png-utils.d.ts",
+      "import": "./dist/glasses/png-utils.js"
     },
     "./keep-alive": {
-      "types": "./dist/keep-alive.d.ts",
-      "import": "./dist/keep-alive.js"
+      "types": "./dist/glasses/keep-alive.d.ts",
+      "import": "./dist/glasses/keep-alive.js"
     },
     "./splash": {
-      "types": "./dist/splash.d.ts",
-      "import": "./dist/splash.js"
+      "types": "./dist/glasses/splash.d.ts",
+      "import": "./dist/glasses/splash.js"
     },
     "./text-clean": {
-      "types": "./dist/text-clean.d.ts",
-      "import": "./dist/text-clean.js"
+      "types": "./dist/glasses/text-clean.d.ts",
+      "import": "./dist/glasses/text-clean.js"
     },
     "./paginate-text": {
-      "types": "./dist/paginate-text.d.ts",
-      "import": "./dist/paginate-text.js"
-    }
+      "types": "./dist/glasses/paginate-text.d.ts",
+      "import": "./dist/glasses/paginate-text.js"
+    },
+    "./web": {
+      "types": "./dist/web/index.d.ts",
+      "import": "./dist/web/index.js"
+    },
+    "./web/cn": {
+      "types": "./dist/web/utils/cn.d.ts",
+      "import": "./dist/web/utils/cn.js"
+    },
+    "./web/icons": {
+      "types": "./dist/web/icons/index.d.ts",
+      "import": "./dist/web/icons/index.js"
+    },
+    "./web/button": {
+      "types": "./dist/web/components/button.d.ts",
+      "import": "./dist/web/components/button.js"
+    },
+    "./web/card": {
+      "types": "./dist/web/components/card.d.ts",
+      "import": "./dist/web/components/card.js"
+    },
+    "./web/badge": {
+      "types": "./dist/web/components/badge.d.ts",
+      "import": "./dist/web/components/badge.js"
+    },
+    "./web/input": {
+      "types": "./dist/web/components/input.d.ts",
+      "import": "./dist/web/components/input.js"
+    },
+    "./web/textarea": {
+      "types": "./dist/web/components/textarea.d.ts",
+      "import": "./dist/web/components/textarea.js"
+    },
+    "./web/select": {
+      "types": "./dist/web/components/select.d.ts",
+      "import": "./dist/web/components/select.js"
+    },
+    "./web/progress": {
+      "types": "./dist/web/components/progress.d.ts",
+      "import": "./dist/web/components/progress.js"
+    },
+    "./web/status-dot": {
+      "types": "./dist/web/components/status-dot.d.ts",
+      "import": "./dist/web/components/status-dot.js"
+    },
+    "./web/pill": {
+      "types": "./dist/web/components/pill.d.ts",
+      "import": "./dist/web/components/pill.js"
+    },
+    "./web/toggle": {
+      "types": "./dist/web/components/toggle.d.ts",
+      "import": "./dist/web/components/toggle.js"
+    },
+    "./web/segmented-control": {
+      "types": "./dist/web/components/segmented-control.d.ts",
+      "import": "./dist/web/components/segmented-control.js"
+    },
+    "./web/table": {
+      "types": "./dist/web/components/table.d.ts",
+      "import": "./dist/web/components/table.js"
+    },
+    "./web/kbd": {
+      "types": "./dist/web/components/kbd.d.ts",
+      "import": "./dist/web/components/kbd.js"
+    },
+    "./web/divider": {
+      "types": "./dist/web/components/divider.d.ts",
+      "import": "./dist/web/components/divider.js"
+    },
+    "./web/nav-bar": {
+      "types": "./dist/web/components/nav-bar.d.ts",
+      "import": "./dist/web/components/nav-bar.js"
+    },
+    "./web/page": {
+      "types": "./dist/web/components/page.d.ts",
+      "import": "./dist/web/components/page.js"
+    },
+    "./web/screen-header": {
+      "types": "./dist/web/components/screen-header.d.ts",
+      "import": "./dist/web/components/screen-header.js"
+    },
+    "./web/section-header": {
+      "types": "./dist/web/components/section-header.d.ts",
+      "import": "./dist/web/components/section-header.js"
+    },
+    "./web/settings-group": {
+      "types": "./dist/web/components/settings-group.d.ts",
+      "import": "./dist/web/components/settings-group.js"
+    },
+    "./web/category-filter": {
+      "types": "./dist/web/components/category-filter.d.ts",
+      "import": "./dist/web/components/category-filter.js"
+    },
+    "./web/list-item": {
+      "types": "./dist/web/components/list-item.d.ts",
+      "import": "./dist/web/components/list-item.js"
+    },
+    "./web/search-bar": {
+      "types": "./dist/web/components/search-bar.d.ts",
+      "import": "./dist/web/components/search-bar.js"
+    },
+    "./web/timer-ring": {
+      "types": "./dist/web/components/timer-ring.d.ts",
+      "import": "./dist/web/components/timer-ring.js"
+    },
+    "./web/dialog": {
+      "types": "./dist/web/components/dialog.d.ts",
+      "import": "./dist/web/components/dialog.js"
+    },
+    "./web/toast": {
+      "types": "./dist/web/components/toast.d.ts",
+      "import": "./dist/web/components/toast.js"
+    },
+    "./web/empty-state": {
+      "types": "./dist/web/components/empty-state.d.ts",
+      "import": "./dist/web/components/empty-state.js"
+    },
+    "./web/loading": {
+      "types": "./dist/web/components/loading.d.ts",
+      "import": "./dist/web/components/loading.js"
+    },
+    "./web/nav-header": {
+      "types": "./dist/web/components/nav-header.d.ts",
+      "import": "./dist/web/components/nav-header.js"
+    },
+    "./web/bottom-sheet": {
+      "types": "./dist/web/components/bottom-sheet.d.ts",
+      "import": "./dist/web/components/bottom-sheet.js"
+    },
+    "./web/cta-group": {
+      "types": "./dist/web/components/cta-group.d.ts",
+      "import": "./dist/web/components/cta-group.js"
+    },
+    "./web/tag": {
+      "types": "./dist/web/components/tag.d.ts",
+      "import": "./dist/web/components/tag.js"
+    },
+    "./web/indicator": {
+      "types": "./dist/web/components/indicator.d.ts",
+      "import": "./dist/web/components/indicator.js"
+    },
+    "./web/checkbox": {
+      "types": "./dist/web/components/checkbox.d.ts",
+      "import": "./dist/web/components/checkbox.js"
+    },
+    "./web/radio-group": {
+      "types": "./dist/web/components/radio-group.d.ts",
+      "import": "./dist/web/components/radio-group.js"
+    },
+    "./web/slider": {
+      "types": "./dist/web/components/slider.d.ts",
+      "import": "./dist/web/components/slider.js"
+    },
+    "./web/skeleton": {
+      "types": "./dist/web/components/skeleton.d.ts",
+      "import": "./dist/web/components/skeleton.js"
+    },
+    "./web/input-group": {
+      "types": "./dist/web/components/input-group.d.ts",
+      "import": "./dist/web/components/input-group.js"
+    },
+    "./web/step-indicator": {
+      "types": "./dist/web/components/step-indicator.d.ts",
+      "import": "./dist/web/components/step-indicator.js"
+    },
+    "./web/confirm-dialog": {
+      "types": "./dist/web/components/confirm-dialog.d.ts",
+      "import": "./dist/web/components/confirm-dialog.js"
+    },
+    "./web/chat": {
+      "types": "./dist/web/components/chat.d.ts",
+      "import": "./dist/web/components/chat.js"
+    },
+    "./web/calendar": {
+      "types": "./dist/web/components/calendar.d.ts",
+      "import": "./dist/web/components/calendar.js"
+    },
+    "./web/chart": {
+      "types": "./dist/web/components/chart.d.ts",
+      "import": "./dist/web/components/chart.js"
+    },
+    "./web/timeline": {
+      "types": "./dist/web/components/timeline.d.ts",
+      "import": "./dist/web/components/timeline.js"
+    },
+    "./web/stat-grid": {
+      "types": "./dist/web/components/stat-grid.d.ts",
+      "import": "./dist/web/components/stat-grid.js"
+    },
+    "./web/status-progress": {
+      "types": "./dist/web/components/status-progress.d.ts",
+      "import": "./dist/web/components/status-progress.js"
+    },
+    "./web/file-upload": {
+      "types": "./dist/web/components/file-upload.d.ts",
+      "import": "./dist/web/components/file-upload.js"
+    },
+    "./web/voice-input": {
+      "types": "./dist/web/components/voice-input.d.ts",
+      "import": "./dist/web/components/voice-input.js"
+    },
+    "./web/image-viewer": {
+      "types": "./dist/web/components/image-viewer.d.ts",
+      "import": "./dist/web/components/image-viewer.js"
+    },
+    "./web/audio-player": {
+      "types": "./dist/web/components/audio-player.d.ts",
+      "import": "./dist/web/components/audio-player.js"
+    },
+    "./web/scroll-picker": {
+      "types": "./dist/web/components/scroll-picker.d.ts",
+      "import": "./dist/web/components/scroll-picker.js"
+    },
+    "./web/icons/svg-icons": {
+      "types": "./dist/web/icons/svg-icons.d.ts",
+      "import": "./dist/web/icons/svg-icons.js"
+    },
+    "./web/theme-light.css": "./web/theme/tokens-light.css",
+    "./web/theme-dark.css": "./web/theme/tokens-dark.css",
+    "./web/typography.css": "./web/theme/typography.css",
+    "./web/utilities.css": "./web/theme/utilities.css"
   },
   "files": [
     "dist",
+    "web",
     "README.md",
     "LICENSE"
   ],
@@ -93,10 +314,13 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "@evenrealities/even_hub_sdk": ">=0.0.7",
+    "@jappyjan/even-better-sdk": ">=0.0.10",
+    "class-variance-authority": ">=0.7.0",
+    "clsx": ">=2.0.0",
     "react": ">=18.0.0",
     "react-router": ">=7.0.0",
-    "@evenrealities/even_hub_sdk": ">=0.0.7",
-    "@jappyjan/even-better-sdk": ">=0.0.10"
+    "tailwind-merge": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -104,14 +328,26 @@
     },
     "react-router": {
       "optional": true
+    },
+    "clsx": {
+      "optional": true
+    },
+    "tailwind-merge": {
+      "optional": true
+    },
+    "class-variance-authority": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@evenrealities/even_hub_sdk": "^0.0.7",
     "@jappyjan/even-better-sdk": "^0.0.10",
     "@types/react": "^19.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "react": "^19.0.0",
     "react-router": "^7.0.0",
+    "tailwind-merge": "^3.5.0",
     "typescript": "~5.4.0"
   },
   "keywords": [
@@ -126,6 +362,13 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/fabioglimb/even-glass"
+    "url": "https://github.com/fabioglimb/even-toolkit"
+  },
+  "homepage": "https://github.com/fabioglimb/even-toolkit#readme",
+  "bugs": {
+    "url": "https://github.com/fabioglimb/even-toolkit/issues"
+  },
+  "dependencies": {
+    "recharts": "^3.8.0"
   }
 }

package/web/components/app-shell.tsx

@@ -0,0 +1,29 @@
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface AppShellProps {
+  header: ReactNode;
+  footer?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * AppShell — fixed header + scrollable content + optional fixed footer.
+ * Uses flexbox so it works regardless of ancestor overflow settings.
+ */
+function AppShell({ header, footer, children, className }: AppShellProps) {
+  return (
+    <div className={cn('h-dvh flex flex-col overflow-hidden', className)}>
+      <div className="shrink-0 bg-bg">{header}</div>
+      <div className="relative flex-1 min-h-0">
+        <div className="absolute top-0 left-0 right-0 h-3 z-10 pointer-events-none" style={{ background: 'linear-gradient(var(--color-bg), transparent)' }} />
+        <div className="h-full overflow-y-auto">{children}</div>
+      </div>
+      {footer && <div className="shrink-0 bg-bg">{footer}</div>}
+    </div>
+  );
+}
+
+export { AppShell };
+export type { AppShellProps };

package/web/components/audio-player.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+
+interface AudioPlayerProps {
+  src: string;
+  title?: string;
+  className?: string;
+}
+
+function formatTime(s: number): string {
+  const m = Math.floor(s / 60);
+  const sec = Math.floor(s % 60);
+  return `${m}:${sec.toString().padStart(2, '0')}`;
+}
+
+function AudioPlayer({ src, title, className }: AudioPlayerProps) {
+  const audioRef = React.useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = React.useState(false);
+  const [currentTime, setCurrentTime] = React.useState(0);
+  const [duration, setDuration] = React.useState(0);
+
+  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+  const togglePlay = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    if (playing) { audio.pause(); } else { audio.play(); }
+    setPlaying(!playing);
+  };
+
+  const seek = (e: React.MouseEvent<HTMLDivElement>) => {
+    const audio = audioRef.current;
+    if (!audio || !duration) return;
+    const rect = e.currentTarget.getBoundingClientRect();
+    const pct = (e.clientX - rect.left) / rect.width;
+    audio.currentTime = pct * duration;
+  };
+
+  React.useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const onTime = () => setCurrentTime(audio.currentTime);
+    const onMeta = () => setDuration(audio.duration);
+    const onEnd = () => setPlaying(false);
+
+    audio.addEventListener('timeupdate', onTime);
+    audio.addEventListener('loadedmetadata', onMeta);
+    audio.addEventListener('ended', onEnd);
+    return () => {
+      audio.removeEventListener('timeupdate', onTime);
+      audio.removeEventListener('loadedmetadata', onMeta);
+      audio.removeEventListener('ended', onEnd);
+    };
+  }, []);
+
+  return (
+    <div className={cn('bg-surface rounded-[6px] p-3 flex items-center gap-3', className)}>
+      <audio ref={audioRef} src={src} preload="metadata" />
+
+      {/* Play/Pause */}
+      <button
+        type="button"
+        onClick={togglePlay}
+        className="shrink-0 w-9 h-9 rounded-full bg-accent text-text-highlight flex items-center justify-center cursor-pointer"
+      >
+        {playing ? (
+          <svg viewBox="0 0 24 24" className="w-4 h-4">
+            <rect x={7} y={6} width={3} height={12} fill="currentColor" />
+            <rect x={14} y={6} width={3} height={12} fill="currentColor" />
+          </svg>
+        ) : (
+          <svg viewBox="0 0 24 24" className="w-4 h-4">
+            <rect x={8} y={4} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={6} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={8} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={10} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={12} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={14} width={2} height={2} fill="currentColor" />
+            <rect x={8} y={16} width={2} height={2} fill="currentColor" />
+            <rect x={10} y={6} width={2} height={2} fill="currentColor" />
+            <rect x={10} y={8} width={2} height={2} fill="currentColor" />
+            <rect x={10} y={10} width={2} height={2} fill="currentColor" />
+            <rect x={10} y={12} width={2} height={2} fill="currentColor" />
+            <rect x={10} y={14} width={2} height={2} fill="currentColor" />
+            <rect x={12} y={8} width={2} height={2} fill="currentColor" />
+            <rect x={12} y={10} width={2} height={2} fill="currentColor" />
+            <rect x={12} y={12} width={2} height={2} fill="currentColor" />
+            <rect x={14} y={10} width={2} height={2} fill="currentColor" />
+          </svg>
+        )}
+      </button>
+
+      {/* Info + progress */}
+      <div className="flex-1 min-w-0">
+        {title && <div className="text-[13px] tracking-[-0.13px] text-text truncate mb-1">{title}</div>}
+        <div
+          className="h-1 bg-surface-lighter rounded-full cursor-pointer"
+          onClick={seek}
+        >
+          <div
+            className="h-full bg-accent rounded-full transition-all"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+      </div>
+
+      {/* Time */}
+      <span className="text-[11px] tracking-[-0.11px] text-text-dim tabular-nums shrink-0">
+        {formatTime(currentTime)} / {formatTime(duration || 0)}
+      </span>
+    </div>
+  );
+}
+
+export { AudioPlayer };
+export type { AudioPlayerProps };

package/web/components/badge.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-[6px] px-2 py-0.5 text-[11px] tracking-[-0.11px] font-normal',
+  {
+    variants: {
+      variant: {
+        positive: 'bg-positive-alpha text-positive',
+        negative: 'bg-negative-alpha text-negative',
+        accent: 'bg-accent-alpha text-accent',
+        neutral: 'bg-surface-light text-text-dim',
+      },
+    },
+    defaultVariants: {
+      variant: 'neutral',
+    },
+  },
+);
+
+interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => (
+    <span
+      ref={ref}
+      className={cn(badgeVariants({ variant, className }))}
+      {...props}
+    />
+  ),
+);
+
+Badge.displayName = 'Badge';
+
+export { Badge, badgeVariants };
+export type { BadgeProps };

package/web/components/bottom-sheet.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { cn } from '../utils/cn';
+import type { ReactNode } from 'react';
+
+interface BottomSheetProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  className?: string;
+}
+
+function BottomSheet({ open, onClose, children, className }: BottomSheetProps) {
+  const [visible, setVisible] = React.useState(false);
+  const [closing, setClosing] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setVisible(true);
+      setClosing(false);
+    } else if (visible) {
+      setClosing(true);
+      const timer = setTimeout(() => { setVisible(false); setClosing(false); }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  React.useEffect(() => {
+    if (!visible) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [visible, onClose]);
+
+  if (!visible) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-end justify-center"
+      style={{ animation: closing ? 'fadeOut 200ms ease forwards' : 'fadeIn 200ms ease' }}
+    >
+      <div className="absolute inset-0 bg-overlay" onClick={onClose} />
+      <div
+        className={cn(
+          'relative z-10 w-full max-w-[393px] bg-bg rounded-t-[6px] shadow-[0px_-4px_12px_0px_rgba(0,0,0,0.12)] pt-3',
+          className,
+        )}
+        style={{ animation: closing ? 'slideDown 200ms ease forwards' : 'slideUp 250ms ease' }}
+      >
+        {children}
+        <div className="flex items-center justify-center h-[42px]">
+          <div className="w-[139px] h-[5px] rounded-full bg-text" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { BottomSheet };
+export type { BottomSheetProps };