@effectnode/media 0.4.0 → 0.5.0

package/frontend/src/movie-app/components/ProjectManager.tsx

@@ -163,15 +163,20 @@ export default function ProjectManager() {
   // ========== Render ==========
 
   return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-8">
-        <div>
-          <h2 className="text-xl font-semibold text-ink-900 tracking-tight">
-            Projects
-          </h2>
-          <p className="text-sm text-ink-600/70 mt-0.5">
-            Manage your media projects
+    <div className="flex flex-col">
+      {/* Hero */}
+      <header className="flex flex-col gap-7 md:flex-row md:items-end md:justify-between">
+        <div className="max-w-xl">
+          <p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-tiffany-600">
+            Lambobo Studio
+          </p>
+          <h1 className="mt-3 font-display text-4xl font-light leading-[1.06] text-ink-900 md:text-5xl">
+            Make the movies{" "}
+            <span className="wordmark font-medium italic">you dream of</span>
+          </h1>
+          <p className="mt-4 text-sm leading-relaxed text-ink-600/80">
+            A local AI studio for writing stories, casting characters, and
+            turning scenes into motion.
           </p>
         </div>
         <button
@@ -179,24 +184,24 @@ export default function ProjectManager() {
             resetForm();
             setShowCreate(true);
           }}
-          className="flex items-center gap-1.5 px-4 py-2 bg-tiffany-500 hover:bg-tiffany-600 active:bg-tiffany-700 text-ink-950 text-sm font-medium rounded-2xl transition-all duration-150 shadow-glow hover:shadow-glow"
+          className="btn-primary flex w-fit items-center gap-1.5 rounded-2xl px-5 py-2.5 text-sm font-medium"
         >
           {PlusIcon}
           New Project
         </button>
-      </div>
+      </header>
 
       {/* Error */}
       {error && (
-        <div className="mb-4 px-4 py-3 bg-red-50 border border-red-200 rounded-2xl text-red-600 text-sm">
+        <div className="mt-8 rounded-2xl border border-rose-200 bg-rose-50/70 px-4 py-3 text-sm text-rose-600 backdrop-blur-sm">
           {error}
         </div>
       )}
 
       {/* Create / Edit Form */}
       {showCreate && (
-        <div className="mb-5 p-6 bg-white border border-ink-200 rounded-3xl shadow-card">
-          <h3 className="text-sm font-semibold text-ink-900 mb-3">
+        <div className="glass mt-8 rounded-3xl p-6 shadow-card">
+          <h3 className="font-display text-lg font-medium text-ink-900">
             {editingId ? "Edit Project" : "New Project"}
           </h3>
           <input
@@ -210,7 +215,7 @@ export default function ProjectManager() {
                 editingId ? handleUpdate() : handleCreate();
               if (e.key === "Escape") resetForm();
             }}
-            className="w-full mb-3 px-4 py-2.5 bg-ink-50 border border-ink-200 rounded-2xl text-ink-900 text-sm placeholder-ink-500/40 focus:outline-none focus:border-tiffany-500 focus:ring-2 focus:ring-tiffany-500/30 transition-all"
+            className="mt-4 w-full rounded-2xl border border-white/70 bg-white/70 px-4 py-2.5 text-sm text-ink-900 placeholder-ink-500/40 transition-all focus:border-tiffany-500 focus:outline-none focus:ring-2 focus:ring-tiffany-500/30"
           />
           <input
             type="text"
@@ -222,18 +227,18 @@ export default function ProjectManager() {
                 editingId ? handleUpdate() : handleCreate();
               if (e.key === "Escape") resetForm();
             }}
-            className="w-full mb-4 px-4 py-2.5 bg-ink-50 border border-ink-200 rounded-2xl text-ink-900 text-sm placeholder-ink-500/40 focus:outline-none focus:border-tiffany-500 focus:ring-2 focus:ring-tiffany-500/30 transition-all"
+            className="mt-3 w-full rounded-2xl border border-white/70 bg-white/70 px-4 py-2.5 text-sm text-ink-900 placeholder-ink-500/40 transition-all focus:border-tiffany-500 focus:outline-none focus:ring-2 focus:ring-tiffany-500/30"
           />
-          <div className="flex gap-2">
+          <div className="mt-4 flex gap-2">
             <button
               onClick={editingId ? handleUpdate : handleCreate}
-              className="px-5 py-2 bg-tiffany-500 hover:bg-tiffany-600 active:bg-tiffany-700 text-ink-950 text-sm font-medium rounded-2xl transition-all duration-150"
+              className="btn-primary rounded-2xl px-5 py-2 text-sm font-medium"
             >
               {editingId ? "Update" : "Create"}
             </button>
             <button
               onClick={resetForm}
-              className="px-5 py-2 bg-ink-100 hover:bg-ink-300 text-ink-700 text-sm font-medium rounded-2xl transition-all duration-150"
+              className="rounded-2xl border border-ink-200 bg-white/60 px-5 py-2 text-sm font-medium text-ink-700 transition-colors hover:bg-ink-100"
             >
               Cancel
             </button>
@@ -241,64 +246,87 @@ export default function ProjectManager() {
         </div>
       )}
 
+      {/* Section label */}
+      <div className="mt-12 mb-4 flex items-center gap-3">
+        <h2 className="font-display text-xl font-medium text-ink-900">
+          Projects
+        </h2>
+        <span className="text-xs text-ink-500">
+          {loading ? "…" : `${projects.length} in the studio`}
+        </span>
+        <div className="hairline flex-1" />
+      </div>
+
       {/* Project List */}
       {loading ? (
-        <div className="flex items-center justify-center py-16 text-ink-600/50 text-sm">
-          Loading...
+        <div className="flex items-center justify-center py-16 text-sm text-ink-600/50">
+          Loading…
         </div>
       ) : projects.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16">
-          <div className="w-16 h-16 bg-ink-100 rounded-3xl flex items-center justify-center mb-4">
+        <div className="glass flex flex-col items-center justify-center rounded-3xl px-6 py-20 text-center shadow-card">
+          <div className="thumb flex h-20 w-20 items-center justify-center rounded-3xl text-ink-900/70 shadow-glow-sm">
             <svg
-              width="28"
-              height="28"
+              width="32"
+              height="32"
               viewBox="0 0 24 24"
               fill="none"
-              stroke="#81d8d0"
+              stroke="currentColor"
               strokeWidth="1.5"
             >
               <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
             </svg>
           </div>
-          <p className="text-sm font-medium text-ink-800">No projects yet</p>
-          <p className="text-xs text-ink-600/60 mt-1">
-            Create your first project to get started
+          <p className="mt-5 font-display text-2xl font-light text-ink-900">
+            Your studio is empty
+          </p>
+          <p className="mt-1.5 max-w-xs text-sm leading-relaxed text-ink-600/70">
+            Create your first project and start turning an idea into motion.
           </p>
+          <button
+            onClick={() => {
+              resetForm();
+              setShowCreate(true);
+            }}
+            className="btn-primary mt-6 flex items-center gap-1.5 rounded-2xl px-5 py-2.5 text-sm font-medium"
+          >
+            {PlusIcon}
+            New Project
+          </button>
         </div>
       ) : (
-        <div className="flex-1 overflow-y-auto space-y-2">
+        <div className="space-y-2.5">
           {projects.map((p) => (
             <div
               key={p.id}
-              className="flex items-center gap-3 px-4 py-3.5 bg-white border border-ink-200 hover:border-ink-400 hover:shadow-card-hover rounded-2xl transition-all duration-150 group"
+              className="group flex items-center gap-3 rounded-2xl px-4 py-3.5 shadow-card transition-all duration-200 hover:-translate-y-0.5 hover:shadow-card-hover glass"
             >
               {/* Project info */}
               <button
                 onClick={() => openProject(p.id)}
-                className="flex-1 flex items-center gap-3 text-left min-w-0"
+                className="flex min-w-0 flex-1 items-center gap-3 text-left"
               >
-                <div className="shrink-0 w-9 h-9 bg-ink-100 border border-ink-200 rounded-2xl flex items-center justify-center">
+                <div className="thumb flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-ink-900/70">
                   <svg
-                    width="15"
-                    height="15"
+                    width="16"
+                    height="16"
                     viewBox="0 0 24 24"
                     fill="none"
-                    stroke="#81d8d0"
+                    stroke="currentColor"
                     strokeWidth="2"
                   >
                     <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                   </svg>
                 </div>
                 <div className="min-w-0">
-                  <p className="text-sm font-medium text-ink-900 truncate">
+                  <p className="truncate font-display text-[15px] font-medium leading-tight text-ink-900">
                     {p.name}
                   </p>
                   {p.description ? (
-                    <p className="text-xs text-ink-600/60 truncate mt-0.5">
+                    <p className="mt-0.5 truncate text-xs text-ink-600/70">
                       {p.description}
                     </p>
                   ) : (
-                    <p className="text-xs text-ink-500/60 italic mt-0.5">
+                    <p className="mt-0.5 text-xs italic text-ink-500/60">
                       No description
                     </p>
                   )}
@@ -306,38 +334,38 @@ export default function ProjectManager() {
               </button>
 
               {/* Actions */}
-              <div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150">
+              <div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                 <button
                   onClick={() => startEdit(p)}
-                  className="p-2 text-ink-600/40 hover:text-tiffany-600 hover:bg-ink-100 rounded-xl transition-colors"
+                  className="rounded-xl p-2 text-ink-600/40 transition-colors hover:bg-ink-100 hover:text-tiffany-700"
                   title="Edit"
                 >
                   {EditIcon}
                 </button>
                 <button
                   onClick={() => openFolder(p.id, "upload")}
-                  className="p-2 text-ink-600/40 hover:text-tiffany-600 hover:bg-ink-100 rounded-xl transition-colors"
+                  className="rounded-xl p-2 text-ink-600/40 transition-colors hover:bg-ink-100 hover:text-tiffany-700"
                   title="Open Uploads Folder"
                 >
                   {UploadFolderIcon}
                 </button>
                 <button
                   onClick={() => openFolder(p.id, "output")}
-                  className="p-2 text-ink-600/40 hover:text-tiffany-600 hover:bg-ink-100 rounded-xl transition-colors"
+                  className="rounded-xl p-2 text-ink-600/40 transition-colors hover:bg-ink-100 hover:text-tiffany-700"
                   title="Open Outputs Folder"
                 >
                   {OutputFolderIcon}
                 </button>
                 <button
                   onClick={() => setDeleteConfirm(p.id)}
-                  className="p-2 text-ink-600/40 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
+                  className="rounded-xl p-2 text-ink-600/40 transition-colors hover:bg-rose-50 hover:text-rose-600"
                   title="Delete"
                 >
                   {DeleteIcon}
                 </button>
                 <button
                   onClick={() => openProject(p.id)}
-                  className="p-2 text-ink-600/40 hover:text-tiffany-600 hover:bg-ink-100 rounded-xl transition-colors"
+                  className="rounded-xl p-2 text-ink-600/40 transition-colors hover:bg-ink-100 hover:text-tiffany-700"
                   title="Open"
                 >
                   {OpenIcon}
@@ -350,25 +378,25 @@ export default function ProjectManager() {
 
       {/* Delete Confirmation Modal */}
       {deleteConfirm && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-          <div className="bg-white border border-ink-200 rounded-3xl p-8 w-80 shadow-modal">
-            <h3 className="text-sm font-semibold text-ink-900 mb-2">
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-ink-950/40 backdrop-blur-sm">
+          <div className="w-80 rounded-3xl border border-white/70 bg-white/90 p-8 shadow-modal backdrop-blur-xl">
+            <h3 className="font-display text-lg font-medium text-ink-900">
               Delete Project
             </h3>
-            <p className="text-sm text-ink-600/80 mb-5 leading-relaxed">
+            <p className="mt-2 text-sm leading-relaxed text-ink-600/80">
               Are you sure you want to delete this project? This action cannot
               be undone.
             </p>
-            <div className="flex gap-2 justify-end">
+            <div className="mt-5 flex justify-end gap-2">
               <button
                 onClick={() => setDeleteConfirm(null)}
-                className="px-4 py-2 bg-ink-100 hover:bg-ink-300 text-ink-700 text-sm font-medium rounded-2xl transition-colors"
+                className="rounded-2xl bg-ink-100 px-4 py-2 text-sm font-medium text-ink-700 transition-colors hover:bg-ink-300"
               >
                 Cancel
               </button>
               <button
                 onClick={() => handleDelete(deleteConfirm)}
-                className="px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-2xl transition-colors"
+                className="rounded-2xl bg-rose-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-rose-600"
               >
                 Delete
               </button>

package/frontend/src/movie-app/index.css

@@ -1,22 +1,80 @@
 @import "tailwindcss";
 
+/* ==========================================================================
+   Lambobo Studio — design tokens
+   A dreamy, tiffany-blue film studio. Gradients read like light through
+   shallow water: tiffany teal → aqua → periwinkle → blush.
+   ========================================================================== */
+
+@theme {
+  /* ---- Type ---- */
+  --font-sans: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-display: "Cormorant", "Iowan Old Style", "Baskerville", "Georgia",
+    serif;
+  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+    "Liberation Mono", monospace;
+
+  /* ---- Tiffany (the brand) ---- */
+  --color-tiffany-50: #effbf9;
+  --color-tiffany-100: #d7f4f1;
+  --color-tiffany-200: #b0e8e3;
+  --color-tiffany-300: #81d8d0;
+  --color-tiffany-400: #4fc3bc;
+  --color-tiffany-500: #0abab5;
+  --color-tiffany-600: #089a96;
+  --color-tiffany-700: #077a77;
+  --color-tiffany-800: #06605e;
+  --color-tiffany-900: #04403f;
+  --color-tiffany-950: #022726;
+
+  /* ---- Ink (cool, teal-tinted neutrals) ---- */
+  --color-ink-50: #f3f7f7;
+  --color-ink-100: #e6edee;
+  --color-ink-200: #d2dee1;
+  --color-ink-300: #b0c3c8;
+  --color-ink-400: #83a0a7;
+  --color-ink-500: #5e7c83;
+  --color-ink-600: #47636b;
+  --color-ink-700: #395057;
+  --color-ink-800: #283a40;
+  --color-ink-900: #18272c;
+  --color-ink-950: #0d191c;
+
+  /* ---- Dream accents (the aurora) ---- */
+  --color-dream-periwinkle: #c3b4f4;
+  --color-dream-blush: #ffd6ea;
+  --color-dream-sky: #b7e1fb;
+  --color-dream-mint: #c8f1e6;
+
+  /* ---- Shadows ---- */
+  --shadow-glow: 0 8px 30px -6px rgba(10, 186, 181, 0.55),
+    0 2px 10px -2px rgba(10, 186, 181, 0.4);
+  --shadow-glow-sm: 0 0 14px -2px rgba(10, 186, 181, 0.45);
+  --shadow-card: 0 1px 2px rgba(13, 25, 28, 0.04),
+    0 10px 30px -12px rgba(13, 25, 28, 0.16);
+  --shadow-card-hover: 0 2px 4px rgba(13, 25, 28, 0.05),
+    0 18px 44px -14px rgba(10, 186, 181, 0.35);
+  --shadow-modal: 0 24px 80px -16px rgba(13, 25, 28, 0.35);
+}
+
 :root {
   color-scheme: light;
 }
 
 body {
   margin: 0;
-  background: #f5f8f9;
-  color: #3e4d54;
-  font-family:
-    "Avenir Next",
-    Avenir,
-    "Helvetica Neue",
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    Roboto,
-    sans-serif;
+  background-color: #f3f7f7;
+  background-image: radial-gradient(
+      120% 90% at 85% -10%,
+      rgba(183, 225, 251, 0.5),
+      transparent 60%
+    ),
+    radial-gradient(100% 80% at 0% 0%, rgba(255, 214, 234, 0.4), transparent 55%);
+  background-attachment: fixed;
+  color: #283a40;
+  font-family: "Avenir Next", Avenir, "Helvetica Neue", -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -24,23 +82,206 @@ body {
 code,
 pre,
 .font-mono {
-  font-family:
-    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
+  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
     "Liberation Mono", monospace;
 }
 
-/* Subtle light scrollbar */
+::selection {
+  background: rgba(10, 186, 181, 0.24);
+  color: #0d191c;
+}
+
+:focus-visible {
+  outline: 2px solid rgba(10, 186, 181, 0.6);
+  outline-offset: 2px;
+}
+
+/* Subtle tiffany scrollbar */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: #d8e2e6;
-  border-radius: 4px;
+  background: rgba(10, 186, 181, 0.28);
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: #bcc9cf;
+  background: rgba(10, 186, 181, 0.5);
+  background-clip: padding-box;
+}
+
+/* ==========================================================================
+   Atmosphere — the signature. Slow-drifting aurora of tiffany, periwinkle,
+   blush and sky, breathing behind a frosted-glass interface.
+   ========================================================================== */
+
+.aurora {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+  background: radial-gradient(
+      120% 90% at 85% -10%,
+      rgba(183, 225, 251, 0.55),
+      transparent 60%
+    ),
+    radial-gradient(
+      100% 80% at 8% 0%,
+      rgba(255, 214, 234, 0.5),
+      transparent 55%
+    ),
+    linear-gradient(165deg, #eaf8f6 0%, #f3f7f7 48%, #eceff9 100%);
+}
+
+.aurora-blob {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(70px);
+  opacity: 0.55;
+  will-change: transform;
+}
+
+.aurora-blob--tiffany {
+  width: 44rem;
+  height: 44rem;
+  left: -12rem;
+  top: -14rem;
+  background: radial-gradient(circle at 35% 35%, #81d8d0, transparent 68%);
+  animation: drift-a 36s ease-in-out infinite;
+}
+
+.aurora-blob--periwinkle {
+  width: 40rem;
+  height: 40rem;
+  right: -10rem;
+  top: -8rem;
+  background: radial-gradient(circle at 60% 40%, #c3b4f4, transparent 70%);
+  animation: drift-b 44s ease-in-out infinite;
+}
+
+.aurora-blob--blush {
+  width: 36rem;
+  height: 36rem;
+  left: 18%;
+  bottom: -16rem;
+  background: radial-gradient(circle at 50% 50%, #ffd6ea, transparent 70%);
+  animation: drift-c 40s ease-in-out infinite;
+}
+
+.aurora-blob--sky {
+  width: 46rem;
+  height: 46rem;
+  right: 8%;
+  bottom: -12rem;
+  background: radial-gradient(circle at 50% 50%, #b7e1fb, transparent 70%);
+  animation: drift-a 50s ease-in-out infinite;
+}
+
+@keyframes drift-a {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(4rem, 3rem, 0) scale(1.08);
+  }
+}
+
+@keyframes drift-b {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(-3rem, 4rem, 0) scale(0.94);
+  }
+}
+
+@keyframes drift-c {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(2rem, -4rem, 0) scale(1.12);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aurora-blob {
+    animation: none;
+  }
+}
+
+/* ==========================================================================
+   Surfaces & primitives
+   ========================================================================== */
+
+.glass {
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(20px) saturate(150%);
+  -webkit-backdrop-filter: blur(20px) saturate(150%);
+}
+
+.glass-dark {
+  background: rgba(13, 25, 28, 0.82);
+  border: 1px solid rgba(129, 216, 208, 0.16);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+}
+
+.wordmark {
+  background: linear-gradient(
+    115deg,
+    #0abab5 0%,
+    #4fc3bc 34%,
+    #c3b4f4 72%,
+    #ffd6ea 100%
+  );
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.thumb {
+  background-image: linear-gradient(135deg, #b0e8e3 0%, #81d8d0 50%, #c3b4f4 100%);
+}
+
+.btn-primary {
+  background-image: linear-gradient(
+    120deg,
+    #089a96 0%,
+    #0abab5 55%,
+    #4fc3bc 100%
+  );
+  color: #ffffff;
+  box-shadow: var(--shadow-glow);
+  transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
+}
+
+.btn-primary:hover {
+  filter: brightness(1.05);
+  box-shadow: 0 10px 34px -6px rgba(10, 186, 181, 0.6),
+    0 4px 12px -4px rgba(10, 186, 181, 0.45);
+}
+
+.btn-primary:active {
+  transform: translateY(1px);
+  filter: brightness(0.97);
+}
+
+.hairline {
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    rgba(176, 195, 200, 0.7),
+    rgba(176, 195, 200, 0)
+  );
 }