openuispec 0.1.45 → 0.1.47

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

@@ -0,0 +1,340 @@
+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-white"
+          : 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

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

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

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

@@ -0,0 +1,70 @@
+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";