@flamingo-stack/openframe-frontend-core 0.0.564 → 0.0.565-1861.5100.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.564",
+  "version": "0.0.565-1861.5100.1",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/.comment-card.md

@@ -1,18 +1,18 @@
 <!-- source-hash: 2dc22952dfcc6e283cfc3b6d4d636ade -->
-Renders a styled comment card that adapts its layout based on context — showing vendor information when viewing a user profile, or user information when viewing a vendor page — with optional delete functionality based on auth state.
+Renders a styled comment card that adapts its header to the surface: it leads with the vendor a comment is about on a user profile, or with the commenter everywhere else. Delete is a caller-supplied rule.
 
 ## Key Components
 
 ### `CommentCard` (default export)
 
-A context-aware card component for displaying user-submitted vendor comments.
+The comment tile: one card for every comment surface, with the header lead, the body length and deletability all supplied as props.
 
 **Props (`CommentCardProps`):**
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `comment` | `object` | — | Comment data including content, author, vendor, and metadata |
-| `context` | `'profile' \| 'vendor'` | `'profile'` | Controls layout and delete permission logic |
+| `leadWith` | `'vendor' \| 'commenter'` | `'commenter'` | Which header the tile leads with: the vendor the comment is about (profile page) or the person who wrote it |
 | `onViewProduct` | `(slug: string) => void` | — | Callback when vendor button is clicked |
 | `onDeleteComment` | `(id: string) => void` | — | Callback when delete is triggered |
 | `showVendorInfo` | `boolean` | `true` | Toggles vendor info display |
@@ -20,14 +20,13 @@ A context-aware card component for displaying user-submitted vendor comments.
 
 **Internal logic:**
 
-- `canUserDeleteComment()` — Grants delete access to authenticated users; in `profile` context, respects the `canDelete` prop; in `vendor` context, compares `currentUser.id` against `comment.user.id`
+- `canUserDeleteComment()` — Deletability is the CALLER's rule: an explicit `comment.canDelete` wins, and the default is "your own comment" (`currentUser.id === comment.user.id`). No per-surface branch.
 - `formatActivityTime()` — Delegates to `formatRelativeTime` utility for human-readable timestamps
 
 ## Usage Example
 
 ```typescript
 <CommentCard
-  context="vendor"
   comment={{
     id: "abc123",
     content: "Solid RMM tool for small MSPs.",

package/src/components/chat/entity-cards/employee-entry-card.tsx

@@ -38,6 +38,12 @@ const STATUS_BADGE_CLASS: Record<string, string> = {
   published: 'bg-ods-success-secondary text-ods-success',
   draft: 'bg-ods-warning-secondary text-ods-warning',
   archived: 'bg-ods-border text-ods-text-secondary',
+  // Design-doc lifecycle (product-hub) — same ODS pairs, no new palette.
+  in_review: 'bg-ods-warning-secondary text-ods-warning',
+  approved: 'bg-ods-success-secondary text-ods-success',
+  building: 'bg-ods-success-secondary text-ods-success',
+  shipped: 'bg-ods-success-secondary text-ods-success',
+  abandoned: 'bg-ods-border text-ods-text-secondary',
 }
 
 /** Shared badge treatment so an entity's own badges (discipline, level) sit

package/src/components/comment-card.tsx

@@ -37,7 +37,23 @@ interface CommentCardProps {
   onDeleteComment?: (commentId: string) => void
   showVendorInfo?: boolean
   compact?: boolean
-  context: 'profile' | 'vendor'
+  /**
+   * Which HEADER this tile leads with — the only thing that ever varied by
+   * surface. Two states, because there are two headers: the profile page shows
+   * a person's comments, so it leads with the VENDOR each one is about;
+   * everywhere else the vendor is the page and the commenter is the news.
+   * Every BEHAVIOUR is a prop, so a new surface never needs a new member here.
+   */
+  leadWith?: 'vendor' | 'commenter'
+  /**
+   * Read the body in FULL (thread reading) instead of the fixed-height,
+   * three-line list tile. Defaults to the list tile.
+   */
+  fullBody?: boolean
+  /** Rendered under the body — badges + per-surface actions (design-doc threads). */
+  footer?: React.ReactNode
+  /** Rendered after the card — nested replies + reply composer (design-doc threads). */
+  children?: React.ReactNode
 }
 
 export function CommentCard({ 
@@ -46,7 +62,10 @@ export function CommentCard({
   onDeleteComment, 
   showVendorInfo = true,
   compact = false,
-  context = 'profile'
+  leadWith = 'commenter',
+  fullBody = false,
+  footer,
+  children
 }: CommentCardProps) {
   const { user: currentUser } = useAuth()
   
@@ -56,32 +75,28 @@ export function CommentCard({
   }
 
   // Check if current user can delete this comment
+  /**
+   * Deletability is the CALLER's rule, never a per-surface branch in here: an
+   * explicit `comment.canDelete` always wins (design docs compute own-or-DRI
+   * with their gate module and hand it in), and the default is the only rule
+   * this component can honestly know by itself — your own comment.
+   */
   const canUserDeleteComment = () => {
-    // If not authenticated, can't delete
     if (!currentUser) return false
-    
-    // For profile context, use the existing canDelete prop (since it's the user's own comments)
-    if (context === 'profile') {
-      return comment.canDelete !== false
-    }
-    
-    // For vendor context, check if current user is the comment creator
-    if (context === 'vendor' && comment.user) {
-      return currentUser.id === comment.user.id
-    }
-    
-    return false
+    if (typeof comment.canDelete === 'boolean') return comment.canDelete
+    return !!comment.user && currentUser.id === comment.user.id
   }
 
   const showDeleteButton = canUserDeleteComment()
 
   return (
+    <>
     <div className="bg-ods-card border border-ods-border rounded-lg p-4 hover:border-ods-accent transition-all group overflow-hidden w-full max-w-full box-border" style={{ maxWidth: '100%', wordBreak: 'break-word' }}>
       {/* Comment Header */}
       <div className="flex flex-col gap-3 mb-3 min-[420px]:flex-row min-[420px]:items-center min-[420px]:justify-between min-[420px]:gap-2 w-full">
         {/* Row 1: Info + Timestamp */}
         <div className="flex items-center gap-2 min-w-0 flex-1">
-          {context === 'profile' && comment.vendor ? (
+          {leadWith === 'vendor' && comment.vendor ? (
             <>
               {/* Vendor Button - Icon + Name */}
               <VendorDisplayButton
@@ -94,7 +109,7 @@ export function CommentCard({
                 {formatActivityTime(comment.createdAt)}
               </span>
             </>
-          ) : context === 'vendor' && comment.user ? (
+          ) : comment.user ? (
             <UserSummary
               name={comment.user.name}
               email=""
@@ -152,6 +167,12 @@ export function CommentCard({
             </h4>
           </div>
         )}
+        {fullBody ? (
+          // Thread bodies are read in full — no fixed height, no clamp.
+          <p className="text-h4 text-ods-text-primary whitespace-pre-wrap" style={{ wordBreak: 'break-word', overflowWrap: 'break-word', maxWidth: '100%' }}>
+            {comment.content}
+          </p>
+        ) : (
         <div className={compact ? "h-[60px] flex items-center" : "h-[72px] flex items-center"}>
           <p className="text-h4 text-ods-text-primary line-clamp-3" style={{ 
             wordBreak: 'break-word', 
@@ -166,7 +187,11 @@ export function CommentCard({
             {comment.content}
           </p>
         </div>
+        )}
+        {footer ? <div className="pt-2 flex flex-wrap items-center gap-2">{footer}</div> : null}
       </div>
     </div>
+    {children}
+    </>
   )
 }

package/src/components/comment-composer.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useState, type ReactNode, type RefObject } from 'react'
+import { Button, Input, Label, Textarea } from './ui'
+
+export interface CommentComposerDraft {
+  title: string
+  body: string
+}
+
+export interface CommentComposerProps {
+  /**
+   * Show the title field. The vendor section's comments are titled reviews;
+   * a design-doc comment is a Slack message, so it passes `false`.
+   */
+  withTitle?: boolean
+  titleLabel?: string
+  titlePlaceholder?: string
+  /** For hosts whose empty state focuses the composer ("Be the first!"). */
+  titleRef?: RefObject<HTMLInputElement | null>
+  bodyLabel?: string
+  placeholder?: string
+  /** Extra controls under the box — design docs put the comment-type chips here. */
+  extras?: ReactNode
+  submitLabel?: string
+  cancelLabel?: string
+  onCancel?: () => void
+  pending?: boolean
+  /** Accessible name for the body control when there is no visible label. */
+  ariaLabel?: string
+  /**
+   * Return `false` to KEEP the draft — a failed post must never lose what the
+   * person typed. Anything else clears it.
+   */
+  onSubmit: (draft: CommentComposerDraft) => void | boolean | Promise<void | boolean>
+}
+
+/**
+ * THE comment composer: one bordered box with the field(s) inside and Send
+ * beside it (stacked on mobile).
+ *
+ * One component for every comment surface — the vendor page and the design-doc
+ * threads — so the two cannot drift in shape, spacing or submit behaviour. It
+ * owns its own draft state, which is what lets both hosts stop hand-rolling
+ * one (the vendor page kept title and body in a single newline-joined string).
+ */
+export function CommentComposer({
+  withTitle = false,
+  titleLabel = 'Title',
+  titlePlaceholder = 'Your comment title here',
+  titleRef,
+  bodyLabel = 'Description',
+  placeholder = 'Write your comment...',
+  extras,
+  submitLabel = 'Send',
+  cancelLabel = 'Cancel',
+  onCancel,
+  pending = false,
+  ariaLabel,
+  onSubmit,
+}: CommentComposerProps) {
+  const [title, setTitle] = useState('')
+  const [body, setBody] = useState('')
+  // A titled composer needs both halves — the host's API rejects a title-only
+  // or body-only comment, and disabling Send says so before the round trip.
+  const canSubmit = body.trim().length > 0 && (!withTitle || title.trim().length > 0) && !pending
+
+  const submit = async () => {
+    if (!canSubmit) return
+    const kept = await onSubmit({ title: title.trim(), body: body.trim() })
+    if (kept === false) return
+    setTitle('')
+    setBody('')
+  }
+
+  return (
+    <div className="flex flex-col gap-[var(--spacing-system-xsf)]">
+      <div className="flex flex-col gap-[var(--spacing-system-sf)] md:flex-row">
+        <div className="flex-1 overflow-hidden rounded-lg border border-ods-border bg-ods-bg">
+          {withTitle ? (
+            <div className="border-b border-ods-border">
+              <Label className="text-badge text-ods-text-secondary px-3 pt-2 pb-1">{titleLabel}</Label>
+              <Input
+                ref={titleRef}
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder={titlePlaceholder}
+                disabled={pending}
+                className="rounded-none border-0 bg-transparent focus-visible:ring-0"
+              />
+            </div>
+          ) : null}
+          {withTitle ? <Label className="text-badge text-ods-text-secondary px-3 pt-2 pb-1">{bodyLabel}</Label> : null}
+          <Textarea
+            value={body}
+            onChange={(e) => setBody(e.target.value)}
+            placeholder={placeholder}
+            disabled={pending}
+            aria-label={ariaLabel ?? (withTitle ? bodyLabel : submitLabel)}
+            className="min-h-[64px] rounded-none border-0 bg-transparent focus-visible:ring-0"
+          />
+        </div>
+        <div className="flex items-start gap-[var(--spacing-system-xsf)]">
+          {onCancel ? (
+            <Button type="button" variant="outline" size="small-legacy" onClick={onCancel} disabled={pending}>
+              {cancelLabel}
+            </Button>
+          ) : null}
+          <Button type="button" variant="accent" size="small-legacy" onClick={submit} disabled={!canSubmit} loading={pending}>
+            {submitLabel}
+          </Button>
+        </div>
+      </div>
+      {extras ? <div className="flex flex-wrap items-center gap-[var(--spacing-system-xsf)]">{extras}</div> : null}
+    </div>
+  )
+}

package/src/components/embeds/claude-embed.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { ExternalLink, Asterisk } from 'lucide-react'
+import { toClaudeEmbedUrl } from '../../utils/embed-url-converters'
+
+export type ClaudeEmbedKind = 'artifact' | 'design'
+
+export interface ClaudeEmbedProps {
+  /** Any claude.ai / claude.site url. */
+  url: string
+  /** Which surface the link points at — only the copy differs. */
+  kind?: ClaudeEmbedKind
+  /** Heading on the action row. Defaults to the kind's name. */
+  title?: string
+  /** iframe height (CSS value), matching `FigmaEmbed`'s prop. */
+  height?: string
+}
+
+const KIND_LABEL: Record<ClaudeEmbedKind, string> = {
+  artifact: 'Claude artifact',
+  design: 'Claude Design',
+}
+
+/**
+ * A Claude artifact, embedded the way Figma is — a markdown block, reached
+ * through the `{{claude-artifact:URL}}` / `{{claude-design:URL}}` shortcodes,
+ * so it renders identically wherever markdown renders: a spec body, a comment,
+ * a links rail.
+ *
+ * A PUBLISHED artifact frames through its `/embed` route (see
+ * `toClaudeEmbedUrl`). Everything else cannot be framed at all, so the action
+ * row underneath is ALWAYS rendered: what the link is, why the frame above may
+ * be blank, and one click to open it.
+ *
+ * Four things defeat the frame:
+ *  · a Claude CODE url (`claude.ai/code/artifact/…`) — no Embed settings exist
+ *    for it, and its `/embed` path answers `frame-ancestors 'self'`;
+ *  · a Claude Design url, which has no embed route at all;
+ *  · an artifact whose author has not added this host under Allowed domains;
+ *  · an http host (mixed content) — it will not paint on `http://localhost`.
+ */
+export function ClaudeEmbed({ url, kind = 'artifact', title, height = '480px' }: ClaudeEmbedProps) {
+  const label = title ?? KIND_LABEL[kind]
+  const embedUrl = toClaudeEmbedUrl(url)
+  return (
+    <div className="overflow-hidden rounded-lg border border-ods-border bg-ods-card">
+      {embedUrl ? (
+        <iframe
+          src={embedUrl}
+          title={label}
+          loading="lazy"
+          // `allow-same-origin` alongside `allow-scripts` is what Anthropic's own
+          // embed snippet uses — an artifact needs both to run.
+          sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+          style={{ height }}
+          className="block w-full border-0 bg-ods-bg-surface"
+        />
+      ) : null}
+      <a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={`flex items-center gap-[var(--spacing-system-mf)] p-[var(--spacing-system-mf)] no-underline transition-colors hover:bg-ods-bg-surface ${
+          embedUrl ? 'border-t border-ods-border' : ''
+        }`}
+      >
+        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-lg bg-ods-bg-surface">
+          <Asterisk className="h-6 w-6 text-ods-accent" />
+        </div>
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-h4 text-ods-text-primary">{label}</p>
+          <p className="truncate text-h6 text-ods-text-secondary">
+            {embedUrl
+              ? 'claude.ai · blank above? Publish → Embed settings → add this site to Allowed domains'
+              : kind === 'artifact'
+                ? 'claude.ai · only a published chat artifact can be framed · a Claude Code link opens in a new tab'
+                : 'claude.ai · opens in a new tab · claude.ai serves this surface with framing disabled'}
+          </p>
+        </div>
+        <ExternalLink className="h-4 w-4 shrink-0 text-ods-text-secondary" />
+      </a>
+    </div>
+  )
+}

package/src/components/embeds/index.ts

@@ -11,6 +11,8 @@ export type { GoogleSheetsViewerProps } from './google-sheets-viewer'
 
 export { FigmaEmbed } from './figma-embed'
 export type { FigmaEmbedProps } from './figma-embed'
+export { ClaudeEmbed } from './claude-embed'
+export type { ClaudeEmbedProps, ClaudeEmbedKind } from './claude-embed'
 
 export { OGLinkPreview, OGLinkErrorBoundary } from './og-link-preview'
 export type {

package/src/components/features/array-entry-manager.tsx

@@ -159,7 +159,8 @@ export function ArrayEntryManager<T extends { [key: string]: any }>({
             </div>
           )}
 
-          <div className="flex-1 space-y-2">
+          {/* min-w-0: a wide renderLabel (e.g. a DeliveryRow) must truncate, not push the row past its host. */}
+          <div className="flex-1 min-w-0 space-y-2">
             {renderLabel && renderLabel(item, index)}
             <Input
               placeholder={placeholder}

package/src/components/features/clickup-tasks-manager.tsx

@@ -14,13 +14,19 @@ interface ClickUpTasksManagerProps {
   onChange: (tasks: ClickUpTaskLink[]) => void;
   title?: ReactNode; // Support string or ReactNode for badge integration
   className?: string;
+  /**
+   * Per-row label renderer (passthrough to ArrayEntryManager) — lets a host
+   * hydrate the bare task id with the mirror's title/status row.
+   */
+  renderLabel?: (item: ClickUpTaskLink, index: number) => ReactNode;
 }
 
 export function ClickUpTasksManager({
   tasks,
   onChange,
   title = 'ClickUp Roadmap Tasks', // Default title
-  className = ''
+  className = '',
+  renderLabel
 }: ClickUpTasksManagerProps) {
   return (
     <ArrayEntryManager
@@ -33,6 +39,7 @@ export function ClickUpTasksManager({
       addButtonText="Add Task"
       icon={<Lightbulb className="w-5 h-5 text-ods-text-secondary" />}
       className={className}
+      renderLabel={renderLabel}
     />
   );
 }

package/src/components/index.ts

@@ -16,6 +16,7 @@ export * from './hover-card'
 export * from './categories-cart'
 export * from './category-card'
 export * from './comment-card'
+export * from './comment-composer'
 export * from './content-loading-container'
 export * from './dynamic-skeleton'
 export * from './empty-state'

package/src/components/shared/delivery/delivery-row.tsx

@@ -68,12 +68,17 @@ export interface DeliveryRowProps {
    *  paired with `scroll-mt-24` on the outer element so the row lands
    *  BELOW the sticky chrome after the scroll. */
   id?: string
+  /** `'_blank'` renders a plain external anchor (new tab, `rel` hardened) —
+   *  for rows whose href leaves the app (e.g. the raw ClickUp task URL on the
+   *  design-doc surfaces). Internal deep-links omit it and keep the Link shim. */
+  target?: '_blank'
   className?: string
 }
 
 export function DeliveryRow({
   item,
   href,
+  target,
   caption,
   id,
   className,
@@ -100,7 +105,10 @@ export function DeliveryRow({
           </h3>
         </div>
         <div className="min-h-[20px] flex items-center">
-          <p className="text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate">
+          {/* Relative time is wall-clock-derived: on an SSR host the server and
+              client render different strings a moment apart — text-only, so
+              suppress instead of forcing a client-only render. */}
+          <p className="text-h5 text-ods-text-secondary uppercase tracking-[-0.28px] truncate" suppressHydrationWarning>
             {subtitle}
           </p>
         </div>
@@ -155,6 +163,14 @@ export function DeliveryRow({
     className,
   )
 
+  if (href && target === '_blank') {
+    return (
+      <a href={href} id={id} className={baseClass} target="_blank" rel="noopener noreferrer">
+        {inner}
+      </a>
+    )
+  }
+
   if (href) {
     // `Link` is the env-aware embed-shim — delegates to `next/link` on
     // a Next.js host (soft RSC nav, back-button restores the previous

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -100,6 +100,15 @@ export interface RoadmapGridProps {
   /** Show the desktop left margin (~120px) that aligns the grid with the page
    *  hero. Default `true`. Related-content rails pass `false`. */
   showLeftMargin?: boolean;
+  /**
+   * Columns at `md` and up. Default `2` (the roadmap page).
+   *
+   * A card in this grid needs real width — its title, status badge, target
+   * version and vote row sit on one line each. Two columns inside a NARROW
+   * host (a modal rail, a sidebar) halve an already-small container and crush
+   * every one of them, so such hosts pass `1`.
+   */
+  columns?: 1 | 2;
   /** URL builder for the per-task refresh call after a successful vote. */
   buildRefreshUrl?: (taskId: string) => string;
   /** Voting hook options (vote endpoint + storage key). */
@@ -122,18 +131,26 @@ export interface RoadmapGridProps {
 function RoadmapGridSingle({
   items,
   showLeftMargin,
+  columns = 2,
   getVote,
   onVote,
   votingTasks,
 }: {
   items: RoadmapItem[];
   showLeftMargin: boolean;
+  columns?: 1 | 2;
   getVote: (taskId: string) => 'up' | 'down' | null;
   onVote: (taskId: string, voteType: 'up' | 'down') => void;
   votingTasks: Set<string>;
 }) {
   return (
-    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${showLeftMargin ? 'md:ml-[120px]' : ''}`}>
+    // LITERAL class strings: an interpolated `md:grid-cols-${n}` is invisible
+    // to Tailwind's scanner and is never generated.
+    <div
+      className={`grid grid-cols-1 gap-6 ${columns === 2 ? 'md:grid-cols-2' : ''} ${
+        showLeftMargin ? 'md:ml-[120px]' : ''
+      }`}
+    >
       {items.map((item) => (
         // DOM id + sticky-header scroll offset live ON RoadmapCard's own
         // outer element (no wrapper div). Anchor mirrors
@@ -157,6 +174,7 @@ export function RoadmapGrid({
   items,
   onItemUpdate,
   showLeftMargin = true,
+  columns = 2,
   buildRefreshUrl = DEFAULT_BUILD_REFRESH_URL,
   votingOptions,
   groupByQuarter = false,
@@ -255,6 +273,7 @@ export function RoadmapGrid({
       <RoadmapGridSingle
         items={items}
         showLeftMargin={showLeftMargin}
+        columns={columns}
         getVote={getVote}
         onVote={handleVote}
         votingTasks={votingTasks}
@@ -305,6 +324,7 @@ export function RoadmapGrid({
               <RoadmapGridSingle
                 items={itemsByQuarter[quarter]}
                 showLeftMargin={showLeftMargin}
+                columns={columns}
                 getVote={getVote}
                 onVote={handleVote}
                 votingTasks={votingTasks}

package/src/components/ui/card.tsx

@@ -11,7 +11,10 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      // `border` with NO color token resolves to `currentColor` — on a dark card
+      // with light text that paints a WHITE outline. Every ODS surface borders
+      // on `--color-border`; say so.
+      "rounded-lg border border-ods-border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}

package/src/components/ui/index.ts

@@ -122,6 +122,7 @@ export * from './content-loader'
 
 // Table components
 export {
+  COMPACT_ROW_MIN_HEIGHT_PX,
   Table, TableCardSkeleton, TableCell,
   TableDescriptionCell, TableEmptyState, TableHeader,
   TableRow, TableTimestampCell

package/src/components/ui/markdown/rich/__tests__/shortcodes.test.ts

@@ -56,3 +56,47 @@ describe('processShortcodes script stripping', () => {
     expect(output).toContain('<script>');
   });
 });
+
+/**
+ * Design-doc embeds (R11): the spec's `{{figma:FILE_KEY[:NODE_ID]}}` grammar is
+ * rewritten onto the canonical `{{figma:URL}}` rule, and Claude artifacts get
+ * the SAME treatment — a shortcode → a block the renderer maps to `ClaudeEmbed`.
+ * Both are markdown blocks, so they render identically in a spec body, a
+ * comment, or a links rail, and no surface hand-assembles its own card.
+ */
+describe('processShortcodes design-doc embeds', () => {
+  it('rewrites {{figma:KEY:NODE}} to the canonical design URL and renders the figma embed', () => {
+    const output = processShortcodes('{{figma:aB3xK9:12-405}}');
+    expect(output).toContain('class="figma-embed"');
+    expect(output).toContain('data-figma-url="https://www.figma.com/design/aB3xK9?node-id=12-405"');
+  });
+
+  it('accepts a colon-separated node id and a bare key', () => {
+    expect(processShortcodes('{{figma:aB3xK9:12:405}}')).toContain('node-id=12-405');
+    expect(processShortcodes('{{figma:aB3xK9}}')).toContain('data-figma-url="https://www.figma.com/design/aB3xK9"');
+  });
+
+  it('leaves the existing {{figma:URL}} grammar untouched', () => {
+    const output = processShortcodes('{{figma:https://www.figma.com/proto/aB3xK9/Flows?node-id=1-2}}');
+    expect(output).toContain('data-figma-url="https://www.figma.com/proto/aB3xK9/Flows?node-id=1-2"');
+  });
+
+  it('renders a Claude artifact / Claude Design link as an embed block, like figma', () => {
+    const artifact = processShortcodes('{{claude-artifact:https://claude.ai/public/artifacts/abc-123}}');
+    expect(artifact).toContain('class="claude-embed"');
+    expect(artifact).toContain('data-url="https://claude.ai/public/artifacts/abc-123"');
+    expect(artifact).toContain('data-kind="artifact"');
+
+    const design = processShortcodes('{{claude-design:https://claude.ai/design/xyz}}');
+    expect(design).toContain('data-kind="design"');
+  });
+
+  it('escapes the url attribute so a crafted link cannot break out of the block', () => {
+    const output = processShortcodes('{{claude-artifact:https://claude.ai/a"><script>alert(1)</script>}}');
+    expect(output).not.toContain('<script>');
+    expect(output).toContain('&quot;');
+  });
+
+
+
+});

package/src/components/ui/markdown/rich/embed-overrides.tsx

@@ -17,6 +17,7 @@ import { LinkedInEmbedClient } from '../../../embeds/linkedin-embed-client';
 import { Video } from '../../../features/video';
 import { OGLinkPreview, OGLinkErrorBoundary } from '../../../embeds/og-link-preview';
 import { FigmaEmbed } from '../../../embeds/figma-embed';
+import { ClaudeEmbed } from '../../../embeds/claude-embed';
 import { MarkdownImage } from '../../../embeds/markdown-image';
 import { buildStandardLeafRenderers, hasRenderableSrc } from '../base-components';
 import type { TextSizeElement } from '../text-size';
@@ -146,6 +147,9 @@ export function buildRichEmbedOverrides({
       if (className === 'figma-embed') {
         return <FigmaEmbed url={props['data-figma-url']} height="70vh" />;
       }
+      if (className === 'claude-embed') {
+        return <ClaudeEmbed url={props['data-url']} kind={props['data-kind'] === 'design' ? 'design' : 'artifact'} />;
+      }
       if (className === 'linkedin-embed') {
         return <LinkedInEmbedClient url={props['data-post-url']} />;
       }

package/src/components/ui/markdown/rich/shortcodes.ts

@@ -55,10 +55,22 @@ export const processShortcodes = (content: string): string => {
         : `https://twitter.com/twitter/status/${tweetInput}`;
       return `\n\n<div class="tweet-embed" data-tweet-url="${escapeAttr(tweetUrl)}"></div>\n\n`;
     })
+    // Figma by file key (spec grammar): {{figma:FILE_KEY[:NODE_ID]}} → rewritten to the
+    // canonical URL form so the {{figma:URL}} rule below owns the rendering.
+    .replace(/\{\{figma:(?!https?:)([A-Za-z0-9]+)(?::([0-9]+[-:][0-9]+))?\}\}/g, (match, key, node) => {
+      const nodeParam = node ? `?node-id=${String(node).replace(':', '-')}` : '';
+      return `{{figma:https://www.figma.com/design/${key}${nodeParam}}}`;
+    })
     // Figma embeds: {{figma:URL}}
     .replace(/\{\{figma:([^}]+)\}\}/g, (match, url) => {
       return `\n\n<div class="figma-embed" data-figma-url="${escapeAttr(url.trim())}"></div>\n\n`;
     })
+    // Claude artifact / Claude Design: {{claude-artifact:URL}} / {{claude-design:URL}}
+    // — the same shape as figma, so a Claude link is a markdown BLOCK wherever
+    // markdown renders, never a bespoke card one surface hand-assembles.
+    .replace(/\{\{claude-(artifact|design):([^}]+)\}\}/g, (match, kind, url) => {
+      return `\n\n<div class="claude-embed" data-url="${escapeAttr(url.trim())}" data-kind="${kind}"></div>\n\n`;
+    })
     // LinkedIn embeds: {{linkedin:POST_URL}}
     .replace(/\{\{linkedin:([^}]+)\}\}/g, (match, url) => {
       return `\n\n<div class="linkedin-embed" data-post-url="${escapeAttr(url.trim())}"></div>\n\n`;