@stevederico/skateboard-ui 4.15.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # CHANGELOG
 
+5.0.0
+
+  Major break from 4.x
+  Drop icons re-exports
+  Drop public DynamicIcon
+  Ship lucide-react dependency
+  Collapse shadcn/ui shims
+  Bump react-router 7.18.3
+
+4.18.1
+
+  Bump react-router 7.18.3
+
+4.18.0
+
+  Drop icons re-exports
+  Import lucide-react direct
+  Ship lucide-react dependency
+  Collapse shadcn/ui shims
+
+4.17.0
+
+  Drop public DynamicIcon
+  Keep private constantsIcon
+
+4.16.0
+
+  Drop unused shadcn primitives
+  Peer lucide-react icons
+  Curate DynamicIcon registry
+  Cut dead Utilities helpers
+
 4.15.0
 
   Ship react-router as a dependency

package/README.md

@@ -7,11 +7,7 @@ Requires **Node.js 24+** in the app repo (see `engines` in `package.json`).
 ## Installation
 
 ```bash
-# npm
 npm install @stevederico/skateboard-ui
-
-# deno
-deno install npm:@stevederico/skateboard-ui
 ```
 
 ## Quick Start
@@ -253,7 +249,6 @@ Key variables: `--color-app` (brand), `--background`, `--foreground`, `--accent`
 | Header | `@stevederico/skateboard-ui/Header` | Page header with optional action button |
 | Layout | `@stevederico/skateboard-ui/Layout` | Sidebar (desktop) + tabbar (mobile) |
 | TabBar | `@stevederico/skateboard-ui/TabBar` | Mobile bottom navigation |
-| DynamicIcon | `@stevederico/skateboard-ui/DynamicIcon` | Lucide icon by name string |
 | ThemeToggle | `@stevederico/skateboard-ui/ThemeToggle` | Dark/light mode toggle |
 | Sheet | `@stevederico/skateboard-ui/Sheet` | Slide-out panel |
 | UpgradeSheet | `@stevederico/skateboard-ui/UpgradeSheet` | Premium upgrade drawer |
@@ -302,9 +297,13 @@ import { useIsMobile } from '@stevederico/skateboard-ui/shadcn/hooks/use-mobile'
 ### Icons
 
 ```javascript
-import { ArrowUp, X } from '@stevederico/skateboard-ui/icons';
+import { ArrowUp, X } from 'lucide-react';
 ```
 
+Apps install `lucide-react` (peer) and named-import icons. There is no
+`@stevederico/skateboard-ui/icons` export. The shell resolves
+`constants.json` icon strings privately via a curated registry.
+
 ## Context
 
 ```javascript
@@ -354,7 +353,6 @@ import {
   hideTabBar,
   timestampToString,
   useListData,
-  useForm,
   isAppMode,
 } from '@stevederico/skateboard-ui/Utilities';
 ```
@@ -381,7 +379,7 @@ showManage('cus_abc123');
 - React 19.1+
 - react-dom 19.1+
 
-`react-router` is a runtime dependency of this package (pinned). Apps do not install it. Navigate with `useSafeNavigate()` from `Utilities`.
+`react-router` and `lucide-react` are runtime dependencies of this package (pinned). Apps do not need to install them for the shell. Named-import icons from `lucide-react` in app code (npm will hoist it). There is no public DynamicIcon and no `@stevederico/skateboard-ui/icons` path. The shell resolves `constants.json` icon strings privately. Navigate with `useSafeNavigate()` from `Utilities`.
 
 ## Repository
 

package/dist/components/AuthOverlay.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../shadcn/ui/dialog.js';
-import DynamicIcon from './core/DynamicIcon.js';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog.js';
+import ConstantsIcon from './core/constantsIcon.js';
 import { getState } from './core/Context.js';
 import SignInView from './views/SignInView.js';
 import SignUpView from './views/SignUpView.js';
@@ -54,5 +54,5 @@ export default function AuthOverlay() {
         dispatch({ type: 'AUTH_OVERLAY_SUCCESS' });
     }
     return (_jsx(Dialog, { open: visible, onOpenChange: (open) => { if (!open)
-            handleClose(); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { className: "items-center text-center", children: [_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "bg-app rounded-2xl flex aspect-square size-10 items-center justify-center", children: _jsx(DynamicIcon, { name: constants.appIcon, size: 20, color: "white", strokeWidth: 2 }) }), _jsx("span", { className: "text-2xl font-bold", children: constants.appName })] }), _jsx(DialogTitle, { className: "sr-only", children: mode === 'signin' ? 'Sign In' : 'Sign Up' })] }), mode === 'signin' ? (_jsx(SignInView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signup') })) : (_jsx(SignUpView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signin') }))] }) }));
+            handleClose(); }, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { className: "items-center text-center", children: [_jsxs("div", { className: "flex items-center justify-center gap-3", children: [_jsx("div", { className: "bg-app rounded-2xl flex aspect-square size-10 items-center justify-center", children: _jsx(ConstantsIcon, { name: constants.appIcon, size: 20, color: "white", strokeWidth: 2 }) }), _jsx("span", { className: "text-2xl font-bold", children: constants.appName })] }), _jsx(DialogTitle, { className: "sr-only", children: mode === 'signin' ? 'Sign In' : 'Sign Up' })] }), mode === 'signin' ? (_jsx(SignInView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signup') })) : (_jsx(SignUpView, { embedded: true, onSuccess: handleSuccess, onSwitchMode: () => setMode('signin') }))] }) }));
 }

package/dist/components/ErrorBoundary.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { Button } from '../shadcn/ui/button.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from '../shadcn/ui/card.js';
-import { Alert, AlertDescription } from '../shadcn/ui/alert.js';
-import { Badge } from '../shadcn/ui/badge.js';
+import { Button } from '../ui/button.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardFooter } from '../ui/card.js';
+import { Alert, AlertDescription } from '../ui/alert.js';
+import { Badge } from '../ui/badge.js';
 class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);

package/dist/components/Sheet.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useImperativeHandle, forwardRef } from 'react';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../shadcn/ui/drawer.js";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, } from "../ui/drawer.js";
 /**
  * Bottom sheet (drawer) component with imperative open/close API.
  *

package/dist/components/ThemeToggle.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useTheme } from './core/ThemeProvider.js';
-import { Sun, Moon } from '../icons/index.js';
-import { Button } from '../shadcn/ui/button.js';
+import { Sun, Moon } from 'lucide-react';
+import { Button } from '../ui/button.js';
 import { cn } from '../shadcn/lib/utils.js';
 export default function ThemeToggle({ className = "", iconSize = 16, variant = "settings", ...props }) {
     const { resolvedTheme, setTheme } = useTheme();

package/dist/components/UpgradeSheet.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useImperativeHandle, forwardRef } from 'react';
-import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, } from "../shadcn/ui/drawer.js";
-import { Card, CardContent, } from "../shadcn/ui/card.js";
-import { Badge } from "../shadcn/ui/badge.js";
-import { Separator } from "../shadcn/ui/separator.js";
-import { Button } from "../shadcn/ui/button.js";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, } from "../ui/drawer.js";
+import { Card, CardContent, } from "../ui/card.js";
+import { Badge } from "../ui/badge.js";
+import { Separator } from "../ui/separator.js";
+import { Button } from "../ui/button.js";
 import { getState } from "./core/Context.js";
 import { showCheckout } from './core/Utilities.js';
-import { Sparkles, CircleCheck } from '../icons/index.js';
+import { Sparkles, CircleCheck } from 'lucide-react';
 /**
  * Premium upgrade drawer with pricing and checkout button.
  *

package/dist/components/core/Utilities.d.ts

@@ -1,5 +1,5 @@
 import type { Location } from 'react-router';
-import type { ChangeEvent, FormEvent, RefObject } from 'react';
+import type { RefObject } from 'react';
 /** A navigation item rendered in the Sidebar and TabBar (constants.pages). */
 export interface ConstantsPage {
     title: string;
@@ -243,13 +243,6 @@ export declare function getCurrentUser(): Promise<User | null>;
  * @returns {Promise<boolean>} True if user is an active subscriber
  */
 export declare function isSubscriber(): Promise<boolean>;
-/**
- * Log an analytics event. Stub for custom analytics integration.
- *
- * @param {string} event - Event name to log
- * @returns {Promise<void>}
- */
-export declare function logEvent(event: string): Promise<void>;
 /**
  * Open the Stripe billing portal for subscription management.
  *
@@ -364,30 +357,6 @@ export declare function useListData<T = any>(endpoint: string, sortFn?: ((a: T,
     error: string | null;
     refetch: () => Promise<void>;
 };
-/**
- * Standard form state management
- * @param {object} initialValues - Initial form values
- * @param {function} onSubmit - Submit handler function
- * @returns {object} - { values, handleChange, handleSubmit, reset, submitting, error }
- */
-export declare function useForm(initialValues: Record<string, any>, onSubmit: (values: Record<string, any>) => unknown): {
-    values: Record<string, any>;
-    handleChange: (field: string) => (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleSubmit: (e?: FormEvent) => Promise<void>;
-    reset: () => void;
-    submitting: boolean;
-    error: string | null;
-};
-/**
- * Programmatically show/hide the sidebar
- * @param {boolean} visible - Whether sidebar should be visible
- */
-export declare function setSidebarVisible(visible: boolean): void;
-/**
- * Programmatically show/hide the tab bar
- * @param {boolean} visible - Whether tab bar should be visible
- */
-export declare function setTabBarVisible(visible: boolean): void;
 /**
  * Show the sidebar
  */

package/dist/components/core/Utilities.js

@@ -327,15 +327,6 @@ export async function isSubscriber() {
         return false;
     }
 }
-/**
- * Log an analytics event. Stub for custom analytics integration.
- *
- * @param {string} event - Event name to log
- * @returns {Promise<void>}
- */
-export async function logEvent(event) {
-    //insert analytics code here
-}
 /**
  * Open the Stripe billing portal for subscription management.
  *
@@ -887,43 +878,11 @@ export function useListData(endpoint, sortFn = null) {
     }, [endpoint]);
     return { data, loading, error, refetch: () => fetchData() };
 }
-/**
- * Standard form state management
- * @param {object} initialValues - Initial form values
- * @param {function} onSubmit - Submit handler function
- * @returns {object} - { values, handleChange, handleSubmit, reset, submitting, error }
- */
-export function useForm(initialValues, onSubmit) {
-    const [values, setValues] = useState(initialValues);
-    const [submitting, setSubmitting] = useState(false);
-    const [error, setError] = useState(null);
-    const handleChange = (field) => (e) => {
-        setValues(prev => ({ ...prev, [field]: e.target.value }));
-    };
-    const handleSubmit = async (e) => {
-        e?.preventDefault();
-        setSubmitting(true);
-        setError(null);
-        try {
-            await onSubmit(values);
-            setValues(initialValues);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            setSubmitting(false);
-        }
-    };
-    const reset = () => setValues(initialValues);
-    return { values, handleChange, handleSubmit, reset, submitting, error };
-}
 // ===== UI VISIBILITY CONTROLS =====
 /**
- * Programmatically show/hide the sidebar
- * @param {boolean} visible - Whether sidebar should be visible
+ * Dispatch a sidebar visibility change. Not exported — apps use show/hide helpers.
  */
-export function setSidebarVisible(visible) {
+function setSidebarVisible(visible) {
     const dispatch = getDispatch();
     if (dispatch) {
         dispatch({ type: 'SET_SIDEBAR_VISIBLE', payload: visible });
@@ -933,10 +892,9 @@ export function setSidebarVisible(visible) {
     }
 }
 /**
- * Programmatically show/hide the tab bar
- * @param {boolean} visible - Whether tab bar should be visible
+ * Dispatch a tab bar visibility change. Not exported — apps use show/hide helpers.
  */
-export function setTabBarVisible(visible) {
+function setTabBarVisible(visible) {
     const dispatch = getDispatch();
     if (dispatch) {
         dispatch({ type: 'SET_TABBAR_VISIBLE', payload: visible });

package/dist/components/core/constantsIcon.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Render a Lucide icon by name string from the curated registry.
+ *
+ * Accepts kebab-case ("layout-dashboard"), PascalCase ("LayoutDashboard"),
+ * or legacy prefixed ("IconLayoutDashboard") names. Icons outside the
+ * registry are not rendered — import them by name from `lucide-react` instead.
+ *
+ * @param {Object} props
+ * @param {string} props.name - Icon name (e.g. "home", "arrow-right", "Settings")
+ * @param {number} [props.size=24] - Icon size in pixels
+ * @param {string} [props.color='currentColor'] - Icon stroke color
+ * @param {number} [props.strokeWidth=2] - Stroke width
+ * @param {string} [props.className] - Additional CSS classes
+ * @returns {JSX.Element|null} Rendered icon or null if not found
+ *
+ */
+interface ConstantsIconProps {
+    name: string;
+    size?: number;
+    color?: string;
+    strokeWidth?: number;
+    className?: string;
+    [key: string]: unknown;
+}
+declare const ConstantsIcon: ({ name, size, color, strokeWidth, className, ...props }: ConstantsIconProps) => import("react").JSX.Element | null;
+export default ConstantsIcon;

package/dist/components/core/constantsIcon.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Anchor, Apple, ArrowRight, BadgeCheck, Banknote, Beer, Bell, Bolt, BookOpen, BookUser, Bookmark, Bot, Briefcase, Calendar, CalendarCheck, Camera, Car, ChartBar, ChartColumn, ChartLine, ChartNoAxesColumn, ChartNoAxesColumnIncreasing, Check, CircleAlert, CircleCheck, CircleHelp, CircleUserRound, Clapperboard, ClipboardCheck, Club, Columns2, Command, Compass, Copy, Cpu, CreditCard, Database, Diamond, Dices, DollarSign, Download, Eye, File, FileSearch, FileText, Film, Filter, Flame, FlaskConical, Folder, Gauge, GitBranch, Globe, GraduationCap, Ham, Hammer, Headphones, Headset, Heart, HeartPulse, History, Home, Hospital, House, Image, Images, Inbox, Key, Landmark, LayoutDashboard, LayoutList, LayoutTemplate, Leaf, Library, LifeBuoy, List, ListTodo, Lock, Map, MapPin, MessageCircle, MessageCircleMore, MessageSquare, MessagesSquare, Mic, MonitorPlay, MonitorSmartphone, Moon, Package, Palette, ParkingMeter, PenLine, PenSquare, PiggyBank, Plane, Play, Podcast, Plus, QrCode, Quote, Radio, Receipt, Repeat, Ribbon, Rocket, Scale, ScanBarcode, ScanText, School, Scissors, Search, Send, Settings, Share2, Shield, ShieldCheck, ShoppingBag, Sparkles, Square, SquareCheck, Star, Stethoscope, Subtitles, Sun, Swords, Table, Tags, Target, Telescope, TestTube, Ticket, Trash2, TreePine, TrendingDown, TrendingUp, Tv, Type, User, UserPlus, Users, UsersRound, Utensils, Video, Volleyball, Wallet, WalletCards, WalletMinimal, WandSparkles, Workflow, X, Zap, } from 'lucide-react';
+/**
+ * Convert a kebab-case, snake_case, or space-separated string to PascalCase.
+ *
+ * @param {string} str - Input string
+ * @returns {string} PascalCase version
+ */
+function toPascalCase(str) {
+    return str
+        .split(/[-_\s]+/)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('');
+}
+/**
+ * Strip a legacy Tabler-style `Icon` prefix when present.
+ *
+ * @param {string} name - Icon name in any case format
+ * @returns {string} PascalCase lucide export name
+ */
+function toIconName(name) {
+    let stripped = name;
+    if (stripped.startsWith('Icon') && stripped.length > 4 && stripped[4] === stripped[4].toUpperCase()) {
+        stripped = stripped.slice(4);
+    }
+    return /[-_\s]/.test(stripped)
+        ? toPascalCase(stripped)
+        : stripped.charAt(0).toUpperCase() + stripped.slice(1);
+}
+/**
+ * Curated Lucide icons used by the shell and by `constants.json` icon strings
+ * across skateboard apps. Private to the shell — not a package export.
+ * App code should named-import from `lucide-react`. Unknown names render nothing.
+ */
+const ICON_REGISTRY = {
+    Anchor,
+    Apple,
+    ArrowRight,
+    BadgeCheck,
+    Banknote,
+    Beer,
+    Bell,
+    Bolt,
+    BookOpen,
+    BookUser,
+    Bookmark,
+    Bot,
+    Briefcase,
+    Calendar,
+    CalendarCheck,
+    Camera,
+    Car,
+    ChartBar,
+    ChartColumn,
+    ChartLine,
+    ChartNoAxesColumn,
+    ChartNoAxesColumnIncreasing,
+    // Legacy kebab aliases that lucide renamed.
+    BarChart2: ChartNoAxesColumn,
+    BarChart3: ChartColumn,
+    LineChart: ChartLine,
+    Check,
+    CircleAlert,
+    CircleCheck,
+    CircleHelp,
+    CircleUserRound,
+    Clapperboard,
+    ClipboardCheck,
+    Club,
+    Columns2,
+    Command,
+    Compass,
+    Copy,
+    Cpu,
+    CreditCard,
+    Database,
+    Diamond,
+    Dices,
+    DollarSign,
+    Download,
+    Eye,
+    File,
+    FileSearch,
+    FileText,
+    Film,
+    Filter,
+    Flame,
+    FlaskConical,
+    Folder,
+    Gauge,
+    GitBranch,
+    Globe,
+    GraduationCap,
+    Ham,
+    Hammer,
+    Headphones,
+    Headset,
+    Heart,
+    HeartPulse,
+    History,
+    Home,
+    Hospital,
+    House,
+    Image,
+    Images,
+    Inbox,
+    Key,
+    Landmark,
+    LayoutDashboard,
+    LayoutList,
+    LayoutTemplate,
+    Leaf,
+    Library,
+    LifeBuoy,
+    List,
+    ListTodo,
+    Lock,
+    Map,
+    MapPin,
+    MessageCircle,
+    MessageCircleMore,
+    MessageSquare,
+    MessagesSquare,
+    Mic,
+    MonitorPlay,
+    MonitorSmartphone,
+    Moon,
+    Package,
+    Palette,
+    ParkingMeter,
+    PenLine,
+    PenSquare,
+    PiggyBank,
+    Plane,
+    Play,
+    Podcast,
+    Plus,
+    QrCode,
+    Quote,
+    Radio,
+    Receipt,
+    Repeat,
+    Ribbon,
+    Rocket,
+    Scale,
+    ScanBarcode,
+    ScanText,
+    School,
+    Scissors,
+    Search,
+    Send,
+    Settings,
+    Share2,
+    Shield,
+    ShieldCheck,
+    ShoppingBag,
+    Sparkles,
+    Square,
+    SquareCheck,
+    Star,
+    Stethoscope,
+    Subtitles,
+    Sun,
+    Swords,
+    Table,
+    Tags,
+    Target,
+    Telescope,
+    TestTube,
+    Ticket,
+    Trash2,
+    TreePine,
+    TrendingDown,
+    TrendingUp,
+    Tv,
+    Type,
+    User,
+    UserPlus,
+    Users,
+    UsersRound,
+    Utensils,
+    Video,
+    Volleyball,
+    Wallet,
+    WalletCards,
+    WalletMinimal,
+    WandSparkles,
+    Workflow,
+    X,
+    Zap,
+};
+const ConstantsIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, className, ...props }) => {
+    const Icon = ICON_REGISTRY[toIconName(name)];
+    if (!Icon)
+        return null;
+    return (_jsx(Icon, { size: size, color: color, strokeWidth: strokeWidth, className: className, ...props }));
+};
+export default ConstantsIcon;

package/dist/components/layout/Header.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Separator } from "../../shadcn/ui/separator.js";
-import { Button } from "../../shadcn/ui/button.js";
-import { Badge } from "../../shadcn/ui/badge.js";
+import { Separator } from "../../ui/separator.js";
+import { Button } from "../../ui/button.js";
+import { Badge } from "../../ui/badge.js";
 import { cn } from "../../shadcn/lib/utils.js";
 function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
     return (_jsxs(_Fragment, { children: [_jsx("header", { className: cn("flex h-(--header-height) shrink-0 items-center gap-2", className), ...props, children: _jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [_jsx("h1", { className: "text-lg font-medium", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [typeof buttonTitle !== "undefined" && (_jsx(Button, { variant: "ghost", size: "sm", className: buttonClass || "", onClick: onButtonTitleClick, children: buttonTitle })), children] })] }) }), _jsx(Separator, {})] }));

package/dist/components/layout/Layout.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Outlet } from 'react-router';
 import TabBar from './TabBar.js';
-import { SidebarProvider, SidebarInset } from "../../shadcn/ui/sidebar.js";
+import { SidebarProvider, SidebarInset } from "../../ui/sidebar.js";
 import Sidebar from "./Sidebar.js";
 import { getState } from '../core/Context.js';
 export default function Layout({ children }) {

package/dist/components/layout/Sidebar.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 /**
  * Desktop navigation sidebar using shadcn primitives.
  *
- * Renders app pages from constants.pages with DynamicIcon icons,
+ * Renders app pages from constants.pages with ConstantsIcon icons,
  * tooltip support when collapsed, and settings pushed to the footer.
  *
  * @returns {JSX.Element} Sidebar navigation

package/dist/components/layout/Sidebar.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useNavigate, useLocation } from "react-router";
-import DynamicIcon from "../core/DynamicIcon.js";
+import ConstantsIcon from '../core/constantsIcon.js';
 import { getState } from "../core/Context.js";
-import { Sidebar as SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, useSidebar, } from "../../shadcn/ui/sidebar.js";
-import { Settings } from '../../icons/index.js';
+import { Sidebar as SidebarRoot, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarRail, useSidebar, } from "../../ui/sidebar.js";
+import { Settings } from 'lucide-react';
 export default function Sidebar({ variant = "inset", ...props }) {
     const { open } = useSidebar();
     const navigate = useNavigate();
@@ -12,8 +12,8 @@ export default function Sidebar({ variant = "inset", ...props }) {
     const currentPage = (location.pathname.split("/")[2] || "").toLowerCase();
     const { state } = getState();
     const constants = state.constants;
-    return (_jsxs(SidebarRoot, { collapsible: "icon", variant: variant, ...props, children: [!constants.hideSidebarHeader && (_jsx(SidebarHeader, { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { size: "sm", onClick: () => navigate("/app"), tooltip: constants.appName, className: "hover:bg-transparent active:bg-transparent", children: [_jsx("div", { className: "bg-app flex items-center justify-center shrink-0 rounded-lg size-8 -ml-2", children: _jsx(DynamicIcon, { name: constants.appIcon, strokeWidth: 2, className: "text-white" }) }), _jsx("span", { className: "font-semibold text-lg shrink min-w-0 truncate", children: constants.appName })] }) }) }) })), _jsx(SidebarContent, { children: _jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: constants.pages.map((item) => {
+    return (_jsxs(SidebarRoot, { collapsible: "icon", variant: variant, ...props, children: [!constants.hideSidebarHeader && (_jsx(SidebarHeader, { className: "p-2", children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { size: "sm", onClick: () => navigate("/app"), tooltip: constants.appName, className: "hover:bg-transparent active:bg-transparent", children: [_jsx("div", { className: "bg-app flex items-center justify-center shrink-0 rounded-lg size-8 -ml-2", children: _jsx(ConstantsIcon, { name: constants.appIcon, strokeWidth: 2, className: "text-white" }) }), _jsx("span", { className: "font-semibold text-lg shrink min-w-0 truncate", children: constants.appName })] }) }) }) })), _jsx(SidebarContent, { children: _jsx(SidebarGroup, { children: _jsx(SidebarGroupContent, { children: _jsx(SidebarMenu, { children: constants.pages.map((item) => {
                                 const isActive = currentPage === item.url.toLowerCase();
-                                return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: item.title, size: "sm", className: "data-active:font-normal", onClick: () => navigate(`/app/${item.url.toLowerCase()}`), children: [_jsx(DynamicIcon, { name: item.icon, size: 20, strokeWidth: 2 }), _jsx("span", { children: item.title })] }) }, item.title));
+                                return (_jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: isActive, tooltip: item.title, size: "sm", className: "data-active:font-normal", onClick: () => navigate(`/app/${item.url.toLowerCase()}`), children: [_jsx(ConstantsIcon, { name: item.icon, size: 20, strokeWidth: 2 }), _jsx("span", { children: item.title })] }) }, item.title));
                             }) }) }) }) }), _jsx(SidebarFooter, { children: _jsx(SidebarMenu, { children: _jsx(SidebarMenuItem, { children: _jsxs(SidebarMenuButton, { isActive: location.pathname.toLowerCase().includes("settings"), tooltip: "Settings", size: "sm", className: "data-active:font-normal", onClick: () => navigate("/app/settings"), children: [_jsx(Settings, { size: 20, strokeWidth: 2 }), _jsx("span", { children: "Settings" })] }) }) }) }), _jsx(SidebarRail, {})] }));
 }

package/dist/components/layout/TabBar.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Link, useLocation } from 'react-router';
-import DynamicIcon from '../core/DynamicIcon.js';
+import ConstantsIcon from '../core/constantsIcon.js';
 import { getState } from '../core/Context.js';
 import { cn } from '../../shadcn/lib/utils.js';
 export default function TabBar({ className, ...props }) {
@@ -20,6 +20,6 @@ export default function TabBar({ className, ...props }) {
     ];
     return (_jsx("nav", { className: cn("fixed md:hidden bottom-0 inset-x-0 bg-background border-t border-border z-50", className), role: "navigation", "aria-label": "Main navigation", ...props, children: _jsx("div", { className: "flex justify-around items-center pt-2 pb-4", children: tabs.map((tab) => {
                 const isActive = currentPage === tab.match;
-                return (_jsxs(Link, { to: tab.to, className: cn("flex flex-col items-center gap-0.5 px-3 transition-colors", isActive ? "text-foreground" : "text-muted-foreground"), "aria-label": tab.title, "aria-current": isActive ? 'page' : undefined, children: [_jsx(DynamicIcon, { name: tab.icon, size: 24, strokeWidth: isActive ? 2 : 1.5 }), _jsx("span", { className: "text-xs", children: tab.title })] }, tab.title));
+                return (_jsxs(Link, { to: tab.to, className: cn("flex flex-col items-center gap-0.5 px-3 transition-colors", isActive ? "text-foreground" : "text-muted-foreground"), "aria-label": tab.title, "aria-current": isActive ? 'page' : undefined, children: [_jsx(ConstantsIcon, { name: tab.icon, size: 24, strokeWidth: isActive ? 2 : 1.5 }), _jsx("span", { className: "text-xs", children: tab.title })] }, tab.title));
             }) }) }));
 }

package/dist/components/views/LandingView.d.ts

@@ -7,7 +7,7 @@
  * footerLinks, companyName, copyrightText).
  *
  * Feature icons (constants.features.items[].icon) and appIcon are resolved
- * via DynamicIcon as Lucide names (kebab/PascalCase). Emoji icons do NOT
+ * via ConstantsIcon as Lucide names (kebab/PascalCase). Emoji icons do NOT
  * render — migrate legacy emoji icons in constants.json to Lucide names.
  *
  * @returns {JSX.Element}

package/dist/components/views/LandingView.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useNavigate } from 'react-router';
 import { getState } from '../core/Context.js';
-import DynamicIcon from '../core/DynamicIcon.js';
+import ConstantsIcon from '../core/constantsIcon.js';
 import ThemeToggle from '../ThemeToggle.js';
-import { Check, ArrowRight } from '../../icons/index.js';
-import { Button } from '../../shadcn/ui/button.js';
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../shadcn/ui/card.js';
-import { Separator } from '../../shadcn/ui/separator.js';
+import { Check, ArrowRight } from 'lucide-react';
+import { Button } from '../../ui/button.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../../ui/card.js';
+import { Separator } from '../../ui/separator.js';
 import { cn } from '../../shadcn/lib/utils.js';
 const CURRENT_YEAR = new Date().getFullYear();
 const PRIVACY_LINK = { label: 'Privacy', href: '/privacy' };
@@ -14,7 +14,7 @@ const TERMS_LINK = { label: 'Terms', href: '/terms' };
 const EULA_LINK = { label: 'EULA', href: '/eula' };
 /**
  * Renders a constants icon value. Values that look like a Lucide name (ASCII
- * letters, digits, hyphens) resolve via DynamicIcon; anything else (e.g. a
+ * letters, digits, hyphens) resolve via ConstantsIcon; anything else (e.g. a
  * legacy emoji icon) renders as raw text so it never silently disappears.
  *
  * @param {Object} props
@@ -27,7 +27,7 @@ function ConstantIcon({ name, size, strokeWidth }) {
     if (!name)
         return null;
     if (/^[a-z][a-z0-9-]*$/i.test(name))
-        return _jsx(DynamicIcon, { name: name, size: size, strokeWidth: strokeWidth });
+        return _jsx(ConstantsIcon, { name: name, size: size, strokeWidth: strokeWidth });
     return _jsx("span", { className: "leading-none", style: { fontSize: size }, children: name });
 }
 /**
@@ -39,7 +39,7 @@ function ConstantIcon({ name, size, strokeWidth }) {
  * footerLinks, companyName, copyrightText).
  *
  * Feature icons (constants.features.items[].icon) and appIcon are resolved
- * via DynamicIcon as Lucide names (kebab/PascalCase). Emoji icons do NOT
+ * via ConstantsIcon as Lucide names (kebab/PascalCase). Emoji icons do NOT
  * render — migrate legacy emoji icons in constants.json to Lucide names.
  *
  * @returns {JSX.Element}