openuispec 0.2.10 → 0.2.12

package/examples/social-app/generated/web/social-app/src/screens/MessagesInboxScreen.tsx

@@ -1,52 +0,0 @@
-import { useDeferredValue, useState } from "react";
-import { useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { ConversationCard } from "../components/cards";
-import { EmptyState, ErrorState, ScreenScaffold, SkeletonList, TextField } from "../components/ui";
-import { selectConversations, useAppStore } from "../state/store";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-
-export function MessagesInboxScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const scenario = useUiScenario();
-  const [searchQuery, setSearchQuery] = useState("");
-  const deferred = useDeferredValue(searchQuery);
-  const loading = useSimulatedLoading(`messages-${deferred}`, scenario);
-  const state = useAppStore();
-  const items = scenario === "empty" ? [] : selectConversations(state, deferred);
-
-  return (
-    <ScreenScaffold title="Messages" subtitle="Conversation search, unread indicators, and direct routes into chat threads.">
-      <TextField
-        label={t("messages.search_placeholder")}
-        value={searchQuery}
-        onValueChange={setSearchQuery}
-        placeholder={t("messages.search_placeholder")}
-      />
-
-      {scenario === "error" ? (
-        <ErrorState title="Inbox unavailable" description="The inbox query is in an error state. Remove `?ui=error` to restore it." />
-      ) : loading ? (
-        <SkeletonList count={5} />
-      ) : items.length === 0 ? (
-        <EmptyState title="No conversations" description={t("messages.empty_inbox")} />
-      ) : (
-        <div className="space-y-3">
-          {items.map((item) =>
-            item.participant ? (
-              <ConversationCard
-                key={item.conversation.id}
-                user={item.participant}
-                excerpt={item.lastMessage?.body ?? "No messages yet"}
-                unreadCount={item.unreadCount}
-                timestamp={item.lastMessage?.createdAt}
-                onOpen={() => navigate(`/chat/${item.conversation.id}`)}
-              />
-            ) : null,
-          )}
-        </div>
-      )}
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/NotificationsScreen.tsx

@@ -1,41 +0,0 @@
-import { useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { NotificationCard } from "../components/cards";
-import { EmptyState, ErrorState, ScreenScaffold, SkeletonList } from "../components/ui";
-import { selectNotifications, useAppStore } from "../state/store";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-
-export function NotificationsScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const scenario = useUiScenario();
-  const loading = useSimulatedLoading("notifications", scenario);
-  const state = useAppStore();
-  const notifications = scenario === "empty" ? [] : selectNotifications(state);
-
-  return (
-    <ScreenScaffold title={t("nav.notifications")} subtitle="Mark-as-read interactions wired to the local mock state.">
-      {scenario === "error" ? (
-        <ErrorState title="Notifications unavailable" description="The notifications request failed. Remove `?ui=error` to recover." />
-      ) : loading ? (
-        <SkeletonList count={6} />
-      ) : notifications.length === 0 ? (
-        <EmptyState title="Nothing new" description={t("notifications.empty")} />
-      ) : (
-        <div className="space-y-3">
-          {notifications.map((item) => (
-            <NotificationCard
-              key={item.id}
-              item={item}
-              actor={item.actor}
-              onOpen={() => {
-                state.markNotificationRead(item.id);
-                navigate(item.postId ? `/posts/${item.postId}` : "/profile");
-              }}
-            />
-          ))}
-        </div>
-      )}
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/PostDetailScreen.tsx

@@ -1,115 +0,0 @@
-import { useState } from "react";
-import { useNavigate, useParams } from "react-router";
-import { useI18n } from "../i18n";
-import { CommentCard, PostCard } from "../components/cards";
-import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SectionTitle, SkeletonList, TextField } from "../components/ui";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-import { selectCommentsByPost, selectPostById, selectUserById, useAppStore } from "../state/store";
-
-export function PostDetailScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const { postId = "" } = useParams();
-  const scenario = useUiScenario();
-  const loading = useSimulatedLoading(`post-${postId}`, scenario);
-  const state = useAppStore();
-  const [commentText, setCommentText] = useState("");
-  const post = scenario === "empty" ? undefined : selectPostById(state, postId);
-  const comments = scenario === "empty" ? [] : selectCommentsByPost(state, postId);
-
-  if (scenario === "error") {
-    return (
-      <ScreenScaffold title="Post Detail">
-        <ErrorState title="Post unavailable" description="The detail request failed. Remove `?ui=error` to return to the normal state." />
-      </ScreenScaffold>
-    );
-  }
-
-  if (loading) {
-    return (
-      <ScreenScaffold title="Post Detail">
-        <SkeletonList count={1} tall />
-      </ScreenScaffold>
-    );
-  }
-
-  if (!post) {
-    return (
-      <ScreenScaffold title="Post Detail">
-        <EmptyState title="Missing post" description="This post could not be found in the local mock data." />
-      </ScreenScaffold>
-    );
-  }
-
-  const author = selectUserById(state, post.authorId);
-  if (!author) {
-    return null;
-  }
-
-  return (
-    <ScreenScaffold title="Post Detail" subtitle={`Published ${new Date(post.publishedAt).toLocaleDateString()}`}>
-      <PostCard
-        post={post}
-        author={author}
-        hero
-        onAuthor={() => navigate(`/u/${author.id}`)}
-        onLike={() => state.toggleLike(post.id)}
-        onSave={() => state.toggleSave(post.id)}
-      />
-
-      <section className="space-y-4">
-        <ActionButton variant="secondary" icon={post.liked ? "like_fill" : "like"} onClick={() => state.toggleLike(post.id)}>
-          {t("post.like_action")}
-        </ActionButton>
-      </section>
-
-      <section className="space-y-4">
-        <SectionTitle>{t("post.comments_header")}</SectionTitle>
-        {comments.length === 0 ? (
-          <EmptyState title="No comments yet" description={t("post.no_comments")} />
-        ) : (
-          <div className="space-y-3">
-            {comments.map((comment) => {
-              const commentAuthor = selectUserById(state, comment.authorId);
-              if (!commentAuthor) {
-                return null;
-              }
-              return (
-                <CommentCard
-                  key={comment.id}
-                  comment={comment}
-                  author={commentAuthor}
-                  onAuthor={() => navigate(`/u/${commentAuthor.id}`)}
-                />
-              );
-            })}
-          </div>
-        )}
-      </section>
-
-      <TextField
-        label={t("post.comment_placeholder")}
-        value={commentText}
-        multiline
-        onValueChange={setCommentText}
-        placeholder={t("post.comment_placeholder")}
-        trailingAction={
-          <ActionButton
-            variant="primary"
-            icon="send"
-            onClick={() => {
-              if (!commentText.trim()) {
-                return;
-              }
-              state.addComment(post.id, commentText.trim());
-              setCommentText("");
-              state.showToast(t("post.comment_sent"));
-            }}
-          >
-            Send
-          </ActionButton>
-        }
-      />
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/ProfileSelfScreen.tsx

@@ -1,57 +0,0 @@
-import { useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { PostCard, ProfileHero } from "../components/cards";
-import { ActionButton, EmptyState, ScreenScaffold, SectionTitle, SkeletonList } from "../components/ui";
-import { selectCurrentUser, selectProfilePosts, selectUserById, useAppStore } from "../state/store";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-
-export function ProfileSelfScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const scenario = useUiScenario();
-  const loading = useSimulatedLoading("profile-self", scenario);
-  const state = useAppStore();
-  const user = selectCurrentUser(state);
-  const posts = scenario === "empty" ? [] : selectProfilePosts(state, user.id);
-
-  return (
-    <ScreenScaffold title={t("nav.profile")} subtitle="Your own profile with edit action and authored posts.">
-      {loading ? (
-        <SkeletonList count={2} tall />
-      ) : (
-        <ProfileHero
-          user={user}
-          action={
-            <ActionButton variant="secondary" icon="edit" onClick={() => navigate("/profile/edit")}>
-              {t("profile.edit_button")}
-            </ActionButton>
-          }
-        />
-      )}
-
-      <section className="space-y-4">
-        <SectionTitle>{t("profile.posts_header")}</SectionTitle>
-        {loading ? (
-          <SkeletonList count={3} />
-        ) : posts.length === 0 ? (
-          <EmptyState title="No posts yet" description={t("profile.no_posts_self")} />
-        ) : (
-          <div className="space-y-4">
-            {posts.map((post) => (
-              <div key={post.id} className="rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 shadow-sm">
-                <PostCard
-                  post={post}
-                  author={selectUserById(state, post.authorId) ?? user}
-                  onOpen={() => navigate(`/posts/${post.id}`)}
-                  onAuthor={() => navigate(`/u/${user.id}`)}
-                  onLike={() => state.toggleLike(post.id)}
-                  onSave={() => state.toggleSave(post.id)}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/ProfileUserScreen.tsx

@@ -1,76 +0,0 @@
-import { useNavigate, useParams } from "react-router";
-import { useI18n } from "../i18n";
-import { PostCard, ProfileHero } from "../components/cards";
-import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SectionTitle, SkeletonList } from "../components/ui";
-import { selectProfilePosts, selectUserById, useAppStore } from "../state/store";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-
-export function ProfileUserScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const { userId = "" } = useParams();
-  const scenario = useUiScenario();
-  const loading = useSimulatedLoading(`profile-${userId}`, scenario);
-  const state = useAppStore();
-  const user = scenario === "empty" ? undefined : selectUserById(state, userId);
-  const posts = scenario === "empty" ? [] : selectProfilePosts(state, userId);
-
-  if (scenario === "error") {
-    return (
-      <ScreenScaffold title="Profile">
-        <ErrorState title="Profile unavailable" description="The profile request failed. Remove `?ui=error` to restore it." />
-      </ScreenScaffold>
-    );
-  }
-
-  if (loading) {
-    return (
-      <ScreenScaffold title="Profile">
-        <SkeletonList count={3} tall />
-      </ScreenScaffold>
-    );
-  }
-
-  if (!user) {
-    return (
-      <ScreenScaffold title="Profile">
-        <EmptyState title="Profile missing" description="The requested user does not exist in the local dataset." />
-      </ScreenScaffold>
-    );
-  }
-
-  return (
-    <ScreenScaffold title={user.displayName} subtitle={`@${user.handle}`}>
-      <ProfileHero
-        user={user}
-        action={
-          <ActionButton variant="primary" onClick={() => state.followUser(user.id)}>
-            {t("profile.follow_button")}
-          </ActionButton>
-        }
-      />
-
-      <section className="space-y-4">
-        <SectionTitle>{t("profile.posts_header")}</SectionTitle>
-        {posts.length === 0 ? (
-          <EmptyState title="No posts yet" description={t("profile.no_posts_user")} />
-        ) : (
-          <div className="space-y-4">
-            {posts.map((post) => (
-              <div key={post.id} className="rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 shadow-sm">
-                <PostCard
-                  post={post}
-                  author={user}
-                  onOpen={() => navigate(`/posts/${post.id}`)}
-                  onAuthor={() => navigate(`/u/${user.id}`)}
-                  onLike={() => state.toggleLike(post.id)}
-                  onSave={() => state.toggleSave(post.id)}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-      </section>
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/SearchResultsScreen.tsx

@@ -1,96 +0,0 @@
-import { useEffect, useState, startTransition } from "react";
-import { useNavigate, useSearchParams } from "react-router";
-import { useI18n } from "../i18n";
-import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SkeletonList, TextField } from "../components/ui";
-import { selectSearchResults, useAppStore } from "../state/store";
-import { useSimulatedLoading, useUiScenario } from "../lib/utils";
-
-export function SearchResultsScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const scenario = useUiScenario();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [query, setQuery] = useState(searchParams.get("query") ?? "");
-  const [activeTab, setActiveTab] = useState<"posts" | "people" | "tags">(
-    (searchParams.get("tab") as "posts" | "people" | "tags") ?? "posts",
-  );
-  const loading = useSimulatedLoading(`search-${query}-${activeTab}`, scenario);
-  const state = useAppStore();
-  const results = selectSearchResults(state, query, activeTab);
-
-  useEffect(() => {
-    setQuery(searchParams.get("query") ?? "");
-    setActiveTab(((searchParams.get("tab") as "posts" | "people" | "tags") ?? "posts"));
-  }, [searchParams]);
-
-  const visibleResults = scenario === "empty" ? [] : results;
-
-  return (
-    <ScreenScaffold title="Search Results" subtitle={`Querying "${query}" across ${activeTab}.`}>
-      <TextField
-        label={t("search.placeholder")}
-        value={query}
-        onValueChange={setQuery}
-        placeholder={t("search.placeholder")}
-        trailingAction={
-          <ActionButton
-            variant="primary"
-            icon="search"
-            onClick={() => setSearchParams({ query, tab: activeTab })}
-          >
-            Search
-          </ActionButton>
-        }
-      />
-
-      <div className="no-scrollbar flex gap-2 overflow-x-auto pb-1">
-        {[
-          { value: "posts" as const, label: t("search.tab_posts") },
-          { value: "people" as const, label: t("search.tab_people") },
-          { value: "tags" as const, label: t("search.tab_tags") },
-        ].map((tab) => (
-          <ActionButton
-            key={tab.value}
-            variant="chip"
-            selected={activeTab === tab.value}
-            onClick={() => {
-              startTransition(() => setActiveTab(tab.value));
-              setSearchParams({ query, tab: tab.value });
-            }}
-          >
-            {tab.label}
-          </ActionButton>
-        ))}
-      </div>
-
-      {scenario === "error" ? (
-        <ErrorState title="Search failed" description="The search request is in an error state. Remove `?ui=error` to see results." />
-      ) : loading ? (
-        <SkeletonList count={5} />
-      ) : visibleResults.length === 0 ? (
-        <EmptyState title="No results" description={t("search.no_results")} />
-      ) : (
-        <div className="space-y-3">
-          {visibleResults.map((result) => (
-            <button
-              key={`${result.kind}-${result.id}`}
-              type="button"
-              onClick={() => {
-                if (result.kind === "people") {
-                  navigate(`/u/${result.id}`);
-                  return;
-                }
-                navigate(`/posts/${result.id}`);
-              }}
-              className="w-full rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 text-left shadow-sm transition hover:-translate-y-0.5"
-            >
-              <p className="font-semibold text-[var(--color-text-primary)]">{result.title}</p>
-              <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{result.subtitle}</p>
-              <p className="mt-3 line-clamp-2 text-sm leading-6 text-[var(--color-text-secondary)]">{result.body}</p>
-            </button>
-          ))}
-        </div>
-      )}
-    </ScreenScaffold>
-  );
-}

package/examples/social-app/generated/web/social-app/src/screens/SettingsScreen.tsx

@@ -1,79 +0,0 @@
-import { useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { ActionButton, ActionGroup, ScreenScaffold, SectionTitle, SelectField, ToggleField } from "../components/ui";
-import { useAppStore } from "../state/store";
-
-export function SettingsScreen() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const state = useAppStore();
-
-  return (
-    <ScreenScaffold title="Settings" subtitle="Theme select, toggles, and a confirmation dialog for logout.">
-      <section className="space-y-4">
-        <SectionTitle>{t("settings.appearance")}</SectionTitle>
-        <SelectField
-          label={t("settings.theme")}
-          value={state.preferences.theme}
-          options={[
-            { value: "system", label: t("settings.theme_system") },
-            { value: "light", label: t("settings.theme_light") },
-            { value: "dark", label: t("settings.theme_dark") },
-          ]}
-          onValueChange={(value) => state.updatePreference("theme", value as "system" | "light" | "dark")}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <SectionTitle>{t("settings.notifications")}</SectionTitle>
-        <ToggleField
-          label={t("settings.push_notifications")}
-          checked={state.preferences.pushNotifications}
-          onChange={(value) => state.updatePreference("pushNotifications", value)}
-        />
-        <ToggleField
-          label={t("settings.message_previews")}
-          checked={state.preferences.messagePreviews}
-          onChange={(value) => state.updatePreference("messagePreviews", value)}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <SectionTitle>{t("settings.language")}</SectionTitle>
-        <ToggleField
-          label={t("settings.auto_translate")}
-          checked={state.preferences.autoTranslate}
-          onChange={(value) => state.updatePreference("autoTranslate", value)}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <SectionTitle>{t("settings.account")}</SectionTitle>
-        <ActionGroup className="gap-2">
-          <ActionButton variant="secondary" icon="edit" onClick={() => navigate("/profile/edit")}>
-            {t("settings.edit_profile")}
-          </ActionButton>
-          <ActionButton
-            variant="destructive"
-            onClick={() =>
-              state.openDialog({
-                title: t("settings.logout"),
-                message: t("settings.logout_confirm"),
-                actions: [
-                  { label: t("common.cancel"), variant: "secondary", onPress: () => undefined },
-                  {
-                    label: t("settings.logout"),
-                    variant: "destructive",
-                    onPress: () => state.logout(),
-                  },
-                ],
-              })
-            }
-          >
-            {t("settings.logout")}
-          </ActionButton>
-        </ActionGroup>
-      </section>
-    </ScreenScaffold>
-  );
-}