openuispec 0.2.9 → 0.2.11

package/examples/social-app/generated/web/social-app/src/components/ui.tsx

@@ -1,340 +0,0 @@
-import { type ButtonHTMLAttributes, type PropsWithChildren, type ReactNode } from "react";
-import { Link } from "react-router";
-import { Icon } from "../lib/icons";
-import { cn, getInitials } from "../lib/utils";
-
-export function ScreenScaffold({
-  title,
-  subtitle,
-  children,
-}: PropsWithChildren<{ title: string; subtitle?: string }>) {
-  return (
-    <section className="mx-auto flex w-full max-w-[860px] flex-col gap-6 px-4 pb-28 pt-4 md:px-6 xl:px-8">
-      <header className="space-y-2">
-        <p className="text-xs uppercase tracking-[0.28em] text-[var(--color-text-tertiary)]">social-app</p>
-        <h1 className="text-[clamp(1.5rem,3vw,2rem)] font-semibold leading-[1.2] text-[var(--color-text-primary)]">
-          {title}
-        </h1>
-        {subtitle ? <p className="max-w-2xl text-sm text-[var(--color-text-secondary)]">{subtitle}</p> : null}
-      </header>
-      {children}
-    </section>
-  );
-}
-
-export function SectionTitle({ children, action }: { children: ReactNode; action?: ReactNode }) {
-  return (
-    <div className="flex items-center justify-between gap-4">
-      <h2 className="text-lg font-semibold text-[var(--color-text-primary)]">{children}</h2>
-      {action}
-    </div>
-  );
-}
-
-export function Surface({
-  children,
-  className,
-}: PropsWithChildren<{
-  className?: string;
-}>) {
-  return <div className={cn("rounded-surface border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] shadow-sm", className)}>{children}</div>;
-}
-
-export function ActionGroup({
-  children,
-  className,
-}: PropsWithChildren<{
-  className?: string;
-}>) {
-  return <div className={cn("flex flex-col items-start gap-3", className)}>{children}</div>;
-}
-
-type ActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: "primary" | "secondary" | "chip" | "destructive" | "fab";
-  icon?: Parameters<typeof Icon>[0]["name"];
-  fullWidth?: boolean;
-  selected?: boolean;
-  trailing?: ReactNode;
-};
-
-export function ActionButton({
-  children,
-  className,
-  variant = "primary",
-  icon,
-  fullWidth,
-  selected,
-  trailing,
-  ...props
-}: ActionButtonProps) {
-  const variantClass =
-    variant === "primary"
-      ? "rounded-cap-primary border-transparent bg-[var(--color-brand-primary)] text-[var(--color-brand-primary-on)]"
-      : variant === "secondary"
-        ? "rounded-cap-alternate border-[var(--color-border-strong)] bg-transparent text-[var(--color-text-primary)]"
-        : variant === "destructive"
-          ? "rounded-cap-primary border-transparent bg-[var(--color-semantic-danger)] text-[var(--color-semantic-danger-on)]"
-          : variant === "fab"
-            ? "rounded-cap-primary border-transparent bg-[var(--color-brand-primary)] text-[var(--color-brand-primary-on)] shadow-md"
-          : selected
-            ? "rounded-cap-primary border-transparent bg-[var(--color-brand-accent)] text-[var(--color-brand-accent-on)]"
-            : "rounded-cap-primary border-[var(--color-border-default)] bg-transparent text-[var(--color-text-primary)]";
-
-  return (
-    <button
-      className={cn(
-        "interactive-press inline-flex min-h-11 shrink-0 items-center justify-center gap-2 whitespace-nowrap align-middle border px-4 py-3 text-sm font-semibold transition",
-        variant === "fab" && "h-14 w-14 gap-0 px-0 py-0",
-        fullWidth && "w-full",
-        variantClass,
-        className,
-      )}
-      {...props}
-    >
-      {icon ? <Icon name={icon} className="h-5 w-5" /> : null}
-      {variant === "fab" ? (children ? <span className="sr-only">{children}</span> : null) : <span>{children}</span>}
-      {trailing}
-    </button>
-  );
-}
-
-type TextFieldProps = {
-  label: string;
-  value: string;
-  multiline?: boolean;
-  onValueChange?: (value: string) => void;
-  trailingAction?: ReactNode;
-  placeholder?: string;
-  maxLength?: number;
-  type?: string;
-  className?: string;
-};
-
-export function TextField({
-  label,
-  value,
-  multiline,
-  className,
-  onValueChange,
-  trailingAction,
-  placeholder,
-  maxLength,
-  type,
-}: TextFieldProps) {
-  const sharedClassName =
-    "min-h-12 w-full rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] px-4 py-3 text-sm text-[var(--color-text-primary)] placeholder:text-[var(--color-text-tertiary)] outline-none transition focus:border-[var(--color-brand-primary)] focus:border-2";
-
-  return (
-    <label className="flex w-full flex-col gap-2">
-      <span className="text-sm font-medium text-[var(--color-text-secondary)]">{label}</span>
-      <div className="flex items-end gap-2">
-        {multiline ? (
-          <textarea
-            className={cn(sharedClassName, "min-h-28 resize-y", className)}
-            value={String(value ?? "")}
-            onChange={(event) => onValueChange?.(event.target.value)}
-            placeholder={placeholder}
-            maxLength={maxLength}
-          />
-        ) : (
-          <input
-            className={cn(sharedClassName, className)}
-            value={String(value ?? "")}
-            onChange={(event) => onValueChange?.(event.target.value)}
-            placeholder={placeholder}
-            maxLength={maxLength}
-            type={type}
-          />
-        )}
-        {trailingAction}
-      </div>
-    </label>
-  );
-}
-
-export function SelectField({
-  label,
-  value,
-  options,
-  onValueChange,
-}: {
-  label: string;
-  value: string;
-  options: Array<{ value: string; label: string }>;
-  onValueChange: (value: string) => void;
-}) {
-  return (
-    <label className="flex w-full flex-col gap-2">
-      <span className="text-sm font-medium text-[var(--color-text-secondary)]">{label}</span>
-      <div className="relative">
-        <select
-          value={value}
-          onChange={(event) => onValueChange(event.target.value)}
-          className="min-h-12 w-full appearance-none rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] px-4 py-3 text-sm text-[var(--color-text-primary)] outline-none transition focus:border-2 focus:border-[var(--color-brand-primary)]"
-        >
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-        <Icon name="more" className="pointer-events-none absolute right-3 top-3.5 h-5 w-5 rotate-90 text-[var(--color-text-tertiary)]" />
-      </div>
-    </label>
-  );
-}
-
-export function ToggleField({
-  label,
-  checked,
-  onChange,
-}: {
-  label: string;
-  checked: boolean;
-  onChange: (value: boolean) => void;
-}) {
-  return (
-    <div className="flex items-center justify-between gap-4 rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] px-4 py-3">
-      <span className="text-sm font-medium text-[var(--color-text-primary)]">{label}</span>
-      <input
-        type="checkbox"
-        role="switch"
-        checked={checked}
-        onChange={(event) => onChange(event.target.checked)}
-        className="h-5 w-10 accent-[var(--color-brand-primary)]"
-      />
-    </div>
-  );
-}
-
-export function Avatar({
-  src,
-  name,
-  size = "md",
-}: {
-  src?: string;
-  name: string;
-  size?: "sm" | "md" | "lg";
-}) {
-  const sizeClass =
-    size === "sm"
-      ? "h-10 w-10 text-xs"
-      : size === "lg"
-        ? "h-[4.5rem] w-[4.5rem] text-lg"
-        : "h-12 w-12 text-sm";
-
-  return src ? (
-    <img
-      alt={name}
-      src={src}
-      className={cn("rounded-cap-primary object-cover", sizeClass)}
-    />
-  ) : (
-    <div className={cn("flex items-center justify-center rounded-cap-primary bg-[var(--color-surface-tertiary)] font-semibold text-[var(--color-text-secondary)]", sizeClass)}>
-      {getInitials(name)}
-    </div>
-  );
-}
-
-export function EmptyState({
-  title,
-  description,
-  action,
-}: {
-  title: string;
-  description: string;
-  action?: ReactNode;
-}) {
-  return (
-    <Surface className="p-8 text-center">
-      <div className="mx-auto flex max-w-md flex-col items-center gap-3">
-        <div className="rounded-cap-primary bg-[var(--color-surface-tertiary)] px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-[var(--color-text-secondary)]">
-          Empty
-        </div>
-        <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">{title}</h3>
-        <p className="text-sm text-[var(--color-text-secondary)]">{description}</p>
-        {action}
-      </div>
-    </Surface>
-  );
-}
-
-export function ErrorState({
-  title,
-  description,
-}: {
-  title: string;
-  description: string;
-}) {
-  return (
-    <div className="rounded-surface border border-[color:rgba(212,59,59,0.24)] bg-[color:rgba(212,59,59,0.08)] p-5 text-sm text-[var(--color-text-primary)]">
-      <h3 className="font-semibold">{title}</h3>
-      <p className="mt-1 text-[var(--color-text-secondary)]">{description}</p>
-    </div>
-  );
-}
-
-export function FeedbackBanner({
-  title,
-  description,
-  onDismiss,
-}: {
-  title: string;
-  description: string;
-  onDismiss: () => void;
-}) {
-  return (
-    <div className="flex items-start justify-between gap-4 border border-[var(--color-border-default)] bg-[var(--color-surface-tertiary)] px-4 py-4">
-      <div>
-        <p className="font-semibold text-[var(--color-text-primary)]">{title}</p>
-        <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{description}</p>
-      </div>
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="interactive-press rounded-full p-1.5 text-[var(--color-text-secondary)]"
-        aria-label="Dismiss banner"
-      >
-        <Icon name="close" className="h-4 w-4" />
-      </button>
-    </div>
-  );
-}
-
-export function SkeletonList({ count = 3, tall }: { count?: number; tall?: boolean }) {
-  return (
-    <div className="space-y-3">
-      {Array.from({ length: count }).map((_, index) => (
-        <div
-          key={index}
-          className={cn(
-            "skeleton rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)]",
-            tall ? "h-44" : "h-28",
-          )}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function PillLink({
-  to,
-  children,
-  icon,
-}: {
-  to: string;
-  children: ReactNode;
-  icon?: Parameters<typeof Icon>[0]["name"];
-}) {
-  return (
-    <Link
-      to={to}
-      className="interactive-press rounded-cap-alternate border border-[var(--color-border-strong)] px-4 py-2 text-sm font-semibold text-[var(--color-text-primary)]"
-    >
-      <span className="inline-flex items-center gap-2">
-        {icon ? <Icon name={icon} className="h-4 w-4" /> : null}
-        {children}
-      </span>
-    </Link>
-  );
-}

package/examples/social-app/generated/web/social-app/src/flows/CreatePostFlow.tsx

@@ -1,86 +0,0 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { useI18n } from "../i18n";
-import { ActionButton, SelectField, TextField } from "../components/ui";
-import { Icon } from "../lib/icons";
-import { useSizeClass } from "../lib/utils";
-import { useAppStore } from "../state/store";
-
-export function CreatePostFlow() {
-  const { t } = useI18n();
-  const navigate = useNavigate();
-  const sizeClass = useSizeClass();
-  const state = useAppStore();
-  const [body, setBody] = useState("");
-  const [media, setMedia] = useState("");
-  const [audience, setAudience] = useState("public");
-
-  return (
-    <div className="fixed inset-0 z-40 bg-[rgba(28,27,26,0.32)] px-3 pb-3 pt-20 md:px-6">
-      <div
-        className={`mx-auto max-w-2xl border border-[var(--color-border-default)] bg-[var(--color-surface-primary)] shadow-lg ${
-          sizeClass === "compact" ? "fixed inset-x-0 bottom-0 rounded-t-[24px] p-5" : "rounded-surface p-6"
-        }`}
-      >
-        {sizeClass === "compact" ? <div className="mx-auto mb-4 h-1.5 w-16 rounded-full bg-[var(--color-border-strong)]" /> : null}
-        <div className="mb-6 flex items-center justify-between gap-4">
-          <div>
-            <p className="text-xs uppercase tracking-[0.28em] text-[var(--color-text-tertiary)]">{t("nav.create")}</p>
-            <h2 className="mt-2 text-2xl font-semibold text-[var(--color-text-primary)]">Compose</h2>
-          </div>
-          <button
-            type="button"
-            onClick={() => navigate(-1)}
-            className="interactive-press rounded-cap-primary border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-2"
-            aria-label="Close"
-          >
-            <Icon name="close" className="h-5 w-5" />
-          </button>
-        </div>
-
-        <div className="space-y-4">
-          <TextField
-            label={t("create_post.body_placeholder")}
-            value={body}
-            multiline
-            onValueChange={setBody}
-            placeholder={t("create_post.body_placeholder")}
-            maxLength={4000}
-          />
-          <SelectField
-            label={t("create_post.audience")}
-            value={audience}
-            options={[
-              { value: "public", label: t("create_post.audience_public") },
-              { value: "followers", label: t("create_post.audience_followers") },
-            ]}
-            onValueChange={setAudience}
-          />
-          <TextField
-            label={t("create_post.add_image")}
-            value={media}
-            onValueChange={setMedia}
-            placeholder="Paste an image URL"
-          />
-          <ActionButton variant="secondary" icon="image" onClick={() => setMedia("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1200&q=80")}>
-            {t("create_post.add_image")}
-          </ActionButton>
-          <ActionButton
-            variant="primary"
-            fullWidth
-            onClick={() => {
-              if (!body.trim()) {
-                return;
-              }
-              state.createPost({ body: body.trim(), media: media.trim(), audience });
-              state.showToast(t("create_post.success"));
-              navigate("/home");
-            }}
-          >
-            {t("create_post.publish")}
-          </ActionButton>
-        </div>
-      </div>
-    </div>
-  );
-}

package/examples/social-app/generated/web/social-app/src/i18n.tsx

@@ -1,59 +0,0 @@
-import {
-  createContext,
-  type PropsWithChildren,
-  useContext,
-  useEffect,
-  useMemo,
-} from "react";
-import en from "./locales/en.json";
-import ru from "./locales/ru.json";
-import uz from "./locales/uz.json";
-import { useAppStore } from "./state/store";
-import type { LocaleCode } from "./lib/tokens";
-
-type Messages = Record<string, string>;
-
-const bundles: Record<LocaleCode, Messages> = {
-  en,
-  ru,
-  uz,
-};
-
-type I18nValue = {
-  locale: LocaleCode;
-  direction: "ltr" | "rtl";
-  t: (key: string) => string;
-  setLocale: (locale: LocaleCode) => void;
-};
-
-const I18nContext = createContext<I18nValue | null>(null);
-
-export function I18nProvider({ children }: PropsWithChildren) {
-  const locale = useAppStore((state) => state.locale);
-  const setLocale = useAppStore((state) => state.setLocale);
-
-  useEffect(() => {
-    document.documentElement.lang = locale;
-    document.documentElement.dir = (bundles[locale].$direction as "ltr" | "rtl") ?? "ltr";
-  }, [locale]);
-
-  const value = useMemo<I18nValue>(() => {
-    const messages = bundles[locale] ?? bundles.en;
-    return {
-      locale,
-      direction: (messages.$direction as "ltr" | "rtl") ?? "ltr",
-      t: (key: string) => messages[key] ?? bundles.en[key] ?? key,
-      setLocale,
-    };
-  }, [locale, setLocale]);
-
-  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
-}
-
-export function useI18n() {
-  const context = useContext(I18nContext);
-  if (!context) {
-    throw new Error("useI18n must be used within I18nProvider");
-  }
-  return context;
-}

package/examples/social-app/generated/web/social-app/src/lib/icons.tsx

@@ -1,85 +0,0 @@
-import type { SVGProps } from "react";
-
-type IconProps = SVGProps<SVGSVGElement> & {
-  name:
-    | "home"
-    | "discover"
-    | "notifications"
-    | "profile"
-    | "search"
-    | "create_post"
-    | "like"
-    | "like_fill"
-    | "comment"
-    | "share"
-    | "bookmark"
-    | "bookmark_fill"
-    | "more"
-    | "send"
-    | "camera"
-    | "image"
-    | "edit"
-    | "check"
-    | "back"
-    | "close"
-    | "settings";
-};
-
-export function Icon({ name, className, ...props }: IconProps) {
-  const shared = {
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 1.8,
-    strokeLinecap: "round" as const,
-    strokeLinejoin: "round" as const,
-    className,
-    "aria-hidden": true,
-    ...props,
-  };
-
-  switch (name) {
-    case "home":
-      return <svg {...shared}><path d="M3 10.5 12 3l9 7.5" /><path d="M5 10v10h14V10" /></svg>;
-    case "discover":
-      return <svg {...shared}><circle cx="12" cy="12" r="8" /><path d="m15.5 8.5-2.4 5.4-5.6 2.1 2.5-5.5Z" /></svg>;
-    case "notifications":
-      return <svg {...shared}><path d="M6 17h12l-1.4-1.7A4.5 4.5 0 0 1 15.5 12V10a3.5 3.5 0 1 0-7 0v2c0 1.2-.4 2.3-1.1 3.3Z" /><path d="M10 18.5a2 2 0 0 0 4 0" /></svg>;
-    case "profile":
-      return <svg {...shared}><circle cx="12" cy="8" r="3.5" /><path d="M5 20a7 7 0 0 1 14 0" /></svg>;
-    case "search":
-      return <svg {...shared}><circle cx="11" cy="11" r="6" /><path d="m20 20-3.5-3.5" /></svg>;
-    case "create_post":
-      return <svg {...shared}><circle cx="12" cy="12" r="8.5" /><path d="M12 8v8" /><path d="M8 12h8" /></svg>;
-    case "like":
-      return <svg {...shared}><path d="M12 20s-7-4.3-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 2.5C19 15.7 12 20 12 20Z" /></svg>;
-    case "like_fill":
-      return <svg viewBox="0 0 24 24" className={className} aria-hidden="true" {...props}><path fill="currentColor" d="M12 20s-7-4.3-7-9.5A4 4 0 0 1 12 8a4 4 0 0 1 7 2.5C19 15.7 12 20 12 20Z" /></svg>;
-    case "comment":
-      return <svg {...shared}><path d="M5 6h14v9H9l-4 3V6Z" /></svg>;
-    case "share":
-      return <svg {...shared}><path d="M14 6h5v5" /><path d="M10 14 19 5" /><path d="M19 13v5H5V5h5" /></svg>;
-    case "bookmark":
-      return <svg {...shared}><path d="M7 4h10v16l-5-3-5 3V4Z" /></svg>;
-    case "bookmark_fill":
-      return <svg viewBox="0 0 24 24" className={className} aria-hidden="true" {...props}><path fill="currentColor" d="M7 4h10v16l-5-3-5 3V4Z" /></svg>;
-    case "more":
-      return <svg {...shared}><circle cx="12" cy="6" r="1.5" /><circle cx="12" cy="12" r="1.5" /><circle cx="12" cy="18" r="1.5" /></svg>;
-    case "send":
-      return <svg {...shared}><path d="M4 20 20 12 4 4l2.5 8Z" /></svg>;
-    case "camera":
-      return <svg {...shared}><path d="M5 8h3l2-2h4l2 2h3v10H5Z" /><circle cx="12" cy="13" r="3.5" /></svg>;
-    case "image":
-      return <svg {...shared}><rect x="4" y="5" width="16" height="14" rx="2" /><circle cx="9" cy="10" r="1.2" /><path d="m7 17 4-4 3 3 3-4 2 5" /></svg>;
-    case "edit":
-      return <svg {...shared}><path d="m5 19 3.5-.7L18 8.8 15.2 6 5.7 15.5Z" /><path d="m13.8 7.2 3 3" /></svg>;
-    case "check":
-      return <svg {...shared}><path d="m5 13 4 4L19 7" /></svg>;
-    case "back":
-      return <svg {...shared}><path d="m15 18-6-6 6-6" /></svg>;
-    case "close":
-      return <svg {...shared}><path d="m6 6 12 12" /><path d="M18 6 6 18" /></svg>;
-    case "settings":
-      return <svg {...shared}><circle cx="12" cy="12" r="2.5" /><path d="M19 12a7.2 7.2 0 0 0-.1-1l2-1.5-2-3.5-2.4 1a7.3 7.3 0 0 0-1.8-1L14.5 3h-5L9 6a7.3 7.3 0 0 0-1.8 1l-2.4-1-2 3.5 2 1.5a7.2 7.2 0 0 0 0 2l-2 1.5 2 3.5 2.4-1c.6.4 1.2.7 1.8 1l.5 3h5l.5-3c.6-.3 1.2-.6 1.8-1l2.4 1 2-3.5-2-1.5c.1-.3.1-.7.1-1Z" /></svg>;
-  }
-}

package/examples/social-app/generated/web/social-app/src/lib/tokens.ts

@@ -1,70 +0,0 @@
-export const tokens = {
-  colors: {
-    brandPrimary: "#1C1B1A",
-    brandPrimaryOn: "#FFFFFF",
-    brandAccent: "#5B52A3",
-    brandAccentOn: "#FFFFFF",
-    surfacePrimary: "#FAF8F5",
-    surfaceSecondary: "#F3F0EB",
-    surfaceTertiary: "#EBE7E0",
-    textPrimary: "#1C1B1A",
-    textSecondary: "#6B6966",
-    textTertiary: "#9E9A95",
-    success: "#2D9D5E",
-    warning: "#D4920E",
-    danger: "#D43B3B",
-    info: "#3B82D4",
-    borderDefault: "#E0DCD6",
-    borderStrong: "#C5C0B8",
-  },
-  shadows: {
-    sm: "0 1px 3px rgba(28, 27, 26, 0.08)",
-    md: "0 4px 12px rgba(28, 27, 26, 0.12)",
-    lg: "0 8px 24px rgba(28, 27, 26, 0.16)",
-  },
-  radius: {
-    capPrimary: "2px 24px 2px 24px",
-    capAlternate: "24px 2px 24px 2px",
-    card: "3px 20px 3px 20px",
-    surface: "3px 24px 3px 24px",
-    sheet: "24px 24px 0 0",
-  },
-  spacing: {
-    xxs: 2,
-    xs: 4,
-    sm: 8,
-    md: 16,
-    lg: 24,
-    xl: 32,
-    xxl: 48,
-  },
-  typography: {
-    display: { size: 32, weight: 700, lineHeight: 1.2 },
-    headingLg: { size: 24, weight: 600, lineHeight: 1.3 },
-    headingMd: { size: 20, weight: 600, lineHeight: 1.3 },
-    headingSm: { size: 16, weight: 600, lineHeight: 1.4 },
-    body: { size: 16, weight: 400, lineHeight: 1.5 },
-    bodySm: { size: 14, weight: 400, lineHeight: 1.5 },
-    caption: { size: 12, weight: 400, lineHeight: 1.4 },
-    button: { size: 16, weight: 600, lineHeight: 1.0 },
-  },
-  breakpoints: {
-    compactMax: 600,
-    regularMax: 1024,
-  },
-  motion: {
-    quick: 200,
-    normal: 300,
-    slow: 500,
-    easing: {
-      default: "ease-out",
-      enter: "ease-out",
-      exit: "ease-in",
-      emphasis: "cubic-bezier(0.2, 0, 0, 1)",
-    },
-  },
-} as const;
-
-export type LocaleCode = "en" | "ru" | "uz";
-export type ThemePreference = "system" | "light" | "dark";
-export type SizeClass = "compact" | "regular" | "expanded";