@contractspec/bundle.library 3.7.6 → 3.7.7

package/dist/components/templates/index.js

@@ -1,1054 +1,1054 @@
 // @bun
-// src/components/templates/todos/FilterBar.tsx
+// src/components/templates/messaging/ConversationList.tsx
+import { gql } from "@apollo/client";
+import { useQuery } from "@apollo/client/react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { MessageCircle, Users } from "lucide-react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-function FilterBar({ value, onChange, categories }) {
-  const handleChange = (key, nextValue) => {
-    onChange({ ...value, [key]: nextValue });
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: "border-border bg-card grid gap-3 rounded-2xl border p-4 md:grid-cols-4",
+var 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: "h-full overflow-y-auto rounded-2xl border border-border bg-card",
     children: [
-      /* @__PURE__ */ jsxs("label", {
-        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+      /* @__PURE__ */ jsxs("header", {
+        className: "px -4 flex items-center justify-between border-border border-b px-4 py-3",
         children: [
-          "Status",
-          /* @__PURE__ */ jsxs("select", {
-            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
-            value: value.status,
-            onChange: (event) => handleChange("status", event.target.value),
+          /* @__PURE__ */ jsxs("div", {
             children: [
-              /* @__PURE__ */ jsx("option", {
-                value: "all",
-                children: "All tasks"
-              }),
-              /* @__PURE__ */ jsx("option", {
-                value: "active",
-                children: "Active"
+              /* @__PURE__ */ jsx("p", {
+                className: "font-semibold text-sm",
+                children: "Conversations"
               }),
-              /* @__PURE__ */ jsx("option", {
-                value: "completed",
-                children: "Completed"
+              /* @__PURE__ */ jsx("p", {
+                className: "text-muted-foreground text-xs",
+                children: loading ? "Loading\u2026" : `${conversations.length} active`
               })
             ]
+          }),
+          /* @__PURE__ */ jsx(Users, {
+            className: "h-4 w-4 text-muted-foreground"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs("label", {
-        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+      /* @__PURE__ */ jsxs("div", {
+        className: "divide-y divide-border/70",
         children: [
-          "Priority",
-          /* @__PURE__ */ jsxs("select", {
-            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
-            value: value.priority,
-            onChange: (event) => handleChange("priority", event.target.value),
-            children: [
-              /* @__PURE__ */ jsx("option", {
-                value: "all",
-                children: "All"
-              }),
-              /* @__PURE__ */ jsx("option", {
-                value: "LOW",
-                children: "Low"
-              }),
-              /* @__PURE__ */ jsx("option", {
-                value: "MEDIUM",
-                children: "Medium"
-              }),
-              /* @__PURE__ */ jsx("option", {
-                value: "HIGH",
-                children: "High"
-              }),
-              /* @__PURE__ */ jsx("option", {
-                value: "URGENT",
-                children: "Urgent"
-              })
-            ]
-          })
+          conversations.map((conversation) => {
+            const isSelected = selectedId === conversation.id;
+            return /* @__PURE__ */ jsxs("button", {
+              type: "button",
+              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "bg-violet-500/10 text-foreground" : "hover:bg-muted/40"}`,
+              onClick: () => onSelect?.(conversation.id),
+              children: [
+                /* @__PURE__ */ jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx(MessageCircle, {
+                      className: "h-4 w-4 text-muted-foreground"
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: "font-medium text-sm",
+                      children: conversation.name || "Untitled conversation"
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx("p", {
+                  className: "text-muted-foreground text-xs",
+                  children: conversation.participants.map((participant) => participant.displayName || participant.userId).join(" \xB7 ")
+                })
+              ]
+            }, conversation.id);
+          }),
+          !loading && conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+            className: "p-4 text-center text-muted-foreground text-xs",
+            children: "No conversations yet."
+          }) : null
         ]
-      }),
-      /* @__PURE__ */ jsxs("label", {
-        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+      })
+    ]
+  });
+}
+
+// src/components/templates/messaging/MessageThread.tsx
+import { gql as gql2 } from "@apollo/client";
+import { useMutation, useQuery as useQuery2 } from "@apollo/client/react";
+import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useEffect, useRef } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+"use client";
+var MESSAGES_QUERY = gql2`
+  query Messages($conversationId: ID!) {
+    messages(conversationId: $conversationId, limit: 50) {
+      id
+      content
+      senderId
+      senderName
+      createdAt
+      status
+    }
+  }
+`;
+var SET_READ = gql2`
+  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 } = useQuery2(MESSAGES_QUERY, {
+    variables: { conversationId },
+    skip: !enabled,
+    fetchPolicy: "cache-and-network"
+  });
+  const [setRead] = useMutation(SET_READ);
+  const { projectId } = useTemplateRuntime2();
+  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__ */ jsx2("div", {
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
+      children: /* @__PURE__ */ jsx2("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Select a conversation"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx2("div", {
+    className: "flex flex-1 flex-col rounded-2xl border border-border bg-card",
+    children: /* @__PURE__ */ jsx2("div", {
+      ref: scrollRef,
+      className: "flex-1 space-y-3 overflow-y-auto p-4",
+      children: loading ? /* @__PURE__ */ jsx2("p", {
+        className: "text-center text-muted-foreground text-sm",
+        children: "Loading\u2026"
+      }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs2("div", {
+        className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
         children: [
-          "Category",
-          /* @__PURE__ */ jsxs("select", {
-            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
-            value: value.categoryId,
-            onChange: (event) => handleChange("categoryId", event.target.value),
+          /* @__PURE__ */ jsx2("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__ */ jsx2("p", {
+              children: message.content
+            })
+          }),
+          /* @__PURE__ */ jsxs2("span", {
+            className: "mt-1 text-muted-foreground text-xs",
             children: [
-              /* @__PURE__ */ jsx("option", {
-                value: "all",
-                children: "All categories"
-              }),
-              categories.map((category) => /* @__PURE__ */ jsx("option", {
-                value: category.id,
-                children: category.name
-              }, category.id))
+              message.senderName || message.senderId,
+              " \xB7",
+              " ",
+              new Date(message.createdAt).toLocaleTimeString([], {
+                hour: "2-digit",
+                minute: "2-digit"
+              })
             ]
           })
         ]
-      }),
-      /* @__PURE__ */ jsxs("label", {
-        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
-        children: [
-          "Search",
-          /* @__PURE__ */ jsx("input", {
-            type: "search",
-            className: "border-border bg-background text-foreground mt-1 rounded-md border px-3 py-2 text-sm",
-            placeholder: "Search by title",
-            value: value.search,
-            onChange: (event) => handleChange("search", event.target.value)
-          })
-        ]
-      })
-    ]
+      }, message.id))
+    })
   });
 }
 
-// src/components/templates/todos/TaskForm.tsx
+// src/components/templates/messaging/MessageComposer.tsx
+import { gql as gql3 } from "@apollo/client";
+import { useMutation as useMutation2 } from "@apollo/client/react";
+import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
+import { Send } from "lucide-react";
 import { useState } from "react";
-import { useMutation } from "@apollo/client/react";
-import { gql } from "@apollo/client";
-import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
-var CREATE_TASK = gql`
-  mutation CreateTask($input: CreateTaskInput!) {
-    createTask(input: $input) {
+var SEND_MESSAGE = gql3`
+  mutation SendMessage($input: SendMessageInput!) {
+    sendMessage(input: $input) {
       id
-      title
     }
   }
 `;
-function TaskForm({ categories }) {
-  const { projectId } = useTemplateRuntime();
-  const [title, setTitle] = useState("");
-  const [description, setDescription] = useState("");
-  const [priority, setPriority] = useState("MEDIUM");
-  const [categoryId, setCategoryId] = useState("none");
-  const [tagsInput, setTagsInput] = useState("");
-  const [createTask, { loading }] = useMutation(CREATE_TASK);
+function MessageComposer({
+  conversationId,
+  viewerId = "local-user",
+  viewerName = "You"
+}) {
+  const { projectId } = useTemplateRuntime3();
+  const [content, setContent] = useState("");
+  const [sendMessage, { loading }] = useMutation2(SEND_MESSAGE);
   const handleSubmit = async (event) => {
     event.preventDefault();
-    if (!title.trim())
+    if (!conversationId || !content.trim())
       return;
-    await createTask({
+    await sendMessage({
       variables: {
         input: {
           projectId,
-          title: title.trim(),
-          description: description.trim() || undefined,
-          priority,
-          categoryId: categoryId === "none" ? undefined : categoryId,
-          tags: parseTags(tagsInput)
+          conversationId,
+          senderId: viewerId,
+          senderName: viewerName,
+          content: content.trim()
         }
       },
-      refetchQueries: ["Tasks"],
-      awaitRefetchQueries: true
+      refetchQueries: [
+        {
+          query: MESSAGES_QUERY,
+          variables: { conversationId }
+        }
+      ]
     });
-    setTitle("");
-    setDescription("");
-    setPriority("MEDIUM");
-    setCategoryId("none");
-    setTagsInput("");
+    setContent("");
   };
-  return /* @__PURE__ */ jsxs2("form", {
+  return /* @__PURE__ */ jsxs3("form", {
     onSubmit: handleSubmit,
-    className: "border-border bg-background/60 space-y-3 rounded-2xl border p-4",
+    className: "mt-3 flex items-center gap-2 rounded-2xl border border-border bg-card px-4 py-3",
     children: [
-      /* @__PURE__ */ jsx2("div", {
-        children: /* @__PURE__ */ jsxs2("label", {
-          className: "text-muted-foreground text-xs font-semibold uppercase",
-          children: [
-            "Title",
-            /* @__PURE__ */ jsx2("input", {
-              type: "text",
-              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
-              placeholder: "What needs to get done?",
-              value: title,
-              onChange: (event) => setTitle(event.target.value),
-              required: true
-            })
-          ]
-        })
-      }),
-      /* @__PURE__ */ jsx2("div", {
-        children: /* @__PURE__ */ jsxs2("label", {
-          className: "text-muted-foreground text-xs font-semibold uppercase",
-          children: [
-            "Description",
-            /* @__PURE__ */ jsx2("textarea", {
-              className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
-              rows: 3,
-              placeholder: "Add context or policy notes",
-              value: description,
-              onChange: (event) => setDescription(event.target.value)
-            })
-          ]
-        })
+      /* @__PURE__ */ jsx3("input", {
+        type: "text",
+        className: "flex-1 bg-transparent text-foreground text-sm outline-none",
+        placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
+        disabled: !conversationId || loading,
+        value: content,
+        onChange: (event) => setContent(event.target.value)
       }),
-      /* @__PURE__ */ jsxs2("div", {
-        className: "grid gap-3 md:grid-cols-3",
+      /* @__PURE__ */ jsxs3("button", {
+        type: "submit",
+        className: "btn-primary inline-flex items-center gap-1 text-sm",
+        disabled: !conversationId || loading || !content.trim(),
         children: [
-          /* @__PURE__ */ jsxs2("label", {
-            className: "text-muted-foreground text-xs font-semibold uppercase",
-            children: [
-              "Priority",
-              /* @__PURE__ */ jsxs2("select", {
-                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
-                value: priority,
-                onChange: (event) => setPriority(event.target.value),
-                children: [
-                  /* @__PURE__ */ jsx2("option", {
-                    value: "LOW",
-                    children: "Low"
-                  }),
-                  /* @__PURE__ */ jsx2("option", {
-                    value: "MEDIUM",
-                    children: "Medium"
-                  }),
-                  /* @__PURE__ */ jsx2("option", {
-                    value: "HIGH",
-                    children: "High"
-                  }),
-                  /* @__PURE__ */ jsx2("option", {
-                    value: "URGENT",
-                    children: "Urgent"
-                  })
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx3(Send, {
+            className: "h-4 w-4"
           }),
-          /* @__PURE__ */ jsxs2("label", {
-            className: "text-muted-foreground text-xs font-semibold uppercase",
-            children: [
-              "Category",
-              /* @__PURE__ */ jsxs2("select", {
-                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
-                value: categoryId,
-                onChange: (event) => setCategoryId(event.target.value),
-                children: [
-                  /* @__PURE__ */ jsx2("option", {
-                    value: "none",
-                    children: "None"
-                  }),
-                  categories.map((category) => /* @__PURE__ */ jsx2("option", {
-                    value: category.id,
-                    children: category.name
-                  }, category.id))
-                ]
-              })
-            ]
+          "Send"
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/templates/messaging/MessagingWorkspace.tsx
+import { registerTemplateComponents } from "@contractspec/lib.example-shared-ui";
+import { useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+"use client";
+function MessagingWorkspace() {
+  const [conversationId, setConversationId] = useState2();
+  return /* @__PURE__ */ jsxs4("div", {
+    className: "grid gap-4 md:grid-cols-[280px,1fr]",
+    children: [
+      /* @__PURE__ */ jsx4(ConversationList, {
+        selectedId: conversationId,
+        onSelect: setConversationId
+      }),
+      /* @__PURE__ */ jsxs4("div", {
+        className: "flex flex-col gap-3",
+        children: [
+          /* @__PURE__ */ jsx4(MessageThread, {
+            conversationId
           }),
-          /* @__PURE__ */ jsxs2("label", {
-            className: "text-muted-foreground text-xs font-semibold uppercase",
-            children: [
-              "Tags",
-              /* @__PURE__ */ jsx2("input", {
-                className: "border-border bg-card mt-1 w-full rounded-md border px-3 py-2 text-sm",
-                placeholder: "Comma separated (optional)",
-                value: tagsInput,
-                onChange: (event) => setTagsInput(event.target.value)
-              })
-            ]
+          /* @__PURE__ */ jsx4(MessageComposer, {
+            conversationId
           })
         ]
-      }),
-      /* @__PURE__ */ jsx2("button", {
-        type: "submit",
-        className: "btn-primary w-full py-2 text-sm font-semibold",
-        disabled: loading,
-        children: loading ? "Saving..." : "Add task"
       })
     ]
   });
 }
-function parseTags(input) {
-  return input.split(",").map((tag) => tag.trim()).filter(Boolean);
+registerTemplateComponents("messaging-app", {
+  list: MessagingWorkspace,
+  detail: MessageThread,
+  form: MessageComposer
+});
+// src/components/templates/recipes/LanguageSwitcher.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function LanguageSwitcher({ locale, onChange }) {
+  return /* @__PURE__ */ jsx5("div", {
+    className: "inline-flex rounded-full border border-border bg-card p-1 font-semibold text-muted-foreground text-xs",
+    children: ["EN", "FR"].map((language) => /* @__PURE__ */ jsx5("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\xE7ais"
+    }, language))
+  });
 }
 
-// src/components/templates/todos/TaskItem.tsx
-import { Check, Circle, Trash2 } from "lucide-react";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function TaskItem({ task, onToggle, onDelete }) {
-  const badgeColor = task.priority === "URGENT" ? "text-red-200 bg-red-500/10 border-red-500/40" : task.priority === "HIGH" ? "text-amber-200 bg-amber-500/10 border-amber-500/40" : task.priority === "LOW" ? "text-emerald-200 bg-emerald-500/10 border-emerald-500/40" : "text-violet-200 bg-violet-500/10 border-violet-500/40";
-  return /* @__PURE__ */ jsxs3("div", {
-    className: "border-border/70 bg-card/60 hover:border-border flex items-start gap-4 rounded-2xl border p-4 transition",
+// src/components/templates/recipes/RecipeCard.tsx
+import { Heart } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function RecipeCard({
+  recipe,
+  onSelect,
+  onToggleFavorite
+}) {
+  return /* @__PURE__ */ jsxs5("button", {
+    type: "button",
+    onClick: () => onSelect?.(recipe),
+    className: "flex flex-col gap-3 rounded-2xl border border-border bg-card text-left transition hover:border-violet-400",
     children: [
-      /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: "border-border text-muted-foreground hover:bg-muted/40 rounded-full border p-2",
-        "aria-pressed": task.completed,
-        onClick: () => onToggle?.(task),
-        children: task.completed ? /* @__PURE__ */ jsx3(Check, {
-          className: "h-4 w-4 text-emerald-400"
-        }) : /* @__PURE__ */ jsx3(Circle, {
-          className: "h-4 w-4"
-        })
+      recipe.heroImageUrl ? /* @__PURE__ */ jsx6("img", {
+        src: recipe.heroImageUrl,
+        alt: recipe.name,
+        className: "h-40 w-full rounded-t-2xl object-cover"
+      }) : /* @__PURE__ */ jsx6("div", {
+        className: "h-40 rounded-t-2xl bg-muted"
       }),
-      /* @__PURE__ */ jsxs3("div", {
-        className: "flex-1 space-y-2",
+      /* @__PURE__ */ jsxs5("div", {
+        className: "space-y-2 p-4",
         children: [
-          /* @__PURE__ */ jsxs3("div", {
-            className: "flex flex-wrap items-center gap-2",
+          /* @__PURE__ */ jsxs5("div", {
+            className: "flex items-center justify-between",
             children: [
-              /* @__PURE__ */ jsx3("p", {
-                className: `font-medium ${task.completed ? "text-muted-foreground line-through" : "text-foreground"}`,
-                children: task.title
-              }),
-              /* @__PURE__ */ jsx3("span", {
-                className: `rounded-full border px-2 py-0.5 text-xs ${badgeColor}`,
-                children: task.priority.charAt(0) + task.priority.slice(1).toLowerCase()
+              /* @__PURE__ */ jsx6("p", {
+                className: "font-semibold text-base",
+                children: recipe.name
               }),
-              task.category ? /* @__PURE__ */ jsx3("span", {
-                className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
-                children: task.category.name
+              /* @__PURE__ */ jsx6("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__ */ jsx6(Heart, {
+                  className: `h-4 w-4 ${recipe.isFavorite ? "fill-red-400" : ""}`
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx6("p", {
+            className: "line-clamp-2 text-muted-foreground text-sm",
+            children: recipe.description
+          }),
+          /* @__PURE__ */ jsxs5("div", {
+            className: "flex flex-wrap gap-3 text-muted-foreground text-xs",
+            children: [
+              recipe.prepTimeMinutes ? /* @__PURE__ */ jsxs5("span", {
+                children: [
+                  "Prep ",
+                  recipe.prepTimeMinutes,
+                  "m"
+                ]
               }) : null,
-              task.dueDate ? /* @__PURE__ */ jsxs3("span", {
-                className: "text-muted-foreground text-xs",
+              recipe.cookTimeMinutes ? /* @__PURE__ */ jsxs5("span", {
                 children: [
-                  "Due ",
-                  new Date(task.dueDate).toLocaleDateString()
+                  "Cook ",
+                  recipe.cookTimeMinutes,
+                  "m"
+                ]
+              }) : null,
+              recipe.servings ? /* @__PURE__ */ jsxs5("span", {
+                children: [
+                  recipe.servings,
+                  " servings"
                 ]
               }) : null
             ]
+          })
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/templates/recipes/RecipeDetail.tsx
+import { BookOpen } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function RecipeDetail({ recipe }) {
+  if (!recipe) {
+    return /* @__PURE__ */ jsx7("div", {
+      className: "flex flex-1 items-center justify-center rounded-2xl border border-border border-dashed",
+      children: /* @__PURE__ */ jsx7("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Select a recipe to view details."
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs6("article", {
+    className: "space-y-4 rounded-2xl border border-border bg-card p-6",
+    children: [
+      /* @__PURE__ */ jsxs6("header", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsx7(BookOpen, {
+            className: "h-5 w-5 text-muted-foreground"
+          }),
+          /* @__PURE__ */ jsxs6("div", {
+            children: [
+              /* @__PURE__ */ jsx7("h2", {
+                className: "font-semibold text-xl",
+                children: recipe.name
+              }),
+              /* @__PURE__ */ jsx7("p", {
+                className: "text-muted-foreground text-sm",
+                children: recipe.description
+              })
+            ]
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsxs6("section", {
+        children: [
+          /* @__PURE__ */ jsx7("h3", {
+            className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
+            children: "Ingredients"
           }),
-          task.description ? /* @__PURE__ */ jsx3("p", {
-            className: "text-muted-foreground text-sm",
-            children: task.description
-          }) : null,
-          task.tags.length ? /* @__PURE__ */ jsx3("div", {
-            className: "flex flex-wrap gap-1",
-            children: task.tags.map((tag) => /* @__PURE__ */ jsxs3("span", {
-              className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+          /* @__PURE__ */ jsx7("ul", {
+            className: "mt-2 list-disc space-y-1 pl-6 text-foreground text-sm",
+            children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs6("li", {
               children: [
-                "#",
-                tag
+                ingredient.name,
+                " \u2013 ",
+                ingredient.quantity
               ]
-            }, tag))
-          }) : null
+            }, ingredient.id))
+          })
         ]
       }),
-      /* @__PURE__ */ jsx3("button", {
-        type: "button",
-        className: "text-muted-foreground hover:text-destructive",
-        "aria-label": `Delete ${task.title}`,
-        onClick: () => onDelete?.(task),
-        children: /* @__PURE__ */ jsx3(Trash2, {
-          className: "h-4 w-4"
-        })
+      /* @__PURE__ */ jsxs6("section", {
+        children: [
+          /* @__PURE__ */ jsx7("h3", {
+            className: "font-semibold text-muted-foreground text-sm uppercase tracking-wide",
+            children: "Instructions"
+          }),
+          /* @__PURE__ */ jsx7("ol", {
+            className: "mt-2 list-decimal space-y-2 pl-6 text-foreground text-sm",
+            children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx7("li", {
+              children: instruction.content
+            }, instruction.id))
+          })
+        ]
       })
     ]
   });
 }
 
-// src/components/templates/todos/TaskList.tsx
-import { useMemo, useState as useState2 } from "react";
-import { useMutation as useMutation2, useQuery } from "@apollo/client/react";
-import { gql as gql2 } from "@apollo/client";
+// src/components/templates/recipes/RecipeList.tsx
+import { gql as gql4 } from "@apollo/client";
+import { useMutation as useMutation3, useQuery as useQuery3 } from "@apollo/client/react";
 import {
-  registerTemplateComponents,
-  useTemplateRuntime as useTemplateRuntime2
+  registerTemplateComponents as registerTemplateComponents2,
+  useTemplateRuntime as useTemplateRuntime4
 } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 "use client";
-var TASKS_QUERY = gql2`
-  query Tasks($projectId: ID!) {
-    taskCategories(projectId: $projectId) {
+var RECIPES_QUERY = gql4`
+  query Recipes($projectId: ID!, $locale: RecipeLocale!) {
+    recipes(projectId: $projectId, locale: $locale) {
       id
       name
-      color
-    }
-    tasks(projectId: $projectId) {
-      id
-      title
       description
-      completed
-      priority
-      dueDate
-      tags
+      heroImageUrl
+      prepTimeMinutes
+      cookTimeMinutes
+      servings
+      isFavorite
+      locale
       category {
+        id
+        nameEn
+        nameFr
+      }
+      ingredients {
         id
         name
-        color
+        quantity
+      }
+      instructions {
+        id
+        content
+        ordering
       }
     }
   }
 `;
-var TOGGLE_TASK = gql2`
-  mutation ToggleTask($id: ID!, $completed: Boolean!) {
-    toggleTask(id: $id, completed: $completed) {
+var FAVORITE_RECIPE = gql4`
+  mutation FavoriteRecipe($id: ID!, $isFavorite: Boolean!) {
+    favoriteRecipe(id: $id, isFavorite: $isFavorite) {
       id
-      completed
+      isFavorite
     }
   }
 `;
-var DELETE_TASK = gql2`
-  mutation DeleteTask($id: ID!) {
-    deleteTask(id: $id)
-  }
-`;
-function TaskList() {
-  const { projectId } = useTemplateRuntime2();
-  const [filters, setFilters] = useState2({
-    status: "all",
-    priority: "all",
-    categoryId: "all",
-    search: ""
-  });
-  const { data, loading } = useQuery(TASKS_QUERY, {
-    variables: { projectId },
+function RecipeList() {
+  const { projectId } = useTemplateRuntime4();
+  const [locale, setLocale] = useState3("EN");
+  const [selected, setSelected] = useState3();
+  const [search, setSearch] = useState3("");
+  const { data, loading } = useQuery3(RECIPES_QUERY, {
+    variables: { projectId, locale },
     fetchPolicy: "cache-and-network"
   });
-  const [toggleTask] = useMutation2(TOGGLE_TASK);
-  const [deleteTask] = useMutation2(DELETE_TASK);
-  const categories = data?.taskCategories ?? [];
-  const tasks = data?.tasks ?? [];
-  const filtered = useMemo(() => {
-    return tasks.filter((task) => {
-      if (filters.status === "active" && task.completed)
-        return false;
-      if (filters.status === "completed" && !task.completed)
-        return false;
-      if (filters.priority !== "all" && task.priority !== filters.priority)
-        return false;
-      if (filters.categoryId !== "all" && task.category?.id !== filters.categoryId)
-        return false;
-      if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase()))
-        return false;
-      return true;
-    });
-  }, [tasks, filters]);
-  const handleToggle = async (task) => {
-    await toggleTask({
-      variables: { id: task.id, completed: !task.completed },
+  const [favoriteRecipe] = useMutation3(FAVORITE_RECIPE);
+  const recipes = data?.recipes ?? [];
+  const filtered = recipes.filter((recipe) => recipe.name.toLowerCase().includes(search.toLowerCase()));
+  const handleToggleFavorite = async (recipe) => {
+    await favoriteRecipe({
+      variables: { id: recipe.id, isFavorite: !recipe.isFavorite },
       optimisticResponse: {
-        toggleTask: {
-          __typename: "Task",
-          id: task.id,
-          completed: !task.completed
+        favoriteRecipe: {
+          __typename: "Recipe",
+          id: recipe.id,
+          isFavorite: !recipe.isFavorite
         }
-      },
-      update(cache) {
-        cache.modify({
-          fields: {
-            tasks(existing = []) {
-              return existing.map((ref) => ref.__ref?.endsWith(task.id) ? { ...ref, completed: !task.completed } : ref);
-            }
-          }
-        });
       }
     });
   };
-  const handleDelete = async (task) => {
-    await deleteTask({
-      variables: { id: task.id },
-      refetchQueries: [{ query: TASKS_QUERY, variables: { projectId } }]
-    });
-  };
-  return /* @__PURE__ */ jsxs4("div", {
-    className: "space-y-6",
+  return /* @__PURE__ */ jsxs7("div", {
+    className: "space-y-4",
     children: [
-      /* @__PURE__ */ jsx4(FilterBar, {
-        value: filters,
-        onChange: setFilters,
-        categories
-      }),
-      /* @__PURE__ */ jsx4(TaskForm, {
-        categories
+      /* @__PURE__ */ jsxs7("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsx8(LanguageSwitcher, {
+            locale,
+            onChange: setLocale
+          }),
+          /* @__PURE__ */ jsx8("input", {
+            type: "search",
+            placeholder: locale === "EN" ? "Search recipes" : "Rechercher des recettes",
+            className: "flex-1 rounded-full border border-border bg-card px-4 py-2 text-sm",
+            value: search,
+            onChange: (event) => setSearch(event.target.value)
+          })
+        ]
       }),
-      loading ? /* @__PURE__ */ jsx4("p", {
+      loading ? /* @__PURE__ */ jsx8("p", {
         className: "text-muted-foreground text-sm",
-        children: "Loading tasks\u2026"
-      }) : filtered.length ? /* @__PURE__ */ jsx4("div", {
-        className: "space-y-3",
-        children: filtered.map((task) => /* @__PURE__ */ jsx4(TaskItem, {
-          task,
-          onToggle: handleToggle,
-          onDelete: handleDelete
-        }, task.id))
-      }) : /* @__PURE__ */ jsx4("div", {
-        className: "border-border rounded-2xl border border-dashed p-8 text-center",
-        children: /* @__PURE__ */ jsx4("p", {
-          className: "text-muted-foreground",
-          children: "No tasks match your filters. Create one above."
-        })
+        children: "Loading recipes\u2026"
+      }) : /* @__PURE__ */ jsx8("div", {
+        className: "grid gap-4 md:grid-cols-3",
+        children: filtered.map((recipe) => /* @__PURE__ */ jsx8(RecipeCard, {
+          recipe,
+          onSelect: setSelected,
+          onToggleFavorite: handleToggleFavorite
+        }, recipe.id))
+      }),
+      /* @__PURE__ */ jsx8(RecipeDetail, {
+        recipe: selected
       })
     ]
   });
 }
-registerTemplateComponents("todos-app", {
-  list: TaskList,
-  detail: TaskList,
-  form: TaskForm
+registerTemplateComponents2("recipe-app-i18n", {
+  list: RecipeList,
+  detail: RecipeDetail
 });
-// src/components/templates/messaging/ConversationList.tsx
-import { useQuery as useQuery2 } from "@apollo/client/react";
-import { gql as gql3 } from "@apollo/client";
-import { MessageCircle, Users } from "lucide-react";
-import { useMemo as useMemo2 } from "react";
-import { useTemplateRuntime as useTemplateRuntime3 } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var CONVERSATIONS_QUERY = gql3`
-  query Conversations($projectId: ID!) {
-    conversations(projectId: $projectId) {
-      id
-      name
-      isGroup
-      updatedAt
-      participants {
-        id
-        userId
-        displayName
-      }
-    }
-  }
-`;
-function ConversationList({
-  selectedId,
-  onSelect
-}) {
-  const { projectId } = useTemplateRuntime3();
-  const { data, loading } = useQuery2(CONVERSATIONS_QUERY, {
-    variables: { projectId },
-    fetchPolicy: "cache-and-network"
-  });
-  const conversations = useMemo2(() => data?.conversations ?? [], [data]);
-  return /* @__PURE__ */ jsxs5("aside", {
-    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+// src/components/templates/todos/FilterBar.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function FilterBar({ value, onChange, categories }) {
+  const handleChange = (key, nextValue) => {
+    onChange({ ...value, [key]: nextValue });
+  };
+  return /* @__PURE__ */ jsxs8("div", {
+    className: "grid gap-3 rounded-2xl border border-border bg-card p-4 md:grid-cols-4",
     children: [
-      /* @__PURE__ */ jsxs5("header", {
-        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+      /* @__PURE__ */ jsxs8("label", {
+        className: "flex flex-col text-muted-foreground text-xs uppercase tracking-wide",
         children: [
-          /* @__PURE__ */ jsxs5("div", {
+          "Status",
+          /* @__PURE__ */ jsxs8("select", {
+            className: "mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground text-sm",
+            value: value.status,
+            onChange: (event) => handleChange("status", event.target.value),
             children: [
-              /* @__PURE__ */ jsx5("p", {
-                className: "text-sm font-semibold",
-                children: "Conversations"
+              /* @__PURE__ */ jsx9("option", {
+                value: "all",
+                children: "All tasks"
               }),
-              /* @__PURE__ */ jsx5("p", {
-                className: "text-muted-foreground text-xs",
-                children: loading ? "Loading\u2026" : `${conversations.length} active`
+              /* @__PURE__ */ jsx9("option", {
+                value: "active",
+                children: "Active"
+              }),
+              /* @__PURE__ */ jsx9("option", {
+                value: "completed",
+                children: "Completed"
               })
             ]
-          }),
-          /* @__PURE__ */ jsx5(Users, {
-            className: "text-muted-foreground h-4 w-4"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs5("div", {
-        className: "divide-border/70 divide-y",
+      /* @__PURE__ */ jsxs8("label", {
+        className: "flex flex-col text-muted-foreground text-xs uppercase tracking-wide",
         children: [
-          conversations.map((conversation) => {
-            const isSelected = selectedId === conversation.id;
-            return /* @__PURE__ */ jsxs5("button", {
-              type: "button",
-              className: `flex w-full flex-col items-start gap-1 px-4 py-3 text-left transition ${isSelected ? "text-foreground bg-violet-500/10" : "hover:bg-muted/40"}`,
-              onClick: () => onSelect?.(conversation.id),
-              children: [
-                /* @__PURE__ */ jsxs5("div", {
-                  className: "flex items-center gap-2",
-                  children: [
-                    /* @__PURE__ */ jsx5(MessageCircle, {
-                      className: "text-muted-foreground h-4 w-4"
-                    }),
-                    /* @__PURE__ */ jsx5("span", {
-                      className: "text-sm font-medium",
-                      children: conversation.name || "Untitled conversation"
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsx5("p", {
-                  className: "text-muted-foreground text-xs",
-                  children: conversation.participants.map((participant) => participant.displayName || participant.userId).join(" \xB7 ")
-                })
-              ]
-            }, conversation.id);
-          }),
-          !loading && conversations.length === 0 ? /* @__PURE__ */ jsx5("p", {
-            className: "text-muted-foreground p-4 text-center text-xs",
-            children: "No conversations yet."
-          }) : null
+          "Priority",
+          /* @__PURE__ */ jsxs8("select", {
+            className: "mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground text-sm",
+            value: value.priority,
+            onChange: (event) => handleChange("priority", event.target.value),
+            children: [
+              /* @__PURE__ */ jsx9("option", {
+                value: "all",
+                children: "All"
+              }),
+              /* @__PURE__ */ jsx9("option", {
+                value: "LOW",
+                children: "Low"
+              }),
+              /* @__PURE__ */ jsx9("option", {
+                value: "MEDIUM",
+                children: "Medium"
+              }),
+              /* @__PURE__ */ jsx9("option", {
+                value: "HIGH",
+                children: "High"
+              }),
+              /* @__PURE__ */ jsx9("option", {
+                value: "URGENT",
+                children: "Urgent"
+              })
+            ]
+          })
         ]
-      })
-    ]
-  });
-}
-
-// src/components/templates/messaging/MessageThread.tsx
-import { useMutation as useMutation3, useQuery as useQuery3 } from "@apollo/client/react";
-import { gql as gql4 } from "@apollo/client";
-import { useEffect, useRef } from "react";
-import { useTemplateRuntime as useTemplateRuntime4 } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-"use client";
-var MESSAGES_QUERY = gql4`
-  query Messages($conversationId: ID!) {
-    messages(conversationId: $conversationId, limit: 50) {
-      id
-      content
-      senderId
-      senderName
-      createdAt
-      status
-    }
-  }
-`;
-var SET_READ = gql4`
-  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 } = useQuery3(MESSAGES_QUERY, {
-    variables: { conversationId },
-    skip: !enabled,
-    fetchPolicy: "cache-and-network"
-  });
-  const [setRead] = useMutation3(SET_READ);
-  const { projectId } = useTemplateRuntime4();
-  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__ */ jsx6("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
-      children: /* @__PURE__ */ jsx6("p", {
-        className: "text-muted-foreground text-sm",
-        children: "Select a conversation"
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx6("div", {
-    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
-    children: /* @__PURE__ */ jsx6("div", {
-      ref: scrollRef,
-      className: "flex-1 space-y-3 overflow-y-auto p-4",
-      children: loading ? /* @__PURE__ */ jsx6("p", {
-        className: "text-muted-foreground text-center text-sm",
-        children: "Loading\u2026"
-      }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs6("div", {
-        className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
+      }),
+      /* @__PURE__ */ jsxs8("label", {
+        className: "flex flex-col text-muted-foreground text-xs uppercase tracking-wide",
         children: [
-          /* @__PURE__ */ jsx6("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__ */ jsx6("p", {
-              children: message.content
-            })
-          }),
-          /* @__PURE__ */ jsxs6("span", {
-            className: "text-muted-foreground mt-1 text-xs",
+          "Category",
+          /* @__PURE__ */ jsxs8("select", {
+            className: "mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground text-sm",
+            value: value.categoryId,
+            onChange: (event) => handleChange("categoryId", event.target.value),
             children: [
-              message.senderName || message.senderId,
-              " \xB7",
-              " ",
-              new Date(message.createdAt).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit"
-              })
+              /* @__PURE__ */ jsx9("option", {
+                value: "all",
+                children: "All categories"
+              }),
+              categories.map((category) => /* @__PURE__ */ jsx9("option", {
+                value: category.id,
+                children: category.name
+              }, category.id))
             ]
           })
         ]
-      }, message.id))
-    })
+      }),
+      /* @__PURE__ */ jsxs8("label", {
+        className: "flex flex-col text-muted-foreground text-xs uppercase tracking-wide",
+        children: [
+          "Search",
+          /* @__PURE__ */ jsx9("input", {
+            type: "search",
+            className: "mt-1 rounded-md border border-border bg-background px-3 py-2 text-foreground text-sm",
+            placeholder: "Search by title",
+            value: value.search,
+            onChange: (event) => handleChange("search", event.target.value)
+          })
+        ]
+      })
+    ]
   });
 }
 
-// src/components/templates/messaging/MessageComposer.tsx
-import { useState as useState3 } from "react";
-import { useMutation as useMutation4 } from "@apollo/client/react";
+// src/components/templates/todos/TaskForm.tsx
 import { gql as gql5 } from "@apollo/client";
-import { Send } from "lucide-react";
+import { useMutation as useMutation4 } from "@apollo/client/react";
 import { useTemplateRuntime as useTemplateRuntime5 } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useState as useState4 } from "react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 "use client";
-var SEND_MESSAGE = gql5`
-  mutation SendMessage($input: SendMessageInput!) {
-    sendMessage(input: $input) {
+var CREATE_TASK = gql5`
+  mutation CreateTask($input: CreateTaskInput!) {
+    createTask(input: $input) {
       id
+      title
     }
   }
 `;
-function MessageComposer({
-  conversationId,
-  viewerId = "local-user",
-  viewerName = "You"
-}) {
+function TaskForm({ categories }) {
   const { projectId } = useTemplateRuntime5();
-  const [content, setContent] = useState3("");
-  const [sendMessage, { loading }] = useMutation4(SEND_MESSAGE);
+  const [title, setTitle] = useState4("");
+  const [description, setDescription] = useState4("");
+  const [priority, setPriority] = useState4("MEDIUM");
+  const [categoryId, setCategoryId] = useState4("none");
+  const [tagsInput, setTagsInput] = useState4("");
+  const [createTask, { loading }] = useMutation4(CREATE_TASK);
   const handleSubmit = async (event) => {
     event.preventDefault();
-    if (!conversationId || !content.trim())
+    if (!title.trim())
       return;
-    await sendMessage({
+    await createTask({
       variables: {
         input: {
           projectId,
-          conversationId,
-          senderId: viewerId,
-          senderName: viewerName,
-          content: content.trim()
+          title: title.trim(),
+          description: description.trim() || undefined,
+          priority,
+          categoryId: categoryId === "none" ? undefined : categoryId,
+          tags: parseTags(tagsInput)
         }
       },
-      refetchQueries: [
-        {
-          query: MESSAGES_QUERY,
-          variables: { conversationId }
-        }
-      ]
+      refetchQueries: ["Tasks"],
+      awaitRefetchQueries: true
     });
-    setContent("");
+    setTitle("");
+    setDescription("");
+    setPriority("MEDIUM");
+    setCategoryId("none");
+    setTagsInput("");
   };
-  return /* @__PURE__ */ jsxs7("form", {
+  return /* @__PURE__ */ jsxs9("form", {
     onSubmit: handleSubmit,
-    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+    className: "space-y-3 rounded-2xl border border-border bg-background/60 p-4",
     children: [
-      /* @__PURE__ */ jsx7("input", {
-        type: "text",
-        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
-        placeholder: conversationId ? "Type a message\u2026" : "Select a conversation to start",
-        disabled: !conversationId || loading,
-        value: content,
-        onChange: (event) => setContent(event.target.value)
-      }),
-      /* @__PURE__ */ jsxs7("button", {
-        type: "submit",
-        className: "btn-primary inline-flex items-center gap-1 text-sm",
-        disabled: !conversationId || loading || !content.trim(),
-        children: [
-          /* @__PURE__ */ jsx7(Send, {
-            className: "h-4 w-4"
-          }),
-          "Send"
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/templates/messaging/MessagingWorkspace.tsx
-import { useState as useState4 } from "react";
-import { registerTemplateComponents as registerTemplateComponents2 } from "@contractspec/lib.example-shared-ui";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-"use client";
-function MessagingWorkspace() {
-  const [conversationId, setConversationId] = useState4();
-  return /* @__PURE__ */ jsxs8("div", {
-    className: "grid gap-4 md:grid-cols-[280px,1fr]",
-    children: [
-      /* @__PURE__ */ jsx8(ConversationList, {
-        selectedId: conversationId,
-        onSelect: setConversationId
+      /* @__PURE__ */ jsx10("div", {
+        children: /* @__PURE__ */ jsxs9("label", {
+          className: "font-semibold text-muted-foreground text-xs uppercase",
+          children: [
+            "Title",
+            /* @__PURE__ */ jsx10("input", {
+              type: "text",
+              className: "mt-1 w-full rounded-md border border-border bg-card px-3 py-2 text-sm",
+              placeholder: "What needs to get done?",
+              value: title,
+              onChange: (event) => setTitle(event.target.value),
+              required: true
+            })
+          ]
+        })
       }),
-      /* @__PURE__ */ jsxs8("div", {
-        className: "flex flex-col gap-3",
-        children: [
-          /* @__PURE__ */ jsx8(MessageThread, {
-            conversationId
-          }),
-          /* @__PURE__ */ jsx8(MessageComposer, {
-            conversationId
-          })
-        ]
-      })
-    ]
-  });
-}
-registerTemplateComponents2("messaging-app", {
-  list: MessagingWorkspace,
-  detail: MessageThread,
-  form: MessageComposer
-});
-// src/components/templates/recipes/LanguageSwitcher.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-function LanguageSwitcher({ locale, onChange }) {
-  return /* @__PURE__ */ jsx9("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__ */ jsx9("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\xE7ais"
-    }, language))
-  });
-}
-
-// src/components/templates/recipes/RecipeCard.tsx
-import { Heart } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-function RecipeCard({
-  recipe,
-  onSelect,
-  onToggleFavorite
-}) {
-  return /* @__PURE__ */ jsxs9("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__ */ jsx10("img", {
-        src: recipe.heroImageUrl,
-        alt: recipe.name,
-        className: "h-40 w-full rounded-t-2xl object-cover"
-      }) : /* @__PURE__ */ jsx10("div", {
-        className: "bg-muted h-40 rounded-t-2xl"
+      /* @__PURE__ */ jsx10("div", {
+        children: /* @__PURE__ */ jsxs9("label", {
+          className: "font-semibold text-muted-foreground text-xs uppercase",
+          children: [
+            "Description",
+            /* @__PURE__ */ jsx10("textarea", {
+              className: "mt-1 w-full rounded-md border border-border bg-card px-3 py-2 text-sm",
+              rows: 3,
+              placeholder: "Add context or policy notes",
+              value: description,
+              onChange: (event) => setDescription(event.target.value)
+            })
+          ]
+        })
       }),
       /* @__PURE__ */ jsxs9("div", {
-        className: "space-y-2 p-4",
+        className: "grid gap-3 md:grid-cols-3",
         children: [
-          /* @__PURE__ */ jsxs9("div", {
-            className: "flex items-center justify-between",
+          /* @__PURE__ */ jsxs9("label", {
+            className: "font-semibold text-muted-foreground text-xs uppercase",
             children: [
-              /* @__PURE__ */ jsx10("p", {
-                className: "text-base font-semibold",
-                children: recipe.name
-              }),
-              /* @__PURE__ */ jsx10("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__ */ jsx10(Heart, {
-                  className: `h-4 w-4 ${recipe.isFavorite ? "fill-red-400" : ""}`
-                })
+              "Priority",
+              /* @__PURE__ */ jsxs9("select", {
+                className: "mt-1 w-full rounded-md border border-border bg-card px-3 py-2 text-sm",
+                value: priority,
+                onChange: (event) => setPriority(event.target.value),
+                children: [
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "LOW",
+                    children: "Low"
+                  }),
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "MEDIUM",
+                    children: "Medium"
+                  }),
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "HIGH",
+                    children: "High"
+                  }),
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "URGENT",
+                    children: "Urgent"
+                  })
+                ]
               })
-            ]
-          }),
-          /* @__PURE__ */ jsx10("p", {
-            className: "text-muted-foreground line-clamp-2 text-sm",
-            children: recipe.description
+            ]
           }),
-          /* @__PURE__ */ jsxs9("div", {
-            className: "text-muted-foreground flex flex-wrap gap-3 text-xs",
+          /* @__PURE__ */ jsxs9("label", {
+            className: "font-semibold text-muted-foreground text-xs uppercase",
             children: [
-              recipe.prepTimeMinutes ? /* @__PURE__ */ jsxs9("span", {
-                children: [
-                  "Prep ",
-                  recipe.prepTimeMinutes,
-                  "m"
-                ]
-              }) : null,
-              recipe.cookTimeMinutes ? /* @__PURE__ */ jsxs9("span", {
-                children: [
-                  "Cook ",
-                  recipe.cookTimeMinutes,
-                  "m"
-                ]
-              }) : null,
-              recipe.servings ? /* @__PURE__ */ jsxs9("span", {
+              "Category",
+              /* @__PURE__ */ jsxs9("select", {
+                className: "mt-1 w-full rounded-md border border-border bg-card px-3 py-2 text-sm",
+                value: categoryId,
+                onChange: (event) => setCategoryId(event.target.value),
                 children: [
-                  recipe.servings,
-                  " servings"
+                  /* @__PURE__ */ jsx10("option", {
+                    value: "none",
+                    children: "None"
+                  }),
+                  categories.map((category) => /* @__PURE__ */ jsx10("option", {
+                    value: category.id,
+                    children: category.name
+                  }, category.id))
                 ]
-              }) : null
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxs9("label", {
+            className: "font-semibold text-muted-foreground text-xs uppercase",
+            children: [
+              "Tags",
+              /* @__PURE__ */ jsx10("input", {
+                className: "mt-1 w-full rounded-md border border-border bg-card px-3 py-2 text-sm",
+                placeholder: "Comma separated (optional)",
+                value: tagsInput,
+                onChange: (event) => setTagsInput(event.target.value)
+              })
             ]
           })
         ]
+      }),
+      /* @__PURE__ */ jsx10("button", {
+        type: "submit",
+        className: "btn-primary w-full py-2 font-semibold text-sm",
+        disabled: loading,
+        children: loading ? "Saving..." : "Add task"
       })
     ]
   });
 }
+function parseTags(input) {
+  return input.split(",").map((tag) => tag.trim()).filter(Boolean);
+}
 
-// src/components/templates/recipes/RecipeDetail.tsx
-import { BookOpen } from "lucide-react";
+// src/components/templates/todos/TaskItem.tsx
+import { Check, Circle, Trash2 } from "lucide-react";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
-function RecipeDetail({ recipe }) {
-  if (!recipe) {
-    return /* @__PURE__ */ jsx11("div", {
-      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
-      children: /* @__PURE__ */ jsx11("p", {
-        className: "text-muted-foreground text-sm",
-        children: "Select a recipe to view details."
-      })
-    });
-  }
-  return /* @__PURE__ */ jsxs10("article", {
-    className: "border-border bg-card space-y-4 rounded-2xl border p-6",
+function TaskItem({ task, onToggle, onDelete }) {
+  const badgeColor = task.priority === "URGENT" ? "text-red-200 bg-red-500/10 border-red-500/40" : task.priority === "HIGH" ? "text-amber-200 bg-amber-500/10 border-amber-500/40" : task.priority === "LOW" ? "text-emerald-200 bg-emerald-500/10 border-emerald-500/40" : "text-violet-200 bg-violet-500/10 border-violet-500/40";
+  return /* @__PURE__ */ jsxs10("div", {
+    className: "flex items-start gap-4 rounded-2xl border border-border/70 bg-card/60 p-4 transition hover:border-border",
     children: [
-      /* @__PURE__ */ jsxs10("header", {
-        className: "flex flex-wrap items-center gap-3",
+      /* @__PURE__ */ jsx11("button", {
+        type: "button",
+        className: "rounded-full border border-border p-2 text-muted-foreground hover:bg-muted/40",
+        "aria-pressed": task.completed,
+        onClick: () => onToggle?.(task),
+        children: task.completed ? /* @__PURE__ */ jsx11(Check, {
+          className: "h-4 w-4 text-emerald-400"
+        }) : /* @__PURE__ */ jsx11(Circle, {
+          className: "h-4 w-4"
+        })
+      }),
+      /* @__PURE__ */ jsxs10("div", {
+        className: "flex-1 space-y-2",
         children: [
-          /* @__PURE__ */ jsx11(BookOpen, {
-            className: "text-muted-foreground h-5 w-5"
-          }),
           /* @__PURE__ */ jsxs10("div", {
+            className: "flex flex-wrap items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx11("h2", {
-                className: "text-xl font-semibold",
-                children: recipe.name
-              }),
               /* @__PURE__ */ jsx11("p", {
-                className: "text-muted-foreground text-sm",
-                children: recipe.description
-              })
+                className: `font-medium ${task.completed ? "text-muted-foreground line-through" : "text-foreground"}`,
+                children: task.title
+              }),
+              /* @__PURE__ */ jsx11("span", {
+                className: `rounded-full border px-2 py-0.5 text-xs ${badgeColor}`,
+                children: task.priority.charAt(0) + task.priority.slice(1).toLowerCase()
+              }),
+              task.category ? /* @__PURE__ */ jsx11("span", {
+                className: "rounded-full bg-muted/40 px-2 py-0.5 text-muted-foreground text-xs",
+                children: task.category.name
+              }) : null,
+              task.dueDate ? /* @__PURE__ */ jsxs10("span", {
+                className: "text-muted-foreground text-xs",
+                children: [
+                  "Due ",
+                  new Date(task.dueDate).toLocaleDateString()
+                ]
+              }) : null
             ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs10("section", {
-        children: [
-          /* @__PURE__ */ jsx11("h3", {
-            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
-            children: "Ingredients"
           }),
-          /* @__PURE__ */ jsx11("ul", {
-            className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
-            children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxs10("li", {
+          task.description ? /* @__PURE__ */ jsx11("p", {
+            className: "text-muted-foreground text-sm",
+            children: task.description
+          }) : null,
+          task.tags.length ? /* @__PURE__ */ jsx11("div", {
+            className: "flex flex-wrap gap-1",
+            children: task.tags.map((tag) => /* @__PURE__ */ jsxs10("span", {
+              className: "rounded-full bg-muted/40 px-2 py-0.5 text-muted-foreground text-xs",
               children: [
-                ingredient.name,
-                " \u2013 ",
-                ingredient.quantity
+                "#",
+                tag
               ]
-            }, ingredient.id))
-          })
+            }, tag))
+          }) : null
         ]
       }),
-      /* @__PURE__ */ jsxs10("section", {
-        children: [
-          /* @__PURE__ */ jsx11("h3", {
-            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
-            children: "Instructions"
-          }),
-          /* @__PURE__ */ jsx11("ol", {
-            className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
-            children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsx11("li", {
-              children: instruction.content
-            }, instruction.id))
-          })
-        ]
+      /* @__PURE__ */ jsx11("button", {
+        type: "button",
+        className: "text-muted-foreground hover:text-destructive",
+        "aria-label": `Delete ${task.title}`,
+        onClick: () => onDelete?.(task),
+        children: /* @__PURE__ */ jsx11(Trash2, {
+          className: "h-4 w-4"
+        })
       })
     ]
   });
 }
 
-// src/components/templates/recipes/RecipeList.tsx
-import { useState as useState5 } from "react";
-import { useMutation as useMutation5, useQuery as useQuery4 } from "@apollo/client/react";
+// src/components/templates/todos/TaskList.tsx
 import { gql as gql6 } from "@apollo/client";
+import { useMutation as useMutation5, useQuery as useQuery4 } from "@apollo/client/react";
 import {
   registerTemplateComponents as registerTemplateComponents3,
   useTemplateRuntime as useTemplateRuntime6
 } from "@contractspec/lib.example-shared-ui";
+import { useMemo as useMemo2, useState as useState5 } from "react";
 import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 "use client";
-var RECIPES_QUERY = gql6`
-  query Recipes($projectId: ID!, $locale: RecipeLocale!) {
-    recipes(projectId: $projectId, locale: $locale) {
+var TASKS_QUERY = gql6`
+  query Tasks($projectId: ID!) {
+    taskCategories(projectId: $projectId) {
       id
       name
+      color
+    }
+    tasks(projectId: $projectId) {
+      id
+      title
       description
-      heroImageUrl
-      prepTimeMinutes
-      cookTimeMinutes
-      servings
-      isFavorite
-      locale
+      completed
+      priority
+      dueDate
+      tags
       category {
-        id
-        nameEn
-        nameFr
-      }
-      ingredients {
         id
         name
-        quantity
-      }
-      instructions {
-        id
-        content
-        ordering
+        color
       }
     }
   }
 `;
-var FAVORITE_RECIPE = gql6`
-  mutation FavoriteRecipe($id: ID!, $isFavorite: Boolean!) {
-    favoriteRecipe(id: $id, isFavorite: $isFavorite) {
+var TOGGLE_TASK = gql6`
+  mutation ToggleTask($id: ID!, $completed: Boolean!) {
+    toggleTask(id: $id, completed: $completed) {
       id
-      isFavorite
+      completed
     }
   }
 `;
-function RecipeList() {
+var DELETE_TASK = gql6`
+  mutation DeleteTask($id: ID!) {
+    deleteTask(id: $id)
+  }
+`;
+function TaskList() {
   const { projectId } = useTemplateRuntime6();
-  const [locale, setLocale] = useState5("EN");
-  const [selected, setSelected] = useState5();
-  const [search, setSearch] = useState5("");
-  const { data, loading } = useQuery4(RECIPES_QUERY, {
-    variables: { projectId, locale },
+  const [filters, setFilters] = useState5({
+    status: "all",
+    priority: "all",
+    categoryId: "all",
+    search: ""
+  });
+  const { data, loading } = useQuery4(TASKS_QUERY, {
+    variables: { projectId },
     fetchPolicy: "cache-and-network"
   });
-  const [favoriteRecipe] = useMutation5(FAVORITE_RECIPE);
-  const recipes = data?.recipes ?? [];
-  const filtered = recipes.filter((recipe) => recipe.name.toLowerCase().includes(search.toLowerCase()));
-  const handleToggleFavorite = async (recipe) => {
-    await favoriteRecipe({
-      variables: { id: recipe.id, isFavorite: !recipe.isFavorite },
+  const [toggleTask] = useMutation5(TOGGLE_TASK);
+  const [deleteTask] = useMutation5(DELETE_TASK);
+  const categories = data?.taskCategories ?? [];
+  const tasks = data?.tasks ?? [];
+  const filtered = useMemo2(() => {
+    return tasks.filter((task) => {
+      if (filters.status === "active" && task.completed)
+        return false;
+      if (filters.status === "completed" && !task.completed)
+        return false;
+      if (filters.priority !== "all" && task.priority !== filters.priority)
+        return false;
+      if (filters.categoryId !== "all" && task.category?.id !== filters.categoryId)
+        return false;
+      if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase()))
+        return false;
+      return true;
+    });
+  }, [tasks, filters]);
+  const handleToggle = async (task) => {
+    await toggleTask({
+      variables: { id: task.id, completed: !task.completed },
       optimisticResponse: {
-        favoriteRecipe: {
-          __typename: "Recipe",
-          id: recipe.id,
-          isFavorite: !recipe.isFavorite
+        toggleTask: {
+          __typename: "Task",
+          id: task.id,
+          completed: !task.completed
         }
+      },
+      update(cache) {
+        cache.modify({
+          fields: {
+            tasks(existing = []) {
+              return existing.map((ref) => ref.__ref?.endsWith(task.id) ? { ...ref, completed: !task.completed } : ref);
+            }
+          }
+        });
       }
     });
   };
+  const handleDelete = async (task) => {
+    await deleteTask({
+      variables: { id: task.id },
+      refetchQueries: [{ query: TASKS_QUERY, variables: { projectId } }]
+    });
+  };
   return /* @__PURE__ */ jsxs11("div", {
-    className: "space-y-4",
+    className: "space-y-6",
     children: [
-      /* @__PURE__ */ jsxs11("div", {
-        className: "flex flex-wrap items-center gap-3",
-        children: [
-          /* @__PURE__ */ jsx12(LanguageSwitcher, {
-            locale,
-            onChange: setLocale
-          }),
-          /* @__PURE__ */ jsx12("input", {
-            type: "search",
-            placeholder: locale === "EN" ? "Search recipes" : "Rechercher des recettes",
-            className: "border-border bg-card flex-1 rounded-full border px-4 py-2 text-sm",
-            value: search,
-            onChange: (event) => setSearch(event.target.value)
-          })
-        ]
+      /* @__PURE__ */ jsx12(FilterBar, {
+        value: filters,
+        onChange: setFilters,
+        categories
+      }),
+      /* @__PURE__ */ jsx12(TaskForm, {
+        categories
       }),
       loading ? /* @__PURE__ */ jsx12("p", {
         className: "text-muted-foreground text-sm",
-        children: "Loading recipes\u2026"
+        children: "Loading tasks\u2026"
+      }) : filtered.length ? /* @__PURE__ */ jsx12("div", {
+        className: "space-y-3",
+        children: filtered.map((task) => /* @__PURE__ */ jsx12(TaskItem, {
+          task,
+          onToggle: handleToggle,
+          onDelete: handleDelete
+        }, task.id))
       }) : /* @__PURE__ */ jsx12("div", {
-        className: "grid gap-4 md:grid-cols-3",
-        children: filtered.map((recipe) => /* @__PURE__ */ jsx12(RecipeCard, {
-          recipe,
-          onSelect: setSelected,
-          onToggleFavorite: handleToggleFavorite
-        }, recipe.id))
-      }),
-      /* @__PURE__ */ jsx12(RecipeDetail, {
-        recipe: selected
+        className: "rounded-2xl border border-border border-dashed p-8 text-center",
+        children: /* @__PURE__ */ jsx12("p", {
+          className: "text-muted-foreground",
+          children: "No tasks match your filters. Create one above."
+        })
       })
     ]
   });
 }
-registerTemplateComponents3("recipe-app-i18n", {
-  list: RecipeList,
-  detail: RecipeDetail
+registerTemplateComponents3("todos-app", {
+  list: TaskList,
+  detail: TaskList,
+  form: TaskForm
 });
 export {
   TaskList,