1.1.0: .ruw project bundle + per-export target FPS

- New .ruw file format: a STORE-only zip wrapping project.json +
  an assets/ folder. packProject extracts every data-URL asset
  (images, audio, background video) into its own file and
  rewrites the in-JSON src fields to relative paths;
  unpackProject rehydrates back to data URLs on read. Zero
  dependencies — we ship a minimal in-house zip codec.
- ExportDialog surfaces the new format as a top-row
  "RUWIO project (.ruw)" option that round-trips through the
  welcome-dialog file picker. Legacy .json imports still work
  via byte-sniffing the PK header in readAnyProjectFile. Dead
  App.vue `exportProjectFile` helper removed.
- Frame-based exports (GIF, APNG, APNG preview) take an optional
  targetFps override so a 60fps project doesn't balloon the file
  — APNG / GIF size scales ~linearly with frame count. The
  ExportDialog grows a second input next to target size;
  defaults inherit the scene's fps and reset on each dialog
  open.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/ExportDialog.vue

@@ -4,6 +4,7 @@ import {
   PhCode,
   PhDownloadSimple,
   PhEngine,
+  PhFileArchive,
   PhFileHtml,
   PhFileImage,
   PhFilmSlate,
@@ -15,6 +16,8 @@ import { downloadSceneAsVideo, pickMimeType } from '@/lib/videoExport'
 import { downloadSceneAsGif } from '@/lib/gifExport'
 import { downloadSceneAsApng, downloadSceneAsApngPreview } from '@/lib/apngExport'
 import { downloadFromServer } from '@/lib/serverExport'
+import { downloadRuwFile } from '@/lib/ruwFile'
+import { useProjectName } from '@/composables/useProjectName'
 import type { ButtonAsset, Layer } from '@/types/scene'
 import { Modal } from '@/components/ui'
 import { t } from '@/i18n'
@@ -23,6 +26,7 @@ const props = defineProps<{ modelValue: boolean }>()
 const emit = defineEmits<{ 'update:modelValue': [value: boolean] }>()
 
 const store = useSceneStore()
+const { projectName } = useProjectName()
 
 interface ProgressState {
   progress: number
@@ -62,28 +66,53 @@ function resetTargetSize() {
   targetWidth.value = Math.max(1, Math.round(store.scene.canvas.width))
 }
 
+// Target capture frame rate. Scene default is often 60 for smooth
+// playback in-editor, but 60fps APNG / GIF bloats the file for no
+// perceptual gain — let the user dial it down per export without
+// touching the project's own fps.
+const targetFps = ref(Math.max(1, Math.round(store.scene.fps || 30)))
+
+const targetFpsChanged = computed(
+  () => targetFps.value !== Math.max(1, Math.round(store.scene.fps || 30)),
+)
+
+function resetTargetFps() {
+  targetFps.value = Math.max(1, Math.round(store.scene.fps || 30))
+}
+
 // Every time the dialog re-opens, inherit the CURRENT document
-// canvas size. Without this, a user who resized the stage after
-// first opening the dialog would keep seeing the stale value from
-// whenever ExportDialog originally instantiated.
+// canvas size + fps. Without this, a user who resized the stage or
+// switched project fps after first opening the dialog would keep
+// seeing the stale values.
 watch(
   () => props.modelValue,
   (open) => {
-    if (open) resetTargetSize()
+    if (open) {
+      resetTargetSize()
+      resetTargetFps()
+    }
   },
 )
 
 /** Shared render options for GIF / APNG / APNG-preview. Only sends
- *  target dimensions when they actually differ from the scene's own
- *  size so a same-size export keeps the old no-scaling code path. */
+ *  the overrides that actually differ from the scene so same-size
+ *  / same-fps exports keep the old no-override code paths. */
 function frameExportOpts(controller: AbortController, onProg: (p: number) => void) {
-  const base = { signal: controller.signal, onProgress: onProg }
-  if (!targetSizeChanged.value) return base
-  return {
-    ...base,
-    targetWidth: targetWidth.value,
-    targetHeight: targetHeight.value,
+  const base: {
+    signal: AbortSignal
+    onProgress: (p: number) => void
+    targetWidth?: number
+    targetHeight?: number
+    targetFps?: number
+  } = { signal: controller.signal, onProgress: onProg }
+  if (targetSizeChanged.value) {
+    base.targetWidth = targetWidth.value
+    base.targetHeight = targetHeight.value
   }
+  if (targetFpsChanged.value) {
+    base.targetFps = targetFps.value
+  }
+  return base
 }
 
 const hasHiddenLayers = computed(() => {
@@ -176,6 +205,17 @@ function exportRuntime() {
   emit('update:modelValue', false)
 }
 
+function exportRuwBundle() {
+  // Re-import target: .ruw is the round-trippable format the welcome
+  // dialog + file-picker accept. Pull the project via projectForSave
+  // so the editor-session UI state (zoom, toggles, …) rides along.
+  const project = JSON.parse(JSON.stringify(store.projectForSave))
+  const base = (projectName.value ?? 'ruwio').toString()
+  const safe = base.replace(/[^a-z0-9äöüß_-]+/gi, '-').replace(/^-+|-+$/g, '') || 'ruwio'
+  downloadRuwFile(project, `${safe}.ruw`)
+  emit('update:modelValue', false)
+}
+
 function exportHtml() {
   downloadExampleHtml(projectClone())
   emit('update:modelValue', false)
@@ -366,6 +406,18 @@ function onUpdate(v: boolean) {
         </div>
       </label>
 
+      <button class="opt" @click="exportRuwBundle">
+        <div class="opt-icon"><PhFileArchive :size="20" /></div>
+        <div class="opt-text">
+          <div class="opt-title">
+            {{ t('export.ruwTitle') }}
+            <span class="badge accent">{{ t('export.ruwBadge') }}</span>
+          </div>
+          <div class="opt-desc">{{ t('export.ruwDesc') }}</div>
+        </div>
+        <PhDownloadSimple :size="14" class="opt-arrow" />
+      </button>
+
       <button class="opt" @click="exportRuntime">
         <div class="opt-icon"><PhEngine :size="20" /></div>
         <div class="opt-text">
@@ -452,6 +504,29 @@ function onUpdate(v: boolean) {
         </button>
       </div>
 
+      <div class="target-size">
+        <div class="target-size-label">{{ t('export.targetFps') }}</div>
+        <label class="target-size-input">
+          <input
+            type="number"
+            min="1"
+            step="1"
+            :value="targetFps"
+            @input="targetFps = Math.max(1, Math.round(Number(($event.target as HTMLInputElement).value) || 1))"
+          />
+          <span class="target-size-tag">fps</span>
+        </label>
+        <span class="target-size-hint">{{ t('export.targetFpsHint') }}</span>
+        <button
+          v-if="targetFpsChanged"
+          class="target-size-reset"
+          v-tooltip="t('export.targetFpsReset')"
+          @click="resetTargetFps"
+        >
+          {{ t('export.targetSizeResetLabel') }}
+        </button>
+      </div>
+
       <button class="opt" @click="exportGif">
         <div class="opt-icon"><PhGif :size="20" /></div>
         <div class="opt-text">
@@ -667,6 +742,12 @@ function onUpdate(v: boolean) {
   justify-content: flex-end;
 }
 
+.target-size-hint {
+  margin-left: 4px;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
 .target-size-reset {
   margin-left: auto;
   padding: 4px 8px;