@rebasepro/ui 0.10.0 → 0.10.1-canary.0a881d4

package/src/icons/index.ts

@@ -16,15 +16,20 @@ export {
     AlertTriangleIcon,
     AlignLeftIcon,
     AppWindow,
+    ArrowDownIcon,
     ArrowDownToLineIcon,
     ArrowLeftIcon,
     ArrowRightFromLineIcon,
     ArrowRightIcon,
+    ArrowRightLeftIcon,
     ArrowRightToLineIcon,
+    ArrowUpDownIcon,
+    ArrowUpIcon,
     ArrowUpToLineIcon,
     BoldIcon,
     BookOpenIcon,
     CalendarIcon,
+    CheckCircle2Icon,
     CheckCircleIcon,
     CheckIcon,
     CheckSquareIcon,
@@ -35,12 +40,14 @@ export {
     ChevronsLeftIcon,
     ChevronsRightIcon,
     ChevronsUpDownIcon,
+    CircleDotIcon,
     CircleIcon,
     CircleUserIcon,
     CodeIcon,
     ColumnsIcon,
     CopyIcon,
     DatabaseIcon,
+    DollarSignIcon,
     DownloadIcon,
     ExternalLinkIcon,
     EyeIcon,
@@ -52,6 +59,7 @@ export {
     FilterXIcon,
     FlagIcon,
     FolderIcon,
+    FolderKanbanIcon,
     FolderPlusIcon,
     FolderUpIcon,
     FunctionSquareIcon,
@@ -78,11 +86,14 @@ export {
     ListIcon,
     LockIcon,
     ListOrderedIcon,
+    ListPlusIcon,
+    ListTodoIcon,
     LoaderIcon,
     LogOutIcon,
     MailIcon,
     Maximize2Icon,
     MenuIcon,
+    MessageCircleIcon,
     MinusCircleIcon,
     MinusIcon,
     MoonIcon,
@@ -90,8 +101,10 @@ export {
     Music2Icon,
     PanelLeftIcon,
     PauseIcon,
+    PenLineIcon,
     PencilIcon,
     PhoneIcon,
+    PinIcon,
     PlayIcon,
     PlusIcon,
     QuoteIcon,
@@ -108,6 +121,7 @@ export {
     SlidersHorizontalIcon,
     SquareIcon,
     StarIcon,
+    StickyNoteIcon,
     StrikethroughIcon,
     SunIcon,
     SunMoonIcon,
@@ -116,6 +130,7 @@ export {
     TerminalIcon,
     TextIcon,
     Trash2Icon,
+    TrendingUpIcon,
     TypeIcon,
     UnderlineIcon,
     UndoIcon,
@@ -124,9 +139,11 @@ export {
     UserCheckIcon,
     UserIcon,
     UserPlus,
+    UsersIcon,
     VideoIcon,
     VoteIcon,
     Wand2Icon,
+    WrenchIcon,
     XCircleIcon,
     XIcon
 } from "lucide-react";

package/src/styles.ts

@@ -1,10 +1,10 @@
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
-export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
+export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
 export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
-export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
-export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
-export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
-export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-white/[0.055]";
+export const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-white/0";
+export const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-white/[0.03]";
+export const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-white/[0.09]";
 export const defaultBorderMixin = "border-surface-200 dark:border-surface-700/60 ";
 export const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
 export const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";

package/src/views/CollectionView/CollectionCardView.tsx

@@ -14,6 +14,7 @@ import type {
     CollectionViewSize,
     CollectionSelectionController,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -66,16 +67,10 @@ export function CollectionCardView<T extends Record<string, unknown> = Record<st
     );
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Resolve image property ───────────────────────────────────────
     const imageProperty = useMemo(() => {

package/src/views/CollectionView/CollectionKanbanView.tsx

@@ -14,6 +14,7 @@ import type {
     CollectionSelectionController,
     CollectionEnumValueConfig,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -107,16 +108,10 @@ export function CollectionKanbanView<T extends Record<string, unknown> = Record<
     }, [properties, kanbanProperty, columns]);
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Preview properties (up to 2) ─────────────────────────────────
     const previewProperties = useMemo(() => {

package/src/views/CollectionView/CollectionListView.tsx

@@ -12,6 +12,7 @@ import type {
     CollectionViewSize,
     CollectionSelectionController,
 } from "./CollectionViewTypes";
+import { resolveTitlePropertyKey } from "./resolveTitleProperty";
 
 import { getValueInPath } from "./utils";
 
@@ -64,16 +65,10 @@ export function CollectionListView<T extends Record<string, unknown> = Record<st
     );
 
     // ── Resolve title property ───────────────────────────────────────
-    const titlePropertyKey = useMemo(() => {
-        if (titleProperty) return titleProperty;
-        for (const key of order) {
-            const prop = properties[key];
-            if (prop && prop.type === "string" && !prop.hideFromCollection && !prop.storage) {
-                return key;
-            }
-        }
-        return idProperty;
-    }, [titleProperty, order, properties, idProperty]);
+    const titlePropertyKey = useMemo(
+        () => resolveTitlePropertyKey(order, properties, idProperty, titleProperty),
+        [titleProperty, order, properties, idProperty]
+    );
 
     // ── Subtitle properties (up to 2) ────────────────────────────────
     const subtitleProperties = useMemo(() => {

package/src/views/CollectionView/resolveTitleProperty.ts

@@ -0,0 +1,52 @@
+import type { CollectionPropertyConfig } from "./CollectionViewTypes";
+
+/**
+ * Pick the property that acts as a row's title.
+ *
+ * Headless mirror of the ranking in `@rebasepro/common`: identifiers are kept
+ * out of the title slot structurally (the id property, images, hidden fields),
+ * and among what is left a plain text field beats a description, an enum or a
+ * relation. Falls back to the id property only when a collection has nothing
+ * else to show.
+ */
+export function resolveTitlePropertyKey(
+    order: string[],
+    properties: Record<string, CollectionPropertyConfig>,
+    idProperty: string,
+    titleProperty?: string
+): string {
+    if (titleProperty) return titleProperty;
+
+    const SCORE = {
+        RELATION: 10,
+        LONG_TEXT: 20,
+        ENUM: 30,
+        EMAIL: 45,
+        PLAIN_TEXT: 60,
+        NAMED: 100
+    };
+    const titleLikeKeys = new Set(["name", "fullname", "displayname", "title", "label", "heading", "subject", "username", "nickname"]);
+
+    let best: { key: string; score: number } | undefined;
+
+    order.forEach(key => {
+        const property = properties[key];
+        if (!property || property.hideFromCollection) return;
+        if (key === idProperty) return;
+        if (property.storage || property.url === "image") return;
+
+        let score: number;
+        if (property.type === "relation" || property.type === "reference") score = SCORE.RELATION;
+        else if (property.type !== "string") return;
+        else if (property.enum) score = SCORE.ENUM;
+        else if (property.multiline || property.markdown) score = SCORE.LONG_TEXT;
+        else if (property.email) score = SCORE.EMAIL;
+        else if (titleLikeKeys.has(key.toLowerCase().replace(/[^a-z0-9]/g, ""))) score = SCORE.NAMED;
+        else score = SCORE.PLAIN_TEXT;
+
+        if (!best || score > best.score) best = { key,
+score };
+    });
+
+    return best?.key ?? idProperty;
+}

package/src/views/ListView.tsx

@@ -240,7 +240,7 @@ export function ListView<T>({
                                     {renderRow({
                                         item,
                                         index: actualIndex,
-                                        style: { height: estimatedRowHeight },
+                                        style: { height: estimatedRowHeight, overflow: "hidden" },
                                         className: cls(
                                             !isLast && "border-b",
                                             !isLast && borderMixinClass