@jant/core 0.3.35 → 0.3.37

package/src/ui/dash/collections/IconPickerGrid.tsx

@@ -1,50 +0,0 @@
-/**
- * Icon Picker Grid
- *
- * HTML fragment returned by GET /dash/collections/icons.
- * Renders a grid of icon buttons organized by category.
- */
-
-import type { FC } from "hono/jsx";
-import { ICON_CATALOG } from "../../../lib/icon-catalog.js";
-import { getIconSvg } from "../../../lib/icons.js";
-
-export const IconPickerGrid: FC = () => {
-  return (
-    <div class="flex flex-col gap-4">
-      {Object.entries(ICON_CATALOG).map(([category, names]) => (
-        <div key={category} data-category={category}>
-          <h3 class="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
-            {category}
-          </h3>
-          <div class="grid grid-cols-8 gap-1">
-            {names.map((name) => {
-              const svg = getIconSvg(name);
-              if (!svg) return null;
-              return (
-                <button
-                  key={name}
-                  type="button"
-                  class="flex items-center justify-center w-9 h-9 rounded-md hover:bg-accent transition-colors"
-                  data-icon-name={name}
-                  data-icon-svg={svg}
-                  title={name}
-                  data-on:click={`$iconName = el.dataset.iconName; $iconSvg = el.dataset.iconSvg; $icon = JSON.stringify({ name: $iconName, svg: $iconSvg, color: $iconColor }); const p = document.getElementById('icon-preview'); if (p) p.innerHTML = el.dataset.iconSvg; document.getElementById('icon-picker-dialog')?.close()`}
-                >
-                  <span
-                    class="w-5 h-5 flex items-center justify-center"
-                    dangerouslySetInnerHTML={{
-                      __html: svg
-                        .replace(/width="24"/, 'width="20"')
-                        .replace(/height="24"/, 'height="20"'),
-                    }}
-                  />
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};

package/src/ui/dash/collections/ViewCollectionContent.tsx

@@ -1,103 +0,0 @@
-/**
- * Single collection detail view
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Collection, PostView } from "../../../types.js";
-import { ActionButtons } from "../index.js";
-import { encode } from "../../../lib/sqid.js";
-import { renderCollectionIcon } from "../../../lib/icons.js";
-
-export function ViewCollectionContent({
-  collection,
-  posts,
-}: {
-  collection: Collection;
-  posts: PostView[];
-}) {
-  const { t } = useLingui();
-  const count = String(posts.length);
-  const postsHeader = t({
-    message: `Posts in Collection (${count})`,
-    comment: "@context: Collection posts section heading",
-  });
-
-  return (
-    <>
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-semibold flex items-center gap-2">
-            {collection.icon && (
-              <span
-                class="shrink-0"
-                dangerouslySetInnerHTML={{
-                  __html: renderCollectionIcon(collection.icon, { size: 24 }),
-                }}
-              />
-            )}
-            {collection.title}
-          </h1>
-          <p class="text-sm text-muted-foreground">/{collection.slug}</p>
-        </div>
-        <ActionButtons
-          editHref={`/dash/collections/${collection.id}/edit`}
-          editLabel={t({
-            message: "Edit",
-            comment: "@context: Button to edit collection",
-          })}
-          viewHref={`/c/${collection.slug}`}
-          viewLabel={t({
-            message: "View",
-            comment: "@context: Button to view collection",
-          })}
-        />
-      </div>
-
-      {collection.description && (
-        <p class="text-muted-foreground mb-6">{collection.description}</p>
-      )}
-
-      <div class="card">
-        <header>
-          <h2>{postsHeader}</h2>
-        </header>
-        <section>
-          {posts.length === 0 ? (
-            <p class="text-muted-foreground">
-              {t({
-                message: "No posts in this collection.",
-                comment: "@context: Empty state message",
-              })}
-            </p>
-          ) : (
-            <div class="flex flex-col divide-y">
-              {posts.map((post) => (
-                <div key={post.id} class="py-3 flex items-center gap-4">
-                  <div class="flex-1 min-w-0">
-                    <a
-                      href={`/dash/posts/${encode(post.id)}`}
-                      class="font-medium hover:underline"
-                    >
-                      {post.title ||
-                        post.excerpt?.slice(0, 50) ||
-                        `Post #${post.id}`}
-                    </a>
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </section>
-      </div>
-
-      <div class="mt-6">
-        <a href="/dash/collections" class="text-sm hover:underline">
-          {t({
-            message: "\u2190 Back to Collections",
-            comment: "@context: Navigation link",
-          })}
-        </a>
-      </div>
-    </>
-  );
-}

package/src/ui/dash/media/MediaListContent.tsx

@@ -1,201 +0,0 @@
-/**
- * Media grid list with upload UI
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Media } from "../../../types.js";
-import { EmptyState } from "../index.js";
-import {
-  getMediaUrl,
-  getImageUrl,
-  getPublicUrlForProvider,
-} from "../../../lib/image.js";
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function MediaCard({
-  media,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-}: {
-  media: Media;
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-}) {
-  const publicUrl = getPublicUrlForProvider(
-    media.provider,
-    r2PublicUrl,
-    s3PublicUrl,
-  );
-  const fullUrl = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(fullUrl, imageTransformUrl, {
-    width: 300,
-    quality: 80,
-    format: "auto",
-    fit: "cover",
-  });
-  const isImage = media.mimeType.startsWith("image/");
-
-  return (
-    <div class="group relative" data-media-id={media.id}>
-      {isImage ? (
-        <button
-          type="button"
-          class="block w-full aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary cursor-pointer"
-          onclick={`document.getElementById('lightbox-img').src = '${fullUrl}'; document.getElementById('lightbox').showModal()`}
-        >
-          <img
-            src={thumbnailUrl}
-            alt={media.alt || media.originalName}
-            class="w-full h-full object-cover"
-            loading="lazy"
-          />
-        </button>
-      ) : (
-        <a
-          href={`/dash/media/${media.id}`}
-          class="block aspect-square bg-muted rounded-lg overflow-hidden border hover:border-primary"
-        >
-          <div class="w-full h-full flex items-center justify-center text-muted-foreground">
-            <span class="text-xs">{media.mimeType}</span>
-          </div>
-        </a>
-      )}
-      <a
-        href={`/dash/media/${media.id}`}
-        class="block mt-2 text-xs truncate hover:underline"
-        title={media.originalName}
-      >
-        {media.originalName}
-      </a>
-      <div class="text-xs text-muted-foreground">{formatSize(media.size)}</div>
-    </div>
-  );
-}
-
-export function MediaListContent({
-  mediaList,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-}: {
-  mediaList: Media[];
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-}) {
-  const { t } = useLingui();
-
-  const processingText = t({
-    message: "Processing...",
-    comment: "@context: Upload status - processing",
-  });
-  const uploadingText = t({
-    message: "Uploading...",
-    comment: "@context: Upload status - uploading",
-  });
-  const uploadText = t({
-    message: "Upload",
-    comment: "@context: Button to upload media file",
-  });
-  const errorText = t({
-    message: "Upload failed. Please try again.",
-    comment: "@context: Upload error message",
-  });
-
-  return (
-    <>
-      {/* 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">
-        <h1 class="text-2xl font-semibold">
-          {t({ message: "Media", comment: "@context: Media main heading" })}
-        </h1>
-        <label class="btn cursor-pointer">
-          <span>{uploadText}</span>
-          <input
-            type="file"
-            class="hidden"
-            accept="image/*"
-            data-media-upload
-            data-text-processing={processingText}
-            data-text-uploading={uploadingText}
-            data-text-error={errorText}
-          />
-        </label>
-      </div>
-
-      {/* Upload instructions */}
-      <div class="card mb-6">
-        <section class="text-sm text-muted-foreground">
-          <p>
-            {t({
-              message:
-                "Images are automatically optimized: resized to max 1920px, converted to WebP, and metadata stripped.",
-              comment:
-                "@context: Media upload instructions - auto optimization",
-            })}
-          </p>
-        </section>
-      </div>
-
-      {/* Media grid or empty state */}
-      <div id="media-content">
-        {mediaList.length === 0 ? (
-          <div id="empty-state">
-            <EmptyState
-              message={t({
-                message: "No media uploaded yet.",
-                comment: "@context: Empty state message when no media exists",
-              })}
-            />
-          </div>
-        ) : (
-          <div
-            id="media-grid"
-            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"
-          >
-            {mediaList.map((m) => (
-              <MediaCard
-                key={m.id}
-                media={m}
-                r2PublicUrl={r2PublicUrl}
-                imageTransformUrl={imageTransformUrl}
-                s3PublicUrl={s3PublicUrl}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Lightbox */}
-      <dialog
-        id="lightbox"
-        class="p-0 m-auto bg-transparent backdrop:bg-black/80"
-        onclick="event.target === this && this.close()"
-      >
-        <img
-          id="lightbox-img"
-          src=""
-          alt=""
-          class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-        />
-      </dialog>
-    </>
-  );
-}

package/src/ui/dash/media/ViewMediaContent.tsx

@@ -1,208 +0,0 @@
-/**
- * Single media detail view
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Media } from "../../../types.js";
-import { DangerZone } from "../index.js";
-import * as time from "../../../lib/time.js";
-import {
-  getMediaUrl,
-  getImageUrl,
-  getPublicUrlForProvider,
-} from "../../../lib/image.js";
-
-function formatSize(bytes: number): string {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-export function ViewMediaContent({
-  media,
-  r2PublicUrl,
-  imageTransformUrl,
-  s3PublicUrl,
-}: {
-  media: Media;
-  r2PublicUrl?: string;
-  imageTransformUrl?: string;
-  s3PublicUrl?: string;
-}) {
-  const { t } = useLingui();
-  const publicUrl = getPublicUrlForProvider(
-    media.provider,
-    r2PublicUrl,
-    s3PublicUrl,
-  );
-  const url = getMediaUrl(media.storageKey, publicUrl);
-  const thumbnailUrl = getImageUrl(url, imageTransformUrl, {
-    width: 600,
-    quality: 85,
-    format: "auto",
-  });
-  const isImage = media.mimeType.startsWith("image/");
-
-  return (
-    <>
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-semibold">{media.originalName}</h1>
-          <p class="text-muted-foreground mt-1">
-            {formatSize(media.size)} · {media.mimeType} ·{" "}
-            {time.formatDate(media.createdAt)}
-          </p>
-        </div>
-        <a href="/dash/media" class="btn-outline">
-          {t({
-            message: "Back",
-            comment: "@context: Button to go back to media list",
-          })}
-        </a>
-      </div>
-
-      <div class="grid gap-6 md:grid-cols-2">
-        {/* Preview */}
-        <div class="card">
-          <header>
-            <h2>
-              {t({
-                message: "Preview",
-                comment: "@context: Media detail section - preview",
-              })}
-            </h2>
-          </header>
-          <section>
-            {isImage ? (
-              <>
-                <button
-                  type="button"
-                  class="cursor-pointer"
-                  onclick={`document.getElementById('lightbox-img').src = '${url}'; document.getElementById('lightbox').showModal()`}
-                >
-                  <img
-                    src={thumbnailUrl}
-                    alt={media.alt || media.originalName}
-                    class="max-w-full rounded-lg hover:opacity-90 transition-opacity"
-                  />
-                </button>
-                <p class="text-xs text-muted-foreground mt-2">
-                  {t({
-                    message: "Click image to view full size",
-                    comment: "@context: Hint to click image for lightbox",
-                  })}
-                </p>
-              </>
-            ) : (
-              <div class="aspect-video bg-muted rounded-lg flex items-center justify-center text-muted-foreground">
-                <span>{media.mimeType}</span>
-              </div>
-            )}
-          </section>
-        </div>
-
-        {/* Details */}
-        <div class="space-y-6">
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "URL",
-                  comment: "@context: Media detail section - URL",
-                })}
-              </h2>
-            </header>
-            <section>
-              <div class="flex items-center gap-2">
-                <input
-                  type="text"
-                  class="input flex-1 font-mono text-sm"
-                  value={url}
-                  readonly
-                />
-                <button
-                  type="button"
-                  class="btn-outline"
-                  onclick={`navigator.clipboard.writeText('${url}')`}
-                >
-                  {t({
-                    message: "Copy",
-                    comment: "@context: Button to copy URL to clipboard",
-                  })}
-                </button>
-              </div>
-              <p class="text-xs text-muted-foreground mt-2">
-                {t({
-                  message: "Use this URL to embed the media in your posts.",
-                  comment: "@context: Media URL helper text",
-                })}
-              </p>
-            </section>
-          </div>
-
-          <div class="card">
-            <header>
-              <h2>
-                {t({
-                  message: "Markdown",
-                  comment: "@context: Media detail section - Markdown snippet",
-                })}
-              </h2>
-            </header>
-            <section>
-              <div class="flex items-center gap-2">
-                <input
-                  type="text"
-                  class="input flex-1 font-mono text-sm"
-                  value={`![${media.alt || media.originalName}](${url})`}
-                  readonly
-                />
-                <button
-                  type="button"
-                  class="btn-outline"
-                  onclick={`navigator.clipboard.writeText('![${media.alt || media.originalName}](${url})')`}
-                >
-                  {t({
-                    message: "Copy",
-                    comment: "@context: Button to copy Markdown to clipboard",
-                  })}
-                </button>
-              </div>
-            </section>
-          </div>
-
-          {/* Delete */}
-          <DangerZone
-            actionLabel={t({
-              message: "Delete Media",
-              comment: "@context: Button to delete media",
-            })}
-            formAction={`/dash/media/${media.id}/delete`}
-            confirmMessage="Are you sure you want to delete this media?"
-            description={t({
-              message:
-                "Deleting this media will remove it permanently from storage.",
-              comment: "@context: Warning message before deleting media",
-            })}
-          />
-        </div>
-      </div>
-
-      {/* Lightbox */}
-      {isImage && (
-        <dialog
-          id="lightbox"
-          class="p-0 m-auto bg-transparent backdrop:bg-black/80"
-          onclick="event.target === this && this.close()"
-        >
-          <img
-            id="lightbox-img"
-            src=""
-            alt=""
-            class="max-w-[90vw] max-h-[90vh] object-contain rounded-lg"
-          />
-        </dialog>
-      )}
-    </>
-  );
-}

package/src/ui/dash/pages/PagesContent.tsx

@@ -1,74 +0,0 @@
-/**
- * Pages list — page CRUD only
- */
-
-import { useLingui } from "@lingui/react/macro";
-import type { Page } from "../../../types.js";
-import { ListItemRow, ActionButtons, CrudPageHeader } from "../index.js";
-
-export function PagesContent({ pages }: { pages: Page[] }) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      <CrudPageHeader
-        title={t({
-          message: "Pages",
-          comment: "@context: Pages main heading",
-        })}
-      >
-        <a href="/dash/pages/new" class="btn">
-          {t({
-            message: "New Page",
-            comment: "@context: Button to create new page",
-          })}
-        </a>
-      </CrudPageHeader>
-
-      {pages.length === 0 ? (
-        <p class="text-sm text-muted-foreground py-4">
-          {t({
-            message: "No pages yet. Create your first page to get started.",
-            comment: "@context: Empty state for pages list",
-          })}
-        </p>
-      ) : (
-        <div class="flex flex-col divide-y">
-          {pages.map((page) => (
-            <ListItemRow
-              key={page.id}
-              actions={
-                <ActionButtons
-                  editHref={`/dash/pages/${page.id}/edit`}
-                  editLabel={t({
-                    message: "Edit",
-                    comment: "@context: Button to edit page",
-                  })}
-                  viewHref={
-                    page.status !== "draft" ? `/${page.slug}` : undefined
-                  }
-                  viewLabel={t({
-                    message: "View",
-                    comment: "@context: Button to view page on public site",
-                  })}
-                />
-              }
-            >
-              <a
-                href={`/dash/pages/${page.id}`}
-                class="font-medium hover:underline"
-              >
-                {page.title ||
-                  t({
-                    message: "Untitled",
-                    comment: "@context: Default title for untitled page",
-                  })}
-              </a>
-              <p class="text-sm text-muted-foreground mt-1">/{page.slug}</p>
-            </ListItemRow>
-          ))}
-        </div>
-      )}
-    </>
-  );
-}