feat: UX, responsive design, and data-density overhaul

.claude/edges.md

@@ -223,7 +223,7 @@ The following components are available from @texturehq/edges:
 - **SparklineCell** - Component
 - **SplitPane** - Child panels
 - **StaticMap** - Component
-- **StatList** - Additional CSS classes */ className?: string; }  // Helpers  // Use the centralized formatting utility function formatValue(value: StatValue, formatter?: StatFormatter): React.ReactNode { // If value is already a React element, return it as-is (skip formatting) if (React.isValidElement(value)) { return value; }  return formatComponentValue({ value, formatter, emptyClassName: "text-text-muted", emptyText: "—", }); }  function getTone(item: StatItem): StatTone | undefined { // Check thresholds first if (item.thresholds && item.value !== null && item.value !== undefined) { for (const threshold of item.thresholds) { if (threshold.when(item.value)) { return threshold.tone; } } }  // Fall back to explicit tone return item.tone; }  const toneColors: Record<StatTone, string> = { neutral: "text-text-body", success: "text-feedback-success", warning: "text-feedback-warning", error: "text-feedback-error", info: "text-feedback-info", };  // StatRow Component  // Constants for auto-truncation const LONG_STRING_THRESHOLD = 24; const LONG_STRING_TRUNCATE_LENGTH = 20;  function StatRow({ item, dense, valueAlign, }: { item: StatItem; dense?: boolean; valueAlign?: StatAlign; }) { const tone = getTone(item); const toneClass = tone ? toneColors[tone] : ""; const isStacked = item.stackOnMobile;  // Check if this is a long string that should be auto-truncated on mobile const isLongString = typeof item.value === "string" && item.value.length > LONG_STRING_THRESHOLD && !item.formatter && !React.isValidElement(item.value);  // Get the formatted value (used for both truncated and full display) const formattedValue = formatValue(item.value, item.formatter);  // Get the truncated value for mobile display // Note: We cast to string here because isLongString already verifies typeof item.value === "string" const truncatedValue = isLongString ? truncateMiddle(item.value as string, LONG_STRING_TRUNCATE_LENGTH) : null;  const textToCopy = typeof item.copyable === "function" ? item.copyable(item.value) : String(item.value);  // PII data attributes (only set if both piiType and piiEntity are provided) const piiAttrs = item.piiType && item.piiEntity ? { "data-pii-type": item.piiType, "data-pii-entity": item.piiEntity, } : {};  // For long strings, render both truncated (mobile) and full (desktop) versions // CSS classes control which is visible based on screen size // Tooltip content is wrapped in span with PII attributes to allow masking by Curtain extension const hasPiiAttrs = Object.keys(piiAttrs).length > 0; const valueDisplay = isLongString ? ( <> {/* Mobile: show truncated with tooltip */} <Tooltip content={hasPiiAttrs ? <span {...piiAttrs}>{String(item.value)}</span> : String(item.value)} > <span className={twMerge("md:hidden", item.href ? "hover:underline cursor-pointer" : "")} {...piiAttrs} > {truncatedValue} </span> </Tooltip> {/* Desktop: show full value
+- **StatList** - Additional CSS classes */ className?: string; }  // Helpers  // Use the centralized formatting utility function formatValue(value: StatValue, formatter?: StatFormatter): React.ReactNode { // If value is already a React element, return it as-is (skip formatting) if (React.isValidElement(value)) { return value; }  return formatComponentValue({ value, formatter, emptyClassName: "text-text-muted", emptyText: "—", }); }  function getTone(item: StatItem): StatTone | undefined { // Check thresholds first if (item.thresholds && item.value !== null && item.value !== undefined) { for (const threshold of item.thresholds) { if (threshold.when(item.value)) { return threshold.tone; } } }  // Fall back to explicit tone return item.tone; }  const toneColors: Record<StatTone, string> = { neutral: "text-text-body", success: "text-feedback-success", warning: "text-feedback-warning", error: "text-feedback-error", info: "text-feedback-info", };  // StatRow Component  // Constants for auto-truncation const LONG_STRING_THRESHOLD = 24; const LONG_STRING_TRUNCATE_LENGTH = 20;  function StatRow({ item, dense, valueAlign }: { item: StatItem; dense?: boolean; valueAlign?: StatAlign }) { const tone = getTone(item); const toneClass = tone ? toneColors[tone] : ""; const isStacked = item.stackOnMobile;  // Check if this is a long string that should be auto-truncated on mobile const isLongString = typeof item.value === "string" && item.value.length > LONG_STRING_THRESHOLD && !item.formatter && !React.isValidElement(item.value);  // Get the formatted value (used for both truncated and full display) const formattedValue = formatValue(item.value, item.formatter);  // Get the truncated value for mobile display // Note: We cast to string here because isLongString already verifies typeof item.value === "string" const truncatedValue = isLongString ? truncateMiddle(item.value as string, LONG_STRING_TRUNCATE_LENGTH) : null;  const textToCopy = typeof item.copyable === "function" ? item.copyable(item.value) : String(item.value);  // PII data attributes (only set if both piiType and piiEntity are provided) const piiAttrs = item.piiType && item.piiEntity ? { "data-pii-type": item.piiType, "data-pii-entity": item.piiEntity, } : {};  // For long strings, render both truncated (mobile) and full (desktop) versions // CSS classes control which is visible based on screen size // Tooltip content is wrapped in span with PII attributes to allow masking by Curtain extension const hasPiiAttrs = Object.keys(piiAttrs).length > 0; const valueDisplay = isLongString ? ( <> {/* Mobile: show truncated with tooltip */} <Tooltip content={hasPiiAttrs ? <span {...piiAttrs}>{String(item.value)}</span> : String(item.value)}> <span className={twMerge("md:hidden", item.href ? "hover:underline cursor-pointer" : "")} {...piiAttrs}> {truncatedValue} </span> </Tooltip> {/* Desktop: show full value
 - **Switch** - Switch  Toggle switch component for binary on/off states. Provides an accessible alternative to checkboxes for settings and preferences.
 - **Tab** - Tab trigger element.
 - **TabList** - TabList container.
@@ -451,7 +451,7 @@ Renders an Edges Button. When `href` is provided, renders a link-styled button u
 - `size: Size`
 - `style: React.CSSProperties`
 - `target: string`
-- `variant: | "default" | "brand" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost" | "primary"`
+- `variant: "default" | "brand" | "secondary" | "destructive" | "icon" | "link" | "unstyled" | "ghost" | "primary"`
 
 ---
 
@@ -1438,7 +1438,7 @@ PlaceSearch  Location search component with autocomplete; emits a `Place` value
 
 **Props:**
 - `autoFocus: boolean`
-- `countryRestrictions: string[]; // Array of ISO 3166-1 alpha-2 country codes proximity?: "ip" | [number, number]; // Either "ip" for IP-based location or [longitude, latitude] coordinates hideCountry?: boolean; // Hide country from results (useful when using countryRestrictions) showIcon?: boolean; // Show location type icons in results (default: true) className?: string`
+- `countryRestrictions: string[]; // Array of ISO 3166-1 alpha-2 country codes proximity?: "ip" | [number, number]; // Either "ip" for IP-based location or [longitude, latitude] coordinates hideCountry?: boolean; // Hide country from results (useful when using countryRestrictions) showIcon?: boolean; // Show location type icons in results (default: true) useMobileTray?: boolean; // Whether to use a Tray (bottom sheet) on mobile devices instead of a Popover (default: true) className?: string`
 - `defaultFilter: (textValue: string, inputValue: string) => boolean`
 - `defaultSelectedKey: Key | null`
 - `description: string`
@@ -1763,7 +1763,7 @@ Child panels
 ---
 
 #### StatList
-Additional CSS classes */ className?: string; }  // Helpers  // Use the centralized formatting utility function formatValue(value: StatValue, formatter?: StatFormatter): React.ReactNode { // If value is already a React element, return it as-is (skip formatting) if (React.isValidElement(value)) { return value; }  return formatComponentValue({ value, formatter, emptyClassName: "text-text-muted", emptyText: "—", }); }  function getTone(item: StatItem): StatTone | undefined { // Check thresholds first if (item.thresholds && item.value !== null && item.value !== undefined) { for (const threshold of item.thresholds) { if (threshold.when(item.value)) { return threshold.tone; } } }  // Fall back to explicit tone return item.tone; }  const toneColors: Record<StatTone, string> = { neutral: "text-text-body", success: "text-feedback-success", warning: "text-feedback-warning", error: "text-feedback-error", info: "text-feedback-info", };  // StatRow Component  // Constants for auto-truncation const LONG_STRING_THRESHOLD = 24; const LONG_STRING_TRUNCATE_LENGTH = 20;  function StatRow({ item, dense, valueAlign, }: { item: StatItem; dense?: boolean; valueAlign?: StatAlign; }) { const tone = getTone(item); const toneClass = tone ? toneColors[tone] : ""; const isStacked = item.stackOnMobile;  // Check if this is a long string that should be auto-truncated on mobile const isLongString = typeof item.value === "string" && item.value.length > LONG_STRING_THRESHOLD && !item.formatter && !React.isValidElement(item.value);  // Get the formatted value (used for both truncated and full display) const formattedValue = formatValue(item.value, item.formatter);  // Get the truncated value for mobile display // Note: We cast to string here because isLongString already verifies typeof item.value === "string" const truncatedValue = isLongString ? truncateMiddle(item.value as string, LONG_STRING_TRUNCATE_LENGTH) : null;  const textToCopy = typeof item.copyable === "function" ? item.copyable(item.value) : String(item.value);  // PII data attributes (only set if both piiType and piiEntity are provided) const piiAttrs = item.piiType && item.piiEntity ? { "data-pii-type": item.piiType, "data-pii-entity": item.piiEntity, } : {};  // For long strings, render both truncated (mobile) and full (desktop) versions // CSS classes control which is visible based on screen size // Tooltip content is wrapped in span with PII attributes to allow masking by Curtain extension const hasPiiAttrs = Object.keys(piiAttrs).length > 0; const valueDisplay = isLongString ? ( <> {/* Mobile: show truncated with tooltip */} <Tooltip content={hasPiiAttrs ? <span {...piiAttrs}>{String(item.value)}</span> : String(item.value)} > <span className={twMerge("md:hidden", item.href ? "hover:underline cursor-pointer" : "")} {...piiAttrs} > {truncatedValue} </span> </Tooltip> {/* Desktop: show full value
+Additional CSS classes */ className?: string; }  // Helpers  // Use the centralized formatting utility function formatValue(value: StatValue, formatter?: StatFormatter): React.ReactNode { // If value is already a React element, return it as-is (skip formatting) if (React.isValidElement(value)) { return value; }  return formatComponentValue({ value, formatter, emptyClassName: "text-text-muted", emptyText: "—", }); }  function getTone(item: StatItem): StatTone | undefined { // Check thresholds first if (item.thresholds && item.value !== null && item.value !== undefined) { for (const threshold of item.thresholds) { if (threshold.when(item.value)) { return threshold.tone; } } }  // Fall back to explicit tone return item.tone; }  const toneColors: Record<StatTone, string> = { neutral: "text-text-body", success: "text-feedback-success", warning: "text-feedback-warning", error: "text-feedback-error", info: "text-feedback-info", };  // StatRow Component  // Constants for auto-truncation const LONG_STRING_THRESHOLD = 24; const LONG_STRING_TRUNCATE_LENGTH = 20;  function StatRow({ item, dense, valueAlign }: { item: StatItem; dense?: boolean; valueAlign?: StatAlign }) { const tone = getTone(item); const toneClass = tone ? toneColors[tone] : ""; const isStacked = item.stackOnMobile;  // Check if this is a long string that should be auto-truncated on mobile const isLongString = typeof item.value === "string" && item.value.length > LONG_STRING_THRESHOLD && !item.formatter && !React.isValidElement(item.value);  // Get the formatted value (used for both truncated and full display) const formattedValue = formatValue(item.value, item.formatter);  // Get the truncated value for mobile display // Note: We cast to string here because isLongString already verifies typeof item.value === "string" const truncatedValue = isLongString ? truncateMiddle(item.value as string, LONG_STRING_TRUNCATE_LENGTH) : null;  const textToCopy = typeof item.copyable === "function" ? item.copyable(item.value) : String(item.value);  // PII data attributes (only set if both piiType and piiEntity are provided) const piiAttrs = item.piiType && item.piiEntity ? { "data-pii-type": item.piiType, "data-pii-entity": item.piiEntity, } : {};  // For long strings, render both truncated (mobile) and full (desktop) versions // CSS classes control which is visible based on screen size // Tooltip content is wrapped in span with PII attributes to allow masking by Curtain extension const hasPiiAttrs = Object.keys(piiAttrs).length > 0; const valueDisplay = isLongString ? ( <> {/* Mobile: show truncated with tooltip */} <Tooltip content={hasPiiAttrs ? <span {...piiAttrs}>{String(item.value)}</span> : String(item.value)}> <span className={twMerge("md:hidden", item.href ? "hover:underline cursor-pointer" : "")} {...piiAttrs}> {truncatedValue} </span> </Tooltip> {/* Desktop: show full value
 
 **Imports:**
 - `import { StatList } from "@texturehq/edges"`