openuispec 0.1.27 → 0.1.28

package/examples/taskflow/generated/web/TaskFlow/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "taskflow-web",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.3.0",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
+  }
+}

package/examples/taskflow/generated/web/TaskFlow/src/App.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { AppShell } from "./AppShell";
+import { AssignModal, ProjectModal, TaskModal } from "./components/Modals";
+import { useResolvedTheme, useWindowWidth } from "./hooks";
+import { useAppStore } from "./store";
+
+export default function App() {
+  const [taskModal, setTaskModal] = useState<{ mode: "create" } | { mode: "edit"; taskId: string } | null>(null);
+  const [projectModalOpen, setProjectModalOpen] = useState(false);
+  const [assignModalTaskId, setAssignModalTaskId] = useState<string | null>(null);
+  const [sidebarVisible, setSidebarVisible] = useState(true);
+
+  const width = useWindowWidth();
+  const sizeClass = width <= 600 ? "compact" : width <= 1024 ? "regular" : "expanded";
+  const theme = useResolvedTheme(useAppStore((state) => state.preferences.theme));
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey)) return;
+      const key = event.key.toLowerCase();
+      if (key === "n") {
+        event.preventDefault();
+        setTaskModal({ mode: "create" });
+      }
+      if (key === "k") {
+        event.preventDefault();
+        document.getElementById("task-search")?.focus();
+      }
+      if (key === "b") {
+        event.preventDefault();
+        setSidebarVisible((value) => !value);
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, []);
+
+  return (
+    <div className="app-frame">
+      <AppShell
+        sizeClass={sizeClass}
+        sidebarVisible={sidebarVisible}
+        onCreateTask={() => setTaskModal({ mode: "create" })}
+        onCreateProject={() => setProjectModalOpen(true)}
+        onEditTask={(taskId) => setTaskModal({ mode: "edit", taskId })}
+        onAssignTask={(taskId) => setAssignModalTaskId(taskId)}
+      />
+
+      {taskModal ? <TaskModal modal={taskModal} onClose={() => setTaskModal(null)} /> : null}
+      {projectModalOpen ? <ProjectModal onClose={() => setProjectModalOpen(false)} /> : null}
+      {assignModalTaskId ? <AssignModal taskId={assignModalTaskId} onClose={() => setAssignModalTaskId(null)} /> : null}
+    </div>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/AppShell.tsx

@@ -0,0 +1,55 @@
+import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { useAppStore } from "./store";
+import { BottomNav, SidebarNav } from "./components/Nav";
+import { HomeScreen } from "./screens/HomeScreen";
+import { TaskDetailRoute } from "./screens/TaskDetail";
+import { ProjectsScreen, ProjectDetailRoute } from "./screens/ProjectsScreen";
+import { CalendarScreen, ProfileScreen, SettingsScreen } from "./screens/SettingsScreens";
+import type { SizeClass } from "./types";
+
+export function AppShell(props: {
+  sizeClass: SizeClass;
+  sidebarVisible: boolean;
+  onCreateTask: () => void;
+  onCreateProject: () => void;
+  onEditTask: (taskId: string) => void;
+  onAssignTask: (taskId: string) => void;
+}) {
+  const location = useLocation();
+  const user = useAppStore((state) => state.user);
+
+  return (
+    <div className={`shell-layout size-${props.sizeClass}`}>
+      {props.sizeClass !== "compact" && (props.sizeClass === "expanded" || props.sidebarVisible) ? (
+        <SidebarNav currentPath={location.pathname} />
+      ) : null}
+      <main className="screen-shell">
+        <Routes>
+          <Route path="/" element={<Navigate to="/tasks" replace />} />
+          <Route
+            path="/tasks"
+            element={
+              <HomeScreen
+                sizeClass={props.sizeClass}
+                onCreateTask={props.onCreateTask}
+                onEditTask={props.onEditTask}
+                onAssignTask={props.onAssignTask}
+              />
+            }
+          />
+          <Route
+            path="/tasks/:taskId"
+            element={<TaskDetailRoute sizeClass={props.sizeClass} onEditTask={props.onEditTask} onAssignTask={props.onAssignTask} />}
+          />
+          <Route path="/projects" element={<ProjectsScreen onCreateProject={props.onCreateProject} />} />
+          <Route path="/projects/:projectId" element={<ProjectDetailRoute />} />
+          <Route path="/calendar" element={<CalendarScreen />} />
+          <Route path="/settings" element={<SettingsScreen />} />
+          <Route path="/profile" element={<ProfileScreen />} />
+        </Routes>
+      </main>
+      {props.sizeClass === "compact" ? <BottomNav currentPath={location.pathname} /> : null}
+      <div className="floating-user-chip">{user.firstName}</div>
+    </div>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/components/Common.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import { useAppStore } from "../store";
+import type { Project, Task } from "../types";
+import { initials, relativeDate } from "../utils";
+
+export function SwitchRow(props: {
+  label: string;
+  helper?: string;
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <label className="toggle-row">
+      <div>
+        <strong>{props.label}</strong>
+        {props.helper ? <small>{props.helper}</small> : null}
+      </div>
+      <input type="checkbox" checked={props.value} onChange={(event) => props.onChange(event.target.checked)} />
+    </label>
+  );
+}
+
+export function Field(props: { label: string; children: ReactNode }) {
+  return (
+    <label className="field-block">
+      <span className="field-label">{props.label}</span>
+      {props.children}
+    </label>
+  );
+}
+
+export function DetailRow(props: { label: string; value: string; action?: () => void }) {
+  const content = (
+    <>
+      <strong>{props.label}</strong>
+      <span>{props.value}</span>
+    </>
+  );
+  return props.action ? (
+    <button className="detail-row" onClick={props.action}>
+      {content}
+    </button>
+  ) : (
+    <div className="detail-row">{content}</div>
+  );
+}
+
+export function StatCard(props: { label: string; value: string }) {
+  return (
+    <div className="stat-card">
+      <span>{props.label}</span>
+      <strong>{props.value}</strong>
+    </div>
+  );
+}
+
+export function TaskRow(props: {
+  task: Task;
+  project?: Project;
+  selected: boolean;
+  onSelect: () => void;
+}) {
+  const toggleTask = useAppStore((state) => state.toggleTask);
+  return (
+    <button className={props.selected ? "task-row selected" : "task-row"} onClick={props.onSelect}>
+      <label className="check-shell" onClick={(event) => event.stopPropagation()}>
+        <input type="checkbox" checked={props.task.status === "done"} onChange={() => toggleTask(props.task.id)} />
+      </label>
+      <div className="task-copy">
+        <strong>{props.task.title}</strong>
+        <p>
+          {props.project?.name ?? "Inbox"} · {props.task.dueDate ? relativeDate(props.task.dueDate) : "No due date"}
+        </p>
+      </div>
+      <span className={`badge badge-${props.task.priority}`}>{props.task.priority.toUpperCase()}</span>
+    </button>
+  );
+}
+
+export function Avatar({ name, large = false }: { name: string; large?: boolean }) {
+  return <div className={large ? "avatar large" : "avatar"}>{initials(name)}</div>;
+}

package/examples/taskflow/generated/web/TaskFlow/src/components/Modals.tsx

@@ -0,0 +1,191 @@
+import { useState } from "react";
+import { t } from "../i18n";
+import { useAppStore } from "../store";
+import type { Priority, ProjectDraft, TaskDraft } from "../types";
+import { Field, Avatar } from "./Common";
+import { priorityLabel } from "../i18n";
+
+export function TaskModal(props: {
+  modal: { mode: "create" } | { mode: "edit"; taskId: string };
+  onClose: () => void;
+}) {
+  const preferences = useAppStore((state) => state.preferences);
+  const projects = useAppStore((state) => state.projects);
+  const tasks = useAppStore((state) => state.tasks);
+  const createTask = useAppStore((state) => state.createTask);
+  const updateTask = useAppStore((state) => state.updateTask);
+  const editTaskId = props.modal.mode === "edit" ? props.modal.taskId : undefined;
+  const editingTask = editTaskId ? tasks.find((task) => task.id === editTaskId) : undefined;
+
+  const [draft, setDraft] = useState<TaskDraft>(
+    editingTask
+      ? {
+          title: editingTask.title,
+          description: editingTask.description ?? "",
+          projectId: editingTask.projectId ?? "",
+          priority: editingTask.priority,
+          dueDate: editingTask.dueDate ?? "",
+          tags: editingTask.tags.join(", "),
+          assignToSelf: Boolean(editingTask.assignee)
+        }
+      : {
+          title: "",
+          description: "",
+          projectId: "",
+          priority: preferences.defaultPriority,
+          dueDate: "",
+          tags: "",
+          assignToSelf: true
+        }
+  );
+
+  return (
+    <dialog open className="modal">
+      <div className="modal-card">
+        <div className="modal-header">
+          <h3>{props.modal.mode === "edit" ? t("edit_task.title") : t("create_task.title")}</h3>
+          <button className="ghost-button" onClick={props.onClose}>{t("common.cancel")}</button>
+        </div>
+        <div className="modal-content">
+          <Field label={t("create_task.field_title")}>
+            <input value={draft.title} placeholder={t("create_task.field_title_placeholder")} onChange={(event) => setDraft({ ...draft, title: event.target.value })} />
+          </Field>
+          <Field label={t("create_task.field_description")}>
+            <textarea rows={4} value={draft.description} placeholder={t("create_task.field_description_placeholder")} onChange={(event) => setDraft({ ...draft, description: event.target.value })} />
+          </Field>
+          <div className="two-up">
+            <Field label={t("create_task.field_project")}>
+              <select value={draft.projectId} onChange={(event) => setDraft({ ...draft, projectId: event.target.value })}>
+                <option value="">{t("create_task.field_project_placeholder")}</option>
+                {projects.map((project) => (
+                  <option key={project.id} value={project.id}>{project.name}</option>
+                ))}
+              </select>
+            </Field>
+            <Field label={t("create_task.field_priority")}>
+              <select value={draft.priority} onChange={(event) => setDraft({ ...draft, priority: event.target.value as Priority })}>
+                <option value="low">{priorityLabel("low")}</option>
+                <option value="medium">{priorityLabel("medium")}</option>
+                <option value="high">{priorityLabel("high")}</option>
+                <option value="urgent">{priorityLabel("urgent")}</option>
+              </select>
+            </Field>
+          </div>
+          <div className="two-up">
+            <Field label={t("create_task.field_due_date")}>
+              <input type="date" value={draft.dueDate} onChange={(event) => setDraft({ ...draft, dueDate: event.target.value })} />
+            </Field>
+            <Field label={t("create_task.field_tags")}>
+              <input value={draft.tags} placeholder={t("create_task.field_tags_placeholder")} onChange={(event) => setDraft({ ...draft, tags: event.target.value })} />
+            </Field>
+          </div>
+          <label className="toggle-row">
+            <input type="checkbox" checked={draft.assignToSelf} onChange={(event) => setDraft({ ...draft, assignToSelf: event.target.checked })} />
+            <span>{t("create_task.field_assign_to_me")}</span>
+          </label>
+        </div>
+        <div className="action-row">
+          <button className="secondary-button" onClick={props.onClose}>{t("common.cancel")}</button>
+          <button
+            className="primary-button"
+            disabled={draft.title.trim().length < 3}
+            onClick={() => {
+              if (props.modal.mode === "edit" && editingTask) updateTask(editingTask.id, draft);
+              else createTask(draft);
+              props.onClose();
+            }}
+          >
+            {props.modal.mode === "edit" ? t("edit_task.save") : t("create_task.save")}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+export function ProjectModal(props: { onClose: () => void }) {
+  const createProject = useAppStore((state) => state.createProject);
+  const [draft, setDraft] = useState<ProjectDraft>({ name: "", color: "#5B4FE8", icon: "folder" });
+
+  return (
+    <dialog open className="modal">
+      <div className="modal-card compact">
+        <div className="modal-header">
+          <h3>{t("projects.dialog_title")}</h3>
+          <button className="ghost-button" onClick={props.onClose}>{t("common.cancel")}</button>
+        </div>
+        <div className="modal-content">
+          <Field label={t("projects.field_name")}>
+            <input value={draft.name} placeholder={t("projects.field_name_placeholder")} onChange={(event) => setDraft({ ...draft, name: event.target.value })} />
+          </Field>
+          <div className="two-up">
+            <Field label={t("projects.field_color")}>
+              <input value={draft.color} onChange={(event) => setDraft({ ...draft, color: event.target.value })} />
+            </Field>
+            <Field label={t("projects.field_icon")}>
+              <select value={draft.icon} onChange={(event) => setDraft({ ...draft, icon: event.target.value })}>
+                {["folder", "briefcase", "rocket", "star", "heart", "lightbulb"].map((icon) => (
+                  <option key={icon} value={icon}>{icon}</option>
+                ))}
+              </select>
+            </Field>
+          </div>
+        </div>
+        <div className="action-row">
+          <button className="secondary-button" onClick={props.onClose}>{t("common.cancel")}</button>
+          <button
+            className="primary-button"
+            onClick={() => {
+              if (!draft.name.trim()) return;
+              createProject(draft);
+              props.onClose();
+            }}
+          >
+            {t("common.create")}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
+
+export function AssignModal(props: { taskId: string; onClose: () => void }) {
+  const users = useAppStore((state) => state.users);
+  const assignTask = useAppStore((state) => state.assignTask);
+  const [query, setQuery] = useState("");
+  const visibleUsers = users.filter((user) => `${user.name} ${user.email}`.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <dialog open className="modal">
+      <div className="modal-card compact">
+        <div className="modal-header">
+          <h3>{t("task_detail.assign_to")}</h3>
+          <button className="ghost-button" onClick={props.onClose}>{t("common.cancel")}</button>
+        </div>
+        <div className="modal-content">
+          <Field label={t("task_detail.search_people")}>
+            <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t("task_detail.search_people_placeholder")} />
+          </Field>
+        </div>
+        <div className="card-stack">
+          {visibleUsers.map((user) => (
+            <button
+              key={user.id}
+              className="profile-card"
+              onClick={() => {
+                assignTask(props.taskId, user.id);
+                props.onClose();
+              }}
+            >
+              <Avatar name={user.name} />
+              <div>
+                <strong>{user.name}</strong>
+                <p>{user.email}</p>
+              </div>
+            </button>
+          ))}
+        </div>
+      </div>
+    </dialog>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/components/Nav.tsx

@@ -0,0 +1,41 @@
+import { NavLink } from "react-router-dom";
+import { t } from "../i18n";
+
+export function SidebarNav(props: { currentPath: string }) {
+  return (
+    <aside className="sidebar-shell">
+      <div className="brand-lockup">
+        <div className="brand-mark">TF</div>
+        <div>
+          <p className="eyebrow">OpenUISpec</p>
+          <h2>TaskFlow</h2>
+        </div>
+      </div>
+      <nav className="nav-list">
+        <NavItem to="/tasks" active={props.currentPath.startsWith("/tasks")}>{t("nav.tasks")}</NavItem>
+        <NavItem to="/projects" active={props.currentPath.startsWith("/projects")}>{t("nav.projects")}</NavItem>
+        <NavItem to="/calendar" active={props.currentPath.startsWith("/calendar")}>{t("nav.calendar")}</NavItem>
+        <NavItem to="/settings" active={props.currentPath.startsWith("/settings") || props.currentPath.startsWith("/profile")}>{t("nav.settings")}</NavItem>
+      </nav>
+    </aside>
+  );
+}
+
+export function BottomNav(props: { currentPath: string }) {
+  return (
+    <nav className="bottom-nav">
+      <NavItem to="/tasks" active={props.currentPath.startsWith("/tasks")}>{t("nav.tasks")}</NavItem>
+      <NavItem to="/projects" active={props.currentPath.startsWith("/projects")}>{t("nav.projects")}</NavItem>
+      <NavItem to="/calendar" active={props.currentPath.startsWith("/calendar")}>{t("nav.calendar")}</NavItem>
+      <NavItem to="/settings" active={props.currentPath.startsWith("/settings") || props.currentPath.startsWith("/profile")}>{t("nav.settings")}</NavItem>
+    </nav>
+  );
+}
+
+function NavItem(props: { to: string; active: boolean; children: string }) {
+  return (
+    <NavLink className={props.active ? "nav-item active" : "nav-item"} to={props.to}>
+      {props.children}
+    </NavLink>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/generated/messages.ts

@@ -0,0 +1,131 @@
+export const messages = {
+  "nav.tasks": "Tasks",
+  "nav.projects": "Projects",
+  "nav.calendar": "Calendar",
+  "nav.settings": "Settings",
+  "home.greeting.morning": "Good morning, {name}",
+  "home.greeting.afternoon": "Good afternoon, {name}",
+  "home.greeting.evening": "Good evening, {name}",
+  "home.search_label": "Search tasks",
+  "home.search_placeholder": "Search by title, tag, or project...",
+  "home.filter.all": "All",
+  "home.filter.today": "Today",
+  "home.filter.upcoming": "Upcoming",
+  "home.filter.done": "Done",
+  "home.empty_title": "All caught up!",
+  "home.empty_body": "No tasks match this filter. Tap + to add one.",
+  "home.new_task": "New task",
+  "home.mark_complete": "Mark {title} complete",
+  "home.task_count.none": "No tasks today",
+  "home.task_count.one": "{count} task today",
+  "home.task_count.other": "{count} tasks today",
+  "task_detail.status": "Status",
+  "task_detail.priority": "Priority",
+  "task_detail.due": "Due",
+  "task_detail.description": "Description",
+  "task_detail.details": "Details",
+  "task_detail.project": "Project",
+  "task_detail.assignee": "Assignee",
+  "task_detail.unassigned": "Unassigned",
+  "task_detail.tags": "Tags",
+  "task_detail.created": "Created",
+  "task_detail.edit": "Edit task",
+  "task_detail.reopen": "Reopen task",
+  "task_detail.complete": "Mark complete",
+  "task_detail.delete": "Delete task",
+  "task_detail.delete_title": "Delete task?",
+  "task_detail.delete_message": "This action cannot be undone. The task \"{title}\" will be permanently removed.",
+  "task_detail.task_updated": "Task updated",
+  "task_detail.update_error": "Couldn't update status",
+  "task_detail.task_deleted": "Task deleted",
+  "task_detail.assign_to": "Assign to",
+  "task_detail.search_people": "Search people",
+  "task_detail.search_people_placeholder": "Name or email...",
+  "create_task.title": "New task",
+  "create_task.save": "Save",
+  "create_task.saving": "Saving...",
+  "create_task.field_title": "Title",
+  "create_task.field_title_placeholder": "What needs to be done?",
+  "create_task.field_description": "Description",
+  "create_task.field_description_placeholder": "Add details, notes, or context...",
+  "create_task.field_project": "Project",
+  "create_task.field_project_placeholder": "Select a project",
+  "create_task.field_priority": "Priority",
+  "create_task.field_due_date": "Due date",
+  "create_task.field_due_date_placeholder": "No due date",
+  "create_task.field_tags": "Tags",
+  "create_task.field_tags_placeholder": "Add tags separated by commas",
+  "create_task.field_tags_helper": "Press comma or Enter to add a tag",
+  "create_task.field_assign_to_me": "Assign to me",
+  "create_task.success": "Task created",
+  "create_task.error_title": "Couldn't create task",
+  "edit_task.title": "Edit task",
+  "edit_task.save": "Save",
+  "edit_task.saving": "Saving...",
+  "edit_task.field_title": "Title",
+  "edit_task.field_description": "Description",
+  "edit_task.field_priority": "Priority",
+  "edit_task.field_due_date": "Due date",
+  "edit_task.success": "Task updated",
+  "edit_task.error_title": "Couldn't update task",
+  "projects.title": "Projects",
+  "projects.new_project": "New project",
+  "projects.task_count.none": "No tasks",
+  "projects.task_count.one": "{count} task",
+  "projects.task_count.other": "{count} tasks",
+  "projects.empty_title": "No projects yet",
+  "projects.empty_body": "Create a project to organize your tasks.",
+  "projects.dialog_title": "New project",
+  "projects.field_name": "Project name",
+  "projects.field_name_placeholder": "e.g., Product Launch",
+  "projects.field_color": "Color",
+  "projects.field_icon": "Icon",
+  "projects.created": "Project created",
+  "project_detail.empty_title": "No tasks in this project",
+  "project_detail.empty_body": "Add a task to get started.",
+  "settings.preferences": "Preferences",
+  "settings.theme": "Theme",
+  "settings.theme_system": "System",
+  "settings.theme_light": "Light",
+  "settings.theme_dark": "Dark",
+  "settings.theme_warm": "Warm",
+  "settings.default_priority": "Default priority",
+  "settings.notifications": "Push notifications",
+  "settings.reminders": "Due date reminders",
+  "settings.reminders_helper": "Get notified 1 hour before a task is due",
+  "settings.data": "Data",
+  "settings.export": "Export data",
+  "settings.export_success": "Export sent to your email",
+  "settings.delete_account": "Delete account",
+  "settings.delete_title": "Delete your account?",
+  "settings.delete_message": "This will permanently delete your account and all your data. This action cannot be undone.",
+  "settings.delete_confirm": "Delete my account",
+  "settings.app_version": "TaskFlow v1.0.0",
+  "settings.app_credit": "Built with OpenUISpec",
+  "profile.change_photo": "Change photo",
+  "profile.field_name": "Name",
+  "profile.field_email": "Email",
+  "profile.save": "Save changes",
+  "profile.success": "Profile updated",
+  "calendar.title": "Calendar",
+  "calendar.coming_soon": "Coming in a future version",
+  "priority.low": "Low",
+  "priority.medium": "Medium",
+  "priority.high": "High",
+  "priority.urgent": "Urgent",
+  "status.todo": "To do",
+  "status.in_progress": "In progress",
+  "status.done": "Done",
+  "media_player.loading": "Loading media...",
+  "media_player.play": "Play",
+  "media_player.pause": "Pause",
+  "media_player.retry": "Retry",
+  "validation.required": "This field is required",
+  "validation.min_length": "Must be at least {min} characters",
+  "validation.tag_format": "Tags may only contain letters, numbers, and hyphens",
+  "common.cancel": "Cancel",
+  "common.delete": "Delete",
+  "common.create": "Create"
+} as const;
+
+export type MessageKey = keyof typeof messages;

package/examples/taskflow/generated/web/TaskFlow/src/hooks.ts

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import type { ThemeMode } from "./types";
+
+export function useResolvedTheme(theme: ThemeMode) {
+  const [prefersDark, setPrefersDark] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const update = () => setPrefersDark(media.matches);
+    update();
+    media.addEventListener("change", update);
+    return () => media.removeEventListener("change", update);
+  }, []);
+  if (theme === "system") return prefersDark ? "dark" : "light";
+  return theme;
+}
+
+export function useWindowWidth() {
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    const onResize = () => setWidth(window.innerWidth);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  return width;
+}

package/examples/taskflow/generated/web/TaskFlow/src/i18n.ts

@@ -0,0 +1,39 @@
+import { messages } from "./generated/messages";
+
+export function t(key: keyof typeof messages | string) {
+  return messages[key as keyof typeof messages] ?? key;
+}
+
+export function interpolate(template: string, values: Record<string, string>) {
+  return template.replace(/\{(\w+)\}/g, (_, key) => values[key] ?? "");
+}
+
+export function greeting(name: string) {
+  const hour = new Date().getHours();
+  const key = hour < 12 ? "home.greeting.morning" : hour < 18 ? "home.greeting.afternoon" : "home.greeting.evening";
+  return interpolate(t(key), { name });
+}
+
+export function taskCountLabel(count: number) {
+  if (count === 0) return t("home.task_count.none");
+  if (count === 1) return interpolate(t("home.task_count.one"), { count: "1" });
+  return interpolate(t("home.task_count.other"), { count: String(count) });
+}
+
+export function projectTaskCountLabel(count: number) {
+  if (count === 0) return t("projects.task_count.none");
+  if (count === 1) return interpolate(t("projects.task_count.one"), { count: "1" });
+  return interpolate(t("projects.task_count.other"), { count: String(count) });
+}
+
+export function priorityLabel(priority: string) {
+  return t(`priority.${priority}`);
+}
+
+export function statusLabel(status: string) {
+  return t(`status.${status}`);
+}
+
+export function filterLabel(filter: string) {
+  return t(`home.filter.${filter}`);
+}