openuispec 0.2.10 → 0.2.12

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

@@ -1,111 +0,0 @@
-{
-  "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

@@ -1,13 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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>
-  );
-}