// src/components/templates/todos/FilterBar.tsx
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",
    children: [
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        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),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All tasks"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "active",
                children: "Active"
              }),
              /* @__PURE__ */ jsx("option", {
                value: "completed",
                children: "Completed"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        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"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("label", {
        className: "text-muted-foreground flex flex-col text-xs tracking-wide uppercase",
        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),
            children: [
              /* @__PURE__ */ jsx("option", {
                value: "all",
                children: "All categories"
              }),
              categories.map((category) => /* @__PURE__ */ jsx("option", {
                value: category.id,
                children: category.name
              }, category.id))
            ]
          })
        ]
      }),
      /* @__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)
          })
        ]
      })
    ]
  });
}

// 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 { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-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__ */ jsxs2("form", {
    onSubmit: handleSubmit,
    className: "border-border bg-background/60 space-y-3 rounded-2xl border p-4",
    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__ */ jsxs2("div", {
        className: "grid gap-3 md:grid-cols-3",
        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__ */ 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))
                ]
              })
            ]
          }),
          /* @__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__ */ 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);
}

// 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",
    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"
        })
      }),
      /* @__PURE__ */ jsxs3("div", {
        className: "flex-1 space-y-2",
        children: [
          /* @__PURE__ */ jsxs3("div", {
            className: "flex flex-wrap items-center gap-2",
            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()
              }),
              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
              }) : null,
              task.dueDate ? /* @__PURE__ */ jsxs3("span", {
                className: "text-muted-foreground text-xs",
                children: [
                  "Due ",
                  new Date(task.dueDate).toLocaleDateString()
                ]
              }) : null
            ]
          }),
          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",
              children: [
                "#",
                tag
              ]
            }, tag))
          }) : null
        ]
      }),
      /* @__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"
        })
      })
    ]
  });
}

// 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 { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-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__ */ jsxs4("div", {
    className: "space-y-6",
    children: [
      /* @__PURE__ */ jsx4(FilterBar, {
        value: filters,
        onChange: setFilters,
        categories
      }),
      /* @__PURE__ */ jsx4(TaskForm, {
        categories
      }),
      loading ? /* @__PURE__ */ jsx4("p", {
        className: "text-muted-foreground text-sm",
        children: "Loading tasks…"
      }) : 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."
        })
      })
    ]
  });
}
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 { 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",
    children: [
      /* @__PURE__ */ jsxs5("header", {
        className: "border-border px -4 flex items-center justify-between border-b px-4 py-3",
        children: [
          /* @__PURE__ */ jsxs5("div", {
            children: [
              /* @__PURE__ */ jsx5("p", {
                className: "text-sm font-semibold",
                children: "Conversations"
              }),
              /* @__PURE__ */ jsx5("p", {
                className: "text-muted-foreground text-xs",
                children: loading ? "Loading…" : `${conversations.length} active`
              })
            ]
          }),
          /* @__PURE__ */ jsx5(Users, {
            className: "text-muted-foreground h-4 w-4"
          })
        ]
      }),
      /* @__PURE__ */ jsxs5("div", {
        className: "divide-border/70 divide-y",
        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(" · ")
                })
              ]
            }, conversation.id);
          }),
          !loading && conversations.length === 0 ? /* @__PURE__ */ jsx5("p", {
            className: "text-muted-foreground p-4 text-center text-xs",
            children: "No conversations yet."
          }) : null
        ]
      })
    ]
  });
}

// 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…"
      }) : messages.slice().reverse().map((message) => /* @__PURE__ */ jsxs6("div", {
        className: `flex flex-col ${message.senderId === viewerId ? "items-end" : "items-start"}`,
        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",
            children: [
              message.senderName || message.senderId,
              " ·",
              " ",
              new Date(message.createdAt).toLocaleTimeString([], {
                hour: "2-digit",
                minute: "2-digit"
              })
            ]
          })
        ]
      }, message.id))
    })
  });
}

// 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 { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-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__ */ jsxs7("form", {
    onSubmit: handleSubmit,
    className: "border-border bg-card mt-3 flex items-center gap-2 rounded-2xl border px-4 py-3",
    children: [
      /* @__PURE__ */ jsx7("input", {
        type: "text",
        className: "text-foreground flex-1 bg-transparent text-sm outline-none",
        placeholder: conversationId ? "Type a message…" : "Select a conversation to start",
        disabled: !conversationId || loading,
        value: content,
        onChange: (event) => setContent(event.target.value)
      }),
      /* @__PURE__ */ 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__ */ 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çais"
    }, 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__ */ jsxs9("div", {
        className: "space-y-2 p-4",
        children: [
          /* @__PURE__ */ jsxs9("div", {
            className: "flex items-center justify-between",
            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" : ""}`
                })
              })
            ]
          }),
          /* @__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",
            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", {
                children: [
                  recipe.servings,
                  " servings"
                ]
              }) : null
            ]
          })
        ]
      })
    ]
  });
}

// src/components/templates/recipes/RecipeDetail.tsx
import { BookOpen } 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",
    children: [
      /* @__PURE__ */ jsxs10("header", {
        className: "flex flex-wrap items-center gap-3",
        children: [
          /* @__PURE__ */ jsx11(BookOpen, {
            className: "text-muted-foreground h-5 w-5"
          }),
          /* @__PURE__ */ jsxs10("div", {
            children: [
              /* @__PURE__ */ jsx11("h2", {
                className: "text-xl font-semibold",
                children: recipe.name
              }),
              /* @__PURE__ */ jsx11("p", {
                className: "text-muted-foreground text-sm",
                children: recipe.description
              })
            ]
          })
        ]
      }),
      /* @__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", {
              children: [
                ingredient.name,
                " – ",
                ingredient.quantity
              ]
            }, ingredient.id))
          })
        ]
      }),
      /* @__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))
          })
        ]
      })
    ]
  });
}

// 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 { 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) {
      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__ */ jsxs11("div", {
    className: "space-y-4",
    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)
          })
        ]
      }),
      loading ? /* @__PURE__ */ jsx12("p", {
        className: "text-muted-foreground text-sm",
        children: "Loading recipes…"
      }) : /* @__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
      })
    ]
  });
}
registerTemplateComponents3("recipe-app-i18n", {
  list: RecipeList,
  detail: RecipeDetail
});
export {
  TaskList,
  TaskItem,
  TaskForm,
  RecipeList,
  RecipeDetail,
  RecipeCard,
  MessagingWorkspace,
  MessageThread,
  MessageComposer,
  MESSAGES_QUERY,
  LanguageSwitcher,
  FilterBar,
  ConversationList
};
