@plasius/video 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -20,15 +20,1177 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AIVideoGenerationScreen: () => AIVideoGenerationScreen,
+  AIVideoGenerationStudioDemo: () => AIVideoGenerationStudioDemo,
+  AI_VIDEO_GENERATION_SCREEN_STYLES: () => AI_VIDEO_GENERATION_SCREEN_STYLES,
+  aiVideoGenerationTokens: () => aiVideoGenerationTokens,
+  aiVideoStageFlow: () => aiVideoStageFlow,
+  createAIVideoGenerationDemoModel: () => createAIVideoGenerationDemoModel,
   videoPackageInfo: () => videoPackageInfo
 });
 module.exports = __toCommonJS(index_exports);
+
+// src/ai-video-generation/tokens.ts
+var aiVideoGenerationTokens = {
+  color: {
+    background: "#0F1117",
+    surface: "#161A23",
+    accentPrimary: "#6C5CE7",
+    accentSecondary: "#00D4FF",
+    success: "#00C896",
+    warning: "#FFB020",
+    error: "#FF4D4F",
+    textPrimary: "#E6EAF2",
+    textSecondary: "#A0A8B8",
+    borderSubtle: "rgba(255,255,255,0.05)",
+    placeholderText: "rgba(255,255,255,0.35)"
+  },
+  typography: {
+    headingFontFamily: "Inter, 'SF Pro Display', sans-serif",
+    bodyFontFamily: "Inter, sans-serif",
+    h1Px: 28,
+    h2Px: 20,
+    bodyPx: 16,
+    smallPx: 13,
+    promptPxMin: 16,
+    promptPxMax: 18
+  },
+  layout: {
+    headerHeightPx: 64,
+    promptBarMinHeightPx: 140,
+    gridGapPx: 16,
+    cardAspectRatio: "16 / 9"
+  },
+  radius: {
+    promptPx: 12,
+    cardPx: 14,
+    panelPx: 14
+  },
+  spacing: {
+    xxsPx: 4,
+    xsPx: 8,
+    smPx: 12,
+    mdPx: 16,
+    lgPx: 20,
+    xlPx: 24
+  },
+  animation: {
+    fastMs: 200,
+    standardMs: 280,
+    slowMs: 300,
+    easing: "cubic-bezier(0.4, 0.0, 0.2, 1)"
+  }
+};
+
+// src/ai-video-generation/stages.ts
+var aiVideoStageFlow = [
+  {
+    stage: "idle",
+    label: "Idle",
+    mainUI: "Prompt input",
+    description: "Base prompt entry with optional image upload and advanced settings."
+  },
+  {
+    stage: "generatingImages",
+    label: "Generating Images",
+    mainUI: "Skeleton grid",
+    description: "Asynchronous generation feedback with shimmer placeholders."
+  },
+  {
+    stage: "imageSelection",
+    label: "Image Selection",
+    mainUI: "Image grid",
+    description: "Select, refine, save, and mark an image as the video source."
+  },
+  {
+    stage: "generatingVideo",
+    label: "Generating Video",
+    mainUI: "Image + progress",
+    description: "Motion extraction and generation progress with live feedback."
+  },
+  {
+    stage: "playback",
+    label: "Playback",
+    mainUI: "Video player",
+    description: "Playback controls, download, regenerate, and voiceover entry point."
+  },
+  {
+    stage: "voiceover",
+    label: "Voiceover",
+    mainUI: "Bottom voice panel",
+    description: "Editable script, voice presets, speed/emotion controls, waveform preview."
+  },
+  {
+    stage: "export",
+    label: "Export",
+    mainUI: "Export modal",
+    description: "Final artifact export options with quality and format metadata."
+  }
+];
+
+// src/ai-video-generation/demo-model.ts
+var basePrompt = "Mountain village at sunset";
+var refinement = "Add fog rolling through the valley";
+var baseVariants = [
+  { id: "img-1", label: "Variant 1", alt: "Village view with warm skyline" },
+  { id: "img-2", label: "Variant 2", alt: "Village rooftops and distant mountains" },
+  { id: "img-3", label: "Variant 3", alt: "Bridge over misted valley" },
+  { id: "img-4", label: "Variant 4", alt: "Forest edge overlooking village lights" },
+  { id: "img-5", label: "Variant 5", alt: "Cloud bank drifting above the town" },
+  { id: "img-6", label: "Variant 6", alt: "Cinematic wide frame across the valley" }
+];
+var stageStatusText = {
+  idle: "Ready to generate image directions.",
+  generatingImages: "Generating course-setting image variants...",
+  imageSelection: "Choose a visual anchor for motion extraction.",
+  generatingVideo: "Generating video from selected course image...",
+  playback: "Video ready for review.",
+  voiceover: "Voiceover tools ready.",
+  export: "Review export profile and metadata."
+};
+function withSelectedVariant(variants, selectedId) {
+  return variants.map((variant) => ({
+    ...variant,
+    isSelected: variant.id === selectedId
+  }));
+}
+function createAIVideoGenerationDemoModel(stage = "idle") {
+  const selectedId = "img-3";
+  const selectedVariants = withSelectedVariant(baseVariants, selectedId);
+  const model = {
+    stage,
+    projectName: "Mountain Valley Storyboard",
+    prompt: basePrompt,
+    promptPlaceholder: "Describe your scene, camera movement, mood, and intended spoken narration...",
+    canGenerate: stage !== "generatingImages" && stage !== "generatingVideo",
+    statusText: stageStatusText[stage],
+    generationProgress: stage === "generatingVideo" ? 62 : 100,
+    imageVariants: stage === "idle" ? [] : stage === "generatingImages" ? baseVariants.slice(0, 8) : selectedVariants,
+    selectedImageId: stage === "imageSelection" || stage === "generatingVideo" || stage === "playback" || stage === "voiceover" || stage === "export" ? selectedId : void 0,
+    promptVersions: [
+      {
+        id: "v1",
+        label: "Version 1",
+        basePrompt
+      },
+      {
+        id: "v2",
+        label: "Version 2",
+        basePrompt,
+        refinement
+      },
+      {
+        id: "v3",
+        label: "Version 3",
+        basePrompt,
+        refinement: `${refinement}; camera starts low and pans left.`,
+        isActive: true
+      }
+    ],
+    motionDraft: {
+      cameraMotion: "Camera slowly pans left, then settles into a medium-wide frame.",
+      environmentalMotion: "Fog layers move through the valley while lantern light flickers.",
+      subjectMotion: "Foreground flags sway and distant birds cross near the skyline."
+    },
+    motionPrompt: "Camera slowly pans left with drifting fog and gentle ambient motion.",
+    voiceSettings: {
+      script: "Welcome to the ancient valley. Each light tells a story waiting to be explored.",
+      voiceId: "narrator-documentary",
+      speed: 1,
+      emotion: "Neutral"
+    },
+    voicePresets: [
+      { id: "male-warm", label: "Male Warm" },
+      { id: "female-calm", label: "Female Calm" },
+      { id: "narrator-documentary", label: "Narrator Documentary" }
+    ],
+    videoSource: stage === "playback" || stage === "voiceover" || stage === "export" ? "https://example.invalid/plasius/video/demo.mp4" : void 0
+  };
+  if (stage === "idle") {
+    model.uploadedImageName = "uploaded-village-frame.png";
+    model.motionPrompt = "";
+    model.canGenerate = false;
+    model.statusText = "Upload Image: complete. Add motion instructions (required).";
+  }
+  return model;
+}
+
+// src/ai-video-generation/screen.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var stageLabel = {
+  idle: "Prompt",
+  generatingImages: "Images",
+  imageSelection: "Selection",
+  generatingVideo: "Video",
+  playback: "Playback",
+  voiceover: "Voiceover",
+  export: "Export"
+};
+function clampProgress(value) {
+  if (typeof value !== "number" || Number.isNaN(value)) {
+    return 0;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 100) {
+    return 100;
+  }
+  return Math.round(value);
+}
+function gradientForCard(index) {
+  const gradients = [
+    "linear-gradient(140deg, #20305a 0%, #6c5ce7 45%, #00d4ff 100%)",
+    "linear-gradient(140deg, #2b1f3f 0%, #6c5ce7 48%, #3dd9f5 100%)",
+    "linear-gradient(140deg, #283645 0%, #4f89c2 46%, #9be3ff 100%)",
+    "linear-gradient(140deg, #2f2921 0%, #8a5f3a 48%, #ffd39f 100%)"
+  ];
+  return gradients[index % gradients.length];
+}
+function renderImageCard(variant, index, callbacks) {
+  const isSelected = Boolean(variant.isSelected);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "article",
+    {
+      className: `plv-image-card${isSelected ? " is-selected" : ""}`,
+      "aria-label": variant.alt ?? variant.label,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "plv-image-select-hitbox",
+            "aria-pressed": isSelected,
+            onClick: () => callbacks.onSelectImage?.(variant),
+            children: [
+              variant.src ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: variant.src, alt: variant.alt ?? variant.label, className: "plv-image-media" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-image-media", style: { background: gradientForCard(index) } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-image-caption", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: variant.label }),
+                isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "plv-chip", children: "Selected" }) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-image-overlay-controls", role: "group", "aria-label": `${variant.label} controls`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => callbacks.onRefineImage?.(variant), children: "Refine" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => callbacks.onSaveImage?.(variant), children: "Save" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => callbacks.onUseForVideo?.(variant), children: "Use for Video" })
+        ] }),
+        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "plv-selected-checkmark", "aria-hidden": "true", children: "\u2713" }) : null
+      ]
+    },
+    variant.id
+  );
+}
+function renderSkeletonGrid(count) {
+  const items = Array.from({ length: count }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-skeleton-card" }, `skeleton-${index}`));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-image-grid", children: items });
+}
+function renderStageCanvas(model, callbacks) {
+  const progress = clampProgress(model.generationProgress);
+  if (model.stage === "generatingImages") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Generating Image Variants" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "plv-muted", children: model.statusText }),
+      renderSkeletonGrid(model.imageVariants.length > 0 ? model.imageVariants.length : 8)
+    ] });
+  }
+  if (model.stage === "imageSelection") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Course Setting Image Grid" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "plv-muted", children: "Select a visual anchor before video generation." }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-image-grid", children: model.imageVariants.map((variant, index) => renderImageCard(variant, index, callbacks)) })
+    ] });
+  }
+  if (model.stage === "generatingVideo") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Video Generation Phase" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-split-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-preview-box", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-preview-title", children: "Image Preview" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-preview-media" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-motion-panel", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-preview-title", children: "Motion Summary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            "Camera motion",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { readOnly: true, value: model.motionDraft.cameraMotion })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            "Environmental motion",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { readOnly: true, value: model.motionDraft.environmentalMotion })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { children: [
+            "Subject motion",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { readOnly: true, value: model.motionDraft.subjectMotion })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-progress-panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-progress-topline", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Generating Video..." }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            progress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-progress-track", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progress, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-progress-fill", style: { width: `${progress}%` } }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-waveform", "aria-hidden": "true" })
+      ] })
+    ] });
+  }
+  if (model.stage === "playback" || model.stage === "voiceover" || model.stage === "export") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Video Playback" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-player-shell", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-player-frame", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-player-glow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-player-screen", children: "16:9 Preview Frame" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-player-controls", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", children: "Play / Pause" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", children: "Timeline" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", children: "Volume" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onDownloadVideo, children: "Download" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onRegenerateVideo, children: "Regenerate" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onAddVoiceover, children: "Add Voiceover" })
+        ] })
+      ] }),
+      model.stage === "voiceover" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "plv-voiceover-panel", "aria-label": "Voiceover panel", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-preview-title", children: "Extracted Speech" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { readOnly: true, value: model.voiceSettings.script }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-voice-grid", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-field-label", children: "Voice" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-pill-group", children: model.voicePresets.map((voice) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: voice.id === model.voiceSettings.voiceId ? "is-active" : void 0,
+                children: voice.label
+              },
+              voice.id
+            )) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-field-label", children: [
+              "Speed: ",
+              model.voiceSettings.speed.toFixed(1),
+              "x"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-slider-track" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-field-label", children: [
+              "Emotion: ",
+              model.voiceSettings.emotion
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-slider-track" })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-waveform is-voiceover", "aria-hidden": "true" })
+      ] }) : null,
+      model.stage === "export" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-export-modal", role: "dialog", "aria-label": "Export modal", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Export" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: "Finalize codec, quality, and voice mixdown profile." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onExport, children: "Confirm Export" })
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { children: "Prompt Entry" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "plv-muted", children: "Start with a cinematic prompt, then generate course-setting images." }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-idle-canvas", children: model.uploadedImageName ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-upload-chip", children: [
+        "Upload Image: ",
+        model.uploadedImageName
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-required-chip", children: "Add Motion Instructions (Required)" })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-upload-chip", children: "Upload an image or write a prompt to begin." }) })
+  ] });
+}
+function AIVideoGenerationScreen({
+  model,
+  className,
+  style,
+  showContextPanel = true,
+  reduceMotion = false,
+  ...callbacks
+}) {
+  const rootClassName = [
+    "plv-video-screen",
+    reduceMotion ? "plv-reduce-motion" : "",
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  const requiresMotionPrompt = Boolean(model.uploadedImageName) && !model.motionPrompt?.trim();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: rootClassName, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_VIDEO_GENERATION_SCREEN_STYLES }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", { className: "plv-header", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-logo", children: "PLASIUS" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-project-title", children: model.projectName }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-header-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onHistory, children: "History" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onSettings, children: "Settings" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onExport, children: "Export" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onAccount, children: "Account" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { className: "plv-main-canvas", children: renderStageCanvas(model, callbacks) }),
+    showContextPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("aside", { className: "plv-context-panel", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-context-title", children: "Context Panel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-chip-row", role: "list", "aria-label": "Prompt versions", children: model.promptVersions.map((version) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          role: "listitem",
+          className: version.isActive ? "is-active" : void 0,
+          children: version.label
+        },
+        version.id
+      )) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-metadata-grid", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Stage" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: stageLabel[model.stage] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: model.statusText })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Prompt" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: model.prompt })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-stage-row", children: aiVideoStageFlow.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: stage.stage === model.stage ? "is-active" : void 0, children: stage.label }, stage.stage)) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("footer", { className: "plv-prompt-area", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { className: "plv-sr-only", htmlFor: "plv-prompt-textarea", children: "Prompt input" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          id: "plv-prompt-textarea",
+          value: model.prompt,
+          readOnly: true,
+          placeholder: model.promptPlaceholder,
+          "aria-label": "Prompt input"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "plv-prompt-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onUploadImage, children: "Upload Image" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: callbacks.onAdvanced, children: "Advanced" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", className: "is-generate", disabled: !model.canGenerate, onClick: callbacks.onGenerate, children: "Generate" })
+      ] }),
+      requiresMotionPrompt ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "plv-required-chip", children: "Upload Image complete. Motion prompt is required before generating." }) : null
+    ] })
+  ] });
+}
+var AI_VIDEO_GENERATION_SCREEN_STYLES = `
+.plv-video-screen {
+  --plv-background: ${aiVideoGenerationTokens.color.background};
+  --plv-surface: ${aiVideoGenerationTokens.color.surface};
+  --plv-border: ${aiVideoGenerationTokens.color.borderSubtle};
+  --plv-text: ${aiVideoGenerationTokens.color.textPrimary};
+  --plv-text-muted: ${aiVideoGenerationTokens.color.textSecondary};
+  --plv-accent-primary: ${aiVideoGenerationTokens.color.accentPrimary};
+  --plv-accent-secondary: ${aiVideoGenerationTokens.color.accentSecondary};
+  --plv-success: ${aiVideoGenerationTokens.color.success};
+  --plv-warning: ${aiVideoGenerationTokens.color.warning};
+  --plv-error: ${aiVideoGenerationTokens.color.error};
+  --plv-prompt-placeholder: ${aiVideoGenerationTokens.color.placeholderText};
+  --plv-header-height: ${aiVideoGenerationTokens.layout.headerHeightPx}px;
+  --plv-transition: ${aiVideoGenerationTokens.animation.standardMs}ms ${aiVideoGenerationTokens.animation.easing};
+  font-family: ${aiVideoGenerationTokens.typography.bodyFontFamily};
+  color: var(--plv-text);
+  background:
+    radial-gradient(1200px 520px at 20% -10%, rgba(108, 92, 231, 0.22), transparent 62%),
+    radial-gradient(1000px 540px at 80% -20%, rgba(0, 212, 255, 0.16), transparent 60%),
+    var(--plv-background);
+  border-radius: ${aiVideoGenerationTokens.radius.panelPx}px;
+  border: 1px solid var(--plv-border);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: var(--plv-header-height) minmax(360px, 1fr) auto auto;
+  min-height: 820px;
+}
+
+.plv-header {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--plv-border);
+  background: #0f1117;
+}
+
+.plv-logo {
+  font-weight: 800;
+  letter-spacing: 0.08em;
+}
+
+.plv-project-title {
+  font-size: 15px;
+  color: var(--plv-text-muted);
+}
+
+.plv-header-actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+}
+
+.plv-header-actions button,
+.plv-player-controls button,
+.plv-prompt-actions button,
+.plv-chip-row button,
+.plv-pill-group button,
+.plv-image-overlay-controls button {
+  border: 1px solid var(--plv-border);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--plv-text);
+  border-radius: 10px;
+  padding: 8px 12px;
+  font-size: 13px;
+  transition: all var(--plv-transition);
+}
+
+.plv-header-actions button:hover,
+.plv-player-controls button:hover,
+.plv-prompt-actions button:hover,
+.plv-chip-row button:hover,
+.plv-pill-group button:hover,
+.plv-image-overlay-controls button:hover {
+  border-color: rgba(0, 212, 255, 0.45);
+  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.22);
+}
+
+.plv-main-canvas {
+  padding: 18px;
+}
+
+.plv-main-canvas h2 {
+  margin: 0 0 8px;
+  font-family: ${aiVideoGenerationTokens.typography.headingFontFamily};
+  font-size: ${aiVideoGenerationTokens.typography.h2Px}px;
+}
+
+.plv-muted {
+  margin: 0 0 14px;
+  color: var(--plv-text-muted);
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+}
+
+.plv-image-grid {
+  display: grid;
+  gap: ${aiVideoGenerationTokens.layout.gridGapPx}px;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+.plv-image-card,
+.plv-skeleton-card {
+  aspect-ratio: ${aiVideoGenerationTokens.layout.cardAspectRatio};
+  border-radius: ${aiVideoGenerationTokens.radius.cardPx}px;
+  position: relative;
+  overflow: hidden;
+}
+
+.plv-image-card {
+  border: 1px solid var(--plv-border);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
+  transition: transform var(--plv-transition), box-shadow var(--plv-transition), border-color var(--plv-transition);
+}
+
+.plv-image-card:hover {
+  transform: scale(1.02);
+  border-color: rgba(0, 212, 255, 0.55);
+  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.48);
+}
+
+.plv-image-card.is-selected {
+  border: 2px solid var(--plv-accent-secondary);
+  box-shadow: 0 0 0 1px rgba(108, 92, 231, 0.35), 0 16px 32px rgba(0, 0, 0, 0.55);
+}
+
+.plv-image-select-hitbox {
+  border: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  cursor: pointer;
+}
+
+.plv-image-media {
+  position: absolute;
+  inset: 0;
+}
+
+.plv-image-caption {
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  background: linear-gradient(180deg, transparent 0%, rgba(15, 17, 23, 0.84) 60%);
+}
+
+.plv-chip {
+  font-size: 11px;
+  border-radius: 999px;
+  padding: 2px 8px;
+  background: rgba(0, 212, 255, 0.14);
+  border: 1px solid rgba(0, 212, 255, 0.36);
+}
+
+.plv-selected-checkmark {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  border-radius: 999px;
+  color: #00121a;
+  background: #7ff3ff;
+  font-weight: 900;
+}
+
+.plv-image-overlay-controls {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: flex;
+  gap: 8px;
+  opacity: 0;
+  transform: translateY(-6px);
+  transition: opacity var(--plv-transition), transform var(--plv-transition);
+}
+
+.plv-image-card:hover .plv-image-overlay-controls {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.plv-skeleton-card {
+  background: linear-gradient(
+    100deg,
+    rgba(255, 255, 255, 0.03) 20%,
+    rgba(255, 255, 255, 0.14) 40%,
+    rgba(255, 255, 255, 0.03) 60%
+  );
+  background-size: 200% 100%;
+  animation: plv-shimmer 1.25s linear infinite;
+}
+
+.plv-split-panel {
+  display: grid;
+  grid-template-columns: 1.1fr 0.9fr;
+  gap: 16px;
+}
+
+.plv-preview-box,
+.plv-motion-panel,
+.plv-progress-panel,
+.plv-player-shell,
+.plv-voiceover-panel,
+.plv-idle-canvas,
+.plv-context-panel,
+.plv-prompt-area {
+  background: var(--plv-surface);
+  border: 1px solid var(--plv-border);
+  border-radius: ${aiVideoGenerationTokens.radius.panelPx}px;
+}
+
+.plv-preview-box,
+.plv-motion-panel {
+  padding: 14px;
+}
+
+.plv-preview-title {
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--plv-text-muted);
+  margin-bottom: 10px;
+}
+
+.plv-preview-media {
+  width: 100%;
+  aspect-ratio: ${aiVideoGenerationTokens.layout.cardAspectRatio};
+  border-radius: ${aiVideoGenerationTokens.radius.cardPx}px;
+  background: linear-gradient(135deg, #2d3e67 0%, #6c5ce7 45%, #00d4ff 100%);
+}
+
+.plv-motion-panel label {
+  display: block;
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  color: var(--plv-text-muted);
+  margin-bottom: 10px;
+}
+
+.plv-motion-panel textarea,
+.plv-voiceover-panel textarea {
+  width: 100%;
+  margin-top: 6px;
+  border: 1px solid var(--plv-border);
+  border-radius: 10px;
+  min-height: 62px;
+  resize: none;
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--plv-text);
+  padding: 10px;
+  font-family: ${aiVideoGenerationTokens.typography.bodyFontFamily};
+}
+
+.plv-progress-panel {
+  margin-top: 16px;
+  padding: 12px 14px;
+}
+
+.plv-progress-topline {
+  display: flex;
+  justify-content: space-between;
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  margin-bottom: 8px;
+}
+
+.plv-progress-track {
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.08);
+  overflow: hidden;
+}
+
+.plv-progress-fill {
+  height: 100%;
+  background: linear-gradient(135deg, var(--plv-accent-primary), var(--plv-accent-secondary));
+  transition: width var(--plv-transition);
+}
+
+.plv-waveform {
+  margin-top: 10px;
+  height: 32px;
+  border-radius: 10px;
+  background:
+    repeating-linear-gradient(
+      90deg,
+      rgba(108, 92, 231, 0.24) 0,
+      rgba(108, 92, 231, 0.24) 4px,
+      rgba(0, 212, 255, 0.28) 4px,
+      rgba(0, 212, 255, 0.28) 8px
+    );
+  animation: plv-wave 1.2s linear infinite;
+}
+
+.plv-waveform.is-voiceover {
+  height: 46px;
+}
+
+.plv-player-shell {
+  padding: 14px;
+}
+
+.plv-player-frame {
+  position: relative;
+  aspect-ratio: ${aiVideoGenerationTokens.layout.cardAspectRatio};
+  background: #020202;
+  border-radius: ${aiVideoGenerationTokens.radius.cardPx}px;
+  overflow: hidden;
+}
+
+.plv-player-glow {
+  position: absolute;
+  inset: -20%;
+  background: radial-gradient(circle at center, rgba(0, 212, 255, 0.26), transparent 60%);
+}
+
+.plv-player-screen {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: rgba(230, 234, 242, 0.74);
+  font-size: 15px;
+}
+
+.plv-player-controls {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.plv-voiceover-panel {
+  margin-top: 14px;
+  padding: 14px;
+  animation: plv-slide-up var(--plv-transition);
+}
+
+.plv-voice-grid {
+  margin-top: 10px;
+  display: grid;
+  gap: 10px;
+}
+
+.plv-pill-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.plv-pill-group .is-active,
+.plv-chip-row .is-active {
+  border-color: rgba(0, 212, 255, 0.6);
+  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.24);
+}
+
+.plv-field-label {
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  color: var(--plv-text-muted);
+  margin-bottom: 6px;
+}
+
+.plv-slider-track {
+  height: 8px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(108, 92, 231, 0.7), rgba(0, 212, 255, 0.7));
+}
+
+.plv-export-modal {
+  margin-top: 14px;
+  padding: 14px;
+  border-radius: ${aiVideoGenerationTokens.radius.panelPx}px;
+  border: 1px solid rgba(255, 176, 32, 0.4);
+  background: rgba(255, 176, 32, 0.08);
+}
+
+.plv-export-modal h3 {
+  margin: 0 0 6px;
+  font-size: 18px;
+}
+
+.plv-export-modal p {
+  margin: 0 0 10px;
+  color: var(--plv-text-muted);
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+}
+
+.plv-export-modal button {
+  border: 0;
+  border-radius: 10px;
+  background: linear-gradient(135deg, #ffb020, #ffd386);
+  color: #161a23;
+  font-weight: 700;
+  padding: 8px 12px;
+}
+
+.plv-idle-canvas {
+  min-height: 180px;
+  display: grid;
+  place-items: center;
+  gap: 10px;
+  padding: 16px;
+}
+
+.plv-upload-chip,
+.plv-required-chip {
+  border-radius: 999px;
+  padding: 8px 12px;
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+}
+
+.plv-upload-chip {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--plv-border);
+}
+
+.plv-required-chip {
+  background: rgba(255, 176, 32, 0.12);
+  border: 1px solid rgba(255, 176, 32, 0.4);
+  color: #ffd18a;
+}
+
+.plv-context-panel {
+  margin: 0 18px 16px;
+  padding: 14px;
+}
+
+.plv-context-title {
+  margin-bottom: 10px;
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--plv-text-muted);
+}
+
+.plv-chip-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.plv-metadata-grid {
+  margin-top: 12px;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.plv-metadata-grid div {
+  display: grid;
+  gap: 4px;
+}
+
+.plv-metadata-grid span {
+  font-size: ${aiVideoGenerationTokens.typography.smallPx}px;
+  color: var(--plv-text-muted);
+}
+
+.plv-metadata-grid strong {
+  font-size: 14px;
+  line-height: 1.35;
+}
+
+.plv-stage-row {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.plv-stage-row span {
+  border-radius: 999px;
+  padding: 5px 10px;
+  border: 1px solid var(--plv-border);
+  color: var(--plv-text-muted);
+  font-size: 12px;
+}
+
+.plv-stage-row .is-active {
+  color: var(--plv-text);
+  border-color: rgba(0, 212, 255, 0.55);
+}
+
+.plv-prompt-area {
+  margin: 0 18px 18px;
+  padding: 14px;
+}
+
+.plv-prompt-area textarea {
+  width: 100%;
+  min-height: ${aiVideoGenerationTokens.layout.promptBarMinHeightPx}px;
+  border: 1px solid var(--plv-border);
+  border-radius: ${aiVideoGenerationTokens.radius.promptPx}px;
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--plv-text);
+  font-family: ${aiVideoGenerationTokens.typography.bodyFontFamily};
+  font-size: 17px;
+  line-height: 1.45;
+  padding: 12px;
+  resize: vertical;
+}
+
+.plv-prompt-area textarea::placeholder {
+  color: var(--plv-prompt-placeholder);
+}
+
+.plv-prompt-actions {
+  margin-top: 10px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.plv-prompt-actions .is-generate {
+  margin-left: auto;
+  border: 0;
+  background: linear-gradient(135deg, #6c5ce7, #00d4ff);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 212, 255, 0.22);
+}
+
+.plv-prompt-actions .is-generate:hover {
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 212, 255, 0.34);
+}
+
+.plv-prompt-actions .is-generate:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.plv-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.plv-reduce-motion * {
+  animation: none !important;
+  transition: none !important;
+}
+
+@media (max-width: 1024px) {
+  .plv-video-screen {
+    min-height: 920px;
+  }
+
+  .plv-split-panel {
+    grid-template-columns: 1fr;
+  }
+
+  .plv-player-controls {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .plv-metadata-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .plv-header {
+    flex-wrap: wrap;
+    height: auto;
+    min-height: var(--plv-header-height);
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  .plv-header-actions {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .plv-image-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .plv-prompt-actions {
+    flex-wrap: wrap;
+  }
+
+  .plv-prompt-actions .is-generate {
+    margin-left: 0;
+    width: 100%;
+  }
+}
+
+@keyframes plv-shimmer {
+  from {
+    background-position: 120% 0;
+  }
+  to {
+    background-position: -120% 0;
+  }
+}
+
+@keyframes plv-wave {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 64px 0;
+  }
+}
+
+@keyframes plv-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+`;
+
+// src/ai-video-generation/demo.tsx
+var import_react = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AIVideoGenerationStudioDemo({
+  initialStage = "idle"
+}) {
+  const [stage, setStage] = (0, import_react.useState)(initialStage);
+  const model = (0, import_react.useMemo)(() => createAIVideoGenerationDemoModel(stage), [stage]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "grid", gap: "12px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        role: "group",
+        "aria-label": "Stage selector",
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px"
+        },
+        children: aiVideoStageFlow.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setStage(item.stage),
+            style: {
+              borderRadius: "999px",
+              border: "1px solid rgba(255,255,255,0.14)",
+              color: stage === item.stage ? "#0F1117" : "#E6EAF2",
+              background: stage === item.stage ? "#00D4FF" : "rgba(255,255,255,0.04)",
+              padding: "6px 10px",
+              fontSize: "12px",
+              cursor: "pointer"
+            },
+            children: item.label
+          },
+          item.stage
+        ))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      AIVideoGenerationScreen,
+      {
+        model,
+        onGenerate: () => {
+          setStage("generatingImages");
+        },
+        onUseForVideo: () => {
+          setStage("generatingVideo");
+        },
+        onAddVoiceover: () => {
+          setStage("voiceover");
+        },
+        onRegenerateVideo: () => {
+          setStage("generatingVideo");
+        },
+        onExport: () => {
+          setStage("export");
+        }
+      }
+    )
+  ] });
+}
+
+// src/index.ts
 var videoPackageInfo = {
   name: "@plasius/video",
-  version: "0.1.1"
+  version: "0.1.2"
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AIVideoGenerationScreen,
+  AIVideoGenerationStudioDemo,
+  AI_VIDEO_GENERATION_SCREEN_STYLES,
+  aiVideoGenerationTokens,
+  aiVideoStageFlow,
+  createAIVideoGenerationDemoModel,
   videoPackageInfo
 });
 //# sourceMappingURL=index.cjs.map