openuispec 0.1.27 → 0.1.28

package/examples/taskflow/generated/web/TaskFlow/src/locales.en.json

@@ -0,0 +1,111 @@
+{
+  "nav.tasks": "Tasks",
+  "nav.projects": "Projects",
+  "nav.calendar": "Calendar",
+  "nav.settings": "Settings",
+  "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.task_deleted": "Task deleted",
+  "task_detail.assign_to": "Assign to",
+  "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",
+  "edit_task.title": "Edit task",
+  "edit_task.save": "Save",
+  "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",
+  "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",
+  "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",
+  "common.cancel": "Cancel",
+  "common.delete": "Delete",
+  "common.create": "Create"
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/examples/taskflow/generated/web/TaskFlow/src/screens/HomeScreen.tsx

@@ -0,0 +1,111 @@
+import { startTransition, useDeferredValue, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { t, filterLabel, greeting, taskCountLabel } from "../i18n";
+import { useAppStore } from "../store";
+import { buildCounts, matchesFilter, matchesQuery } from "../utils";
+import { TaskRow } from "../components/Common";
+import { TaskDetailPanel } from "./TaskDetail";
+import type { Filter, SizeClass } from "../types";
+
+export function HomeScreen(props: {
+  sizeClass: SizeClass;
+  onCreateTask: () => void;
+  onEditTask: (taskId: string) => void;
+  onAssignTask: (taskId: string) => void;
+}) {
+  const tasks = useAppStore((state) => state.tasks);
+  const projects = useAppStore((state) => state.projects);
+  const searchQuery = useAppStore((state) => state.searchQuery);
+  const activeFilter = useAppStore((state) => state.activeFilter);
+  const selectedTaskId = useAppStore((state) => state.selectedTaskId);
+  const setSearchQuery = useAppStore((state) => state.setSearchQuery);
+  const setActiveFilter = useAppStore((state) => state.setActiveFilter);
+  const setSelectedTaskId = useAppStore((state) => state.setSelectedTaskId);
+  const user = useAppStore((state) => state.user);
+  const deferredQuery = useDeferredValue(searchQuery);
+  const navigate = useNavigate();
+
+  const visibleTasks = tasks.filter((task) => matchesFilter(task, activeFilter) && matchesQuery(task, projects, deferredQuery));
+  const selectedTask =
+    visibleTasks.find((task) => task.id === selectedTaskId) ??
+    tasks.find((task) => task.id === selectedTaskId) ??
+    visibleTasks[0];
+  const counts = buildCounts(tasks);
+
+  useEffect(() => {
+    if (props.sizeClass === "expanded" && selectedTask?.id) {
+      setSelectedTaskId(selectedTask.id);
+      navigate("/tasks", { replace: true });
+    }
+  }, [props.sizeClass, selectedTask?.id, navigate, setSelectedTaskId]);
+
+  return (
+    <section className="screen">
+      <header className="screen-header">
+        <div>
+          <p className="eyebrow">TaskFlow</p>
+          <h1>{greeting(user.firstName)}</h1>
+          <p className="screen-subtitle">{taskCountLabel(counts.today)}</p>
+        </div>
+        {props.sizeClass !== "compact" ? (
+          <button className="primary-button" onClick={props.onCreateTask}>{t("home.new_task")}</button>
+        ) : null}
+      </header>
+
+      <div className="search-panel">
+        <label className="field-label" htmlFor="task-search">{t("home.search_label")}</label>
+        <input
+          id="task-search"
+          value={searchQuery}
+          onChange={(event) => startTransition(() => setSearchQuery(event.target.value))}
+          placeholder={t("home.search_placeholder")}
+        />
+      </div>
+
+      <div className="chip-row">
+        {(["all", "today", "upcoming", "done"] as Filter[]).map((filter) => (
+          <button
+            key={filter}
+            className={filter === activeFilter ? "chip active" : "chip"}
+            onClick={() => setActiveFilter(filter)}
+          >
+            {filterLabel(filter)} ({counts[filter]})
+          </button>
+        ))}
+      </div>
+
+      <div className={props.sizeClass === "expanded" ? "home-grid expanded" : "home-grid"}>
+        <div className="card-stack">
+          {visibleTasks.length === 0 ? (
+            <div className="empty-card">
+              <h3>{t("home.empty_title")}</h3>
+              <p>{t("home.empty_body")}</p>
+            </div>
+          ) : (
+            visibleTasks.map((task) => (
+              <TaskRow
+                key={task.id}
+                task={task}
+                project={projects.find((project) => project.id === task.projectId)}
+                selected={task.id === selectedTask?.id}
+                onSelect={() => {
+                  setSelectedTaskId(task.id);
+                  if (props.sizeClass === "expanded") navigate("/tasks", { replace: true });
+                  else navigate(`/tasks/${task.id}`);
+                }}
+              />
+            ))
+          )}
+        </div>
+
+        {props.sizeClass === "expanded" && selectedTask ? (
+          <TaskDetailPanel taskId={selectedTask.id} onEditTask={props.onEditTask} onAssignTask={props.onAssignTask} />
+        ) : null}
+      </div>
+
+      {props.sizeClass === "compact" ? (
+        <button className="fab-button" onClick={props.onCreateTask}>{t("home.new_task")}</button>
+      ) : null}
+    </section>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/screens/ProjectsScreen.tsx

@@ -0,0 +1,82 @@
+import { useNavigate, useParams, Navigate } from "react-router-dom";
+import { t, projectTaskCountLabel } from "../i18n";
+import { useAppStore } from "../store";
+import { TaskRow } from "../components/Common";
+
+export function ProjectsScreen(props: { onCreateProject: () => void }) {
+  const projects = useAppStore((state) => state.projects);
+  const navigate = useNavigate();
+
+  return (
+    <section className="screen">
+      <header className="screen-header">
+        <div>
+          <p className="eyebrow">{t("nav.projects")}</p>
+          <h1>{t("projects.title")}</h1>
+        </div>
+        <button className="secondary-button" onClick={props.onCreateProject}>{t("projects.new_project")}</button>
+      </header>
+
+      {projects.length === 0 ? (
+        <div className="empty-card">
+          <h3>{t("projects.empty_title")}</h3>
+          <p>{t("projects.empty_body")}</p>
+        </div>
+      ) : (
+        <div className="project-grid">
+          {projects.map((project) => (
+            <button key={project.id} className="project-card" onClick={() => navigate(`/projects/${project.id}`)}>
+              <span className="project-chip" style={{ backgroundColor: `${project.color}22`, color: project.color }}>
+                {project.icon.toUpperCase().slice(0, 2)}
+              </span>
+              <h3>{project.name}</h3>
+              <p>{projectTaskCountLabel(project.taskCount)}</p>
+            </button>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export function ProjectDetailRoute() {
+  const params = useParams();
+  const project = useAppStore((state) => state.projects.find((item) => item.id === params.projectId));
+  const tasks = useAppStore((state) => state.tasks.filter((task) => task.projectId === params.projectId));
+  const navigate = useNavigate();
+
+  if (!project) return <Navigate to="/projects" replace />;
+
+  return (
+    <section className="screen">
+      <div className="detail-card">
+        <div className="detail-hero">
+          <div>
+            <p className="eyebrow">{t("task_detail.project")}</p>
+            <h2>{project.name}</h2>
+          </div>
+          <span className="badge badge-neutral">{projectTaskCountLabel(tasks.length)}</span>
+        </div>
+
+        <div className="card-stack">
+          {tasks.length ? (
+            tasks.map((task) => (
+              <TaskRow
+                key={task.id}
+                task={task}
+                project={project}
+                selected={false}
+                onSelect={() => navigate(`/tasks/${task.id}`)}
+              />
+            ))
+          ) : (
+            <div className="empty-card">
+              <h3>{t("project_detail.empty_title")}</h3>
+              <p>{t("project_detail.empty_body")}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/screens/SettingsScreens.tsx

@@ -0,0 +1,132 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { t, priorityLabel } from "../i18n";
+import { useAppStore } from "../store";
+import { Avatar, Field, SwitchRow } from "../components/Common";
+
+export function CalendarScreen() {
+  return (
+    <section className="screen">
+      <div className="empty-card">
+        <p className="eyebrow">{t("nav.calendar")}</p>
+        <h1>{t("calendar.title")}</h1>
+        <p>{t("calendar.coming_soon")}</p>
+      </div>
+    </section>
+  );
+}
+
+export function SettingsScreen() {
+  const user = useAppStore((state) => state.user);
+  const preferences = useAppStore((state) => state.preferences);
+  const updatePreferences = useAppStore((state) => state.updatePreferences);
+  const setTheme = useAppStore((state) => state.setTheme);
+  const navigate = useNavigate();
+
+  return (
+    <section className="screen">
+      <header className="screen-header">
+        <div>
+          <p className="eyebrow">{t("nav.settings")}</p>
+          <h1>{t("settings.preferences")}</h1>
+        </div>
+      </header>
+
+      <button className="profile-card" onClick={() => navigate("/profile")}>
+        <Avatar name={user.name} />
+        <div>
+          <strong>{user.name}</strong>
+          <p>{user.email}</p>
+        </div>
+      </button>
+
+      <div className="settings-card">
+        <p className="section-tag">{t("settings.preferences")}</p>
+        <Field label={t("settings.theme")}>
+          <select value={preferences.theme} onChange={(event) => setTheme(event.target.value as typeof preferences.theme)}>
+            <option value="system">{t("settings.theme_system")}</option>
+            <option value="light">{t("settings.theme_light")}</option>
+            <option value="dark">{t("settings.theme_dark")}</option>
+            <option value="warm">{t("settings.theme_warm")}</option>
+          </select>
+        </Field>
+        <Field label={t("settings.default_priority")}>
+          <select
+            value={preferences.defaultPriority}
+            onChange={(event) => updatePreferences({ defaultPriority: event.target.value as typeof preferences.defaultPriority })}
+          >
+            <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>
+        <SwitchRow
+          label={t("settings.notifications")}
+          value={preferences.notificationsEnabled}
+          onChange={(value) => updatePreferences({ notificationsEnabled: value })}
+        />
+        <SwitchRow
+          label={t("settings.reminders")}
+          helper={t("settings.reminders_helper")}
+          value={preferences.remindersEnabled}
+          onChange={(value) => updatePreferences({ remindersEnabled: value })}
+        />
+      </div>
+
+      <div className="settings-card">
+        <p className="section-tag">{t("settings.data")}</p>
+        <button className="secondary-button wide">{t("settings.export")}</button>
+        <button className="danger-button wide" onClick={() => window.alert(t("settings.delete_title"))}>
+          {t("settings.delete_account")}
+        </button>
+      </div>
+
+      <div className="footnote">
+        <span>{t("settings.app_version")}</span>
+        <span>{t("settings.app_credit")}</span>
+      </div>
+    </section>
+  );
+}
+
+export function ProfileScreen() {
+  const user = useAppStore((state) => state.user);
+  const updateProfile = useAppStore((state) => state.updateProfile);
+  const navigate = useNavigate();
+  const [name, setName] = useState(user.name);
+  const [email, setEmail] = useState(user.email);
+
+  return (
+    <section className="screen">
+      <div className="settings-card">
+        <div className="profile-hero">
+          <Avatar name={user.name} large />
+          <div>
+            <h1>{user.name}</h1>
+            <p>{user.email}</p>
+          </div>
+        </div>
+
+        <Field label={t("profile.field_name")}>
+          <input value={name} onChange={(event) => setName(event.target.value)} />
+        </Field>
+        <Field label={t("profile.field_email")}>
+          <input value={email} onChange={(event) => setEmail(event.target.value)} />
+        </Field>
+        <div className="action-row">
+          <button className="secondary-button" onClick={() => navigate("/settings")}>{t("common.cancel")}</button>
+          <button
+            className="primary-button"
+            onClick={() => {
+              updateProfile({ name, email });
+              navigate("/settings");
+            }}
+          >
+            {t("profile.save")}
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}

package/examples/taskflow/generated/web/TaskFlow/src/screens/TaskDetail.tsx

@@ -0,0 +1,105 @@
+import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { t, statusLabel, priorityLabel, interpolate } from "../i18n";
+import { useAppStore } from "../store";
+import { formatDate } from "../utils";
+import { DetailRow, StatCard } from "../components/Common";
+import type { SizeClass } from "../types";
+
+export function TaskDetailRoute(props: {
+  sizeClass: SizeClass;
+  onEditTask: (taskId: string) => void;
+  onAssignTask: (taskId: string) => void;
+}) {
+  const params = useParams();
+  if (!params.taskId) return <Navigate to="/tasks" replace />;
+  if (props.sizeClass === "expanded") return <Navigate to="/tasks" replace />;
+  return <TaskDetailPanel taskId={params.taskId} onEditTask={props.onEditTask} onAssignTask={props.onAssignTask} />;
+}
+
+export function TaskDetailPanel(props: {
+  taskId: string;
+  onEditTask: (taskId: string) => void;
+  onAssignTask: (taskId: string) => void;
+}) {
+  const task = useAppStore((state) => state.tasks.find((item) => item.id === props.taskId));
+  const projects = useAppStore((state) => state.projects);
+  const toggleTask = useAppStore((state) => state.toggleTask);
+  const deleteTask = useAppStore((state) => state.deleteTask);
+  const navigate = useNavigate();
+
+  if (!task) {
+    return (
+      <div className="detail-card">
+        <h2>Task missing</h2>
+        <p>The selected task could not be found.</p>
+      </div>
+    );
+  }
+
+  const project = projects.find((item) => item.id === task.projectId);
+
+  return (
+    <article className="detail-card">
+      <div className="detail-hero">
+        <div>
+          <p className="eyebrow">{statusLabel(task.status)}</p>
+          <h2>{task.title}</h2>
+        </div>
+        <span className={`badge badge-${task.status}`}>{statusLabel(task.status)}</span>
+      </div>
+
+      <div className="stat-grid">
+        <StatCard label={t("task_detail.status")} value={statusLabel(task.status)} />
+        <StatCard label={t("task_detail.priority")} value={priorityLabel(task.priority)} />
+        <StatCard label={t("task_detail.due")} value={task.dueDate ? formatDate(task.dueDate) : t("task_detail.unassigned")} />
+      </div>
+
+      {task.description ? (
+        <section className="detail-section">
+          <p className="section-tag">{t("task_detail.description")}</p>
+          <p>{task.description}</p>
+        </section>
+      ) : null}
+
+      {task.attachment ? (
+        <section className="detail-section">
+          <p className="section-tag">Media</p>
+          <div className="media-player">
+            <strong>{task.attachment.title}</strong>
+            {task.attachment.mediaType === "video" ? (
+              <video controls preload="metadata" src={task.attachment.source} />
+            ) : (
+              <audio controls preload="metadata" src={task.attachment.source} />
+            )}
+          </div>
+        </section>
+      ) : null}
+
+      <section className="detail-section">
+        <p className="section-tag">{t("task_detail.details")}</p>
+        <DetailRow label={t("task_detail.project")} value={project?.name ?? "-"} action={() => project && navigate(`/projects/${project.id}`)} />
+        <DetailRow label={t("task_detail.assignee")} value={task.assignee?.name ?? t("task_detail.unassigned")} action={() => props.onAssignTask(task.id)} />
+        <DetailRow label={t("task_detail.tags")} value={task.tags.join(", ") || "-"} />
+        <DetailRow label={t("task_detail.created")} value={formatDate(task.createdAt)} />
+      </section>
+
+      <div className="action-row">
+        <button className="primary-button" onClick={() => props.onEditTask(task.id)}>{t("task_detail.edit")}</button>
+        <button className="secondary-button" onClick={() => toggleTask(task.id)}>
+          {task.status === "done" ? t("task_detail.reopen") : t("task_detail.complete")}
+        </button>
+        <button
+          className="danger-button"
+          onClick={() => {
+            if (window.confirm(interpolate(t("task_detail.delete_message"), { title: task.title }))) {
+              deleteTask(task.id);
+              navigate("/tasks");
+            }
+          }}
+        >
+          {t("task_detail.delete")}
+        </button>
+      </div>
+    </article>
+  );
+}