@exxatdesignux/ui 0.2.18 → 0.3.0

package/dist/components/data-views/list-page-board-card.d.ts

@@ -0,0 +1,72 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type ListPageBoardCardLayout = "stack" | "row";
+type ListPageBoardCardProps = {
+    layout?: ListPageBoardCardLayout;
+    /** `row` only — avatar / icon column. */
+    leading?: React.ReactNode;
+    /** `row` only — status + chevron, etc. */
+    rowEnd?: React.ReactNode;
+    /**
+     * `row` only — flex shell for the card (default `flex flex-row items-start gap-3`).
+     * Use e.g. `flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4` for compliance-style rows.
+     */
+    rowContainerClassName?: string;
+    /** Entire card is clickable (e.g. open detail) — enables pointer + hover shadow. */
+    onClick?: () => void;
+    /**
+     * Same hover/cursor as `onClick` when the parent uses `<Link>` or `button` instead of Card click
+     * (avoids nested interactive targets and keeps keyboard focus on the link).
+     */
+    interactive?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Subtle brand ring — e.g. newly created row. */
+    isNew?: boolean;
+    children: React.ReactNode;
+};
+declare function ListPageBoardCard({ layout, leading, rowEnd, rowContainerClassName, onClick, interactive, className, style, isNew, children, }: ListPageBoardCardProps): react_jsx_runtime.JSX.Element;
+/** Preferred public name — same component as `ListPageBoardCard`. */
+declare const HubRecordCard: typeof ListPageBoardCard;
+declare function ListPageBoardCardHeader({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Level 1 — Primary title (dominant text on the card).
+ */
+declare function ListPageBoardCardTitleRow({ title, titleClassName, trailing, }: {
+    title: React.ReactNode;
+    /** Extra classes on the title (e.g. line-clamp from `lineClampClass`). */
+    titleClassName?: string;
+    /** End-aligned: avatar, icon, etc. */
+    trailing?: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/** Initials avatar — Radix `Avatar` + `--avatar-initials-*` tokens (same as tables / placement board). */
+declare function ListPageBoardCardAvatar({ initials, className, }: {
+    initials: string;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Level 2 — Status / metadata chips (below title, above primary body).
+ */
+declare function ListPageBoardCardBadgeRow({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Level 3 — Main facts: compose with `BoardCardIconRow`, `BoardCardTwoLineBlock`, etc.
+ */
+declare function ListPageBoardCardBody({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+/**
+ * Level 4 — Optional muted supporting line (caption, hint, extra context).
+ */
+declare function ListPageBoardCardSecondary({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { HubRecordCard, ListPageBoardCard, ListPageBoardCardAvatar, ListPageBoardCardBadgeRow, ListPageBoardCardBody, ListPageBoardCardHeader, type ListPageBoardCardLayout, type ListPageBoardCardProps, ListPageBoardCardSecondary, ListPageBoardCardTitleRow };

package/dist/components/data-views/list-page-board-card.js

@@ -0,0 +1,264 @@
+"use client";
+import 'lucide-react';
+import { Avatar as Avatar$1 } from 'radix-ui';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var avatarRootVariants = cva(
+  "group/avatar relative flex shrink-0 overflow-hidden select-none",
+  {
+    variants: {
+      size: {
+        sm: "size-6",
+        default: "size-8",
+        lg: "size-10"
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-none",
+        "rounded-sm": "rounded-sm",
+        "rounded-md": "rounded-md",
+        "rounded-lg": "rounded-lg",
+        "rounded-xl": "rounded-xl"
+      },
+      variant: {
+        default: "",
+        ring: "ring-2 ring-ring",
+        "ring-offset": "ring-2 ring-ring ring-offset-2 ring-offset-background",
+        group: "ring-2 ring-background"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      shape: "circle",
+      variant: "default"
+    }
+  }
+);
+var AVATAR_INSET_AFTER = {
+  circle: "after:rounded-full",
+  square: "after:rounded-none",
+  "rounded-sm": "after:rounded-sm",
+  "rounded-md": "after:rounded-md",
+  "rounded-lg": "after:rounded-lg",
+  "rounded-xl": "after:rounded-xl"
+};
+cn(
+  "aspect-square size-full object-cover",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl"
+);
+var avatarFallbackShape = cn(
+  "flex size-full items-center justify-center bg-muted text-sm text-muted-foreground",
+  "group-data-[shape=circle]/avatar:rounded-full",
+  "group-data-[shape=square]/avatar:rounded-none",
+  "group-data-[shape=rounded-sm]/avatar:rounded-sm",
+  "group-data-[shape=rounded-md]/avatar:rounded-md",
+  "group-data-[shape=rounded-lg]/avatar:rounded-lg",
+  "group-data-[shape=rounded-xl]/avatar:rounded-xl",
+  "group-data-[size=sm]/avatar:text-xs"
+);
+function Avatar({
+  className,
+  size = "default",
+  shape = "circle",
+  variant = "default",
+  insetBorder = false,
+  ...props
+}) {
+  const shapeKey = shape ?? "circle";
+  const insetClass = insetBorder && cn(
+    "after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
+    AVATAR_INSET_AFTER[shapeKey]
+  );
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      "data-shape": shape,
+      className: cn(avatarRootVariants({ size, shape, variant }), insetClass, className),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(avatarFallbackShape, className),
+      ...props
+    }
+  );
+}
+function AvatarInitials({
+  initials,
+  decorative = true,
+  fallbackClassName,
+  className,
+  ...avatarProps
+}) {
+  return /* @__PURE__ */ jsx(Avatar, { className, ...avatarProps, children: /* @__PURE__ */ jsx(
+    AvatarFallback,
+    {
+      "aria-hidden": decorative ? true : void 0,
+      className: cn(
+        "border-0 bg-[var(--avatar-initials-bg)] font-semibold text-[var(--avatar-initials-fg)]",
+        fallbackClassName
+      ),
+      children: initials
+    }
+  ) });
+}
+function Card({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-size": size,
+      className: cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn(
+        "font-sans text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ListPageBoardCard({
+  layout = "stack",
+  leading,
+  rowEnd,
+  rowContainerClassName,
+  onClick,
+  interactive = false,
+  className,
+  style,
+  isNew,
+  children
+}) {
+  const isRow = layout === "row";
+  const isInteractive = Boolean(onClick) || interactive;
+  const rowShell = rowContainerClassName ?? "flex flex-row items-start gap-3";
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      size: "sm",
+      className: cn(
+        "w-full min-w-0 transition-shadow",
+        !isRow && "gap-1",
+        isRow && cn("!gap-0", rowShell, "px-4 py-3"),
+        isInteractive && "cursor-pointer hover:shadow-md",
+        isNew && "ring-brand/30",
+        className
+      ),
+      style,
+      onClick,
+      children: isRow ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        leading,
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+        rowEnd
+      ] }) : children
+    }
+  );
+}
+var HubRecordCard = ListPageBoardCard;
+function ListPageBoardCardHeader({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(CardHeader, { className: cn("gap-2 pb-2", className), children });
+}
+function ListPageBoardCardTitleRow({
+  title,
+  titleClassName,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(
+      CardTitle,
+      {
+        className: cn(
+          "break-words text-sm font-semibold leading-snug text-foreground",
+          titleClassName
+        ),
+        children: title
+      }
+    ) }),
+    trailing
+  ] });
+}
+function ListPageBoardCardAvatar({
+  initials,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    AvatarInitials,
+    {
+      initials,
+      className: cn("size-7 shrink-0 text-xs", className),
+      fallbackClassName: "text-xs"
+    }
+  );
+}
+function ListPageBoardCardBadgeRow({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children });
+}
+function ListPageBoardCardBody({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-2", className), children });
+}
+function ListPageBoardCardSecondary({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-xs text-muted-foreground leading-snug", className), children });
+}
+
+export { HubRecordCard, ListPageBoardCard, ListPageBoardCardAvatar, ListPageBoardCardBadgeRow, ListPageBoardCardBody, ListPageBoardCardHeader, ListPageBoardCardSecondary, ListPageBoardCardTitleRow };
+//# sourceMappingURL=list-page-board-card.js.map
+//# sourceMappingURL=list-page-board-card.js.map

package/dist/components/data-views/list-page-board-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/avatar.tsx","../../../src/components/ui/card.tsx","../../../src/components/data-views/list-page-board-card.tsx"],"names":["AvatarPrimitive","jsx","jsxs"],"mappings":"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","file":"list-page-board-card.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Plus } from \"lucide-react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\nimport { Badge } from \"./badge\"\n\n/** Maps to Shadcn Studio avatar demos (shape / ring / stack). Uses theme tokens only. */\nconst avatarRootVariants = cva(\n  \"group/avatar relative flex shrink-0 overflow-hidden select-none\",\n  {\n  variants: {\n    size: {\n      sm: \"size-6\",\n      default: \"size-8\",\n      lg: \"size-10\",\n    },\n    shape: {\n      circle: \"rounded-full\",\n      square: \"rounded-none\",\n      \"rounded-sm\": \"rounded-sm\",\n      \"rounded-md\": \"rounded-md\",\n      \"rounded-lg\": \"rounded-lg\",\n      \"rounded-xl\": \"rounded-xl\",\n    },\n    variant: {\n      default: \"\",\n      ring: \"ring-2 ring-ring\",\n      \"ring-offset\": \"ring-2 ring-ring ring-offset-2 ring-offset-background\",\n      group: \"ring-2 ring-background\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n    shape: \"circle\",\n    variant: \"default\",\n  },\n  }\n)\n\nconst AVATAR_INSET_AFTER: Record<NonNullable<VariantProps<typeof avatarRootVariants>[\"shape\"]>, string> = {\n  circle: \"after:rounded-full\",\n  square: \"after:rounded-none\",\n  \"rounded-sm\": \"after:rounded-sm\",\n  \"rounded-md\": \"after:rounded-md\",\n  \"rounded-lg\": \"after:rounded-lg\",\n  \"rounded-xl\": \"after:rounded-xl\",\n}\n\nconst avatarImageShape = cn(\n  \"aspect-square size-full object-cover\",\n  \"group-data-[shape=circle]/avatar:rounded-full\",\n  \"group-data-[shape=square]/avatar:rounded-none\",\n  \"group-data-[shape=rounded-sm]/avatar:rounded-sm\",\n  \"group-data-[shape=rounded-md]/avatar:rounded-md\",\n  \"group-data-[shape=rounded-lg]/avatar:rounded-lg\",\n  \"group-data-[shape=rounded-xl]/avatar:rounded-xl\"\n)\n\nconst avatarFallbackShape = cn(\n  \"flex size-full items-center justify-center bg-muted text-sm text-muted-foreground\",\n  \"group-data-[shape=circle]/avatar:rounded-full\",\n  \"group-data-[shape=square]/avatar:rounded-none\",\n  \"group-data-[shape=rounded-sm]/avatar:rounded-sm\",\n  \"group-data-[shape=rounded-md]/avatar:rounded-md\",\n  \"group-data-[shape=rounded-lg]/avatar:rounded-lg\",\n  \"group-data-[shape=rounded-xl]/avatar:rounded-xl\",\n  \"group-data-[size=sm]/avatar:text-xs\"\n)\n\ntype AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> &\n  VariantProps<typeof avatarRootVariants> & {\n    /**\n     * Subtle inner hairline on the avatar edge (token `border-border`).\n     * Default **false** — full-bleed circle for photos/logos (Shadcn Studio–style profile look).\n     */\n    insetBorder?: boolean\n  }\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  shape = \"circle\",\n  variant = \"default\",\n  insetBorder = false,\n  ...props\n}: AvatarProps) {\n  const shapeKey = shape ?? \"circle\"\n  const insetClass =\n    insetBorder &&\n    cn(\n      \"after:pointer-events-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\",\n      AVATAR_INSET_AFTER[shapeKey]\n    )\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      data-shape={shape}\n      className={cn(avatarRootVariants({ size, shape, variant }), insetClass, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  referrerPolicy = \"no-referrer\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      referrerPolicy={referrerPolicy}\n      className={cn(avatarImageShape, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(avatarFallbackShape, className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A row of avatars with an overflow counter — **never overlapping**.\n *\n * Overlapping face piles (Slack / GitHub style) have known UX problems in\n * dense product chrome: ring-on-background contrast is fragile in dark mode,\n * click targets stack, and screen readers announce ambiguous groupings.\n * `AvatarGroup` therefore renders children side-by-side with a small inline\n * gap. See `.cursor/rules/exxat-person-identity-display.mdc` (MUST NOT —\n * overlapping avatars) and the `PageHeader` collaboration variant which\n * uses the same gapped row.\n */\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex items-center gap-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// ── Shadcn Studio–style compositions (tokens + a11y checklist: sr-only status, meaningful alt on image) ──\n\ntype AvatarShape = NonNullable<VariantProps<typeof avatarRootVariants>[\"shape\"]>\ntype AvatarVariant = NonNullable<VariantProps<typeof avatarRootVariants>[\"variant\"]>\ntype AvatarSize = NonNullable<VariantProps<typeof avatarRootVariants>[\"size\"]>\n\ntype AvatarInitialsProps = Omit<AvatarProps, \"children\"> & {\n  initials: string\n  /** When true, initials are hidden from accessibility tree (pair with visible name). Default true. */\n  decorative?: boolean\n  /** Extra classes on `AvatarFallback` (e.g. font weight). */\n  fallbackClassName?: string\n}\n\n/** Initials-only chip using `--avatar-initials-bg` / `--avatar-initials-fg` (Exxat tokens). */\nfunction AvatarInitials({\n  initials,\n  decorative = true,\n  fallbackClassName,\n  className,\n  ...avatarProps\n}: AvatarInitialsProps) {\n  return (\n    <Avatar className={className} {...avatarProps}>\n      <AvatarFallback\n        aria-hidden={decorative ? true : undefined}\n        className={cn(\n          \"border-0 bg-[var(--avatar-initials-bg)] font-semibold text-[var(--avatar-initials-fg)]\",\n          fallbackClassName\n        )}\n      >\n        {initials}\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\ntype AvatarStatusTone = \"online\" | \"busy\" | \"away\"\n\nconst avatarStatusDot: Record<AvatarStatusTone, string> = {\n  online: \"bg-emerald-600 dark:bg-emerald-400\",\n  busy: \"bg-destructive\",\n  away: \"bg-amber-600 dark:bg-amber-400\",\n}\n\n/** Presence dot (Studio avatars 7–9). Wraps a single `Avatar`. */\nfunction AvatarStatus({\n  children,\n  status,\n  label,\n  className,\n  position = \"bottom-end\",\n}: {\n  children: React.ReactNode\n  status: AvatarStatusTone\n  /** Announced to screen readers (e.g. \"Busy\"). */\n  label: string\n  className?: string\n  /** `bottom-end` matches `AvatarBadge`; `top-end` matches some Studio away demos. */\n  position?: \"bottom-end\" | \"top-end\"\n}) {\n  const pos =\n    position === \"top-end\"\n      ? \"-top-0.5 -end-0.5 bottom-auto start-auto\"\n      : \"-end-0.5 -bottom-0.5 top-auto start-auto\"\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <span\n        className={cn(\n          \"pointer-events-none absolute z-10 size-3 rounded-full border-2 border-background\",\n          pos,\n          avatarStatusDot[status]\n        )}\n        aria-hidden\n      />\n      <span className=\"sr-only\">{label}</span>\n    </span>\n  )\n}\n\n/** Numeric badge overlay (Studio avatar 11). */\nfunction AvatarNotificationCount({\n  children,\n  count,\n  className,\n  badgeClassName,\n}: {\n  children: React.ReactNode\n  count: number | string\n  className?: string\n  badgeClassName?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <Badge\n        className={cn(\n          \"absolute -top-2.5 -end-2.5 z-10 h-5 min-w-5 justify-center px-1 tabular-nums\",\n          badgeClassName\n        )}\n      >\n        {count}\n      </Badge>\n    </span>\n  )\n}\n\n/** Verified check overlay (Studio avatar 12) — primary token fill. */\nfunction AvatarVerified({\n  children,\n  label = \"Verified\",\n  className,\n}: {\n  children: React.ReactNode\n  label?: string\n  className?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <span className=\"pointer-events-none absolute -top-1.5 -end-1.5 z-10 inline-flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm\">\n        <Check className=\"size-2.5\" strokeWidth={3} aria-hidden />\n        <span className=\"sr-only\">{label}</span>\n      </span>\n    </span>\n  )\n}\n\n/** Leo assistant mark — centralized; same icon treatment as Ask Leo sidebar. */\nfunction AvatarLeoAssistant({\n  className,\n  size = \"sm\",\n  ...props\n}: Omit<AvatarProps, \"children\" | \"shape\">) {\n  return (\n    <Avatar size={size} shape=\"circle\" insetBorder={false} className={className} {...props}>\n      <AvatarFallback className=\"bg-brand/15 p-0\">\n        <span className=\"sr-only\">Leo</span>\n        <i\n          className=\"fa-duotone fa-solid fa-star-christmas text-xs text-brand\"\n          aria-hidden=\"true\"\n        />\n      </AvatarFallback>\n    </Avatar>\n  )\n}\n\n/** “Add profile” affordance (Studio avatar 10). `onClick` on the button. */\nfunction AvatarPlusAction({\n  children,\n  actionLabel,\n  onClick,\n  className,\n  buttonClassName,\n}: {\n  children: React.ReactNode\n  actionLabel: string\n  onClick?: () => void\n  className?: string\n  buttonClassName?: string\n}) {\n  return (\n    <span className={cn(\"relative inline-flex w-fit shrink-0\", className)}>\n      {children}\n      <button\n        type=\"button\"\n        onClick={onClick}\n        className={cn(\n          \"focus-visible:ring-ring/50 absolute -end-1 -bottom-1 z-10 inline-flex size-7 cursor-pointer items-center justify-center rounded-full bg-background shadow-sm ring-1 ring-border focus-visible:ring-[3px] focus-visible:outline-none\",\n          buttonClassName\n        )}\n      >\n        <Plus className=\"size-4 text-muted-foreground\" aria-hidden />\n        <span className=\"sr-only\">{actionLabel}</span>\n      </button>\n    </span>\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n  AvatarInitials,\n  AvatarStatus,\n  AvatarNotificationCount,\n  AvatarVerified,\n  AvatarPlusAction,\n  AvatarLeoAssistant,\n  avatarRootVariants,\n}\nexport type {\n  AvatarProps,\n  AvatarInitialsProps,\n  AvatarShape,\n  AvatarVariant,\n  AvatarSize,\n  AvatarStatusTone,\n}\n","/**\n * Card — surface component\n *\n * ── SPACING SYSTEM (do not override) ────────────────────────────────────────\n *   Card owns all vertical rhythm:\n *     py-4   → 16px top + 16px bottom padding on the card itself\n *     gap-4  → 16px gap between CardHeader, CardContent, and CardFooter\n *\n *   Rules:\n *   ✗  Never add pb-X / pt-X to CardContent or CardHeader\n *   ✗  Never add h-full / flex / flex-col to the Card wrapper\n *   ✗  Never add flex-1 / min-h-0 to CardContent\n *   ✗  Never add shrink-0 / pb-2 to CardHeader\n *   ✓  For scrollable list content (Activity, Tasks): add overflow-auto only\n *   ✓  For equal-height grid pairs in MixView: handle at grid cell level\n *\n * ── GLOW TREATMENT ──────────────────────────────────────────────────────────\n *   Only two approved uses — see full spec in key-metrics.tsx GLOW GUIDELINE:\n *   1. AI surfaces   (Insights card, Ask Leo responses)  → opacity 0.12–0.16\n *   2. Hero sections (Key Metrics KPI band, onboarding)  → opacity 0.18–0.24\n *   Always pair with overflow-hidden on the Card.\n *   Never add glow to: Tasks, Activity, Learn, Charts, nav elements.\n *\n * ── FOOTER PATTERN ──────────────────────────────────────────────────────────\n *   Use CardFooter for card-level CTA actions (e.g. \"View all tasks\", \"Ask Leo\").\n *   CardFooter renders with border-t + bg-muted/50 automatically.\n *   Do not put primary workflow actions in CardFooter — use CardHeader CardAction.\n *\n * ── SIZE VARIANT ────────────────────────────────────────────────────────────\n *   size=\"sm\"  → tighter spacing (py-3, gap-3, px-3). Use inside compact grids.\n *   size=\"default\" (implicit) → standard spacing described above.\n */\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-sans text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","\"use client\"\n\n/**\n * ListPageBoardCard — single board-card shell for all list hubs (Placements, Team, Compliance, …).\n *\n * Information hierarchy (top → bottom):\n * 1. **Title row** — `ListPageBoardCardTitleRow` — primary label (`text-sm font-semibold`), optional `trailing` (`ListPageBoardCardAvatar` initials chip, same as Placements).\n * 2. **Badge row** — `ListPageBoardCardBadgeRow` — optional status / tags (`flex-wrap`).\n * 3. **Body** — `ListPageBoardCardBody` — primary facts: icon rows, two-line blocks (`BoardCardIconRow` / `BoardCardTwoLineBlock` from board-card-primitives).\n * 4. **Secondary** — `ListPageBoardCardSecondary` — optional muted supporting line (`text-xs text-muted-foreground`).\n *\n * Styling matches **`BoardPlacementCard`**: `Card` `size=\"sm\"`, ring, hover shadow, optional **new** ring accent.\n *\n * **Interaction:** Pass **`onClick`** (e.g. `BoardPlacementCard`) or **`interactive`** when the card is\n * wrapped in `<Link>` / router navigation so hover/cursor match placement board tiles.\n *\n * **Layouts:**\n * - **`stack`** (default) — kanban / grid tile: compose with `ListPageBoardCardHeader`, title row, body.\n * - **`row`** — full-width list row: optional **`leading`**, **`children`** as main column, optional **`rowEnd`**.\n *   Use **`rowContainerClassName`** for responsive shells (e.g. `flex-col sm:flex-row`).\n */\n\nimport * as React from \"react\"\nimport { AvatarInitials } from \"../ui/avatar\"\nimport { cn } from \"../../lib/utils\"\nimport { Card, CardHeader, CardTitle } from \"../ui/card\"\n\nexport type ListPageBoardCardLayout = \"stack\" | \"row\"\n\nexport type ListPageBoardCardProps = {\n  layout?: ListPageBoardCardLayout\n  /** `row` only — avatar / icon column. */\n  leading?: React.ReactNode\n  /** `row` only — status + chevron, etc. */\n  rowEnd?: React.ReactNode\n  /**\n   * `row` only — flex shell for the card (default `flex flex-row items-start gap-3`).\n   * Use e.g. `flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4` for compliance-style rows.\n   */\n  rowContainerClassName?: string\n  /** Entire card is clickable (e.g. open detail) — enables pointer + hover shadow. */\n  onClick?: () => void\n  /**\n   * Same hover/cursor as `onClick` when the parent uses `<Link>` or `button` instead of Card click\n   * (avoids nested interactive targets and keeps keyboard focus on the link).\n   */\n  interactive?: boolean\n  className?: string\n  style?: React.CSSProperties\n  /** Subtle brand ring — e.g. newly created row. */\n  isNew?: boolean\n  children: React.ReactNode\n}\n\nexport function ListPageBoardCard({\n  layout = \"stack\",\n  leading,\n  rowEnd,\n  rowContainerClassName,\n  onClick,\n  interactive = false,\n  className,\n  style,\n  isNew,\n  children,\n}: ListPageBoardCardProps) {\n  const isRow = layout === \"row\"\n  const isInteractive = Boolean(onClick) || interactive\n  const rowShell = rowContainerClassName ?? \"flex flex-row items-start gap-3\"\n\n  return (\n    <Card\n      size=\"sm\"\n      className={cn(\n        \"w-full min-w-0 transition-shadow\",\n        !isRow && \"gap-1\",\n        isRow && cn(\"!gap-0\", rowShell, \"px-4 py-3\"),\n        isInteractive && \"cursor-pointer hover:shadow-md\",\n        isNew && \"ring-brand/30\",\n        className,\n      )}\n      style={style}\n      onClick={onClick}\n    >\n      {isRow ? (\n        <>\n          {leading}\n          <div className=\"min-w-0 flex-1\">{children}</div>\n          {rowEnd}\n        </>\n      ) : (\n        children\n      )}\n    </Card>\n  )\n}\n\n/** Preferred public name — same component as `ListPageBoardCard`. */\nexport const HubRecordCard = ListPageBoardCard\n\nexport function ListPageBoardCardHeader({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) {\n  return <CardHeader className={cn(\"gap-2 pb-2\", className)}>{children}</CardHeader>\n}\n\n/**\n * Level 1 — Primary title (dominant text on the card).\n */\nexport function ListPageBoardCardTitleRow({\n  title,\n  titleClassName,\n  trailing,\n}: {\n  title: React.ReactNode\n  /** Extra classes on the title (e.g. line-clamp from `lineClampClass`). */\n  titleClassName?: string\n  /** End-aligned: avatar, icon, etc. */\n  trailing?: React.ReactNode\n}) {\n  return (\n    <div className=\"flex min-w-0 items-start justify-between gap-2\">\n      <div className=\"min-w-0 flex-1\">\n        <CardTitle\n          className={cn(\n            \"break-words text-sm font-semibold leading-snug text-foreground\",\n            titleClassName,\n          )}\n        >\n          {title}\n        </CardTitle>\n      </div>\n      {trailing}\n    </div>\n  )\n}\n\n/** Initials avatar — Radix `Avatar` + `--avatar-initials-*` tokens (same as tables / placement board). */\nexport function ListPageBoardCardAvatar({\n  initials,\n  className,\n}: {\n  initials: string\n  className?: string\n}) {\n  return (\n    <AvatarInitials\n      initials={initials}\n      className={cn(\"size-7 shrink-0 text-xs\", className)}\n      fallbackClassName=\"text-xs\"\n    />\n  )\n}\n\n/**\n * Level 2 — Status / metadata chips (below title, above primary body).\n */\nexport function ListPageBoardCardBadgeRow({ children }: { children: React.ReactNode }) {\n  return <div className=\"flex min-w-0 flex-wrap items-center gap-1.5\">{children}</div>\n}\n\n/**\n * Level 3 — Main facts: compose with `BoardCardIconRow`, `BoardCardTwoLineBlock`, etc.\n */\nexport function ListPageBoardCardBody({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) {\n  return <div className={cn(\"flex flex-col gap-2\", className)}>{children}</div>\n}\n\n/**\n * Level 4 — Optional muted supporting line (caption, hint, extra context).\n */\nexport function ListPageBoardCardSecondary({\n  className,\n  children,\n}: {\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <p className={cn(\"text-xs text-muted-foreground leading-snug\", className)}>{children}</p>\n  )\n}\n"]}

package/dist/components/data-views/list-page-board-template.d.ts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type ListPageBoardColumnDef<T> = {
+    id: string;
+    label: string;
+    /** Shown beside the title on larger breakpoints */
+    description?: string;
+    /** First matching column wins; columns should be mutually exclusive for most domains. */
+    filter: (row: T) => boolean;
+};
+type ListPageBoardTemplateProps<T> = {
+    columns: ListPageBoardColumnDef<T>[];
+    rows: T[];
+    getRowKey: (row: T) => string | number;
+    renderCard: (row: T) => React.ReactNode;
+    /** Tailwind classes for the count pill, keyed by column `id` */
+    columnCountBadgeClassName?: Record<string, string>;
+    /** Copy when a column has no rows */
+    emptyColumnLabel?: string;
+};
+declare function ListPageBoardTemplate<T>({ columns, rows, getRowKey, renderCard, columnCountBadgeClassName, emptyColumnLabel, }: ListPageBoardTemplateProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type ListPageBoardColumnDef, ListPageBoardTemplate, type ListPageBoardTemplateProps };

package/dist/components/data-views/list-page-board-template.js

@@ -0,0 +1,137 @@
+"use client";
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-1 text-xs font-medium leading-none whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive: "bg-destructive/10 text-[var(--chip-destructive)] focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:text-red-100 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-interactive-hover [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-interactive-hover hover:text-muted-foreground dark:hover:bg-interactive-hover-subtle",
+        link: "text-primary underline-offset-4 hover:underline"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BoardNewCardPlaceholder({ position }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border bg-background/50 py-2 text-xs font-medium text-muted-foreground transition-colors",
+        "hover:border-input hover:bg-muted/40 hover:text-foreground",
+        position === "above" ? "mb-2" : "mt-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("i", { className: "fa-light fa-plus text-xs", "aria-hidden": "true" }),
+        "New card"
+      ]
+    }
+  );
+}
+function ListPageBoardColumnHeader({
+  label,
+  description,
+  count,
+  badgeClassName
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: label }),
+      description ? /* @__PURE__ */ jsx("span", { className: "hidden text-xs text-muted-foreground sm:inline", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "outline",
+        className: cn(
+          "inline-flex h-6 min-w-6 shrink-0 items-center justify-center border-0 bg-muted/70 px-2 text-xs font-semibold tabular-nums text-foreground",
+          badgeClassName
+        ),
+        "aria-label": `${count} ${count === 1 ? "item" : "items"}`,
+        children: count
+      }
+    )
+  ] });
+}
+function ListPageBoardTemplate({
+  columns,
+  rows,
+  getRowKey,
+  renderCard,
+  columnCountBadgeClassName = {},
+  emptyColumnLabel = "No items"
+}) {
+  const grouped = React.useMemo(() => {
+    const map = {};
+    for (const col of columns) map[col.id] = [];
+    for (const row of rows) {
+      for (const col of columns) {
+        if (col.filter(row)) {
+          map[col.id].push(row);
+          break;
+        }
+      }
+    }
+    return map;
+  }, [columns, rows]);
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 gap-3 overflow-x-auto px-4 pb-6 pt-2 lg:px-6", children: columns.map((col) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-muted/30",
+      children: [
+        /* @__PURE__ */ jsx(
+          ListPageBoardColumnHeader,
+          {
+            label: col.label,
+            description: col.description,
+            count: grouped[col.id]?.length ?? 0,
+            badgeClassName: columnCountBadgeClassName[col.id]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto p-2", children: [
+          /* @__PURE__ */ jsx(BoardNewCardPlaceholder, { position: "above" }),
+          (grouped[col.id]?.length ?? 0) === 0 ? /* @__PURE__ */ jsx("p", { className: "py-6 text-center text-xs text-muted-foreground", children: emptyColumnLabel }) : grouped[col.id].map((row) => /* @__PURE__ */ jsx(React.Fragment, { children: renderCard(row) }, String(getRowKey(row)))),
+          /* @__PURE__ */ jsx(BoardNewCardPlaceholder, { position: "below" })
+        ] })
+      ]
+    },
+    col.id
+  )) });
+}
+
+export { ListPageBoardTemplate };
+//# sourceMappingURL=list-page-board-template.js.map
+//# sourceMappingURL=list-page-board-template.js.map

package/dist/components/data-views/list-page-board-template.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/badge.tsx","../../../src/components/data-views/board-card-primitives.tsx","../../../src/components/data-views/list-page-board-template.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"list-page-board-template.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"../../lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-1 text-xs font-medium leading-none whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-[var(--chip-destructive)] focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:text-red-100 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-interactive-hover [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-interactive-hover hover:text-muted-foreground dark:hover:bg-interactive-hover-subtle\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n","\"use client\"\n\n/**\n * Reusable building blocks for kanban / board cards (icon rows, two-line blocks, placeholders).\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport type { BoardLineCount } from \"../../lib/data-list-display-options\"\n\nexport function BoardCardIconRow({\n  iconClass,\n  children,\n}: {\n  iconClass: string\n  children: React.ReactNode\n}) {\n  return (\n    <div className=\"flex items-start gap-2\">\n      <i\n        className={cn(\n          `fa-light ${iconClass} text-xs text-muted-foreground mt-0.5 w-4 shrink-0 text-center`,\n        )}\n        aria-hidden\n      />\n      <div className=\"min-w-0 flex-1 text-xs leading-snug [&_.text-sm]:text-xs [&_span]:text-xs [&_div]:text-xs\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport function BoardCardTwoLineBlock({\n  iconClass,\n  line1,\n  line2,\n  line2ClassName,\n}: {\n  iconClass: string\n  line1: React.ReactNode\n  /** Omitted for a single-line row (same icon + primary alignment as Placements). */\n  line2?: React.ReactNode\n  /** Override default muted line-2 (e.g. badges / rich cells). */\n  line2ClassName?: string\n}) {\n  const showLine2 = line2 !== undefined && line2 !== null\n  return (\n    <div className=\"flex items-start gap-2\">\n      <i\n        className={cn(\n          `fa-light ${iconClass} text-xs text-muted-foreground mt-0.5 w-4 shrink-0 text-center`,\n        )}\n        aria-hidden\n      />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-xs font-medium text-foreground leading-tight\">{line1}</div>\n        {showLine2 ? (\n          <div\n            className={cn(\n              \"mt-0.5 min-w-0 leading-tight\",\n              line2ClassName ?? \"truncate text-xs text-muted-foreground\",\n            )}\n          >\n            {line2}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  )\n}\n\nexport function lineClampClass(n: BoardLineCount): string {\n  const base = \"min-w-0 overflow-hidden break-words\"\n  if (n === 1) return cn(base, \"line-clamp-1\")\n  if (n === 2) return cn(base, \"line-clamp-2\")\n  return cn(base, \"line-clamp-3\")\n}\n\nexport function BoardNewCardPlaceholder({ position }: { position: \"above\" | \"below\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border bg-background/50 py-2 text-xs font-medium text-muted-foreground transition-colors\",\n        \"hover:border-input hover:bg-muted/40 hover:text-foreground\",\n        position === \"above\" ? \"mb-2\" : \"mt-2\",\n      )}\n    >\n      <i className=\"fa-light fa-plus text-xs\" aria-hidden=\"true\" />\n      New card\n    </button>\n  )\n}\n","\"use client\"\n\n/**\n * ListPageBoardTemplate — reusable kanban shell for list pages (Team, custom hubs).\n *\n * - Columns are defined with predicates; each row is placed in the **first** matching column.\n * - Cards are rendered by the caller (`renderCard`) — compose **`ListPageBoardCard`** + primitives (`BoardCardTwoLineBlock`, etc.).\n * - Placements keeps richer column headers (search, menus); this template is for simpler hubs.\n *\n * @see `docs/data-views-pattern.md` — board primitives\n */\n\nimport * as React from \"react\"\nimport { cn } from \"../../lib/utils\"\nimport { Badge } from \"../ui/badge\"\nimport { BoardNewCardPlaceholder } from \"./board-card-primitives\"\n\nexport type ListPageBoardColumnDef<T> = {\n  id: string\n  label: string\n  /** Shown beside the title on larger breakpoints */\n  description?: string\n  /** First matching column wins; columns should be mutually exclusive for most domains. */\n  filter: (row: T) => boolean\n}\n\nexport type ListPageBoardTemplateProps<T> = {\n  columns: ListPageBoardColumnDef<T>[]\n  rows: T[]\n  getRowKey: (row: T) => string | number\n  renderCard: (row: T) => React.ReactNode\n  /** Tailwind classes for the count pill, keyed by column `id` */\n  columnCountBadgeClassName?: Record<string, string>\n  /** Copy when a column has no rows */\n  emptyColumnLabel?: string\n}\n\nfunction ListPageBoardColumnHeader({\n  label,\n  description,\n  count,\n  badgeClassName,\n}: {\n  label: string\n  description?: string\n  count: number\n  badgeClassName?: string\n}) {\n  return (\n    <div className=\"flex items-center justify-between border-b border-border px-3 py-2.5\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"truncate text-sm font-semibold text-foreground\">{label}</span>\n        {description ? (\n          <span className=\"hidden text-xs text-muted-foreground sm:inline\">{description}</span>\n        ) : null}\n      </div>\n      <Badge\n        variant=\"outline\"\n        className={cn(\n          \"inline-flex h-6 min-w-6 shrink-0 items-center justify-center border-0 bg-muted/70 px-2 text-xs font-semibold tabular-nums text-foreground\",\n          badgeClassName,\n        )}\n        aria-label={`${count} ${count === 1 ? \"item\" : \"items\"}`}\n      >\n        {count}\n      </Badge>\n    </div>\n  )\n}\n\nexport function ListPageBoardTemplate<T>({\n  columns,\n  rows,\n  getRowKey,\n  renderCard,\n  columnCountBadgeClassName = {},\n  emptyColumnLabel = \"No items\",\n}: ListPageBoardTemplateProps<T>) {\n  const grouped = React.useMemo(() => {\n    const map: Record<string, T[]> = {}\n    for (const col of columns) map[col.id] = []\n    for (const row of rows) {\n      for (const col of columns) {\n        if (col.filter(row)) {\n          map[col.id].push(row)\n          break\n        }\n      }\n    }\n    return map\n  }, [columns, rows])\n\n  return (\n    <div className=\"flex min-h-0 flex-1 gap-3 overflow-x-auto px-4 pb-6 pt-2 lg:px-6\">\n      {columns.map(col => (\n        <div\n          key={col.id}\n          className=\"flex w-72 shrink-0 flex-col overflow-hidden rounded-xl border border-border bg-muted/30\"\n        >\n          <ListPageBoardColumnHeader\n            label={col.label}\n            description={col.description}\n            count={grouped[col.id]?.length ?? 0}\n            badgeClassName={columnCountBadgeClassName[col.id]}\n          />\n\n          <div className=\"flex flex-1 flex-col gap-2 overflow-y-auto p-2\">\n            <BoardNewCardPlaceholder position=\"above\" />\n\n            {(grouped[col.id]?.length ?? 0) === 0 ? (\n              <p className=\"py-6 text-center text-xs text-muted-foreground\">{emptyColumnLabel}</p>\n            ) : (\n              grouped[col.id]!.map(row => <React.Fragment key={String(getRowKey(row))}>{renderCard(row)}</React.Fragment>)\n            )}\n\n            <BoardNewCardPlaceholder position=\"below\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  )\n}\n"]}

package/dist/components/data-views/list-page-connected-view-body.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { DataListViewType } from '../../lib/data-list-view.js';
+import { c as DataListViewRenderKind } from '../../data-list-view-registry-CyBoBML4.js';
+
+type ListPageConnectedViewRenderers = Partial<Record<DataListViewRenderKind, React.ReactNode | (() => React.ReactNode)>>;
+interface ListPageConnectedViewBodyProps {
+    view: DataListViewType;
+    /** Human-readable hub name for the not-configured state. */
+    hubLabel?: string;
+    renderers: ListPageConnectedViewRenderers;
+}
+declare function ListPageViewNotConfigured({ view, hubLabel, }: {
+    view: DataListViewType;
+    hubLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function ListPageConnectedViewBody({ view, hubLabel, renderers, }: ListPageConnectedViewBodyProps): react_jsx_runtime.JSX.Element;
+
+export { ListPageConnectedViewBody, type ListPageConnectedViewBodyProps, type ListPageConnectedViewRenderers, ListPageViewNotConfigured };