@lotics/ui 1.25.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -48,6 +48,11 @@
     "./text": "./src/text.tsx",
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./icon": "./src/icon.tsx",
+    "./dynamic_icon": {
+      "react-native": "./src/dynamic_icon.tsx",
+      "default": "./src/dynamic_icon.web.tsx"
+    },
+    "./app_icon": "./src/app_icon.tsx",
     "./tooltip": "./src/tooltip.tsx",
     "./button": "./src/button.tsx",
     "./checkbox": "./src/checkbox.tsx",

package/src/app_icon.tsx

@@ -0,0 +1,59 @@
+import { View, StyleSheet } from "react-native";
+import { DynamicIcon } from "./dynamic_icon";
+import { colors } from "./colors";
+
+interface AppIconProps {
+  /**
+   * The app's icon — a Lucide icon name (the full library, via `DynamicIcon`).
+   * Empty/absent renders the neutral default.
+   */
+  icon?: string | null;
+  /** Palette token name (e.g. "blue"); unknown/empty → neutral zinc. */
+  themeColor?: string | null;
+  size?: "sm" | "md";
+}
+
+const DEFAULT_ICON = "layout-grid";
+
+/**
+ * The app's launcher tile: a brand-tinted square holding the app's Lucide icon
+ * (full library) or its uploaded image. Shared by every surface that shows an app
+ * (launcher, list, picker) — frontend and extension alike.
+ */
+export function AppIcon({ icon, themeColor, size = "sm" }: AppIconProps) {
+  const gradientStart = shade(themeColor, "400") ?? colors.zinc["400"];
+  const gradientEnd = shade(themeColor, "500") ?? colors.zinc["500"];
+  const iconColor = themeColor ? colors.white : colors.zinc["900"];
+  const isMd = size === "md";
+  const iconSize = isMd ? 20 : 16;
+  const name = icon && icon.trim() !== "" ? icon : DEFAULT_ICON;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        isMd ? styles.md : styles.sm,
+        // Solid color is the cross-platform base; web layers the gradient on top.
+        { backgroundColor: gradientEnd, backgroundImage: `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)` },
+      ]}
+    >
+      <DynamicIcon name={name} size={iconSize} color={iconColor} />
+    </View>
+  );
+}
+
+/** Safe palette-token → shade lookup (mirrors the option-color resolver). */
+function shade(token: string | null | undefined, level: "400" | "500"): string | undefined {
+  if (!token) return undefined;
+  const palette = colors[token as keyof typeof colors];
+  if (palette && typeof palette === "object" && level in palette) {
+    return (palette as Record<string, string>)[level];
+  }
+  return undefined;
+}
+
+const styles = StyleSheet.create({
+  container: { borderRadius: 6, alignItems: "center", justifyContent: "center", overflow: "hidden" },
+  sm: { width: 32, height: 32 },
+  md: { width: 40, height: 40, borderRadius: 8, boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)" },
+});

package/src/dynamic_icon.tsx

@@ -0,0 +1,20 @@
+import { Icon, type IconName } from "./icon";
+
+interface DynamicIconProps {
+  /** Any Lucide icon name (kebab-case). */
+  name: string;
+  size?: number;
+  color?: string;
+  testID?: string;
+}
+
+/**
+ * Native variant of `DynamicIcon`. There's no lazy lucide loader on native, so
+ * names resolve against the curated `Icon` set (which falls back to a neutral
+ * glyph for names outside it). The web variant (`dynamic_icon.web.tsx`) renders
+ * the full Lucide library. The runtime name is a boundary value — `Icon` handles
+ * an unknown name gracefully.
+ */
+export function DynamicIcon({ name, size, color, testID }: DynamicIconProps) {
+  return <Icon name={name as IconName} size={size} color={color} testID={testID} />;
+}

package/src/dynamic_icon.web.tsx

@@ -0,0 +1,40 @@
+import { View } from "react-native";
+import { DynamicIcon as LucideDynamicIcon } from "lucide-react/dynamic";
+import { colors } from "./colors";
+
+type LucideIconName = React.ComponentProps<typeof LucideDynamicIcon>["name"];
+
+interface DynamicIconProps {
+  /** Any Lucide icon name (kebab-case). Unknown names render a blank placeholder. */
+  name: string;
+  size?: number;
+  color?: string;
+  testID?: string;
+}
+
+/**
+ * Renders any icon from the FULL Lucide library by runtime name. Web variant:
+ * lucide-react's lazy `DynamicIcon` code-splits per icon, so only icons actually
+ * shown are fetched — the full set costs ~nothing in the initial bundle. The
+ * native variant (`dynamic_icon.tsx`) resolves against the curated `Icon` set.
+ *
+ * Icons are decorative — the enclosing control carries the accessible name
+ * (matches `Icon`).
+ */
+export function DynamicIcon({ name, size = 24, color = colors.zinc["900"], testID }: DynamicIconProps) {
+  return (
+    <View
+      testID={testID}
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      aria-hidden
+    >
+      <LucideDynamicIcon
+        name={name as LucideIconName}
+        size={size}
+        color={color}
+        fallback={() => <View style={{ width: size, height: size }} />}
+      />
+    </View>
+  );
+}

package/src/table.web.tsx

@@ -7,13 +7,22 @@ import type { Column, TableProps } from "./table_types";
 export type { SortDir, TableSort, Column, TableProps } from "./table_types";
 
 // Web table. Built from raw <div>s (not RN Pressable) so a click-to-expand row
-// can legally contain interactive cells: the row is a <div role="row">, never a
-// <button>, and an `interactive` cell's clicks are skipped via a centralized
-// `closest('[data-interactive]')` guard — no stopPropagation, no nested <button>,
-// no absolute overlay. The detail panel renders full-width below the row.
+// can legally contain interactive controls: the row is a <div role="row">, never
+// a <button>. A row click toggles expansion EXCEPT when it lands on an actual
+// interactive element — those keep their own behaviour. This is the web mirror of
+// RN's responder model (the innermost control wins): only the control suppresses
+// the toggle, so empty space anywhere in the row — including around a control in a
+// wide action column — still expands. No stopPropagation, no nested <button>, no
+// absolute overlay, no dead zones. The detail panel renders full-width below.
 
 const CHEVRON_W = 44;
 
+// Clicks landing on (or inside) one of these keep their own behaviour instead of
+// toggling the row — the standard interactive HTML tags + ARIA interactive roles,
+// plus an explicit [data-interactive] escape hatch for a non-element control.
+const INTERACTIVE_SELECTOR =
+  'a[href], button, input, select, textarea, label, summary, [role="button"], [role="link"], [role="checkbox"], [role="switch"], [role="radio"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [role="tab"], [role="slider"], [role="spinbutton"], [contenteditable="true"], [data-interactive]';
+
 function colWidth<TRow extends Record<string, unknown>>(col: Column<TRow>): CSSProperties {
   return col.width ? { width: col.width, flexShrink: 0 } : { flex: 1, minWidth: 0 };
 }
@@ -113,10 +122,10 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
               onClick={
                 pressable
                   ? (e: React.MouseEvent) => {
-                      // Whole-row click acts (expand or select), EXCEPT clicks inside an
-                      // interactive cell (pickers/buttons) — they keep their own behaviour.
-                      // The disclosure chevron is the keyboard/AT affordance for expansion.
-                      if ((e.target as HTMLElement).closest("[data-interactive]")) return;
+                      // Whole-row click acts (expand or select), EXCEPT when it lands on an
+                      // actual interactive element — those keep their own behaviour. The
+                      // disclosure chevron is the keyboard/AT affordance for expansion.
+                      if ((e.target as HTMLElement).closest(INTERACTIVE_SELECTOR)) return;
                       if (expandable) toggle(key, row);
                       else onRowPress?.(row);
                     }
@@ -130,7 +139,6 @@ export function Table<TRow extends Record<string, unknown>>(props: TableProps<TR
                 <div
                   key={col.key as string}
                   role="cell"
-                  data-interactive={col.interactive || undefined}
                   style={{
                     ...bodyCellStyle,
                     ...colWidth(col),

package/src/table_types.ts

@@ -17,10 +17,6 @@ export interface Column<TRow extends Record<string, unknown>> {
   /** When true (and `onSortChange` is set), the header is pressable + shows a
    *  sort arrow when this column is the active `sort`. */
   sortable?: boolean;
-  /** Cells whose own controls (buttons, pickers) must NOT toggle the row. The
-   *  row's expand handler ignores clicks originating inside an interactive cell,
-   *  so the rest of the row stays click-to-expand. */
-  interactive?: boolean;
   renderCell?: (params: { row: TRow; column: Column<TRow> }) => ReactNode;
 }
 
@@ -35,13 +31,14 @@ export interface TableProps<TRow extends Record<string, unknown>> {
    *  parent owns the actual sorting of `rows` — this only drives the indicator. */
   sort?: TableSort<TRow> | null;
   onSortChange?: (key: keyof TRow) => void;
-  /** Click-to-select: pressing a row (except `interactive` cells) calls this —
-   *  e.g. a picker that returns the chosen row. Mutually exclusive with
+  /** Click-to-select: pressing a row (except its interactive controls) calls
+   *  this — e.g. a picker that returns the chosen row. Mutually exclusive with
    *  `renderDetail` (a row either expands or selects); `renderDetail` wins if
    *  both are set. Pair with `rowStyle` to highlight the selected row. */
   onRowPress?: (row: TRow) => void;
   /** Render an inline detail panel, full-width below the row. When set, the
-   *  whole row (except `interactive` cells) is click-to-expand. */
+   *  whole row (except its interactive controls) is click-to-expand. The row
+   *  detects controls by element/role, so cells need no special marking. */
   renderDetail?: (row: TRow) => ReactNode;
   /** Controlled set of expanded row keys. Omit for internal (uncontrolled) state. */
   expandedKeys?: Set<string>;