@contractspec/bundle.library 1.12.0 → 1.14.0

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

@@ -0,0 +1,1066 @@
+// src/components/templates/todos/FilterBar.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+function FilterBar({ value, onChange, categories }) {
+  const handleChange = (key, nextValue) => {
+    onChange({ ...value, [key]: nextValue });
+  };
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "border-border bg-card grid gap-3 rounded-2xl border p-4 md:grid-cols-4",
+    children: [
+      /* @__PURE__ */ jsxDEV("label", {
+        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+        children: [
+          "Status",
+          /* @__PURE__ */ jsxDEV("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),
+            children: [
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "all",
+                children: "All tasks"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "active",
+                children: "Active"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "completed",
+                children: "Completed"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("label", {
+        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+        children: [
+          "Priority",
+          /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("option", {
+                value: "all",
+                children: "All"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "LOW",
+                children: "Low"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "MEDIUM",
+                children: "Medium"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "HIGH",
+                children: "High"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "URGENT",
+                children: "Urgent"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("label", {
+        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+        children: [
+          "Category",
+          /* @__PURE__ */ jsxDEV("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),
+            children: [
+              /* @__PURE__ */ jsxDEV("option", {
+                value: "all",
+                children: "All categories"
+              }, undefined, false, undefined, this),
+              categories.map((category) => /* @__PURE__ */ jsxDEV("option", {
+                value: category.id,
+                children: category.name
+              }, category.id, false, undefined, this))
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("label", {
+        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
+        children: [
+          "Search",
+          /* @__PURE__ */ jsxDEV("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)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/todos/TaskForm.tsx
+import { useState } from "react";
+import { useMutation } from "@apollo/client/react";
+import { gql } from "@apollo/client";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var CREATE_TASK = gql`
+  mutation CreateTask($input: CreateTaskInput!) {
+    createTask(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);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!title.trim())
+      return;
+    await createTask({
+      variables: {
+        input: {
+          projectId,
+          title: title.trim(),
+          description: description.trim() || undefined,
+          priority,
+          categoryId: categoryId === "none" ? undefined : categoryId,
+          tags: parseTags(tagsInput)
+        }
+      },
+      refetchQueries: ["Tasks"],
+      awaitRefetchQueries: true
+    });
+    setTitle("");
+    setDescription("");
+    setPriority("MEDIUM");
+    setCategoryId("none");
+    setTagsInput("");
+  };
+  return /* @__PURE__ */ jsxDEV2("form", {
+    onSubmit: handleSubmit,
+    className: "border-border bg-background/60 space-y-3 rounded-2xl border p-4",
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        children: /* @__PURE__ */ jsxDEV2("label", {
+          className: "text-muted-foreground text-xs font-semibold uppercase",
+          children: [
+            "Title",
+            /* @__PURE__ */ jsxDEV2("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
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        children: /* @__PURE__ */ jsxDEV2("label", {
+          className: "text-muted-foreground text-xs font-semibold uppercase",
+          children: [
+            "Description",
+            /* @__PURE__ */ jsxDEV2("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)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "grid gap-3 md:grid-cols-3",
+        children: [
+          /* @__PURE__ */ jsxDEV2("label", {
+            className: "text-muted-foreground text-xs font-semibold uppercase",
+            children: [
+              "Priority",
+              /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("option", {
+                    value: "LOW",
+                    children: "Low"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("option", {
+                    value: "MEDIUM",
+                    children: "Medium"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("option", {
+                    value: "HIGH",
+                    children: "High"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("option", {
+                    value: "URGENT",
+                    children: "Urgent"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("label", {
+            className: "text-muted-foreground text-xs font-semibold uppercase",
+            children: [
+              "Category",
+              /* @__PURE__ */ jsxDEV2("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__ */ jsxDEV2("option", {
+                    value: "none",
+                    children: "None"
+                  }, undefined, false, undefined, this),
+                  categories.map((category) => /* @__PURE__ */ jsxDEV2("option", {
+                    value: category.id,
+                    children: category.name
+                  }, category.id, false, undefined, this))
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV2("label", {
+            className: "text-muted-foreground text-xs font-semibold uppercase",
+            children: [
+              "Tags",
+              /* @__PURE__ */ jsxDEV2("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)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("button", {
+        type: "submit",
+        className: "btn-primary w-full py-2 text-sm font-semibold",
+        disabled: loading,
+        children: loading ? "Saving..." : "Add task"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function parseTags(input) {
+  return input.split(",").map((tag) => tag.trim()).filter(Boolean);
+}
+
+// src/components/templates/todos/TaskItem.tsx
+import { Check, Circle, Trash2 } from "lucide-react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-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__ */ jsxDEV3("div", {
+    className: "border-border/70 bg-card/60 hover:border-border flex items-start gap-4 rounded-2xl border p-4 transition",
+    children: [
+      /* @__PURE__ */ jsxDEV3("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__ */ jsxDEV3(Check, {
+          className: "h-4 w-4 text-emerald-400"
+        }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV3(Circle, {
+          className: "h-4 w-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex-1 space-y-2",
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex flex-wrap items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsxDEV3("p", {
+                className: `font-medium ${task.completed ? "text-muted-foreground line-through" : "text-foreground"}`,
+                children: task.title
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV3("span", {
+                className: `rounded-full border px-2 py-0.5 text-xs ${badgeColor}`,
+                children: task.priority.charAt(0) + task.priority.slice(1).toLowerCase()
+              }, undefined, false, undefined, this),
+              task.category ? /* @__PURE__ */ jsxDEV3("span", {
+                className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+                children: task.category.name
+              }, undefined, false, undefined, this) : null,
+              task.dueDate ? /* @__PURE__ */ jsxDEV3("span", {
+                className: "text-muted-foreground text-xs",
+                children: [
+                  "Due ",
+                  new Date(task.dueDate).toLocaleDateString()
+                ]
+              }, undefined, true, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this),
+          task.description ? /* @__PURE__ */ jsxDEV3("p", {
+            className: "text-muted-foreground text-sm",
+            children: task.description
+          }, undefined, false, undefined, this) : null,
+          task.tags.length ? /* @__PURE__ */ jsxDEV3("div", {
+            className: "flex flex-wrap gap-1",
+            children: task.tags.map((tag) => /* @__PURE__ */ jsxDEV3("span", {
+              className: "bg-muted/40 text-muted-foreground rounded-full px-2 py-0.5 text-xs",
+              children: [
+                "#",
+                tag
+              ]
+            }, tag, true, undefined, this))
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("button", {
+        type: "button",
+        className: "text-muted-foreground hover:text-destructive",
+        "aria-label": `Delete ${task.title}`,
+        onClick: () => onDelete?.(task),
+        children: /* @__PURE__ */ jsxDEV3(Trash2, {
+          className: "h-4 w-4"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// 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";
+import {
+  registerTemplateComponents,
+  useTemplateRuntime as useTemplateRuntime2
+} from "@contractspec/lib.example-shared-ui";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+var TASKS_QUERY = gql2`
+  query Tasks($projectId: ID!) {
+    taskCategories(projectId: $projectId) {
+      id
+      name
+      color
+    }
+    tasks(projectId: $projectId) {
+      id
+      title
+      description
+      completed
+      priority
+      dueDate
+      tags
+      category {
+        id
+        name
+        color
+      }
+    }
+  }
+`;
+var TOGGLE_TASK = gql2`
+  mutation ToggleTask($id: ID!, $completed: Boolean!) {
+    toggleTask(id: $id, completed: $completed) {
+      id
+      completed
+    }
+  }
+`;
+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 },
+    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 },
+      optimisticResponse: {
+        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__ */ jsxDEV4("div", {
+    className: "space-y-6",
+    children: [
+      /* @__PURE__ */ jsxDEV4(FilterBar, {
+        value: filters,
+        onChange: setFilters,
+        categories
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4(TaskForm, {
+        categories
+      }, undefined, false, undefined, this),
+      loading ? /* @__PURE__ */ jsxDEV4("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Loading tasks…"
+      }, undefined, false, undefined, this) : filtered.length ? /* @__PURE__ */ jsxDEV4("div", {
+        className: "space-y-3",
+        children: filtered.map((task) => /* @__PURE__ */ jsxDEV4(TaskItem, {
+          task,
+          onToggle: handleToggle,
+          onDelete: handleDelete
+        }, task.id, false, undefined, this))
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV4("div", {
+        className: "border-border rounded-2xl border border-dashed p-8 text-center",
+        children: /* @__PURE__ */ jsxDEV4("p", {
+          className: "text-muted-foreground",
+          children: "No tasks match your filters. Create one above."
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+registerTemplateComponents("todos-app", {
+  list: TaskList,
+  detail: TaskList,
+  form: TaskForm
+});
+// 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 { jsxDEV as jsxDEV5 } from "react/jsx-dev-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__ */ jsxDEV5("aside", {
+    className: "border-border bg-card h-full overflow-y-auto rounded-2xl border",
+    children: [
+      /* @__PURE__ */ jsxDEV5("header", {
+        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-sm font-semibold",
+                children: "Conversations"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV5("p", {
+                className: "text-muted-foreground text-xs",
+                children: loading ? "Loading…" : `${conversations.length} active`
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV5(Users, {
+            className: "text-muted-foreground h-4 w-4"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "divide-border/70 divide-y",
+        children: [
+          conversations.map((conversation) => {
+            const isSelected = selectedId === conversation.id;
+            return /* @__PURE__ */ jsxDEV5("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__ */ jsxDEV5("div", {
+                  className: "flex items-center gap-2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV5(MessageCircle, {
+                      className: "text-muted-foreground h-4 w-4"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV5("span", {
+                      className: "text-sm font-medium",
+                      children: conversation.name || "Untitled conversation"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this),
+                /* @__PURE__ */ jsxDEV5("p", {
+                  className: "text-muted-foreground text-xs",
+                  children: conversation.participants.map((participant) => participant.displayName || participant.userId).join(" · ")
+                }, undefined, false, undefined, this)
+              ]
+            }, conversation.id, true, undefined, this);
+          }),
+          !loading && conversations.length === 0 ? /* @__PURE__ */ jsxDEV5("p", {
+            className: "text-muted-foreground p-4 text-center text-xs",
+            children: "No conversations yet."
+          }, undefined, false, undefined, this) : null
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// 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 { jsxDEV as jsxDEV6 } from "react/jsx-dev-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__ */ jsxDEV6("div", {
+      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      children: /* @__PURE__ */ jsxDEV6("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Select a conversation"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "border-border bg-card flex flex-1 flex-col rounded-2xl border",
+    children: /* @__PURE__ */ jsxDEV6("div", {
+      ref: scrollRef,
+      className: "flex-1 space-y-3 overflow-y-auto p-4",
+      children: loading ? /* @__PURE__ */ jsxDEV6("p", {
+        className: "text-muted-foreground text-center text-sm",
+        children: "Loading…"
+      }, undefined, false, undefined, this) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxDEV6("div", {
+        className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
+        children: [
+          /* @__PURE__ */ jsxDEV6("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__ */ jsxDEV6("p", {
+              children: message.content
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV6("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"
+              })
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, message.id, true, undefined, this))
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/messaging/MessageComposer.tsx
+import { useState as useState3 } from "react";
+import { useMutation as useMutation4 } from "@apollo/client/react";
+import { gql as gql5 } from "@apollo/client";
+import { Send } from "lucide-react";
+import { useTemplateRuntime as useTemplateRuntime5 } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV as jsxDEV7 } from "react/jsx-dev-runtime";
+"use client";
+var SEND_MESSAGE = gql5`
+  mutation SendMessage($input: SendMessageInput!) {
+    sendMessage(input: $input) {
+      id
+    }
+  }
+`;
+function MessageComposer({
+  conversationId,
+  viewerId = "local-user",
+  viewerName = "You"
+}) {
+  const { projectId } = useTemplateRuntime5();
+  const [content, setContent] = useState3("");
+  const [sendMessage, { loading }] = useMutation4(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__ */ jsxDEV7("form", {
+    onSubmit: handleSubmit,
+    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
+    children: [
+      /* @__PURE__ */ jsxDEV7("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)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV7("button", {
+        type: "submit",
+        className: "btn-primary inline-flex items-center gap-1 text-sm",
+        disabled: !conversationId || loading || !content.trim(),
+        children: [
+          /* @__PURE__ */ jsxDEV7(Send, {
+            className: "h-4 w-4"
+          }, undefined, false, undefined, this),
+          "Send"
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/messaging/MessagingWorkspace.tsx
+import { useState as useState4 } from "react";
+import { registerTemplateComponents as registerTemplateComponents2 } from "@contractspec/lib.example-shared-ui";
+import { jsxDEV as jsxDEV8 } from "react/jsx-dev-runtime";
+"use client";
+function MessagingWorkspace() {
+  const [conversationId, setConversationId] = useState4();
+  return /* @__PURE__ */ jsxDEV8("div", {
+    className: "grid gap-4 md:grid-cols-[280px,1fr]",
+    children: [
+      /* @__PURE__ */ jsxDEV8(ConversationList, {
+        selectedId: conversationId,
+        onSelect: setConversationId
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV8("div", {
+        className: "flex flex-col gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV8(MessageThread, {
+            conversationId
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV8(MessageComposer, {
+            conversationId
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+registerTemplateComponents2("messaging-app", {
+  list: MessagingWorkspace,
+  detail: MessageThread,
+  form: MessageComposer
+});
+// src/components/templates/recipes/LanguageSwitcher.tsx
+import { jsxDEV as jsxDEV9 } from "react/jsx-dev-runtime";
+function LanguageSwitcher({ locale, onChange }) {
+  return /* @__PURE__ */ jsxDEV9("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__ */ jsxDEV9("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, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+
+// src/components/templates/recipes/RecipeCard.tsx
+import { Heart } from "lucide-react";
+import { jsxDEV as jsxDEV10 } from "react/jsx-dev-runtime";
+function RecipeCard({
+  recipe,
+  onSelect,
+  onToggleFavorite
+}) {
+  return /* @__PURE__ */ jsxDEV10("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__ */ jsxDEV10("img", {
+        src: recipe.heroImageUrl,
+        alt: recipe.name,
+        className: "h-40 w-full rounded-t-2xl object-cover"
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV10("div", {
+        className: "bg-muted h-40 rounded-t-2xl"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV10("div", {
+        className: "space-y-2 p-4",
+        children: [
+          /* @__PURE__ */ jsxDEV10("div", {
+            className: "flex items-center justify-between",
+            children: [
+              /* @__PURE__ */ jsxDEV10("p", {
+                className: "text-base font-semibold",
+                children: recipe.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV10("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__ */ jsxDEV10(Heart, {
+                  className: `h-4 w-4 ${recipe.isFavorite ? "fill-red-400" : ""}`
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV10("p", {
+            className: "text-muted-foreground line-clamp-2 text-sm",
+            children: recipe.description
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV10("div", {
+            className: "text-muted-foreground flex flex-wrap gap-3 text-xs",
+            children: [
+              recipe.prepTimeMinutes ? /* @__PURE__ */ jsxDEV10("span", {
+                children: [
+                  "Prep ",
+                  recipe.prepTimeMinutes,
+                  "m"
+                ]
+              }, undefined, true, undefined, this) : null,
+              recipe.cookTimeMinutes ? /* @__PURE__ */ jsxDEV10("span", {
+                children: [
+                  "Cook ",
+                  recipe.cookTimeMinutes,
+                  "m"
+                ]
+              }, undefined, true, undefined, this) : null,
+              recipe.servings ? /* @__PURE__ */ jsxDEV10("span", {
+                children: [
+                  recipe.servings,
+                  " servings"
+                ]
+              }, undefined, true, undefined, this) : null
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/recipes/RecipeDetail.tsx
+import { BookOpen } from "lucide-react";
+import { jsxDEV as jsxDEV11 } from "react/jsx-dev-runtime";
+function RecipeDetail({ recipe }) {
+  if (!recipe) {
+    return /* @__PURE__ */ jsxDEV11("div", {
+      className: "border-border flex flex-1 items-center justify-center rounded-2xl border border-dashed",
+      children: /* @__PURE__ */ jsxDEV11("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Select a recipe to view details."
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV11("article", {
+    className: "border-border bg-card space-y-4 rounded-2xl border p-6",
+    children: [
+      /* @__PURE__ */ jsxDEV11("header", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV11(BookOpen, {
+            className: "text-muted-foreground h-5 w-5"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV11("h2", {
+                className: "text-xl font-semibold",
+                children: recipe.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV11("p", {
+                className: "text-muted-foreground text-sm",
+                children: recipe.description
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV11("h3", {
+            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+            children: "Ingredients"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("ul", {
+            className: "text-foreground mt-2 list-disc space-y-1 pl-6 text-sm",
+            children: recipe.ingredients.map((ingredient) => /* @__PURE__ */ jsxDEV11("li", {
+              children: [
+                ingredient.name,
+                " – ",
+                ingredient.quantity
+              ]
+            }, ingredient.id, true, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV11("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV11("h3", {
+            className: "text-muted-foreground text-sm font-semibold tracking-wide uppercase",
+            children: "Instructions"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV11("ol", {
+            className: "text-foreground mt-2 list-decimal space-y-2 pl-6 text-sm",
+            children: recipe.instructions.map((instruction) => /* @__PURE__ */ jsxDEV11("li", {
+              children: instruction.content
+            }, instruction.id, false, undefined, this))
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/templates/recipes/RecipeList.tsx
+import { useState as useState5 } from "react";
+import { useMutation as useMutation5, useQuery as useQuery4 } from "@apollo/client/react";
+import { gql as gql6 } from "@apollo/client";
+import {
+  registerTemplateComponents as registerTemplateComponents3,
+  useTemplateRuntime as useTemplateRuntime6
+} from "@contractspec/lib.example-shared-ui";
+import { jsxDEV as jsxDEV12 } from "react/jsx-dev-runtime";
+"use client";
+var RECIPES_QUERY = gql6`
+  query Recipes($projectId: ID!, $locale: RecipeLocale!) {
+    recipes(projectId: $projectId, locale: $locale) {
+      id
+      name
+      description
+      heroImageUrl
+      prepTimeMinutes
+      cookTimeMinutes
+      servings
+      isFavorite
+      locale
+      category {
+        id
+        nameEn
+        nameFr
+      }
+      ingredients {
+        id
+        name
+        quantity
+      }
+      instructions {
+        id
+        content
+        ordering
+      }
+    }
+  }
+`;
+var FAVORITE_RECIPE = gql6`
+  mutation FavoriteRecipe($id: ID!, $isFavorite: Boolean!) {
+    favoriteRecipe(id: $id, isFavorite: $isFavorite) {
+      id
+      isFavorite
+    }
+  }
+`;
+function RecipeList() {
+  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 },
+    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 },
+      optimisticResponse: {
+        favoriteRecipe: {
+          __typename: "Recipe",
+          id: recipe.id,
+          isFavorite: !recipe.isFavorite
+        }
+      }
+    });
+  };
+  return /* @__PURE__ */ jsxDEV12("div", {
+    className: "space-y-4",
+    children: [
+      /* @__PURE__ */ jsxDEV12("div", {
+        className: "flex flex-wrap items-center gap-3",
+        children: [
+          /* @__PURE__ */ jsxDEV12(LanguageSwitcher, {
+            locale,
+            onChange: setLocale
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV12("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)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      loading ? /* @__PURE__ */ jsxDEV12("p", {
+        className: "text-muted-foreground text-sm",
+        children: "Loading recipes…"
+      }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV12("div", {
+        className: "grid gap-4 md:grid-cols-3",
+        children: filtered.map((recipe) => /* @__PURE__ */ jsxDEV12(RecipeCard, {
+          recipe,
+          onSelect: setSelected,
+          onToggleFavorite: handleToggleFavorite
+        }, recipe.id, false, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV12(RecipeDetail, {
+        recipe: selected
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+registerTemplateComponents3("recipe-app-i18n", {
+  list: RecipeList,
+  detail: RecipeDetail
+});
+export {
+  TaskList,
+  TaskItem,
+  TaskForm,
+  RecipeList,
+  RecipeDetail,
+  RecipeCard,
+  MessagingWorkspace,
+  MessageThread,
+  MessageComposer,
+  MESSAGES_QUERY,
+  LanguageSwitcher,
+  FilterBar,
+  ConversationList
+};