@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/pages/ReferencesPage/components/ReferenceCard.tsx

@@ -0,0 +1,42 @@
+import { Link } from "@tanstack/react-router";
+import { useSessionFor } from "../../../hooks/useSessions";
+import { referenceFileUrl } from "../../../lib/media";
+import { referenceFacts } from "../../../lib/references";
+import { SESSION_STATE } from "../../../lib/sessions";
+import { Badge } from "../../../components/ui/badge";
+import { AgentWalking } from "../../../components/AgentWalking";
+import { Palette } from "../../../components/Palette";
+import type { ReferenceSummary } from "../../../types/api";
+import { ReferenceActions } from "../../../components/ReferenceActions";
+
+export function ReferenceCard({ reference: r }: { reference: ReferenceSummary }) {
+  const session = useSessionFor("reference", r.name);
+  const cover = referenceFileUrl(r.name, r.cover);
+  const link = { to: "/styles/$name", params: { name: r.name } } as const;
+  return (
+    <li className={`reference-card${r.enabled ? "" : " off"}`}>
+      <Link {...link} className="reference-card-cover">
+        {cover ? <img src={cover} alt="" loading="lazy" /> : <span>Sem imagem</span>}
+      </Link>
+      <div className="reference-card-body">
+        <div className="vr-top">
+          <Link {...link} className="vr-title">
+            {r.title}
+          </Link>
+          {session?.state === "running" && <Badge variant="running">{SESSION_STATE.running.text}</Badge>}
+          <ReferenceActions reference={r} />
+          {session?.state === "running" && <AgentWalking className="in-corner" />}
+        </div>
+        <div className="meta">
+          <span className="mono">{r.name}</span>
+          {referenceFacts(r.measurements).map(f => (
+            <span key={f}>{f}</span>
+          ))}
+          {!r.guide && <Badge variant="warning">Sem guia</Badge>}
+        </div>
+        {r.essence && <p className="essence">{r.essence}</p>}
+        <Palette colors={r.palette.slice(0, 10)} />
+      </div>
+    </li>
+  );
+}

package/studio/web/pages/ReferencesPage/components/ReferenceGridSkeleton.tsx

@@ -0,0 +1,31 @@
+import { Skeleton } from "../../../components/ui/skeleton";
+
+/* same grid as the card: 120×160 cover and title, meta, essence and palette */
+export function ReferenceGridSkeleton() {
+  return (
+    <ul className="refs-grid" aria-busy="true" aria-label="Carregando os estilos visuais">
+      {Array.from({ length: 4 }, (_, i) => (
+        <li key={i} className="reference-card">
+          <Skeleton style={{ height: 160, borderRadius: "var(--radius-sm)" }} />
+          <div className="reference-card-body">
+            <div className="vr-top">
+              <Skeleton style={{ height: 20, width: "55%" }} />
+            </div>
+            <div className="meta">
+              <Skeleton className="row" style={{ width: 120 }} />
+              <Skeleton className="row" style={{ width: 60 }} />
+              <Skeleton className="row" style={{ width: 80 }} />
+            </div>
+            <Skeleton className="row" style={{ width: "90%" }} />
+            <Skeleton className="row" style={{ width: "70%" }} />
+            <div style={{ display: "flex", gap: 4 }}>
+              {Array.from({ length: 6 }, (_, c) => (
+                <Skeleton key={c} style={{ width: 22, height: 22, borderRadius: 4 }} />
+              ))}
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/studio/web/pages/ReferencesPage/index.tsx

@@ -0,0 +1,67 @@
+/* Reference library: each video's design system. Each reference is a measured video (rhythm,
+   cuts, palette) and a guide the motion script follows. The list and the request for a new one,
+   which becomes an agent session (measure and write the guide). */
+
+import { useEffect, useState } from "react";
+import { useReferences } from "../../hooks/useReferences";
+import { Plus } from "../../components/icons";
+import { NewReferenceForm } from "./components/NewReferenceForm";
+import { ReferenceCard } from "./components/ReferenceCard";
+import { ReferenceGridSkeleton } from "./components/ReferenceGridSkeleton";
+
+export function ReferencesPage() {
+  const { references, error } = useReferences();
+  const [creating, setCreating] = useState(false);
+  useEffect(() => {
+    document.title = "Estilos visuais · Omni";
+  }, []);
+  const enabled = references?.filter(r => r.enabled) ?? [];
+  const disabled = references?.filter(r => !r.enabled) ?? [];
+  return (
+    <div className="page references">
+      <header className="header">
+        <h1>Estilos visuais</h1>
+        {references && (
+          <span className="subtle">
+            {enabled.length}
+            {disabled.length > 0 && ` · ${disabled.length} desligado${disabled.length > 1 ? "s" : ""}`}
+          </span>
+        )}
+        {!creating && (
+          <button className="button primary push-end" onClick={() => setCreating(true)}>
+            <Plus className="ic" /> Novo estilo visual
+          </button>
+        )}
+      </header>
+      <p className="intro">
+        A cara visual de cada vídeo. Cada estilo visual nasce de um vídeo medido (cortes, ritmo, paleta, pulso) ou de
+        fotos, e de um guia escrito a partir do material: layout, cor, tipografia, curvas. O roteiro de motion escolhe
+        um e tira dele o visual de todas as cenas. Princípio, nunca asset copiado.
+      </p>
+      {creating && <NewReferenceForm onClose={() => setCreating(false)} />}
+      {error && <p className="error">{error}</p>}
+      {!references && !error && <ReferenceGridSkeleton />}
+      {references?.length === 0 && <p className="empty">Nenhum estilo visual ainda.</p>}
+      {references && references.length > 0 && enabled.length === 0 && (
+        <p className="empty">Todos os estilos visuais estão desligados.</p>
+      )}
+      <ul className="refs-grid">
+        {enabled.map(r => (
+          <ReferenceCard key={r.name} reference={r} />
+        ))}
+      </ul>
+      {disabled.length > 0 && (
+        <section className="refs-off">
+          <h2>
+            Desligadas <span className="subtle">O roteiro de motion não escolhe estas</span>
+          </h2>
+          <ul className="refs-grid">
+            {disabled.map(r => (
+              <ReferenceCard key={r.name} reference={r} />
+            ))}
+          </ul>
+        </section>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/CalendarSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "../../../components/ui/skeleton";
+import type { CalendarView } from "../../../lib/calendar";
+
+/* the calendar grid before the posts arrive: 7 columns, 5 weeks (month) or one week */
+export function CalendarSkeleton({ view }: { view: CalendarView }) {
+  const cells = view === "month" ? 35 : 7;
+  return (
+    <div
+      aria-busy="true"
+      aria-label="Carregando a agenda"
+      style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 8 }}
+    >
+      {Array.from({ length: cells }, (_, i) => (
+        <Skeleton key={i} style={{ height: view === "month" ? 104 : 320 }} />
+      ))}
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/DayView.tsx

@@ -0,0 +1,177 @@
+import { useContext, useEffect, useRef, useState, type DragEvent, type MouseEvent } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  CARD_HEIGHT,
+  draggable,
+  HOUR_HEIGHT,
+  hourOf,
+  PickContext,
+  postLink,
+  sameDay,
+  STATE_LABEL,
+  STEP_MIN,
+  withHour,
+  type DragController,
+  type Post,
+} from "../../../lib/calendar";
+import { PlatformIcons } from "./PlatformIcons";
+import { PostThumb } from "./PostThumb";
+
+/* day: the hour grid, each post at its exact time */
+export function DayView({
+  cursor,
+  posts,
+  now,
+  drag,
+  reschedule,
+}: {
+  cursor: Date;
+  posts: Post[];
+  now: Date;
+  drag: DragController;
+  reschedule: (p: Post, when: Date) => void;
+}) {
+  const navigate = useNavigate();
+  const ofDay = posts.filter(p => sameDay(p.when, cursor));
+  const scroller = useRef<HTMLDivElement>(null);
+  const grid = useRef<HTMLDivElement>(null);
+  const [guide, setGuide] = useState<number | null>(null);
+  const pick = useContext(PickContext);
+  const minutes = (d: Date) => d.getHours() * 60 + d.getMinutes();
+  const top = (d: Date) => (minutes(d) / 60) * HOUR_HEIGHT;
+
+  /* opens on the day's first post (or now, today), with one hour of room above */
+  const dayKey = cursor.toDateString();
+  useEffect(() => {
+    const target =
+      ofDay[0]?.when ??
+      (sameDay(cursor, now) ? now : new Date(cursor.getFullYear(), cursor.getMonth(), cursor.getDate(), 8));
+    scroller.current?.scrollTo({ top: Math.max(0, top(target) - HOUR_HEIGHT) });
+  }, [dayKey]);
+
+  /* the time where the card top lands, rounded to the step */
+  const minutesAtPoint = (e: DragEvent | MouseEvent) => {
+    const r = grid.current!.getBoundingClientRect();
+    const y = e.clientY - r.top - (drag.current()?.grabY ?? 0);
+    const m = Math.round(((y / HOUR_HEIGHT) * 60) / STEP_MIN) * STEP_MIN;
+    return Math.min(24 * 60 - STEP_MIN, Math.max(0, m));
+  };
+  const droppable = (m: number) => withHour(cursor, m).getTime() > now.getTime() + 60_000;
+
+  /* posts that touch share the width: each in one lane of the group */
+  const lanes = new Map<string, { lane: number; total: number }>();
+  let group: { p: Post; lane: number }[] = [];
+  let groupEnd = -1;
+  const close = () => {
+    const total = Math.max(...group.map(g => g.lane)) + 1;
+    group.forEach(g => lanes.set(g.p.slug, { lane: g.lane, total }));
+    group = [];
+  };
+  for (const p of ofDay) {
+    const y = top(p.when);
+    if (group.length && y >= groupEnd) close();
+    const taken = group.filter(g => top(g.p.when) + CARD_HEIGHT > y).map(g => g.lane);
+    let lane = 0;
+    while (taken.includes(lane)) lane++;
+    group.push({ p, lane });
+    groupEnd = Math.max(groupEnd, y + CARD_HEIGHT);
+  }
+  if (group.length) close();
+
+  return (
+    <div className="cal-day-scroll" ref={scroller}>
+      <div
+        className={`cal-day-grid${drag.drag || pick ? " receiving" : ""}`}
+        ref={grid}
+        style={{ height: 24 * HOUR_HEIGHT, ["--hour" as string]: `${HOUR_HEIGHT}px` }}
+        onMouseMove={
+          pick
+            ? e => {
+                const m = minutesAtPoint(e);
+                setGuide(droppable(m) ? m : null);
+              }
+            : undefined
+        }
+        onMouseLeave={pick ? () => setGuide(null) : undefined}
+        onClick={
+          pick
+            ? e => {
+                const m = minutesAtPoint(e);
+                if (droppable(m)) pick(cursor, m);
+              }
+            : undefined
+        }
+        onDragOver={e => {
+          if (!drag.current()) return;
+          const m = minutesAtPoint(e);
+          if (!droppable(m)) {
+            e.dataTransfer.dropEffect = "none";
+            setGuide(null);
+            return;
+          }
+          e.preventDefault();
+          e.dataTransfer.dropEffect = "move";
+          if (m !== guide) setGuide(m);
+        }}
+        onDragLeave={e => {
+          if (!(e.currentTarget as Node).contains(e.relatedTarget as Node)) setGuide(null);
+        }}
+        onDrop={e => {
+          e.preventDefault();
+          setGuide(null);
+          const cur = drag.current();
+          if (!cur) return;
+          const m = minutesAtPoint(e);
+          const changed = m !== minutes(cur.post.when) || !sameDay(cur.post.when, cursor);
+          if (droppable(m) && changed) reschedule(cur.post, withHour(cursor, m));
+        }}
+      >
+        {Array.from({ length: 24 }, (_, h) => (
+          <div key={h} className="cal-hour-line" style={{ top: h * HOUR_HEIGHT }}>
+            <span>{String(h).padStart(2, "0")}:00</span>
+          </div>
+        ))}
+        {sameDay(cursor, now) && <div className="cal-now" style={{ top: top(now) }} title={`agora, ${hourOf(now)}`} />}
+        {guide != null && (drag.drag || pick) && (
+          <div className="cal-guide" style={{ top: (guide / 60) * HOUR_HEIGHT, height: CARD_HEIGHT - 4 }}>
+            <b className="mono">{hourOf(withHour(cursor, guide))}</b>
+          </div>
+        )}
+        {ofDay.map(p => {
+          const { lane, total } = lanes.get(p.slug) ?? { lane: 0, total: 1 };
+          return (
+            <button
+              key={p.key}
+              className={`cal-event ${p.state}${drag.drag?.post.key === p.key ? " dragging" : ""}`}
+              onClick={() => {
+                if (!pick) navigate(postLink(p));
+              }}
+              {...draggable(p, drag)}
+              style={{
+                top: top(p.when),
+                height: CARD_HEIGHT - 4,
+                left: `calc(var(--hours-gutter) + (100% - var(--hours-gutter)) * ${lane / total})`,
+                width: `calc((100% - var(--hours-gutter)) / ${total} - 6px)`,
+              }}
+            >
+              <PostThumb post={p} />
+              <span className="cal-event-text">
+                <span className="cal-event-line">
+                  <b className="mono">{hourOf(p.when)}</b>
+                  <PlatformIcons ids={p.platforms} />
+                </span>
+                <span className="cal-event-title">{p.title}</span>
+                {p.state !== "scheduled" && (
+                  <span className={`cal-status ${p.state}`} title={p.error ?? ""}>
+                    {STATE_LABEL[p.state]}
+                    {p.error ? `: ${p.error}` : ""}
+                  </span>
+                )}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/HourPicker.tsx

@@ -0,0 +1,103 @@
+import { useEffect, useState } from "react";
+import { Check, X } from "../../../components/icons";
+import { hourOf, withHour, type Post } from "../../../lib/calendar";
+import { PlatformIcons } from "./PlatformIcons";
+import { PostThumb } from "./PostThumb";
+
+/* picking the time, after dropping on a day (month and week) or after picking the day */
+export function HourPicker({
+  post,
+  day,
+  now,
+  onSave,
+  onClose,
+  title = "Remarcar",
+  initial,
+  showFrom = true,
+}: {
+  post: Post;
+  day: Date;
+  now: Date;
+  onSave: (when: Date) => Promise<string | null>;
+  onClose: () => void;
+  title?: string;
+  initial?: string;
+  showFrom?: boolean;
+}) {
+  const [value, setValue] = useState(initial ?? hourOf(post.when));
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [h, m] = value.split(":").map(Number);
+  const when = Number.isFinite(h) && Number.isFinite(m) ? withHour(day, h * 60 + m) : null;
+  const past = !!when && when.getTime() <= now.getTime() + 60_000;
+  const ok = !!when && !past;
+
+  useEffect(() => {
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    addEventListener("keydown", esc);
+    return () => removeEventListener("keydown", esc);
+  }, [onClose]);
+
+  const submit = async () => {
+    if (!when || !ok) return;
+    setSaving(true);
+    setError(null);
+    const e = await onSave(when);
+    setSaving(false);
+    if (e) setError(e);
+    else onClose();
+  };
+
+  return (
+    <div className="cal-modal-backdrop" onClick={onClose}>
+      <div
+        className="cal-modal"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Escolher a hora"
+        onClick={e => e.stopPropagation()}
+      >
+        <h3>{title}</h3>
+        <div className="cal-modal-post">
+          <PostThumb post={post} />
+          <span>
+            <b>{post.title}</b>
+            <PlatformIcons ids={post.platforms} />
+          </span>
+        </div>
+        {showFrom && (
+          <p className="subtle">
+            De {post.when.toLocaleDateString("pt-BR", { weekday: "short", day: "numeric", month: "short" })},{" "}
+            {hourOf(post.when)}
+          </p>
+        )}
+        <label className="field">
+          <span>Para {day.toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" })}, às</span>
+          <input
+            type="time"
+            step={300}
+            value={value}
+            autoFocus
+            disabled={saving}
+            onChange={e => setValue(e.target.value)}
+            onKeyDown={e => {
+              if (e.key === "Enter") submit();
+            }}
+          />
+        </label>
+        {past && <p className="warning">Essa hora já passou: escolha uma daqui a pelo menos 1 min.</p>}
+        {error && <p className="response error">{error}</p>}
+        <div className="actions">
+          <button className="button primary" disabled={!ok || saving} onClick={submit}>
+            <Check className="ic" /> {saving ? "Salvando…" : showFrom ? "Salvar" : "Escolher"}
+          </button>
+          <button className="button" disabled={saving} onClick={onClose}>
+            <X className="ic" /> Cancelar
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/MonthDayCell.tsx

@@ -0,0 +1,111 @@
+import { useContext } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+  canDrag,
+  draggable,
+  hourOf,
+  PickContext,
+  postLink,
+  sameDay,
+  STATE_LABEL,
+  useDayDropTarget,
+  type DragController,
+  type Post,
+} from "../../../lib/calendar";
+import { PlatformIcons } from "./PlatformIcons";
+import { PostThumb } from "./PostThumb";
+
+/* month: the day lists its posts without time; hovering shows the day's videos */
+export function MonthDayCell({
+  d,
+  i,
+  weeks,
+  cursor,
+  posts,
+  today,
+  goToDay,
+  drag,
+  drop,
+}: {
+  d: Date;
+  i: number;
+  weeks: number;
+  cursor: Date;
+  posts: Post[];
+  today: Date;
+  goToDay: (d: Date) => void;
+  drag: DragController;
+  drop: (p: Post, d: Date) => void;
+}) {
+  const navigate = useNavigate();
+  const ofDay = posts.filter(p => sameDay(p.when, d));
+  const target = useDayDropTarget(d, today, drag, drop);
+  const pick = useContext(PickContext);
+  const click = () => (pick ? pick(d) : goToDay(d));
+  const col = i % 7,
+    row = Math.floor(i / 7);
+  const classes = [
+    "cal-day",
+    d.getMonth() !== cursor.getMonth() && "outside",
+    sameDay(d, today) && "today",
+    d < today && "past",
+    ofDay.length && "has-posts",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div
+      className={classes + target.className}
+      {...target.props}
+      onClick={click}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.key === "Enter") click();
+      }}
+      aria-label={`${d.toLocaleDateString("pt-BR")}: ${ofDay.length} post(s)`}
+    >
+      <span className="cal-num">{d.getDate()}</span>
+      {ofDay.slice(0, 3).map(p => (
+        <div
+          key={p.key}
+          className={`cal-chip ${p.state}${drag.drag?.post.key === p.key ? " dragging" : ""}`}
+          {...draggable(p, drag)}
+          title={canDrag(p) ? "Arraste para outro dia" : undefined}
+        >
+          <PlatformIcons ids={p.platforms} size={11} />
+          <span className="cal-chip-title">{p.title}</span>
+        </div>
+      ))}
+      {ofDay.length > 3 && <span className="cal-more">+{ofDay.length - 3}</span>}
+      {ofDay.length > 0 && (
+        <div
+          className={`cal-pop${col >= 4 ? " right" : ""}${row >= weeks - 2 && weeks > 3 ? " above" : ""}`}
+          onClick={e => e.stopPropagation()}
+        >
+          <p className="cal-pop-day">
+            {d.toLocaleDateString("pt-BR", { weekday: "long", day: "numeric", month: "long" })}
+          </p>
+          {ofDay.map(p => (
+            <button
+              key={p.key}
+              className={`cal-pop-item ${p.state}`}
+              onClick={() => (pick ? pick(d) : navigate(postLink(p)))}
+              {...draggable(p, drag)}
+            >
+              <PostThumb post={p} />
+              <span className="cal-pop-text">
+                <b>{p.title}</b>
+                <span className="cal-event-line">
+                  <b className="mono cal-pop-hour">{hourOf(p.when)}</b>
+                  <PlatformIcons ids={p.platforms} />
+                </span>
+                {p.state !== "scheduled" && <span className={`cal-status ${p.state}`}>{STATE_LABEL[p.state]}</span>}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/MonthView.tsx

@@ -0,0 +1,47 @@
+import { addDays, startOfWeek, WEEKDAYS, type DragController, type Post } from "../../../lib/calendar";
+import { MonthDayCell } from "./MonthDayCell";
+
+export function MonthView({
+  cursor,
+  posts,
+  today,
+  goToDay,
+  drag,
+  drop,
+}: {
+  cursor: Date;
+  posts: Post[];
+  today: Date;
+  goToDay: (d: Date) => void;
+  drag: DragController;
+  drop: (p: Post, d: Date) => void;
+}) {
+  const first = new Date(cursor.getFullYear(), cursor.getMonth(), 1);
+  const start = startOfWeek(first);
+  const daysInMonth = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 0).getDate();
+  const weeks = Math.ceil((first.getDay() + daysInMonth) / 7);
+  const days = Array.from({ length: weeks * 7 }, (_, i) => addDays(start, i));
+  return (
+    <div className="cal-month" style={{ ["--weeks" as string]: weeks }}>
+      {WEEKDAYS.map(d => (
+        <div key={d} className="cal-day-header">
+          {d}
+        </div>
+      ))}
+      {days.map((d, i) => (
+        <MonthDayCell
+          key={d.toDateString()}
+          d={d}
+          i={i}
+          weeks={weeks}
+          cursor={cursor}
+          posts={posts}
+          today={today}
+          goToDay={goToDay}
+          drag={drag}
+          drop={drop}
+        />
+      ))}
+    </div>
+  );
+}

package/studio/web/pages/SchedulePage/components/PlatformIcons.tsx

@@ -0,0 +1,12 @@
+import { PlatformIcon } from "../../../components/PlatformIcon";
+import { platformName, type PlatformId } from "../../../lib/platforms";
+
+export function PlatformIcons({ ids, size = 14 }: { ids: PlatformId[]; size?: number }) {
+  return (
+    <span className="cal-plats" title={ids.map(platformName).join(", ")}>
+      {ids.map(id => (
+        <PlatformIcon key={id} id={id} size={size} />
+      ))}
+    </span>
+  );
+}

package/studio/web/pages/SchedulePage/components/PostThumb.tsx

@@ -0,0 +1,15 @@
+import type { Post } from "../../../lib/calendar";
+
+export function PostThumb({ post }: { post: Post }) {
+  return post.img ? (
+    <img
+      className={`cal-mini${post.portrait ? " portrait" : ""}`}
+      src={post.img}
+      alt=""
+      loading="lazy"
+      draggable={false}
+    />
+  ) : (
+    <span className={`cal-mini empty${post.portrait ? " portrait" : ""}`} />
+  );
+}