@jant/core 0.3.24 → 0.3.26

package/src/routes/dash/navigation.tsx

@@ -1,317 +0,0 @@
-import { getSiteName } from "../../lib/config.js";
-/**
- * Dashboard Navigation Items Routes
- */
-
-import { Hono } from "hono";
-import { useLingui } from "@lingui/react/macro";
-import type { Bindings, NavItem } from "../../types.js";
-import type { AppVariables } from "../../app.js";
-import { DashLayout } from "../../theme/layouts/index.js";
-import {
-  EmptyState,
-  ListItemRow,
-  ActionButtons,
-  CrudPageHeader,
-} from "../../theme/components/index.js";
-import { dsRedirect, dsToast } from "../../lib/sse.js";
-
-type Env = { Bindings: Bindings; Variables: AppVariables };
-
-export const navigationRoutes = new Hono<Env>();
-
-function NavigationListContent({ items }: { items: NavItem[] }) {
-  const { t } = useLingui();
-
-  return (
-    <>
-      <CrudPageHeader
-        title={t({
-          message: "Navigation",
-          comment: "@context: Dashboard heading",
-        })}
-        ctaLabel={t({
-          message: "New Link",
-          comment: "@context: Button to create new navigation link",
-        })}
-        ctaHref="/dash/navigation/new"
-      />
-
-      {items.length === 0 ? (
-        <EmptyState
-          message={t({
-            message: "No navigation links configured.",
-            comment: "@context: Empty state message",
-          })}
-          ctaText={t({
-            message: "New Link",
-            comment: "@context: Button to create new navigation link",
-          })}
-          ctaHref="/dash/navigation/new"
-        />
-      ) : (
-        <>
-          <div id="nav-links-list" class="flex flex-col divide-y">
-            {items.map((item) => (
-              <ListItemRow
-                key={item.id}
-                actions={
-                  <ActionButtons
-                    editHref={`/dash/navigation/${item.id}/edit`}
-                    editLabel={t({
-                      message: "Edit",
-                      comment: "@context: Button to edit navigation link",
-                    })}
-                    deleteAction={`/dash/navigation/${item.id}/delete`}
-                    deleteLabel={t({
-                      message: "Delete",
-                      comment: "@context: Button to delete navigation link",
-                    })}
-                  />
-                }
-              >
-                <div
-                  class="flex items-center gap-3 cursor-grab"
-                  data-id={item.id}
-                >
-                  <span class="text-muted-foreground select-none">⠿</span>
-                  <div class="flex items-center gap-2">
-                    <span class="font-medium">{item.label}</span>
-                    <code class="text-sm text-muted-foreground bg-muted px-1 rounded">
-                      {item.url}
-                    </code>
-                  </div>
-                </div>
-              </ListItemRow>
-            ))}
-          </div>
-
-          {/* SortableJS is initialized by client.ts via lib/nav-reorder.ts */}
-        </>
-      )}
-    </>
-  );
-}
-
-function NavigationFormContent({
-  item,
-  isEdit,
-}: {
-  item?: NavItem;
-  isEdit?: boolean;
-}) {
-  const { t } = useLingui();
-  const title = isEdit
-    ? t({ message: "Edit Link", comment: "@context: Page heading" })
-    : t({ message: "New Link", comment: "@context: Page heading" });
-
-  const signals = JSON.stringify({
-    label: item?.label ?? "",
-    url: item?.url ?? "",
-  }).replace(/</g, "\\u003c");
-
-  const action = isEdit ? `/dash/navigation/${item?.id}` : "/dash/navigation";
-
-  return (
-    <>
-      <h1 class="text-2xl font-semibold mb-6">{title}</h1>
-
-      <form
-        data-signals={signals}
-        data-on:submit__prevent={`@post('${action}')`}
-        data-indicator="_loading"
-        class="flex flex-col gap-4 max-w-lg"
-      >
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "Label",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="label"
-            class="input"
-            placeholder="Home"
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message: "Display text for the link",
-              comment: "@context: Navigation label help text",
-            })}
-          </p>
-        </div>
-
-        <div class="field">
-          <label class="label">
-            {t({
-              message: "URL",
-              comment: "@context: Navigation link form field",
-            })}
-          </label>
-          <input
-            type="text"
-            data-bind="url"
-            class="input"
-            placeholder="/archive or https://..."
-            required
-          />
-          <p class="text-xs text-muted-foreground mt-1">
-            {t({
-              message:
-                "Path (e.g. /archive) or full URL (e.g. https://example.com)",
-              comment: "@context: Navigation URL help text",
-            })}
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <button type="submit" class="btn" data-attr-disabled="$_loading">
-            <span data-show="!$_loading">
-              {isEdit
-                ? t({
-                    message: "Save Changes",
-                    comment: "@context: Button to save edited navigation link",
-                  })
-                : t({
-                    message: "Create Link",
-                    comment: "@context: Button to save new navigation link",
-                  })}
-            </span>
-            <span data-show="$_loading">
-              {t({
-                message: "Processing...",
-                comment:
-                  "@context: Loading text shown on submit button while request is in progress",
-              })}
-            </span>
-          </button>
-          <a href="/dash/navigation" class="btn-outline">
-            {t({
-              message: "Cancel",
-              comment: "@context: Button to cancel form",
-            })}
-          </a>
-        </div>
-      </form>
-    </>
-  );
-}
-
-// List navigation items
-navigationRoutes.get("/", async (c) => {
-  const siteName = await getSiteName(c);
-  const items = await c.var.services.navItems.list();
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Navigation"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationListContent items={items} />
-    </DashLayout>,
-  );
-});
-
-// New link form
-navigationRoutes.get("/new", async (c) => {
-  const siteName = await getSiteName(c);
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="New Link"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationFormContent />
-    </DashLayout>,
-  );
-});
-
-// Create link
-navigationRoutes.post("/", async (c) => {
-  const body = await c.req.json<{ label: string; url: string }>();
-
-  if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
-  }
-
-  await c.var.services.navItems.create({
-    type: "link",
-    label: body.label,
-    url: body.url,
-  });
-
-  return dsRedirect("/dash/navigation");
-});
-
-// Reorder links (must be before /:id to avoid "reorder" matching as :id)
-navigationRoutes.post("/reorder", async (c) => {
-  const body = await c.req.json<{ ids: number[] }>();
-
-  if (!Array.isArray(body.ids)) {
-    return dsToast("Invalid request", "error");
-  }
-
-  await c.var.services.navItems.reorder(body.ids);
-
-  return dsToast("Order saved");
-});
-
-// Edit link form
-navigationRoutes.get("/:id/edit", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (isNaN(id)) return c.notFound();
-
-  const item = await c.var.services.navItems.getById(id);
-  if (!item) return c.notFound();
-
-  const siteName = await getSiteName(c);
-
-  return c.html(
-    <DashLayout
-      c={c}
-      title="Edit Link"
-      siteName={siteName}
-      currentPath="/dash/navigation"
-    >
-      <NavigationFormContent item={item} isEdit />
-    </DashLayout>,
-  );
-});
-
-// Update link
-navigationRoutes.post("/:id", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (isNaN(id)) return c.notFound();
-
-  const body = await c.req.json<{ label: string; url: string }>();
-
-  if (!body.label || !body.url) {
-    return dsToast("Label and URL are required", "error");
-  }
-
-  const updated = await c.var.services.navItems.update(id, {
-    label: body.label,
-    url: body.url,
-  });
-
-  if (!updated) return c.notFound();
-
-  return dsRedirect("/dash/navigation");
-});
-
-// Delete link
-navigationRoutes.post("/:id/delete", async (c) => {
-  const id = parseInt(c.req.param("id"), 10);
-  if (!isNaN(id)) {
-    await c.var.services.navItems.delete(id);
-  }
-
-  return dsRedirect("/dash/navigation");
-});

package/src/theme/components/index.ts

@@ -1,23 +0,0 @@
-export { ActionButtons, type ActionButtonsProps } from "./ActionButtons.js";
-export { CrudPageHeader, type CrudPageHeaderProps } from "./CrudPageHeader.js";
-export { DangerZone, type DangerZoneProps } from "./DangerZone.js";
-export { EmptyState, type EmptyStateProps } from "./EmptyState.js";
-export { ListItemRow, type ListItemRowProps } from "./ListItemRow.js";
-export { MediaGallery, type MediaGalleryProps } from "./MediaGallery.js";
-export { PageForm, type PageFormProps } from "./PageForm.js";
-export {
-  Pagination,
-  LoadMore,
-  PagePagination,
-  type PaginationProps,
-  type LoadMoreProps,
-  type PagePaginationProps,
-} from "./Pagination.js";
-export { PostForm, type PostFormProps } from "./PostForm.js";
-export { PostList, type PostListProps } from "./PostList.js";
-export { ThreadView, type ThreadViewProps } from "./ThreadView.js";
-export { TypeBadge, type TypeBadgeProps } from "./TypeBadge.js";
-export {
-  VisibilityBadge,
-  type VisibilityBadgeProps,
-} from "./VisibilityBadge.js";

package/src/theme/index.ts

@@ -1,22 +0,0 @@
-/**
- * Jant Theme - Shared Infrastructure
- *
- * Exports shared layouts, components, and color themes used by all themes.
- * Individual theme packages (minimal, card, etc.) import from here.
- *
- * @example
- * ```typescript
- * // In a theme package:
- * import { MediaGallery, Pagination } from "@jant/core/theme";
- * import type { ColorTheme } from "@jant/core/theme";
- * ```
- */
-
-// Layout components (BaseLayout, DashLayout)
-export * from "./layouts/index.js";
-
-// Shared UI components (MediaGallery, Pagination, EmptyState, etc.)
-export * from "./components/index.js";
-
-// Color themes
-export * from "./color-themes.js";

package/src/theme/layouts/index.ts

@@ -1,7 +0,0 @@
-export {
-  BaseLayout,
-  type BaseLayoutProps,
-  type ToastProps,
-} from "./BaseLayout.js";
-export { DashLayout, type DashLayoutProps } from "./DashLayout.js";
-export type { SiteLayoutProps } from "../../types.js";

package/src/themes/threads/ThreadsSiteLayout.tsx

@@ -1,194 +0,0 @@
-/**
- * Threads Theme - Site Layout
- *
- * Left icon sidebar (76px) on desktop, bottom tab bar (60px) on mobile.
- * Gray page background (#fafafa) with white rounded content container.
- * All dimensions match threads.com's --barcelona-* design tokens.
- */
-
-import type { FC, PropsWithChildren } from "hono/jsx";
-import type { NavItemView, SiteLayoutProps } from "../../types.js";
-
-/** Map known URL paths to SVG icons. Size 26x26 matching Threads' nav icons. */
-function NavIcon({ url, isActive }: { url: string; isActive: boolean }) {
-  const stroke = "currentColor";
-  const sw = isActive ? "2.25" : "1.75";
-  const cls = "size-[26px]";
-
-  // Home
-  if (url === "/") {
-    return (
-      <svg
-        class={cls}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width={sw}
-        stroke={stroke}
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m2.25 12 8.954-8.955a1.126 1.126 0 0 1 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-        />
-      </svg>
-    );
-  }
-
-  // Search
-  if (url === "/search") {
-    return (
-      <svg
-        class={cls}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width={sw}
-        stroke={stroke}
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
-        />
-      </svg>
-    );
-  }
-
-  // Archive
-  if (url === "/archive") {
-    return (
-      <svg
-        class={cls}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width={sw}
-        stroke={stroke}
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
-        />
-      </svg>
-    );
-  }
-
-  // RSS — common for /feed, /rss, /atom
-  if (url.match(/\/(feed|rss|atom)/)) {
-    return (
-      <svg
-        class={cls}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width={sw}
-        stroke={stroke}
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M12.75 19.5v-.75a7.5 7.5 0 0 0-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M4.5 19.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-        />
-      </svg>
-    );
-  }
-
-  // External link
-  if (url.startsWith("http")) {
-    return (
-      <svg
-        class={cls}
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke-width={sw}
-        stroke={stroke}
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
-        />
-      </svg>
-    );
-  }
-
-  // Default: generic page icon
-  return (
-    <svg
-      class={cls}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width={sw}
-      stroke={stroke}
-    >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
-      />
-    </svg>
-  );
-}
-
-function SidebarLink({ link }: { link: NavItemView }) {
-  return (
-    <a
-      href={link.url}
-      class={`threads-sidebar-link ${link.isActive ? "threads-sidebar-link-active" : ""}`}
-      title={link.label}
-      {...(link.isExternal
-        ? { target: "_blank", rel: "noopener noreferrer" }
-        : {})}
-    >
-      <NavIcon url={link.url} isActive={link.isActive} />
-    </a>
-  );
-}
-
-function MobileTabLink({ link }: { link: NavItemView }) {
-  return (
-    <a
-      href={link.url}
-      class={`threads-mobile-tab ${link.isActive ? "threads-mobile-tab-active" : ""}`}
-      {...(link.isExternal
-        ? { target: "_blank", rel: "noopener noreferrer" }
-        : {})}
-    >
-      <NavIcon url={link.url} isActive={link.isActive} />
-    </a>
-  );
-}
-
-export const ThreadsSiteLayout: FC<PropsWithChildren<SiteLayoutProps>> = ({
-  siteName,
-  links,
-  children,
-}) => {
-  return (
-    <div class="threads-page">
-      {/* Desktop: left icon sidebar — no border, on gray background */}
-      <aside class="threads-sidebar">
-        <a href="/" class="threads-logo" title={siteName}>
-          <span class="text-2xl font-black leading-none">@</span>
-        </a>
-        <nav class="flex flex-1 flex-col items-center gap-1">
-          {links.map((link) => (
-            <SidebarLink key={link.id} link={link} />
-          ))}
-        </nav>
-      </aside>
-
-      {/* Main content — white rounded container on gray background */}
-      <main class="threads-main">
-        <div class="threads-container">
-          <div class="threads-content">{children}</div>
-        </div>
-      </main>
-
-      {/* Mobile: bottom tab bar */}
-      <nav class="threads-mobile-tabs">
-        {links.map((link) => (
-          <MobileTabLink key={link.id} link={link} />
-        ))}
-      </nav>
-    </div>
-  );
-};

package/src/themes/threads/index.ts

@@ -1,100 +0,0 @@
-/**
- * Threads Theme
- *
- * A clean, centered timeline theme inspired by Threads.net.
- * Posts separated by thin dividers, no cards, with thread connector lines.
- *
- * This is the default theme for Jant.
- */
-
-import type { JantTheme, ThemeComponents } from "../../types.js";
-import type { ColorTheme } from "../../theme/color-themes.js";
-
-// Layout
-import { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
-
-// Pages
-import { HomePage } from "./pages/HomePage.js";
-import { PostPage } from "./pages/PostPage.js";
-import { SinglePage } from "./pages/SinglePage.js";
-import { ArchivePage } from "./pages/ArchivePage.js";
-import { SearchPage } from "./pages/SearchPage.js";
-import { CollectionPage } from "./pages/CollectionPage.js";
-
-// Timeline
-import { NoteCard } from "./timeline/NoteCard.js";
-import { LinkCard } from "./timeline/LinkCard.js";
-import { QuoteCard } from "./timeline/QuoteCard.js";
-import { ThreadPreview } from "./timeline/ThreadPreview.js";
-import { TimelineFeed } from "./timeline/TimelineFeed.js";
-import { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
-import { timelineMore } from "./timeline/timelineMore.js";
-
-export interface ThemeOptions {
-  /** Override individual components */
-  components?: Partial<ThemeComponents>;
-  /** CSS variable overrides */
-  cssVariables?: Record<string, string>;
-  /** Custom color themes */
-  colorThemes?: ColorTheme[];
-}
-
-/**
- * Create the threads theme configuration.
- *
- * @param options - Optional overrides for components, CSS variables, or color themes
- * @returns A JantTheme configuration object
- *
- * @example
- * ```typescript
- * import { createApp } from "@jant/core";
- * import { threadsTheme } from "@jant/core";
- *
- * export default createApp({
- *   theme: threadsTheme(),
- * });
- * ```
- */
-export function theme(options?: ThemeOptions): JantTheme {
-  return {
-    name: "threads",
-    components: {
-      SiteLayout: ThreadsSiteLayout,
-      HomePage,
-      PostPage,
-      SinglePage,
-      ArchivePage,
-      SearchPage,
-      CollectionPage,
-      NoteCard,
-      LinkCard,
-      QuoteCard,
-      ThreadPreview,
-      TimelineFeed,
-      TimelineLoadMore,
-      ...options?.components,
-    },
-    timelineMore,
-    cssVariables: {
-      ...options?.cssVariables,
-    },
-    colorThemes: options?.colorThemes,
-  };
-}
-
-// Re-export individual components for wrapping/extending
-export { ThreadsSiteLayout } from "./ThreadsSiteLayout.js";
-export { HomePage } from "./pages/HomePage.js";
-export { PostPage } from "./pages/PostPage.js";
-export { SinglePage } from "./pages/SinglePage.js";
-export { ArchivePage } from "./pages/ArchivePage.js";
-export { SearchPage } from "./pages/SearchPage.js";
-export { CollectionPage } from "./pages/CollectionPage.js";
-export { NoteCard } from "./timeline/NoteCard.js";
-export { LinkCard } from "./timeline/LinkCard.js";
-export { QuoteCard } from "./timeline/QuoteCard.js";
-export { ThreadPreview } from "./timeline/ThreadPreview.js";
-export { TimelineFeed } from "./timeline/TimelineFeed.js";
-export { TimelineLoadMore } from "./timeline/TimelineLoadMore.js";
-export { TimelineItem, TimelineItemFromPost } from "./timeline/TimelineItem.js";
-export { timelineMore } from "./timeline/timelineMore.js";