@cl-light-ds/ui 0.4.0 → 0.5.0

package/src/components/organisms/workspace/RecentWorkspaceCard.astro

@@ -0,0 +1,235 @@
+---
+/**
+ * @component RecentWorkspaceCard
+ * @title Recent Workspace Card
+ * @description Organism. A recently opened workspace as a shortcut card, in four sizes: `lg` (the large card on the workspace's gradient, "Jump back in"), `md` (tall, beside the large card when there are two recents), `sm` (two stacked) and `xs` (three stacked, one row). The whole card is the link.
+ *
+ * @preview
+ *
+ * <div class="grid w-full max-w-3xl gap-4 sm:grid-cols-3">
+ *   <RecentWorkspaceCard
+ *     class="sm:col-span-2"
+ *     name="Acme Logistics"
+ *     href="#"
+ *     color="blue"
+ *     icon="truck"
+ *     opened="2 hours ago"
+ *     lastEditedBy="Ana Silva"
+ *     recordings={128}
+ *   />
+ *   <RecentWorkspaceCard size="md" name="Globex Finance" href="#" color="emerald" icon="wallet" opened="yesterday" lastEditedBy="You" recordings={42} />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RecentWorkspaceCard } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <RecentWorkspaceCard size="lg" name={ws.name} href={ws.url} color={ws.color} icon={ws.icon} opened="2 hours ago" lastEditedBy="Ana Silva" recordings={128} />
+ * <RecentWorkspaceCard size="xs" name={ws.name} href={ws.url} color={ws.color} icon={ws.icon} opened="3 days ago" />
+ * ```
+ *
+ * Usually laid out by `RecentWorkspaces`, which picks the sizes from the
+ * number of recents. On their own:
+ *
+ * - `lg`: gradient in the workspace colour (or the brand gradient with
+ *   `tone="brand"`), 16px corners, the ring artwork bottom right; 56px inverse
+ *   avatar top left, "Jump back in" (12px caps) top right; the name (30px
+ *   semibold) on a divider; "Opened … · Last edited by …" and the recordings
+ *   (14px) under it; a white arrow centred on the right. At least 222px high.
+ * - `md`: white; 56px soft avatar; the name (18px) and "Opened …" (16px) on
+ *   the divider; "Last edited by …" and recordings (14px); 20px arrow centred
+ *   on the right. At least 222px high.
+ * - `sm`: 40px avatar, then the name (14px semibold), then "Opened …" (12px);
+ *   20px arrow centred on the right.
+ * - `xs`: one row: 40px avatar, name and "Opened …", 16px arrow.
+ *
+ * Every size is `Card as="a" interactive`: one link (no controls inside),
+ * with the card's focus ring and its hover / focus lift. The full name is in
+ * `title`, since long names truncate.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { ArrowRight, RotateCcwClock } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  DEFAULT_WORKSPACE_COLOR,
+  brandGradient,
+  workspacePalette,
+  type WorkspaceColor,
+} from "@cl-light-ds/ui/lib/workspace-palette";
+import { Card } from "../../card";
+import type { WorkspaceGlyphName } from "./icons";
+import { workspaceCardTexts, type WorkspaceCardLabels } from "./labels";
+import type { RecentWorkspaceCardSize, RecentWorkspaceTone } from "./types";
+import WorkspaceAvatar from "./WorkspaceAvatar.astro";
+import rings from "./recent-card-rings-strong.png?url";
+
+interface Props extends Omit<HTMLAttributes<"a">, "class"> {
+  /** Workspace name (required). */
+  name: string;
+  /** The workspace's address (required): the whole card is this link. */
+  href: string;
+  /** Palette colour. Defaults to blue. */
+  color?: WorkspaceColor;
+  /** Placeholder icon, or `"initial"` (default). */
+  icon?: WorkspaceGlyphName | (string & {});
+  /** `lg` (default), `md`, `sm` or `xs`. */
+  size?: RecentWorkspaceCardSize;
+  /** `lg` only: the workspace's own gradient (default) or the brand gradient. */
+  tone?: RecentWorkspaceTone;
+  /** When it was last opened, e.g. "2 hours ago". */
+  opened?: string;
+  /** Who last edited it (`lg` and `md`). */
+  lastEditedBy?: string;
+  /** Number of recordings, or a ready-made string (`lg` and `md`). */
+  recordings?: number | string;
+  /** Copy overrides (see `WorkspaceCardLabels`). */
+  labels?: Partial<WorkspaceCardLabels>;
+  class?: string;
+}
+
+const {
+  name,
+  href,
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  size = "lg",
+  tone = "workspace",
+  opened,
+  lastEditedBy,
+  recordings,
+  labels,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const text = workspaceCardTexts({ name, opened, lastEditedBy, recordings }, labels);
+const swatch = workspacePalette[color] ?? workspacePalette[DEFAULT_WORKSPACE_COLOR];
+const largeMeta = [text.opened, text.lastEditedBy].filter(Boolean).join(" · ");
+
+const sizeClasses: Record<RecentWorkspaceCardSize, string> = {
+  lg: cn(
+    "isolate min-h-55.5 gap-0 rounded-2xl border-transparent bg-linear-to-br p-0 text-primary-foreground focus-visible:ring-3 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    tone === "brand" ? brandGradient : swatch.gradient,
+  ),
+  md: "min-h-55.5 gap-0 p-0",
+  sm: "justify-center gap-1.5 px-3 py-2.5 pe-11",
+  xs: "flex-row items-center gap-3 p-3",
+};
+---
+
+<Card
+  {...rest}
+  as="a"
+  href={href}
+  title={name}
+  interactive
+  data-recent-workspace-card
+  data-recent-size={size}
+  data-color={color}
+  class={cn(sizeClasses[size], className)}
+>
+  {
+    size === "lg" && (
+      <>
+        <div class="flex items-start justify-between gap-4 px-7 pt-6">
+          <WorkspaceAvatar
+            color={color}
+            icon={icon}
+            name={name}
+            size="lg"
+            shape="square"
+            tone={tone === "brand" ? "brand" : "inverse"}
+          />
+          <span class="flex items-center gap-2 text-xs font-semibold tracking-wide text-primary-foreground/90 uppercase">
+            <RotateCcwClock class="size-4" aria-hidden="true" />
+            {text.jumpBackIn}
+          </span>
+        </div>
+        <ArrowRight
+          class="absolute top-1/2 right-7 size-5 -translate-y-1/2 text-primary-foreground/90"
+          aria-hidden="true"
+        />
+        <div class="mt-auto flex min-w-0 flex-col px-7 pt-3 pb-3 pe-14">
+          <span data-slot="recent-workspace-card-name" class="block truncate font-heading text-3xl font-semibold">
+            {name}
+          </span>
+        </div>
+        {(largeMeta || text.recordings) && (
+          <div class="mx-7 flex items-center justify-between gap-4 border-t border-primary-foreground/25 py-3 text-sm text-primary-foreground/90">
+            <span class="min-w-0 truncate">{largeMeta}</span>
+            {text.recordings && <span class="shrink-0">{text.recordings}</span>}
+          </div>
+        )}
+        <img
+          src={rings}
+          alt=""
+          aria-hidden="true"
+          class="pointer-events-none absolute right-0 bottom-0 -z-10 h-7/5 w-auto max-w-none"
+        />
+      </>
+    )
+  }
+
+  {
+    size === "md" && (
+      <>
+        <div class="px-4 pt-4">
+          <WorkspaceAvatar color={color} icon={icon} name={name} size="lg" shape="square" />
+        </div>
+        <ArrowRight
+          class="absolute top-1/2 right-4 size-5 -translate-y-1/2 text-muted-foreground"
+          aria-hidden="true"
+        />
+        <div class="mt-auto flex min-w-0 flex-col gap-1 px-4 pt-3 pb-4 pe-10">
+          <span data-slot="recent-workspace-card-name" class="block truncate text-lg font-semibold text-foreground">
+            {name}
+          </span>
+          {text.opened && <span class="text-base text-muted-foreground">{text.opened}</span>}
+        </div>
+        {(text.lastEditedBy || text.recordings) && (
+          <div class="mx-4 flex items-center justify-between gap-2 border-t py-3 text-sm text-muted-foreground">
+            <span class="min-w-0 truncate">{text.lastEditedBy}</span>
+            {text.recordings && <span class="shrink-0">{text.recordings}</span>}
+          </div>
+        )}
+      </>
+    )
+  }
+
+  {
+    size === "sm" && (
+      <>
+        <WorkspaceAvatar color={color} icon={icon} name={name} shape="square" />
+        <span class="flex min-w-0 flex-col">
+          <span data-slot="recent-workspace-card-name" class="block truncate text-sm font-semibold text-foreground">
+            {name}
+          </span>
+          {text.opened && <span class="block truncate text-xs text-muted-foreground">{text.opened}</span>}
+        </span>
+        <ArrowRight
+          class="absolute top-1/2 right-3 size-5 -translate-y-1/2 text-muted-foreground"
+          aria-hidden="true"
+        />
+      </>
+    )
+  }
+
+  {
+    size === "xs" && (
+      <>
+        <WorkspaceAvatar color={color} icon={icon} name={name} shape="square" />
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span data-slot="recent-workspace-card-name" class="block truncate text-sm font-semibold text-foreground">
+            {name}
+          </span>
+          {text.opened && <span class="block truncate text-xs text-muted-foreground">{text.opened}</span>}
+        </span>
+        <ArrowRight class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+      </>
+    )
+  }
+</Card>

package/src/components/organisms/workspace/RecentWorkspaces.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * @component RecentWorkspaces
+ * @title Recent Workspaces
+ * @description Organism. The 1–4 most recently opened workspaces: the latest as the large card, the others beside it, sized by how many there are. The large card is always 222px high.
+ *
+ * @preview
+ *
+ * <RecentWorkspaces
+ *   class="w-full"
+ *   items={[
+ *     { name: "Acme Logistics", href: "#", color: "blue", icon: "truck", opened: "2 hours ago", lastEditedBy: "Ana Silva", recordings: 128 },
+ *     { name: "Globex Finance", href: "#", color: "emerald", icon: "wallet", opened: "yesterday" },
+ *     { name: "Initech Field Service", href: "#", color: "orange", icon: "wrench", opened: "3 days ago" },
+ *   ]}
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { RecentWorkspaces } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <RecentWorkspaces items={recents} />
+ * ```
+ *
+ * `items` is most recent first; only the first four are shown, and nothing is
+ * rendered without any. On wide screens (`lg`) the large card takes two of
+ * three columns and the others share the third:
+ *
+ * - 1 recent: the large card takes the row
+ * - 2: the large card + a medium card (`md`, as high as the large one)
+ * - 3: the large card + two small cards (`sm`) stacked, sharing its height
+ * - 4: the large card + three extra small cards (`xs`) stacked
+ *
+ * Below `lg` the cards stack. A `section` named by `label`, with no visible
+ * heading (add your own beside it if the page needs one).
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { WorkspaceCardLabels } from "./labels";
+import type { RecentWorkspace, RecentWorkspaceCardSize, RecentWorkspaceTone } from "./types";
+import RecentWorkspaceCard from "./RecentWorkspaceCard.astro";
+
+interface Props extends Omit<HTMLAttributes<"section">, "class"> {
+  /** The recents, most recent first. Up to four are shown. */
+  items: RecentWorkspace[];
+  /** The large card: the workspace's own gradient (default) or the brand gradient. */
+  tone?: RecentWorkspaceTone;
+  /** Accessible name of the section. */
+  label?: string;
+  /** Copy overrides for the cards (see `WorkspaceCardLabels`). */
+  labels?: Partial<WorkspaceCardLabels>;
+  class?: string;
+}
+
+const { items, tone = "workspace", label = "Recent workspaces", labels, class: className = "", ...rest } =
+  Astro.props as Props;
+
+const shown = items.slice(0, 4);
+const [latest, ...others] = shown;
+const count = shown.length;
+const otherSize: Record<number, RecentWorkspaceCardSize> = { 2: "md", 3: "sm", 4: "xs" };
+---
+
+{
+  latest && (
+    <section
+      {...rest}
+      aria-label={label}
+      data-slot="recent-workspaces"
+      data-count={count}
+      class={cn("grid gap-4 lg:grid-cols-3", className)}
+    >
+      <RecentWorkspaceCard
+        {...latest}
+        size="lg"
+        tone={tone}
+        labels={labels}
+        class={count === 1 ? "lg:col-span-3" : "lg:col-span-2"}
+      />
+      {count > 1 && (
+        <div data-slot="recent-workspaces-others" class="flex min-w-0 flex-col gap-3">
+          {others.map((item) => (
+            <RecentWorkspaceCard {...item} size={otherSize[count]} labels={labels} class="min-w-0 flex-1" />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/organisms/workspace/WorkspaceAvatar.astro

@@ -0,0 +1,144 @@
+---
+/**
+ * @component WorkspaceAvatar
+ * @title Workspace Avatar
+ * @description Organism. A workspace's placeholder icon, or the first letter of its name, on the workspace's colour from the workspace palette. Decorative by default, since the workspace name sits beside it.
+ *
+ * @preview
+ *
+ * <div class="flex items-center gap-3">
+ *   <WorkspaceAvatar color="blue" icon="truck" />
+ *   <WorkspaceAvatar color="emerald" icon="leaf" tone="solid" shape="square" />
+ *   <WorkspaceAvatar color="purple" icon="initial" name="Northwind" size="lg" shape="square" />
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceAvatar } from '@cl-light-ds/ui/components/organisms/workspace';
+ * ---
+ *
+ * <WorkspaceAvatar color="teal" icon="rocket" shape="square" />
+ * ```
+ *
+ * - `tone="soft"` (default): the colour, strong, on a light tint of it
+ * - `tone="solid"`: a white glyph on the colour
+ * - `tone="inverse"`: the colour on white, e.g. on a coloured card
+ * - `tone="brand"`: the primary blue on white, on brand surfaces
+ * - `shape="square"`: a rounded square (8px; 14px at `lg` and `xl`)
+ * - sizes: `sm` 32px (16px glyph), `default` 40px (20px), `lg` 56px (28px),
+ *   `xl` 64px (28px, the icon picker's trigger)
+ *
+ * Pass `label` to make it a named image (`role="img"`) when no name is
+ * beside it. A default slot replaces the glyph, e.g. with a logo `<img>`.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import {
+  DEFAULT_WORKSPACE_COLOR,
+  workspacePalette,
+  type WorkspaceColor,
+} from "@cl-light-ds/ui/lib/workspace-palette";
+import type { WorkspaceGlyphName } from "./icons";
+import type { WorkspaceAvatarSize, WorkspaceAvatarTone } from "./types";
+import WorkspaceGlyph from "./WorkspaceGlyph.astro";
+
+export const workspaceAvatarVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center overflow-hidden select-none",
+  {
+    variants: {
+      size: {
+        sm: "size-8",
+        default: "size-10",
+        lg: "size-14",
+        xl: "size-16",
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "",
+      },
+    },
+    compoundVariants: [
+      { shape: "square", size: ["sm", "default"], class: "rounded-lg" },
+      { shape: "square", size: ["lg", "xl"], class: "rounded-xl" },
+    ],
+    defaultVariants: {
+      size: "default",
+      shape: "circle",
+    },
+  },
+);
+
+/** Glyph size per avatar size: the icon, or the letter's box and font size. */
+const glyphSizes: Record<string, string> = {
+  sm: "size-4 text-sm",
+  default: "size-5 text-base",
+  lg: "size-7 text-2xl",
+  xl: "size-7 text-2xl",
+};
+
+interface Props
+  extends VariantProps<typeof workspaceAvatarVariants>,
+    Omit<HTMLAttributes<"span">, "class"> {
+  /** Palette colour. Defaults to `DEFAULT_WORKSPACE_COLOR` (blue). */
+  color?: WorkspaceColor;
+  /** An icon name from `WORKSPACE_ICONS`, or `"initial"`. */
+  icon?: WorkspaceGlyphName | (string & {});
+  /** The workspace name, for the initial. */
+  name?: string;
+  tone?: WorkspaceAvatarTone;
+  /** An accessible name. Without it the avatar is decorative (`aria-hidden`). */
+  label?: string;
+  class?: string;
+  /** Extra classes for the glyph (icon or letter). */
+  glyphClass?: string;
+}
+
+const {
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  name = "",
+  tone = "soft",
+  size = "default",
+  shape = "circle",
+  label,
+  class: className = "",
+  glyphClass = "",
+  ...rest
+} = Astro.props as Props;
+
+const swatch = workspacePalette[color] ?? workspacePalette[DEFAULT_WORKSPACE_COLOR];
+const toneClasses: Record<WorkspaceAvatarTone, string[]> = {
+  soft: [swatch.tint, swatch.text],
+  solid: [swatch.solid, "text-primary-foreground"],
+  inverse: ["bg-background", swatch.text],
+  brand: ["bg-background", "text-primary"],
+};
+const toneClass = toneClasses[tone as WorkspaceAvatarTone] ?? toneClasses.soft;
+const glyphSize = glyphSizes[(size ?? "default") as WorkspaceAvatarSize];
+const hasSlot = Astro.slots.has("default");
+---
+
+<span
+  {...rest}
+  data-slot="workspace-avatar"
+  data-size={size}
+  data-shape={shape}
+  data-tone={tone}
+  data-color={color}
+  role={label ? "img" : undefined}
+  aria-label={label}
+  aria-hidden={label ? undefined : "true"}
+  class={cn(workspaceAvatarVariants({ size, shape }), toneClass, className)}
+>
+  {
+    hasSlot ? (
+      <slot />
+    ) : (
+      <WorkspaceGlyph icon={icon} name={name} class={cn(glyphSize, glyphClass)} />
+    )
+  }
+</span>

package/src/components/organisms/workspace/WorkspaceCard.astro

@@ -0,0 +1,172 @@
+---
+/**
+ * @component WorkspaceCard
+ * @title Workspace Card
+ * @description Organism. A workspace in a grid: its soft square avatar with a favourite star and an actions menu top right, the name and when you last opened it, and under a divider who last edited it and how many recordings it has. The whole card opens the workspace and lifts on hover and keyboard focus.
+ *
+ * @preview
+ *
+ * <WorkspaceCard
+ *   class="w-72"
+ *   name="Acme Logistics"
+ *   href="#"
+ *   color="blue"
+ *   icon="truck"
+ *   opened="2 hours ago"
+ *   lastEditedBy="Ana Silva"
+ *   recordings={128}
+ *   favorite
+ * />
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { WorkspaceCard } from '@cl-light-ds/ui/components/organisms/workspace';
+ * import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '@cl-light-ds/ui/components/dropdown-menu';
+ * import { Ellipsis } from '@lucide/astro';
+ * ---
+ *
+ * <WorkspaceCard
+ *   name={ws.name}
+ *   href={`/w/${ws.id}`}
+ *   color={ws.color}
+ *   icon={ws.icon}
+ *   opened="2 hours ago"
+ *   lastEditedBy="Ana Silva"
+ *   recordings={128}
+ *   favorite={ws.starred}
+ *   data-workspace-id={ws.id}
+ * >
+ *   <DropdownMenu slot="actions">
+ *     <DropdownMenuTrigger variant="ghost" size="icon-sm" tailIcon={false} aria-label={`Actions for ${ws.name}`}>
+ *       <Ellipsis />
+ *     </DropdownMenuTrigger>
+ *     <DropdownMenuContent align="end">
+ *       <DropdownMenuItem>Duplicate</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ * </WorkspaceCard>
+ * ```
+ *
+ * The name is the card's one link, stretched over it (`after:absolute
+ * after:inset-0`), so the card opens from anywhere; the star and the
+ * `actions` slot sit above it (`relative z-10`) and stay separate controls,
+ * with no interactive element nested in the link. The focus ring goes round
+ * the whole card while the link has keyboard focus.
+ *
+ * The star shows only on a favourite, or while the card is hovered or has
+ * keyboard focus; always on touch screens. It is a `FavoriteToggle`: listen
+ * for its `toggle:change` (`{ pressed }`, bubbling) to save the change.
+ *
+ * Long names and editors truncate, with the full text in `title`.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { DEFAULT_WORKSPACE_COLOR, type WorkspaceColor } from "@cl-light-ds/ui/lib/workspace-palette";
+import { Card, CardTitle } from "../../card";
+import { FavoriteToggle } from "../../favorite-toggle";
+import type { WorkspaceGlyphName } from "./icons";
+import { workspaceCardTexts, type WorkspaceCardLabels } from "./labels";
+import WorkspaceAvatar from "./WorkspaceAvatar.astro";
+
+interface Props extends Omit<HTMLAttributes<"div">, "class"> {
+  /** Workspace name (required). */
+  name: string;
+  /** Where the card goes: the workspace. */
+  href: string;
+  /** Palette colour. Defaults to blue. */
+  color?: WorkspaceColor;
+  /** Placeholder icon, or `"initial"` (default). */
+  icon?: WorkspaceGlyphName | (string & {});
+  /** When it was last opened, e.g. "2 hours ago" ("Opened {time}"). */
+  opened?: string;
+  /** Who last edited it ("Last edited by {name}"). */
+  lastEditedBy?: string;
+  /** Number of recordings ("{count} recordings"), or a ready-made string. */
+  recordings?: number | string;
+  /** A favourite: the star is filled and always shown. */
+  favorite?: boolean;
+  /** Show the star at all. */
+  showFavorite?: boolean;
+  /** Copy overrides (see `WorkspaceCardLabels`). */
+  labels?: Partial<WorkspaceCardLabels>;
+  class?: string;
+}
+
+const {
+  name,
+  href,
+  color = DEFAULT_WORKSPACE_COLOR,
+  icon = "initial",
+  opened,
+  lastEditedBy,
+  recordings,
+  favorite = false,
+  showFavorite = true,
+  labels,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const text = workspaceCardTexts({ name, opened, lastEditedBy, recordings }, labels);
+const hasActions = Astro.slots.has("actions");
+const hasFooter = Boolean(text.lastEditedBy || text.recordings);
+---
+
+<Card
+  {...rest}
+  interactive
+  data-workspace-card
+  data-color={color}
+  class={cn(
+    "gap-0 p-0",
+    // The stretched link's focus ring, round the whole card.
+    "has-[[data-slot=workspace-card-link]:focus-visible]:border-ring has-[[data-slot=workspace-card-link]:focus-visible]:ring-2 has-[[data-slot=workspace-card-link]:focus-visible]:ring-chart-1",
+    className,
+  )}
+>
+  <div class="flex items-start justify-between gap-3 px-4 pt-4">
+    <WorkspaceAvatar color={color} icon={icon} name={name} shape="square" />
+    {
+      (showFavorite || hasActions) && (
+        <div data-slot="workspace-card-actions" class="relative z-10 flex items-center gap-1">
+          {showFavorite && (
+            <FavoriteToggle
+              label={text.favorite}
+              defaultPressed={favorite}
+              class="not-aria-pressed:opacity-0 group-hover/card:opacity-100 group-has-focus-visible/card:opacity-100 pointer-coarse:opacity-100"
+            />
+          )}
+          <slot name="actions" />
+        </div>
+      )
+    }
+  </div>
+
+  <div class="flex min-w-0 flex-col gap-1 px-4 pt-3 pb-4">
+    <CardTitle class="min-w-0 text-base leading-6">
+      <a
+        href={href}
+        title={name}
+        data-slot="workspace-card-link"
+        class="block truncate rounded-sm outline-none after:absolute after:inset-0 after:rounded-lg"
+      >
+        {name}
+      </a>
+    </CardTitle>
+    {text.opened && <p class="text-muted-foreground text-sm">{text.opened}</p>}
+  </div>
+
+  {
+    hasFooter && (
+      <div class="mx-4 flex items-center justify-between gap-2 border-t py-3 text-xs text-muted-foreground">
+        <p class="min-w-0 truncate" title={text.lastEditedBy || undefined}>
+          {text.lastEditedBy}
+        </p>
+        {text.recordings && <p class="shrink-0" data-slot="workspace-card-recordings">{text.recordings}</p>}
+      </div>
+    )
+  }
+</Card>