@contractspec/bundle.library 0.0.0-canary-20260206014742

package/dist/components/templates/messaging/ConversationList.js

@@ -0,0 +1,70 @@
+import { useMemo } from "react";
+import { MessageCircle, Users } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/components/templates/messaging/ConversationList.tsx
+const CONVERSATIONS_QUERY = gql`
+  query Conversations($projectId: ID!) {
+    conversations(projectId: $projectId) {
+      id
+      name
+      isGroup
+      updatedAt
+      participants {
+        id
+        userId
+        displayName
+      }
+    }
+  }
+`;
+function ConversationList({ selectedId, onSelect }) {
+	const { projectId } = useTemplateRuntime();
+	const { data, loading } = useQuery(CONVERSATIONS_QUERY, {
+		variables: { projectId },
+		fetchPolicy: "cache-and-network"
+	});
+	const conversations = useMemo(() => data?.conversations ?? [], [data]);
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-semibold",
+				children: "Conversations"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: loading ? "Loading…" : `${conversations.length} active`
+			})] }), /* @__PURE__ */ jsx(Users, { className: "text-muted-foreground h-4 w-4" })]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "divide-border/70 divide-y",
+			children: [conversations.map((conversation) => {
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${selectedId === conversation.id ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
+					onClick: () => onSelect?.(conversation.id),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(MessageCircle, { className: "text-muted-foreground h-4 w-4" }), /* @__PURE__ */ jsx("span", {
+							className: "text-sm font-medium",
+							children: conversation.name || "Untitled conversation"
+						})]
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: conversation.participants.map((participant) => participant.displayName || participant.userId).join(" · ")
+					})]
+				}, conversation.id);
+			}), !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground p-4 text-center text-xs",
+				children: "No conversations yet."
+			}) : null]
+		})]
+	});
+}
+
+//#endregion
+export { ConversationList };
+//# sourceMappingURL=ConversationList.js.map

package/dist/components/templates/messaging/ConversationList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationList.js","names":[],"sources":["../../../../src/components/templates/messaging/ConversationList.tsx"],"sourcesContent":["import { useQuery } from '@apollo/client/react';\nimport { gql } from '@apollo/client';\nimport { MessageCircle, Users } from 'lucide-react';\nimport { useMemo } from 'react';\n\nimport { type Conversation } from './types';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\n\nconst CONVERSATIONS_QUERY = gql`\n  query Conversations($projectId: ID!) {\n    conversations(projectId: $projectId) {\n      id\n      name\n      isGroup\n      updatedAt\n      participants {\n        id\n        userId\n        displayName\n      }\n    }\n  }\n`;\n\nexport interface ConversationListProps {\n  selectedId?: string;\n  onSelect?: (conversationId: string) => void;\n}\n\nexport function ConversationList({\n  selectedId,\n  onSelect,\n}: ConversationListProps) {\n  const { projectId } = useTemplateRuntime();\n  const { data, loading } = useQuery<{ conversations: Conversation[] }>(\n    CONVERSATIONS_QUERY,\n    {\n      variables: { projectId },\n      fetchPolicy: 'cache-and-network',\n    }\n  );\n\n  const conversations: Conversation[] = useMemo(\n    () => data?.conversations ?? [],\n    [data]\n  );\n\n  return (\n    <aside className=\"border-border bg-card h-full overflow-y-auto rounded-2xl border\">\n      <header className=\"border-border px -4 flex items-center justify-between border-b px-4 py-3\">\n        <div>\n          <p className=\"text-sm font-semibold\">Conversations</p>\n          <p className=\"text-muted-foreground text-xs\">\n            {loading ? 'Loading…' : `${conversations.length} active`}\n          </p>\n        </div>\n        <Users className=\"text-muted-foreground h-4 w-4\" />\n      </header>\n      <div className=\"divide-border/70 divide-y\">\n        {conversations.map((conversation) => {\n          const isSelected = selectedId === conversation.id;\n          return (\n            <button\n              key={conversation.id}\n              type=\"button\"\n              className={`flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${\n                isSelected\n                  ? 'text-foreground bg-violet-500/10'\n                  : 'hover:bg-muted/40'\n              }`}\n              onClick={() => onSelect?.(conversation.id)}\n            >\n              <div className=\"flex items-center gap-2\">\n                <MessageCircle className=\"text-muted-foreground h-4 w-4\" />\n                <span className=\"text-sm font-medium\">\n                  {conversation.name || 'Untitled conversation'}\n                </span>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">\n                {conversation.participants\n                  .map(\n                    (participant) =>\n                      participant.displayName || participant.userId\n                  )\n                  .join(' · ')}\n              </p>\n            </button>\n          );\n        })}\n        {!loading && conversations.length === 0 ? (\n          <p className=\"text-muted-foreground p-4 text-center text-xs\">\n            No conversations yet.\n          </p>\n        ) : null}\n      </div>\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;AAQA,MAAM,sBAAsB,GAAG;;;;;;;;;;;;;;;AAqB/B,SAAgB,iBAAiB,EAC/B,YACA,YACwB;CACxB,MAAM,EAAE,cAAc,oBAAoB;CAC1C,MAAM,EAAE,MAAM,YAAY,SACxB,qBACA;EACE,WAAW,EAAE,WAAW;EACxB,aAAa;EACd,CACF;CAED,MAAM,gBAAgC,cAC9B,MAAM,iBAAiB,EAAE,EAC/B,CAAC,KAAK,CACP;AAED,QACE,qBAAC;EAAM,WAAU;aACf,qBAAC;GAAO,WAAU;cAChB,qBAAC,oBACC,oBAAC;IAAE,WAAU;cAAwB;KAAiB,EACtD,oBAAC;IAAE,WAAU;cACV,UAAU,aAAa,GAAG,cAAc,OAAO;KAC9C,IACA,EACN,oBAAC,SAAM,WAAU,kCAAkC;IAC5C,EACT,qBAAC;GAAI,WAAU;cACZ,cAAc,KAAK,iBAAiB;AAEnC,WACE,qBAAC;KAEC,MAAK;KACL,WAAW,yEALI,eAAe,aAAa,KAOrC,qCACA;KAEN,eAAe,WAAW,aAAa,GAAG;gBAE1C,qBAAC;MAAI,WAAU;iBACb,oBAAC,iBAAc,WAAU,kCAAkC,EAC3D,oBAAC;OAAK,WAAU;iBACb,aAAa,QAAQ;QACjB;OACH,EACN,oBAAC;MAAE,WAAU;gBACV,aAAa,aACX,KACE,gBACC,YAAY,eAAe,YAAY,OAC1C,CACA,KAAK,MAAM;OACZ;OAtBC,aAAa,GAuBX;KAEX,EACD,CAAC,WAAW,cAAc,WAAW,IACpC,oBAAC;IAAE,WAAU;cAAgD;KAEzD,GACF;IACA;GACA"}

package/dist/components/templates/messaging/MessageComposer.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/messaging/MessageComposer.d.ts
+interface MessageComposerProps {
+  conversationId?: string;
+  viewerId?: string;
+  viewerName?: string;
+}
+declare function MessageComposer({
+  conversationId,
+  viewerId,
+  viewerName
+}: MessageComposerProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MessageComposer, MessageComposerProps };
+//# sourceMappingURL=MessageComposer.d.ts.map

package/dist/components/templates/messaging/MessageComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageComposer.d.ts","names":[],"sources":["../../../../src/components/templates/messaging/MessageComposer.tsx"],"mappings":";;;UAiBiB,oBAAA;EACf,cAAA;EACA,QAAA;EACA,UAAA;AAAA;AAAA,iBAGc,eAAA,CAAA;EACd,cAAA;EACA,QAAA;EACA;AAAA,GACC,oBAAA,GAAoB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/messaging/MessageComposer.js

@@ -0,0 +1,62 @@
+'use client';
+
+import { MESSAGES_QUERY } from "./MessageThread.js";
+import { useState } from "react";
+import { Send } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/components/templates/messaging/MessageComposer.tsx
+const SEND_MESSAGE = gql`
+  mutation SendMessage($input: SendMessageInput!) {
+    sendMessage(input: $input) {
+      id
+    }
+  }
+`;
+function MessageComposer({ conversationId, viewerId = "local-user", viewerName = "You" }) {
+	const { projectId } = useTemplateRuntime();
+	const [content, setContent] = useState("");
+	const [sendMessage, { loading }] = useMutation(SEND_MESSAGE);
+	const handleSubmit = async (event) => {
+		event.preventDefault();
+		if (!conversationId || !content.trim()) return;
+		await sendMessage({
+			variables: { input: {
+				projectId,
+				conversationId,
+				senderId: viewerId,
+				senderName: viewerName,
+				content: content.trim()
+			} },
+			refetchQueries: [{
+				query: MESSAGES_QUERY,
+				variables: { conversationId }
+			}]
+		});
+		setContent("");
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: handleSubmit,
+		className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			className: "text-foreground flex-1 bg-transparent text-sm outline-none",
+			placeholder: conversationId ? "Type a message…" : "Select a conversation to start",
+			disabled: !conversationId || loading,
+			value: content,
+			onChange: (event) => setContent(event.target.value)
+		}), /* @__PURE__ */ jsxs("button", {
+			type: "submit",
+			className: "btn-primary inline-flex items-center gap-1 text-sm",
+			disabled: !conversationId || loading || !content.trim(),
+			children: [/* @__PURE__ */ jsx(Send, { className: "h-4 w-4" }), "Send"]
+		})]
+	});
+}
+
+//#endregion
+export { MessageComposer };
+//# sourceMappingURL=MessageComposer.js.map

package/dist/components/templates/messaging/MessageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageComposer.js","names":[],"sources":["../../../../src/components/templates/messaging/MessageComposer.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { useMutation } from '@apollo/client/react';\nimport { gql } from '@apollo/client';\nimport { Send } from 'lucide-react';\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport { MESSAGES_QUERY } from './MessageThread';\n\nconst SEND_MESSAGE = gql`\n  mutation SendMessage($input: SendMessageInput!) {\n    sendMessage(input: $input) {\n      id\n    }\n  }\n`;\n\nexport interface MessageComposerProps {\n  conversationId?: string;\n  viewerId?: string;\n  viewerName?: string;\n}\n\nexport function MessageComposer({\n  conversationId,\n  viewerId = 'local-user',\n  viewerName = 'You',\n}: MessageComposerProps) {\n  const { projectId } = useTemplateRuntime();\n  const [content, setContent] = useState('');\n  const [sendMessage, { loading }] = useMutation(SEND_MESSAGE);\n\n  const handleSubmit = async (event: React.FormEvent) => {\n    event.preventDefault();\n    if (!conversationId || !content.trim()) return;\n    await sendMessage({\n      variables: {\n        input: {\n          projectId,\n          conversationId,\n          senderId: viewerId,\n          senderName: viewerName,\n          content: content.trim(),\n        },\n      },\n      refetchQueries: [\n        {\n          query: MESSAGES_QUERY,\n          variables: { conversationId },\n        },\n      ],\n    });\n    setContent('');\n  };\n\n  return (\n    <form\n      onSubmit={handleSubmit}\n      className=\"border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3\"\n    >\n      <input\n        type=\"text\"\n        className=\"text-foreground flex-1 bg-transparent text-sm outline-none\"\n        placeholder={\n          conversationId ? 'Type a message…' : 'Select a conversation to start'\n        }\n        disabled={!conversationId || loading}\n        value={content}\n        onChange={(event) => setContent(event.target.value)}\n      />\n      <button\n        type=\"submit\"\n        className=\"btn-primary inline-flex items-center gap-1 text-sm\"\n        disabled={!conversationId || loading || !content.trim()}\n      >\n        <Send className=\"h-4 w-4\" />\n        Send\n      </button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;AASA,MAAM,eAAe,GAAG;;;;;;;AAcxB,SAAgB,gBAAgB,EAC9B,gBACA,WAAW,cACX,aAAa,SACU;CACvB,MAAM,EAAE,cAAc,oBAAoB;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,GAAG;CAC1C,MAAM,CAAC,aAAa,EAAE,aAAa,YAAY,aAAa;CAE5D,MAAM,eAAe,OAAO,UAA2B;AACrD,QAAM,gBAAgB;AACtB,MAAI,CAAC,kBAAkB,CAAC,QAAQ,MAAM,CAAE;AACxC,QAAM,YAAY;GAChB,WAAW,EACT,OAAO;IACL;IACA;IACA,UAAU;IACV,YAAY;IACZ,SAAS,QAAQ,MAAM;IACxB,EACF;GACD,gBAAgB,CACd;IACE,OAAO;IACP,WAAW,EAAE,gBAAgB;IAC9B,CACF;GACF,CAAC;AACF,aAAW,GAAG;;AAGhB,QACE,qBAAC;EACC,UAAU;EACV,WAAU;aAEV,oBAAC;GACC,MAAK;GACL,WAAU;GACV,aACE,iBAAiB,oBAAoB;GAEvC,UAAU,CAAC,kBAAkB;GAC7B,OAAO;GACP,WAAW,UAAU,WAAW,MAAM,OAAO,MAAM;IACnD,EACF,qBAAC;GACC,MAAK;GACL,WAAU;GACV,UAAU,CAAC,kBAAkB,WAAW,CAAC,QAAQ,MAAM;cAEvD,oBAAC,QAAK,WAAU,YAAY;IAErB;GACJ"}

package/dist/components/templates/messaging/MessageThread.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as graphql from "graphql";
+
+//#region src/components/templates/messaging/MessageThread.d.ts
+declare const MESSAGES_QUERY: graphql.DocumentNode;
+interface MessageThreadProps {
+  conversationId?: string;
+  viewerId?: string;
+}
+declare function MessageThread({
+  conversationId,
+  viewerId
+}: MessageThreadProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MESSAGES_QUERY, MessageThread, MessageThreadProps };
+//# sourceMappingURL=MessageThread.d.ts.map

package/dist/components/templates/messaging/MessageThread.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageThread.d.ts","names":[],"sources":["../../../../src/components/templates/messaging/MessageThread.tsx"],"mappings":";;;;cASa,cAAA,EAWZ,OAAA,CAX0B,YAAA;AAAA,UAmBV,kBAAA;EACf,cAAA;EACA,QAAA;AAAA;AAAA,iBAGc,aAAA,CAAA;EACd,cAAA;EACA;AAAA,GACC,kBAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/messaging/MessageThread.js

@@ -0,0 +1,94 @@
+'use client';
+
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+
+//#region src/components/templates/messaging/MessageThread.tsx
+const MESSAGES_QUERY = gql`
+  query Messages($conversationId: ID!) {
+    messages(conversationId: $conversationId, limit: 50) {
+      id
+      content
+      senderId
+      senderName
+      createdAt
+      status
+    }
+  }
+`;
+const SET_READ = gql`
+  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {
+    setMessagesRead(conversationId: $conversationId, userId: $userId)
+  }
+`;
+function MessageThread({ conversationId, viewerId = "local-user" }) {
+	const scrollRef = useRef(null);
+	const enabled = Boolean(conversationId);
+	const { data, loading } = useQuery(MESSAGES_QUERY, {
+		variables: { conversationId },
+		skip: !enabled,
+		fetchPolicy: "cache-and-network"
+	});
+	const [setRead] = useMutation(SET_READ);
+	const { projectId } = useTemplateRuntime();
+	const messages = data?.messages ?? [];
+	useEffect(() => {
+		if (!enabled || !conversationId) return;
+		setRead({ variables: {
+			conversationId,
+			userId: viewerId
+		} }).catch(() => {});
+	}, [
+		conversationId,
+		enabled,
+		setRead,
+		viewerId
+	]);
+	useEffect(() => {
+		const container = scrollRef.current;
+		if (!container) return;
+		container.scrollTop = container.scrollHeight;
+	}, [messages]);
+	if (!conversationId) return /* @__PURE__ */ jsx("div", {
+		className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "Select a conversation"
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+		children: /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			className: "flex-1 space-y-3 overflow-y-auto p-4",
+			children: loading ? /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-center text-sm",
+				children: "Loading…"
+			}) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs("div", {
+				className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
+				children: [/* @__PURE__ */ jsx("div", {
+					className: `max-w-xs rounded-2xl px-3 py-2 text-sm ${message.senderId === viewerId ? "bg-violet-500 text-white" : "bg-muted text-foreground"}`,
+					children: /* @__PURE__ */ jsx("p", { children: message.content })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-muted-foreground mt-1 text-xs",
+					children: [
+						message.senderName || message.senderId,
+						" ·",
+						" ",
+						new Date(message.createdAt).toLocaleTimeString([], {
+							hour: "2-digit",
+							minute: "2-digit"
+						})
+					]
+				})]
+			}, message.id))
+		})
+	});
+}
+
+//#endregion
+export { MESSAGES_QUERY, MessageThread };
+//# sourceMappingURL=MessageThread.js.map

package/dist/components/templates/messaging/MessageThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageThread.js","names":[],"sources":["../../../../src/components/templates/messaging/MessageThread.tsx"],"sourcesContent":["'use client';\n\nimport { useMutation, useQuery } from '@apollo/client/react';\nimport { gql } from '@apollo/client';\nimport { useEffect, useRef } from 'react';\n\nimport { useTemplateRuntime } from '@contractspec/lib.example-shared-ui';\nimport { type Message } from './types';\n\nexport const MESSAGES_QUERY = gql`\n  query Messages($conversationId: ID!) {\n    messages(conversationId: $conversationId, limit: 50) {\n      id\n      content\n      senderId\n      senderName\n      createdAt\n      status\n    }\n  }\n`;\n\nconst SET_READ = gql`\n  mutation SetMessagesRead($conversationId: ID!, $userId: String!) {\n    setMessagesRead(conversationId: $conversationId, userId: $userId)\n  }\n`;\n\nexport interface MessageThreadProps {\n  conversationId?: string;\n  viewerId?: string;\n}\n\nexport function MessageThread({\n  conversationId,\n  viewerId = 'local-user',\n}: MessageThreadProps) {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const enabled = Boolean(conversationId);\n  const { data, loading } = useQuery<{ messages: Message[] }>(MESSAGES_QUERY, {\n    variables: { conversationId },\n    skip: !enabled,\n    fetchPolicy: 'cache-and-network',\n  });\n  const [setRead] = useMutation(SET_READ);\n  const { projectId } = useTemplateRuntime();\n  void projectId; // reserved for future perms\n\n  const messages: Message[] = data?.messages ?? [];\n\n  useEffect(() => {\n    if (!enabled || !conversationId) return;\n    setRead({ variables: { conversationId, userId: viewerId } }).catch(() => {\n      /* ignore */\n    });\n  }, [conversationId, enabled, setRead, viewerId]);\n\n  useEffect(() => {\n    const container = scrollRef.current;\n    if (!container) return;\n    container.scrollTop = container.scrollHeight;\n  }, [messages]);\n\n  if (!conversationId) {\n    return (\n      <div className=\"border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed\">\n        <p className=\"text-muted-foreground text-sm\">Select a conversation</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"border-border bg-card flex flex-1 flex-col rounded-2xl border\">\n      <div ref={scrollRef} className=\"flex-1 space-y-3 overflow-y-auto p-4\">\n        {loading ? (\n          <p className=\"text-muted-foreground text-center text-sm\">Loading…</p>\n        ) : (\n          messages\n            .slice()\n            .reverse()\n            .map((message) => (\n              <div\n                key={message.id}\n                className={`flex flex-col ${\n                  message.senderId === viewerId ? 'items-end' : 'items-start'\n                }`}\n              >\n                <div\n                  className={`max-w-xs rounded-2xl px-3 py-2 text-sm ${\n                    message.senderId === viewerId\n                      ? 'bg-violet-500 text-white'\n                      : 'bg-muted text-foreground'\n                  }`}\n                >\n                  <p>{message.content}</p>\n                </div>\n                <span className=\"text-muted-foreground mt-1 text-xs\">\n                  {message.senderName || message.senderId} ·{' '}\n                  {new Date(message.createdAt).toLocaleTimeString([], {\n                    hour: '2-digit',\n                    minute: '2-digit',\n                  })}\n                </span>\n              </div>\n            ))\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;AASA,MAAa,iBAAiB,GAAG;;;;;;;;;;;;AAajC,MAAM,WAAW,GAAG;;;;;AAWpB,SAAgB,cAAc,EAC5B,gBACA,WAAW,gBACU;CACrB,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,UAAU,QAAQ,eAAe;CACvC,MAAM,EAAE,MAAM,YAAY,SAAkC,gBAAgB;EAC1E,WAAW,EAAE,gBAAgB;EAC7B,MAAM,CAAC;EACP,aAAa;EACd,CAAC;CACF,MAAM,CAAC,WAAW,YAAY,SAAS;CACvC,MAAM,EAAE,cAAc,oBAAoB;CAG1C,MAAM,WAAsB,MAAM,YAAY,EAAE;AAEhD,iBAAgB;AACd,MAAI,CAAC,WAAW,CAAC,eAAgB;AACjC,UAAQ,EAAE,WAAW;GAAE;GAAgB,QAAQ;GAAU,EAAE,CAAC,CAAC,YAAY,GAEvE;IACD;EAAC;EAAgB;EAAS;EAAS;EAAS,CAAC;AAEhD,iBAAgB;EACd,MAAM,YAAY,UAAU;AAC5B,MAAI,CAAC,UAAW;AAChB,YAAU,YAAY,UAAU;IAC/B,CAAC,SAAS,CAAC;AAEd,KAAI,CAAC,eACH,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAE,WAAU;aAAgC;IAAyB;GAClE;AAIV,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAI,KAAK;GAAW,WAAU;aAC5B,UACC,oBAAC;IAAE,WAAU;cAA4C;KAAY,GAErE,SACG,OAAO,CACP,SAAS,CACT,KAAK,YACJ,qBAAC;IAEC,WAAW,iBACT,QAAQ,aAAa,WAAW,cAAc;eAGhD,oBAAC;KACC,WAAW,0CACT,QAAQ,aAAa,WACjB,6BACA;eAGN,oBAAC,iBAAG,QAAQ,UAAY;MACpB,EACN,qBAAC;KAAK,WAAU;;MACb,QAAQ,cAAc,QAAQ;MAAS;MAAG;MAC1C,IAAI,KAAK,QAAQ,UAAU,CAAC,mBAAmB,EAAE,EAAE;OAClD,MAAM;OACN,QAAQ;OACT,CAAC;;MACG;MApBF,QAAQ,GAqBT,CACN;IAEF;GACF"}

package/dist/components/templates/messaging/MessagingWorkspace.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/messaging/MessagingWorkspace.d.ts
+declare function MessagingWorkspace(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { MessagingWorkspace };
+//# sourceMappingURL=MessagingWorkspace.d.ts.map

package/dist/components/templates/messaging/MessagingWorkspace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingWorkspace.d.ts","names":[],"sources":["../../../../src/components/templates/messaging/MessagingWorkspace.tsx"],"mappings":";;;iBASgB,kBAAA,CAAA,GAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/messaging/MessagingWorkspace.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { ConversationList } from "./ConversationList.js";
+import { MessageThread } from "./MessageThread.js";
+import { MessageComposer } from "./MessageComposer.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { registerTemplateComponents } from "@contractspec/lib.example-shared-ui";
+
+//#region src/components/templates/messaging/MessagingWorkspace.tsx
+function MessagingWorkspace() {
+	const [conversationId, setConversationId] = useState();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid gap-4 md:grid-cols-[280px,1fr]",
+		children: [/* @__PURE__ */ jsx(ConversationList, {
+			selectedId: conversationId,
+			onSelect: setConversationId
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsx(MessageThread, { conversationId }), /* @__PURE__ */ jsx(MessageComposer, { conversationId })]
+		})]
+	});
+}
+registerTemplateComponents("messaging-app", {
+	list: MessagingWorkspace,
+	detail: MessageThread,
+	form: MessageComposer
+});
+
+//#endregion
+export { MessagingWorkspace };
+//# sourceMappingURL=MessagingWorkspace.js.map

package/dist/components/templates/messaging/MessagingWorkspace.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagingWorkspace.js","names":[],"sources":["../../../../src/components/templates/messaging/MessagingWorkspace.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\n\nimport { registerTemplateComponents } from '@contractspec/lib.example-shared-ui';\nimport { ConversationList } from './ConversationList';\nimport { MessageThread } from './MessageThread';\nimport { MessageComposer } from './MessageComposer';\n\nexport function MessagingWorkspace() {\n  const [conversationId, setConversationId] = useState<string | undefined>();\n\n  return (\n    <div className=\"grid gap-4 md:grid-cols-[280px,1fr]\">\n      <ConversationList\n        selectedId={conversationId}\n        onSelect={setConversationId}\n      />\n      <div className=\"flex flex-col gap-3\">\n        <MessageThread conversationId={conversationId} />\n        <MessageComposer conversationId={conversationId} />\n      </div>\n    </div>\n  );\n}\n\nregisterTemplateComponents('messaging-app', {\n  list: MessagingWorkspace,\n  detail: MessageThread,\n  form: MessageComposer,\n});\n"],"mappings":";;;;;;;;;;AASA,SAAgB,qBAAqB;CACnC,MAAM,CAAC,gBAAgB,qBAAqB,UAA8B;AAE1E,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,YAAY;GACZ,UAAU;IACV,EACF,qBAAC;GAAI,WAAU;cACb,oBAAC,iBAA8B,iBAAkB,EACjD,oBAAC,mBAAgC,iBAAkB;IAC/C;GACF;;AAIV,2BAA2B,iBAAiB;CAC1C,MAAM;CACN,QAAQ;CACR,MAAM;CACP,CAAC"}

package/dist/components/templates/messaging/index.d.ts

@@ -0,0 +1,5 @@
+import { ConversationList, ConversationListProps } from "./ConversationList.js";
+import { MESSAGES_QUERY, MessageThread, MessageThreadProps } from "./MessageThread.js";
+import { MessageComposer, MessageComposerProps } from "./MessageComposer.js";
+import { MessagingWorkspace } from "./MessagingWorkspace.js";
+export { ConversationList, ConversationListProps, MESSAGES_QUERY, MessageComposer, MessageComposerProps, MessageThread, MessageThreadProps, MessagingWorkspace };

package/dist/components/templates/messaging/index.js

@@ -0,0 +1,6 @@
+import { ConversationList } from "./ConversationList.js";
+import { MESSAGES_QUERY, MessageThread } from "./MessageThread.js";
+import { MessageComposer } from "./MessageComposer.js";
+import { MessagingWorkspace } from "./MessagingWorkspace.js";
+
+export { ConversationList, MESSAGES_QUERY, MessageComposer, MessageThread, MessagingWorkspace };

package/dist/components/templates/messaging/types.d.ts

@@ -0,0 +1,27 @@
+//#region src/components/templates/messaging/types.d.ts
+interface Participant {
+  id: string;
+  userId: string;
+  displayName?: string | null;
+  role?: string | null;
+  lastReadAt?: string | null;
+}
+interface Conversation {
+  id: string;
+  name?: string | null;
+  isGroup: boolean;
+  avatarUrl?: string | null;
+  updatedAt: string;
+  participants: Participant[];
+}
+interface Message {
+  id: string;
+  content: string;
+  senderId: string;
+  senderName?: string | null;
+  createdAt: string;
+  status: 'SENT' | 'DELIVERED' | 'READ';
+}
+//#endregion
+export { Conversation, Message, Participant };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/templates/messaging/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/templates/messaging/types.ts"],"mappings":";UAAiB,WAAA;EACf,EAAA;EACA,MAAA;EACA,WAAA;EACA,IAAA;EACA,UAAA;AAAA;AAAA,UAGe,YAAA;EACf,EAAA;EACA,IAAA;EACA,OAAA;EACA,SAAA;EACA,SAAA;EACA,YAAA,EAAc,WAAA;AAAA;AAAA,UAGC,OAAA;EACf,EAAA;EACA,OAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;EACA,MAAA;AAAA"}

package/dist/components/templates/recipes/LanguageSwitcher.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/LanguageSwitcher.d.ts
+interface LanguageSwitcherProps {
+  locale: 'EN' | 'FR';
+  onChange: (locale: 'EN' | 'FR') => void;
+}
+declare function LanguageSwitcher({
+  locale,
+  onChange
+}: LanguageSwitcherProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LanguageSwitcher, LanguageSwitcherProps };
+//# sourceMappingURL=LanguageSwitcher.d.ts.map

package/dist/components/templates/recipes/LanguageSwitcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.d.ts","names":[],"sources":["../../../../src/components/templates/recipes/LanguageSwitcher.tsx"],"mappings":";;;UAAiB,qBAAA;EACf,MAAA;EACA,QAAA,GAAW,MAAA;AAAA;AAAA,iBAGG,gBAAA,CAAA;EAAmB,MAAA;EAAQ;AAAA,GAAY,qBAAA,GAAqB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/recipes/LanguageSwitcher.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/LanguageSwitcher.tsx
+function LanguageSwitcher({ locale, onChange }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "border-border bg-card text-muted-foreground inline-flex rounded-full border p-1 text-xs font-semibold",
+		children: ["EN", "FR"].map((language) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: `rounded-full px-3 py-1 transition ${locale === language ? "bg-violet-500 text-white" : "hover:text-foreground"}`,
+			onClick: () => onChange(language),
+			children: language === "EN" ? "English" : "Français"
+		}, language))
+	});
+}
+
+//#endregion
+export { LanguageSwitcher };
+//# sourceMappingURL=LanguageSwitcher.js.map

package/dist/components/templates/recipes/LanguageSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguageSwitcher.js","names":[],"sources":["../../../../src/components/templates/recipes/LanguageSwitcher.tsx"],"sourcesContent":["export interface LanguageSwitcherProps {\n  locale: 'EN' | 'FR';\n  onChange: (locale: 'EN' | 'FR') => void;\n}\n\nexport function LanguageSwitcher({ locale, onChange }: LanguageSwitcherProps) {\n  return (\n    <div className=\"border-border bg-card text-muted-foreground inline-flex rounded-full border p-1 text-xs font-semibold\">\n      {(['EN', 'FR'] as const).map((language) => (\n        <button\n          key={language}\n          type=\"button\"\n          className={`rounded-full px-3 py-1 transition ${\n            locale === language\n              ? 'bg-violet-500 text-white'\n              : 'hover:text-foreground'\n          }`}\n          onClick={() => onChange(language)}\n        >\n          {language === 'EN' ? 'English' : 'Français'}\n        </button>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;AAKA,SAAgB,iBAAiB,EAAE,QAAQ,YAAmC;AAC5E,QACE,oBAAC;EAAI,WAAU;YACX,CAAC,MAAM,KAAK,CAAW,KAAK,aAC5B,oBAAC;GAEC,MAAK;GACL,WAAW,qCACT,WAAW,WACP,6BACA;GAEN,eAAe,SAAS,SAAS;aAEhC,aAAa,OAAO,YAAY;KAT5B,SAUE,CACT;GACE"}

package/dist/components/templates/recipes/RecipeCard.d.ts

@@ -0,0 +1,17 @@
+import { Recipe } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/RecipeCard.d.ts
+interface RecipeCardProps {
+  recipe: Recipe;
+  onSelect?: (recipe: Recipe) => void;
+  onToggleFavorite?: (recipe: Recipe) => void;
+}
+declare function RecipeCard({
+  recipe,
+  onSelect,
+  onToggleFavorite
+}: RecipeCardProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RecipeCard, RecipeCardProps };
+//# sourceMappingURL=RecipeCard.d.ts.map

package/dist/components/templates/recipes/RecipeCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeCard.d.ts","names":[],"sources":["../../../../src/components/templates/recipes/RecipeCard.tsx"],"mappings":";;;;UAIiB,eAAA;EACf,MAAA,EAAQ,MAAA;EACR,QAAA,IAAY,MAAA,EAAQ,MAAA;EACpB,gBAAA,IAAoB,MAAA,EAAQ,MAAA;AAAA;AAAA,iBAGd,UAAA,CAAA;EACd,MAAA;EACA,QAAA;EACA;AAAA,GACC,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/recipes/RecipeCard.js

@@ -0,0 +1,59 @@
+import { Heart } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/RecipeCard.tsx
+function RecipeCard({ recipe, onSelect, onToggleFavorite }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => onSelect?.(recipe),
+		className: "border-border bg-card flex flex-col gap-3 rounded-2xl border text-left transition hover:border-violet-400",
+		children: [recipe.heroImageUrl ? /* @__PURE__ */ jsx("img", {
+			src: recipe.heroImageUrl,
+			alt: recipe.name,
+			className: "h-40 w-full rounded-t-2xl object-cover"
+		}) : /* @__PURE__ */ jsx("div", { className: "bg-muted h-40 rounded-t-2xl" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2 p-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "text-base font-semibold",
+						children: recipe.name
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: `inline-flex items-center justify-center rounded-full border border-transparent p-2 ${recipe.isFavorite ? "text-red-400" : "text-muted-foreground hover:text-red-400"}`,
+						onClick: (event) => {
+							event.stopPropagation();
+							onToggleFavorite?.(recipe);
+						},
+						children: /* @__PURE__ */ jsx(Heart, { className: `h-4 w-4 ${recipe.isFavorite ? "fill-red-400" : ""}` })
+					})]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground line-clamp-2 text-sm",
+					children: recipe.description
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground flex flex-wrap gap-3 text-xs",
+					children: [
+						recipe.prepTimeMinutes ? /* @__PURE__ */ jsxs("span", { children: [
+							"Prep ",
+							recipe.prepTimeMinutes,
+							"m"
+						] }) : null,
+						recipe.cookTimeMinutes ? /* @__PURE__ */ jsxs("span", { children: [
+							"Cook ",
+							recipe.cookTimeMinutes,
+							"m"
+						] }) : null,
+						recipe.servings ? /* @__PURE__ */ jsxs("span", { children: [recipe.servings, " servings"] }) : null
+					]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { RecipeCard };
+//# sourceMappingURL=RecipeCard.js.map

package/dist/components/templates/recipes/RecipeCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeCard.js","names":[],"sources":["../../../../src/components/templates/recipes/RecipeCard.tsx"],"sourcesContent":["import { Heart } from 'lucide-react';\n\nimport { type Recipe } from './types';\n\nexport interface RecipeCardProps {\n  recipe: Recipe;\n  onSelect?: (recipe: Recipe) => void;\n  onToggleFavorite?: (recipe: Recipe) => void;\n}\n\nexport function RecipeCard({\n  recipe,\n  onSelect,\n  onToggleFavorite,\n}: RecipeCardProps) {\n  return (\n    <button\n      type=\"button\"\n      onClick={() => onSelect?.(recipe)}\n      className=\"border-border bg-card flex flex-col gap-3 rounded-2xl border text-left transition hover:border-violet-400\"\n    >\n      {recipe.heroImageUrl ? (\n        <img\n          src={recipe.heroImageUrl}\n          alt={recipe.name}\n          className=\"h-40 w-full rounded-t-2xl object-cover\"\n        />\n      ) : (\n        <div className=\"bg-muted h-40 rounded-t-2xl\" />\n      )}\n      <div className=\"space-y-2 p-4\">\n        <div className=\"flex items-center justify-between\">\n          <p className=\"text-base font-semibold\">{recipe.name}</p>\n          <button\n            type=\"button\"\n            className={`inline-flex items-center justify-center rounded-full border border-transparent p-2 ${\n              recipe.isFavorite\n                ? 'text-red-400'\n                : 'text-muted-foreground hover:text-red-400'\n            }`}\n            onClick={(event) => {\n              event.stopPropagation();\n              onToggleFavorite?.(recipe);\n            }}\n          >\n            <Heart\n              className={`h-4 w-4 ${recipe.isFavorite ? 'fill-red-400' : ''}`}\n            />\n          </button>\n        </div>\n        <p className=\"text-muted-foreground line-clamp-2 text-sm\">\n          {recipe.description}\n        </p>\n        <div className=\"text-muted-foreground flex flex-wrap gap-3 text-xs\">\n          {recipe.prepTimeMinutes ? (\n            <span>Prep {recipe.prepTimeMinutes}m</span>\n          ) : null}\n          {recipe.cookTimeMinutes ? (\n            <span>Cook {recipe.cookTimeMinutes}m</span>\n          ) : null}\n          {recipe.servings ? <span>{recipe.servings} servings</span> : null}\n        </div>\n      </div>\n    </button>\n  );\n}\n"],"mappings":";;;;AAUA,SAAgB,WAAW,EACzB,QACA,UACA,oBACkB;AAClB,QACE,qBAAC;EACC,MAAK;EACL,eAAe,WAAW,OAAO;EACjC,WAAU;aAET,OAAO,eACN,oBAAC;GACC,KAAK,OAAO;GACZ,KAAK,OAAO;GACZ,WAAU;IACV,GAEF,oBAAC,SAAI,WAAU,gCAAgC,EAEjD,qBAAC;GAAI,WAAU;;IACb,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAE,WAAU;gBAA2B,OAAO;OAAS,EACxD,oBAAC;MACC,MAAK;MACL,WAAW,sFACT,OAAO,aACH,iBACA;MAEN,UAAU,UAAU;AAClB,aAAM,iBAAiB;AACvB,0BAAmB,OAAO;;gBAG5B,oBAAC,SACC,WAAW,WAAW,OAAO,aAAa,iBAAiB,OAC3D;OACK;MACL;IACN,oBAAC;KAAE,WAAU;eACV,OAAO;MACN;IACJ,qBAAC;KAAI,WAAU;;MACZ,OAAO,kBACN,qBAAC;OAAK;OAAM,OAAO;OAAgB;UAAQ,GACzC;MACH,OAAO,kBACN,qBAAC;OAAK;OAAM,OAAO;OAAgB;UAAQ,GACzC;MACH,OAAO,WAAW,qBAAC,qBAAM,OAAO,UAAS,eAAgB,GAAG;;MACzD;;IACF;GACC"}

package/dist/components/templates/recipes/RecipeDetail.d.ts

@@ -0,0 +1,13 @@
+import { Recipe } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/RecipeDetail.d.ts
+interface RecipeDetailProps {
+  recipe?: Recipe;
+}
+declare function RecipeDetail({
+  recipe
+}: RecipeDetailProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RecipeDetail, RecipeDetailProps };
+//# sourceMappingURL=RecipeDetail.d.ts.map

package/dist/components/templates/recipes/RecipeDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeDetail.d.ts","names":[],"sources":["../../../../src/components/templates/recipes/RecipeDetail.tsx"],"mappings":";;;;UAIiB,iBAAA;EACf,MAAA,GAAS,MAAA;AAAA;AAAA,iBAGK,YAAA,CAAA;EAAe;AAAA,GAAU,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/templates/recipes/RecipeDetail.js

@@ -0,0 +1,50 @@
+import { BookOpen } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/RecipeDetail.tsx
+function RecipeDetail({ recipe }) {
+	if (!recipe) return /* @__PURE__ */ jsx("div", {
+		className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "Select a recipe to view details."
+		})
+	});
+	return /* @__PURE__ */ jsxs("article", {
+		className: "border-border bg-card space-y-4 rounded-2xl border p-6",
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "flex flex-wrap items-center gap-3",
+				children: [/* @__PURE__ */ jsx(BookOpen, { className: "text-muted-foreground h-5 w-5" }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xl font-semibold",
+					children: recipe.name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: recipe.description
+				})] })]
+			}),
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+				children: "Ingredients"
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
+				children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs("li", { children: [
+					ingredient.name,
+					" – ",
+					ingredient.quantity
+				] }, ingredient.id))
+			})] }),
+			/* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h3", {
+				className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+				children: "Instructions"
+			}), /* @__PURE__ */ jsx("ol", {
+				className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
+				children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx("li", { children: instruction.content }, instruction.id))
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { RecipeDetail };
+//# sourceMappingURL=RecipeDetail.js.map

package/dist/components/templates/recipes/RecipeDetail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeDetail.js","names":[],"sources":["../../../../src/components/templates/recipes/RecipeDetail.tsx"],"sourcesContent":["import { BookOpen } from 'lucide-react';\n\nimport { type Recipe } from './types';\n\nexport interface RecipeDetailProps {\n  recipe?: Recipe;\n}\n\nexport function RecipeDetail({ recipe }: RecipeDetailProps) {\n  if (!recipe) {\n    return (\n      <div className=\"border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed\">\n        <p className=\"text-muted-foreground text-sm\">\n          Select a recipe to view details.\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <article className=\"border-border bg-card space-y-4 rounded-2xl border p-6\">\n      <header className=\"flex flex-wrap items-center gap-3\">\n        <BookOpen className=\"text-muted-foreground h-5 w-5\" />\n        <div>\n          <h2 className=\"text-xl font-semibold\">{recipe.name}</h2>\n          <p className=\"text-muted-foreground text-sm\">{recipe.description}</p>\n        </div>\n      </header>\n\n      <section>\n        <h3 className=\"text-muted-foreground text-sm font-semibold tracking-wide uppercase\">\n          Ingredients\n        </h3>\n        <ul className=\"text-foreground mt-2 list-disc space-y-1 pl-6 text-sm\">\n          {recipe.ingredients.map((ingredient) => (\n            <li key={ingredient.id}>\n              {ingredient.name} – {ingredient.quantity}\n            </li>\n          ))}\n        </ul>\n      </section>\n\n      <section>\n        <h3 className=\"text-muted-foreground text-sm font-semibold tracking-wide uppercase\">\n          Instructions\n        </h3>\n        <ol className=\"text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm\">\n          {recipe.instructions.map((instruction) => (\n            <li key={instruction.id}>{instruction.content}</li>\n          ))}\n        </ol>\n      </section>\n    </article>\n  );\n}\n"],"mappings":";;;;AAQA,SAAgB,aAAa,EAAE,UAA6B;AAC1D,KAAI,CAAC,OACH,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAE,WAAU;aAAgC;IAEzC;GACA;AAIV,QACE,qBAAC;EAAQ,WAAU;;GACjB,qBAAC;IAAO,WAAU;eAChB,oBAAC,YAAS,WAAU,kCAAkC,EACtD,qBAAC,oBACC,oBAAC;KAAG,WAAU;eAAyB,OAAO;MAAU,EACxD,oBAAC;KAAE,WAAU;eAAiC,OAAO;MAAgB,IACjE;KACC;GAET,qBAAC,wBACC,oBAAC;IAAG,WAAU;cAAsE;KAE/E,EACL,oBAAC;IAAG,WAAU;cACX,OAAO,YAAY,KAAK,eACvB,qBAAC;KACE,WAAW;KAAK;KAAI,WAAW;SADzB,WAAW,GAEf,CACL;KACC,IACG;GAEV,qBAAC,wBACC,oBAAC;IAAG,WAAU;cAAsE;KAE/E,EACL,oBAAC;IAAG,WAAU;cACX,OAAO,aAAa,KAAK,gBACxB,oBAAC,kBAAyB,YAAY,WAA7B,YAAY,GAA8B,CACnD;KACC,IACG;;GACF"}

package/dist/components/templates/recipes/RecipeList.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/templates/recipes/RecipeList.d.ts
+declare function RecipeList(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { RecipeList };
+//# sourceMappingURL=RecipeList.d.ts.map

package/dist/components/templates/recipes/RecipeList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeList.d.ts","names":[],"sources":["../../../../src/components/templates/recipes/RecipeList.tsx"],"mappings":";;;iBAuDgB,UAAA,CAAA,GAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}