npm - @jant/core - Versions diffs - 0.2.17 → 0.2.19 - Mend

@jant/core 0.2.17 → 0.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/app.d.ts +1 -0
package/dist/app.d.ts.map +1 -1
package/dist/app.js +307 -137
package/dist/client.js +1 -0
package/dist/i18n/context.d.ts +2 -2
package/dist/i18n/context.js +1 -1
package/dist/i18n/i18n.d.ts +1 -1
package/dist/i18n/i18n.js +1 -1
package/dist/i18n/index.d.ts +1 -1
package/dist/i18n/index.js +1 -1
package/dist/i18n/locales/en.d.ts.map +1 -1
package/dist/i18n/locales/en.js +1 -1
package/dist/i18n/locales/zh-Hans.d.ts.map +1 -1
package/dist/i18n/locales/zh-Hans.js +1 -1
package/dist/i18n/locales/zh-Hant.d.ts.map +1 -1
package/dist/i18n/locales/zh-Hant.js +1 -1
package/dist/lib/config.d.ts +44 -10
package/dist/lib/config.d.ts.map +1 -1
package/dist/lib/config.js +69 -44
package/dist/lib/constants.d.ts +2 -1
package/dist/lib/constants.d.ts.map +1 -1
package/dist/lib/constants.js +5 -2
package/dist/lib/image-processor.js +0 -4
package/dist/lib/media-upload.js +104 -0
package/dist/lib/sse.d.ts +82 -13
package/dist/lib/sse.d.ts.map +1 -1
package/dist/lib/sse.js +115 -17
package/dist/lib/theme.d.ts +44 -0
package/dist/lib/theme.d.ts.map +1 -0
package/dist/lib/theme.js +65 -0
package/dist/routes/api/upload.js +16 -18
package/dist/routes/dash/appearance.d.ts +13 -0
package/dist/routes/dash/appearance.d.ts.map +1 -0
package/dist/routes/dash/appearance.js +160 -0
package/dist/routes/dash/collections.js +5 -13
package/dist/routes/dash/media.js +17 -167
package/dist/routes/dash/pages.js +4 -10
package/dist/routes/dash/posts.js +4 -10
package/dist/routes/dash/redirects.js +3 -7
package/dist/routes/dash/settings.d.ts.map +1 -1
package/dist/routes/dash/settings.js +52 -42
package/dist/services/settings.d.ts +1 -0
package/dist/services/settings.d.ts.map +1 -1
package/dist/services/settings.js +3 -0
package/dist/theme/color-themes.d.ts +30 -0
package/dist/theme/color-themes.d.ts.map +1 -0
package/dist/theme/color-themes.js +268 -0
package/dist/theme/layouts/BaseLayout.d.ts +5 -0
package/dist/theme/layouts/BaseLayout.d.ts.map +1 -1
package/dist/theme/layouts/BaseLayout.js +70 -3
package/dist/theme/layouts/DashLayout.d.ts +2 -0
package/dist/theme/layouts/DashLayout.d.ts.map +1 -1
package/dist/theme/layouts/DashLayout.js +11 -1
package/dist/theme/layouts/index.d.ts +1 -1
package/dist/theme/layouts/index.d.ts.map +1 -1
package/dist/types.d.ts +53 -1
package/dist/types.d.ts.map +1 -1
package/dist/types.js +52 -0
package/package.json +1 -1
package/src/app.tsx +260 -81
package/src/client.ts +1 -0
package/src/db/migrations/{0000_solid_moon_knight.sql → 0000_square_wallflower.sql} +3 -3
package/src/db/migrations/meta/0000_snapshot.json +9 -9
package/src/db/migrations/meta/_journal.json +2 -30
package/src/i18n/context.tsx +2 -2
package/src/i18n/i18n.ts +1 -1
package/src/i18n/index.ts +1 -1
package/src/i18n/locales/en.po +328 -252
package/src/i18n/locales/en.ts +1 -1
package/src/i18n/locales/zh-Hans.po +315 -278
package/src/i18n/locales/zh-Hans.ts +1 -1
package/src/i18n/locales/zh-Hant.po +315 -278
package/src/i18n/locales/zh-Hant.ts +1 -1
package/src/lib/config.ts +73 -47
package/src/lib/constants.ts +3 -0
package/src/lib/image-processor.ts +0 -7
package/src/lib/media-upload.ts +148 -0
package/src/lib/sse.ts +156 -16
package/src/lib/theme.ts +86 -0
package/src/preset.css +9 -0
package/src/routes/api/upload.ts +12 -18
package/src/routes/dash/appearance.tsx +176 -0
package/src/routes/dash/collections.tsx +5 -13
package/src/routes/dash/media.tsx +16 -165
package/src/routes/dash/pages.tsx +4 -10
package/src/routes/dash/posts.tsx +4 -10
package/src/routes/dash/redirects.tsx +3 -7
package/src/routes/dash/settings.tsx +71 -55
package/src/services/settings.ts +5 -0
package/src/styles/components.css +93 -0
package/src/theme/color-themes.ts +321 -0
package/src/theme/layouts/BaseLayout.tsx +61 -1
package/src/theme/layouts/DashLayout.tsx +14 -3
package/src/theme/layouts/index.ts +5 -1
package/src/types.ts +62 -1
package/src/db/migrations/0001_add_search_fts.sql +0 -40
package/src/db/migrations/0002_collection_path.sql +0 -2
package/src/db/migrations/0003_collection_path_nullable.sql +0 -21
package/src/db/migrations/0004_media_uuid.sql +0 -35

package/src/lib/theme.ts ADDED Viewed

@@ -0,0 +1,86 @@
+/**
+ * Theme Resolution Helpers
+ *
+ * Resolves the active color theme and builds CSS for injection into `<head>`.
+ */
+import type { ColorTheme } from "../theme/color-themes.js";
+import { BUILTIN_COLOR_THEMES } from "../theme/color-themes.js";
+import type { JantConfig } from "../types.js";
+/**
+ * Get the list of available color themes.
+ *
+ * Returns `config.theme.colorThemes` if provided, otherwise the built-in list.
+ *
+ * @param config - The Jant configuration
+ * @returns Array of available color themes
+ *
+ * @example
+ * ```typescript
+ * const themes = getAvailableThemes(c.var.config);
+ * ```
+ */
+export function getAvailableThemes(config: JantConfig): ColorTheme[] {
+  return config.theme?.colorThemes ?? BUILTIN_COLOR_THEMES;
+}
+/**
+ * Build a `<style>` CSS string from a color theme and optional cssVariables overlay.
+ *
+ * Priority (lowest → highest):
+ *   BaseCoat defaults → selected theme → cssVariables
+ *
+ * @param theme - The active color theme (undefined = no theme overrides)
+ * @param cssVariables - Extra CSS variable overrides from `createApp({ theme: { cssVariables } })`
+ * @returns CSS string to inject in `<head>`, or empty string if nothing to inject
+ *
+ * Uses `:root:root` and `:root.dark` selectors for higher specificity than
+ * BaseCoat defaults (`:root` and `.dark`). This ensures theme overrides win
+ * regardless of source order — important because Vite dev mode injects CSS
+ * as `<style>` tags after the theme `<style>`.
+ *
+ * @example
+ * ```typescript
+ * const css = buildThemeStyle(blueTheme, { "--radius": "0.5rem" });
+ * // => ":root:root { --primary: oklch(...); ... }\n:root.dark { ... }"
+ * ```
+ */
+export function buildThemeStyle(
+  theme: ColorTheme | undefined,
+  cssVariables?: Record<string, string>,
+): string {
+  const lightVars: Record<string, string> = {
+    ...(theme?.light ?? {}),
+    ...(cssVariables ?? {}),
+  };
+  const darkVars: Record<string, string> = {
+    ...(theme?.dark ?? {}),
+    ...(cssVariables ?? {}),
+  };
+  const hasLight = Object.keys(lightVars).length > 0;
+  const hasDark = Object.keys(darkVars).length > 0;
+  if (!hasLight && !hasDark) return "";
+  const parts: string[] = [];
+  if (hasLight) {
+    const declarations = Object.entries(lightVars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    // :root:root has specificity (0,0,2) > BaseCoat's :root (0,0,1)
+    parts.push(`:root:root {\n${declarations}\n}`);
+  }
+  if (hasDark) {
+    const declarations = Object.entries(darkVars)
+      .map(([k, v]) => `  ${k}: ${v};`)
+      .join("\n");
+    // :root.dark has specificity (0,1,1) > BaseCoat's .dark (0,1,0)
+    parts.push(`:root.dark {\n${declarations}\n}`);
+  }
+  return parts.join("\n");
+}

package/src/preset.css CHANGED Viewed

@@ -12,4 +12,13 @@
 @theme {
   --radius-default: 0.5rem;
+  --color-success: var(--success);
+}
+:root {
+  --success: oklch(0.518 0.16 145.071);
+}
+.dark {
+  --success: oklch(0.627 0.194 149.214);
 }

package/src/routes/api/upload.ts CHANGED Viewed

@@ -11,7 +11,7 @@ import type { Bindings } from "../../types.js";
 import type { AppVariables } from "../../app.js";
 import { requireAuthApi } from "../../middleware/auth.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { sse } from "../../lib/sse.js";
+import { sse, dsSignals } from "../../lib/sse.js";
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -117,11 +117,7 @@ function wantsSSE(c: {
 uploadApiRoutes.post("/", async (c) => {
   if (!c.env.R2) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({
-          _uploadError: "R2 storage not configured",
-        });
-      });
+      return dsSignals({ _uploadError: "R2 storage not configured" });
     }
     return c.json({ error: "R2 storage not configured" }, 500);
   }
@@ -131,9 +127,7 @@ uploadApiRoutes.post("/", async (c) => {
   if (!file) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "No file provided" });
-      });
+      return dsSignals({ _uploadError: "No file provided" });
     }
     return c.json({ error: "No file provided" }, 400);
   }
@@ -148,9 +142,7 @@ uploadApiRoutes.post("/", async (c) => {
   ];
   if (!allowedTypes.includes(file.type)) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({ _uploadError: "File type not allowed" });
-      });
+      return dsSignals({ _uploadError: "File type not allowed" });
     }
     return c.json({ error: "File type not allowed" }, 400);
   }
@@ -159,11 +151,7 @@ uploadApiRoutes.post("/", async (c) => {
   const maxSize = 10 * 1024 * 1024;
   if (file.size > maxSize) {
     if (wantsSSE(c)) {
-      return sse(c, async (stream) => {
-        await stream.patchSignals({
-          _uploadError: "File too large (max 10MB)",
-        });
-      });
+      return dsSignals({ _uploadError: "File too large (max 10MB)" });
     }
     return c.json({ error: "File too large (max 10MB)" }, 400);
   }
@@ -206,6 +194,7 @@ uploadApiRoutes.post("/", async (c) => {
           mode: "outer",
           selector: "#upload-placeholder",
         });
+        await stream.toast("Upload successful!");
       });
     }
@@ -222,7 +211,12 @@ uploadApiRoutes.post("/", async (c) => {
     // eslint-disable-next-line no-console -- Error logging is intentional
     console.error("Upload error:", err);
-    // Return error - client will handle updating the placeholder
+    if (wantsSSE(c)) {
+      return sse(c, async (stream) => {
+        await stream.remove("#upload-placeholder");
+        await stream.toast("Upload failed. Please try again.", "error");
+      });
+    }
     return c.json({ error: "Upload failed" }, 500);
   }
 });

package/src/routes/dash/appearance.tsx ADDED Viewed

@@ -0,0 +1,176 @@
+/**
+ * Dashboard Appearance Routes
+ */
+import { Hono } from "hono";
+import { useLingui } from "@lingui/react/macro";
+import type { Bindings } from "../../types.js";
+import type { AppVariables } from "../../app.js";
+import { DashLayout } from "../../theme/layouts/index.js";
+import { dsRedirect, dsToast } from "../../lib/sse.js";
+import { getSiteName } from "../../lib/config.js";
+import { SETTINGS_KEYS } from "../../lib/constants.js";
+import { getAvailableThemes } from "../../lib/theme.js";
+import type { ColorTheme } from "../../theme/color-themes.js";
+type Env = { Bindings: Bindings; Variables: AppVariables };
+export const appearanceRoutes = new Hono<Env>();
+function ThemeCard({
+  theme,
+  selected,
+}: {
+  theme: ColorTheme;
+  selected: boolean;
+}) {
+  const expr = `$theme === '${theme.id}'`;
+  const { preview } = theme;
+  return (
+    <label
+      class={`block cursor-pointer rounded-lg border overflow-hidden transition-colors ${selected ? "border-primary" : "border-border"}`}
+      data-class:border-primary={expr}
+      data-class:border-border={`$theme !== '${theme.id}'`}
+    >
+      <div class="grid grid-cols-2">
+        <div
+          class="p-5"
+          style={`background-color:${preview.lightBg};color:${preview.lightText}`}
+        >
+          <input
+            type="radio"
+            name="theme"
+            value={theme.id}
+            data-bind="theme"
+            checked={selected || undefined}
+            class="mb-1"
+          />
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in light mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.lightLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+        <div
+          class="p-5"
+          style={`background-color:${preview.darkBg};color:${preview.darkText}`}
+        >
+          <h3 class="font-bold text-lg">{theme.name}</h3>
+          <p class="text-sm mt-2 leading-relaxed">
+            This is the {theme.name} theme in dark mode. Links{" "}
+            <a
+              tabIndex={-1}
+              class="underline"
+              style={`color:${preview.darkLink}`}
+            >
+              look like this
+            </a>
+            . We'll show the correct light or dark mode based on your visitor's
+            settings.
+          </p>
+        </div>
+      </div>
+    </label>
+  );
+}
+function AppearanceContent({
+  themes,
+  currentThemeId,
+}: {
+  themes: ColorTheme[];
+  currentThemeId: string;
+}) {
+  const { t } = useLingui();
+  const signals = JSON.stringify({ theme: currentThemeId }).replace(
+    /</g,
+    "\\u003c",
+  );
+  return (
+    <div
+      data-signals={signals}
+      data-on:change="@post('/dash/appearance')"
+      class="max-w-3xl"
+    >
+      <fieldset>
+        <legend class="text-lg font-semibold">
+          {t({
+            message: "Color theme",
+            comment: "@context: Appearance settings heading",
+          })}
+        </legend>
+        <p class="text-sm text-muted-foreground mb-4">
+          {t({
+            message:
+              "This will theme both your site and your dashboard. All color themes support dark mode.",
+            comment: "@context: Appearance settings description",
+          })}
+        </p>
+        <div class="flex flex-col gap-4">
+          {themes.map((theme) => (
+            <ThemeCard
+              key={theme.id}
+              theme={theme}
+              selected={theme.id === currentThemeId}
+            />
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
+// Appearance page
+appearanceRoutes.get("/", async (c) => {
+  const { settings } = c.var.services;
+  const siteName = await getSiteName(c);
+  const currentThemeId = (await settings.get(SETTINGS_KEYS.THEME)) ?? "default";
+  const themes = getAvailableThemes(c.var.config);
+  const saved = c.req.query("saved") !== undefined;
+  return c.html(
+    <DashLayout
+      c={c}
+      title="Appearance"
+      siteName={siteName}
+      currentPath="/dash/appearance"
+      toast={saved ? { message: "Theme saved successfully." } : undefined}
+    >
+      <AppearanceContent themes={themes} currentThemeId={currentThemeId} />
+    </DashLayout>,
+  );
+});
+// Save theme
+appearanceRoutes.post("/", async (c) => {
+  const body = await c.req.json<{ theme: string }>();
+  const { settings } = c.var.services;
+  const themes = getAvailableThemes(c.var.config);
+  // Validate theme ID
+  const validTheme = themes.find((t) => t.id === body.theme);
+  if (!validTheme) {
+    return dsToast("Invalid theme selected.", "error");
+  }
+  if (validTheme.id === "default") {
+    await settings.remove(SETTINGS_KEYS.THEME);
+  } else {
+    await settings.set(SETTINGS_KEYS.THEME, validTheme.id);
+  }
+  // Full page reload to apply the new theme CSS
+  return dsRedirect("/dash/appearance?saved");
+});

package/src/routes/dash/collections.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ import {
   DangerZone,
 } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -409,9 +409,7 @@ collectionsRoutes.post("/", async (c) => {
     description: body.description || undefined,
   });
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${collection.id}`);
-  });
+  return dsRedirect(`/dash/collections/${collection.id}`);
 });
 // View single collection
@@ -476,9 +474,7 @@ collectionsRoutes.post("/:id", async (c) => {
     description: body.description || undefined,
   });
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${id}`);
-  });
+  return dsRedirect(`/dash/collections/${id}`);
 });
 // Delete collection
@@ -488,9 +484,7 @@ collectionsRoutes.post("/:id/delete", async (c) => {
   await c.var.services.collections.delete(id);
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/collections");
-  });
+  return dsRedirect("/dash/collections");
 });
 // Remove post from collection
@@ -504,7 +498,5 @@ collectionsRoutes.post("/:id/remove-post", async (c) => {
     await c.var.services.collections.removePost(id, body.postId);
   }
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/collections/${id}`);
-  });
+  return dsRedirect(`/dash/collections/${id}`);
 });

package/src/routes/dash/media.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ import { DashLayout } from "../../theme/layouts/index.js";
 import { EmptyState, DangerZone } from "../../theme/components/index.js";
 import * as time from "../../lib/time.js";
 import { getMediaUrl, getImageUrl } from "../../lib/image.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -90,8 +90,7 @@ function MediaCard({
 /**
  * Media list page content
  *
- * Uses plain JavaScript for upload state management (more reliable than Datastar signals
- * for complex async flows like file uploads with SSE responses).
+ * Upload is handled by media-upload.ts (client module) + Datastar @post for SSE.
  */
 function MediaListContent({
   mediaList,
@@ -121,163 +120,17 @@ function MediaListContent({
     comment: "@context: Upload error message",
   });
-  // Plain JavaScript upload handler - shows progress in the list
-  const uploadScript = `
-async function handleMediaUpload(input) {
-  if (!input.files || !input.files[0]) return;
-  const file = input.files[0];
-  const errorBox = document.getElementById('upload-error');
-  errorBox.classList.add('hidden');
-  // Ensure grid exists (remove empty state if needed)
-  let grid = document.getElementById('media-grid');
-  if (!grid) {
-    document.getElementById('empty-state')?.remove();
-    grid = document.createElement('div');
-    grid.id = 'media-grid';
-    grid.className = 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4';
-    document.getElementById('media-content').appendChild(grid);
-  }
-  // Create placeholder card showing progress
-  const placeholder = document.createElement('div');
-  placeholder.id = 'upload-placeholder';
-  placeholder.className = 'group relative';
-  placeholder.innerHTML = \`
-    <div class="aspect-square bg-muted rounded-lg overflow-hidden border flex items-center justify-center">
-      <div class="text-center px-2">
-        <svg class="animate-spin h-6 w-6 text-muted-foreground mx-auto mb-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
-        <span id="upload-status" class="text-xs text-muted-foreground">${processingText}</span>
-      </div>
-    </div>
-    <div class="mt-2 text-xs truncate" title="\${file.name}">\${file.name}</div>
-    <div class="text-xs text-muted-foreground">\${formatFileSize(file.size)}</div>
-  \`;
-  grid.prepend(placeholder);
-  try {
-    if (typeof ImageProcessor === 'undefined') {
-      throw new Error('ImageProcessor not loaded');
-    }
-    // Process image client-side
-    const processed = await ImageProcessor.processToFile(file);
-    document.getElementById('upload-status').textContent = '${uploadingText}';
-    // Upload with SSE response
-    const fd = new FormData();
-    fd.append('file', processed);
-    const response = await fetch('/api/upload', {
-      method: 'POST',
-      body: fd,
-      headers: { 'Accept': 'text/event-stream' }
-    });
-    if (!response.ok) throw new Error('Upload failed: ' + response.status);
-    // Parse SSE stream - will replace placeholder with real card
-    const reader = response.body.getReader();
-    const decoder = new TextDecoder();
-    let buffer = '';
-    while (true) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      buffer += decoder.decode(value, { stream: true });
-      const events = buffer.split('\\n\\n');
-      buffer = events.pop() || '';
-      for (const event of events) {
-        if (!event.trim()) continue;
-        processSSEEvent(event);
-      }
-    }
-  } catch (err) {
-    console.error('Upload error:', err);
-    // Show error in placeholder
-    placeholder.innerHTML = \`
-      <div class="aspect-square bg-destructive/10 rounded-lg overflow-hidden border border-destructive flex items-center justify-center">
-        <div class="text-center px-2">
-          <span class="text-xs text-destructive">\${err.message || '${errorText}'}</span>
-        </div>
-      </div>
-      <div class="mt-2 text-xs truncate text-destructive">\${file.name}</div>
-      <button type="button" class="text-xs text-muted-foreground hover:underline" onclick="this.closest('.group').remove()">Remove</button>
-    \`;
-  }
-  input.value = '';
-}
-function formatFileSize(bytes) {
-  if (bytes < 1024) return bytes + ' B';
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-  return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-function processSSEEvent(event) {
-  const lines = event.split('\\n');
-  let eventType = '';
-  const data = {};
-  let elementsLines = [];
-  let inElements = false;
-  for (const line of lines) {
-    if (line.startsWith('event: ')) {
-      eventType = line.slice(7);
-    } else if (line.startsWith('data: ')) {
-      const content = line.slice(6);
-      if (content.startsWith('mode ')) {
-        data.mode = content.slice(5);
-        inElements = false;
-      } else if (content.startsWith('selector ')) {
-        data.selector = content.slice(9);
-        inElements = false;
-      } else if (content.startsWith('elements ')) {
-        elementsLines = [content.slice(9)];
-        inElements = true;
-      } else if (inElements) {
-        // Continuation of elements content
-        elementsLines.push(content);
-      }
-    }
-  }
-  if (elementsLines.length > 0) {
-    data.elements = elementsLines.join('\\n');
-  }
-  if (eventType === 'datastar-patch-elements') {
-    if (data.mode === 'remove' && data.selector) {
-      document.querySelector(data.selector)?.remove();
-    } else if (data.mode === 'outer' && data.selector && data.elements) {
-      // Replace element entirely (used for placeholder -> real card)
-      const target = document.querySelector(data.selector);
-      if (target) {
-        const temp = document.createElement('div');
-        temp.innerHTML = data.elements;
-        const newElement = temp.firstElementChild;
-        if (newElement) {
-          target.replaceWith(newElement);
-          if (window.Datastar) Datastar.apply(newElement);
-        }
-      }
-    }
-  }
-}
-`.trim();
   return (
     <>
-      {/* Upload script */}
-      <script dangerouslySetInnerHTML={{ __html: uploadScript }}></script>
+      {/* Hidden form for Datastar-driven upload */}
+      <form
+        id="upload-form"
+        class="hidden"
+        enctype="multipart/form-data"
+        data-on:submit__prevent="@post('/api/upload', {contentType: 'form'})"
+      >
+        <input id="upload-file-input" type="file" name="file" />
+      </form>
       {/* Header */}
       <div class="flex items-center justify-between mb-6">
@@ -290,14 +143,14 @@ function processSSEEvent(event) {
             type="file"
             class="hidden"
             accept="image/*"
-            onchange="handleMediaUpload(this)"
+            data-media-upload
+            data-text-processing={processingText}
+            data-text-uploading={uploadingText}
+            data-text-error={errorText}
           />
         </label>
       </div>
-      {/* Hidden error container for global errors */}
-      <div id="upload-error" class="hidden"></div>
       {/* Upload instructions */}
       <div class="card mb-6">
         <section class="text-sm text-muted-foreground">
@@ -610,7 +463,5 @@ mediaRoutes.post("/:id/delete", async (c) => {
   // Delete from database
   await c.var.services.media.delete(id);
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/media");
-  });
+  return dsRedirect("/dash/media");
 });

package/src/routes/dash/pages.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ import {
 } from "../../theme/components/index.js";
 import * as sqid from "../../lib/sqid.js";
 import * as time from "../../lib/time.js";
-import { sse } from "../../lib/sse.js";
+import { dsRedirect } from "../../lib/sse.js";
 type Env = { Bindings: Bindings; Variables: AppVariables };
@@ -237,9 +237,7 @@ pagesRoutes.post("/", async (c) => {
     path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/pages/${sqid.encode(page.id)}`);
-  });
+  return dsRedirect(`/dash/pages/${sqid.encode(page.id)}`);
 });
 // View single page
@@ -306,9 +304,7 @@ pagesRoutes.post("/:id", async (c) => {
     path: body.path.toLowerCase().replace(/[^a-z0-9-]/g, "-"),
   });
-  return sse(c, async (stream) => {
-    await stream.redirect(`/dash/pages/${sqid.encode(id)}`);
-  });
+  return dsRedirect(`/dash/pages/${sqid.encode(id)}`);
 });
 // Delete page
@@ -318,7 +314,5 @@ pagesRoutes.post("/:id/delete", async (c) => {
   await c.var.services.posts.delete(id);
-  return sse(c, async (stream) => {
-    await stream.redirect("/dash/pages");
-  });
+  return dsRedirect("/dash/pages");
 });