@jant/core 0.3.22 → 0.3.24

package/src/themes/threads/style.css

@@ -0,0 +1,336 @@
+/**
+ * Threads theme styles
+ *
+ * Design tokens extracted from threads.com source CSS.
+ * Key variables from Threads' --barcelona-* system:
+ *   --barcelona-side-navigation-width: 76px
+ *   --barcelona-column-layout-max-width: 640px
+ *   --barcelona-columns-item-horizontal-padding: 24px
+ *   --barcelona-primary-column-outline: rgb(213,213,213) / rgb(45,45,45)
+ *   --barcelona-threadline: rgb(229,229,229) / rgb(51,54,56)
+ *   --barcelona-navigation-icon: rgb(77,77,77) / rgb(184,184,184)
+ *   --barcelona-navigation-item-hover-background: rgba(0,0,0,0.035)
+ */
+
+/* Tell Tailwind to scan threads theme source files for class usage */
+@source "./";
+
+/* =========================================================================
+ * Threads Design Tokens (as CSS custom properties)
+ * ========================================================================= */
+
+:root {
+  --threads-sidebar-width: 76px;
+  --threads-column-max-width: 640px;
+  --threads-column-padding: 24px;
+  --threads-column-outline: rgb(213, 213, 213);
+  --threads-threadline: rgb(229, 229, 229);
+  --threads-page-bg: rgb(250, 250, 250);
+  --threads-elevated-bg: rgb(255, 255, 255);
+  --threads-nav-icon: rgb(77, 77, 77);
+  --threads-nav-icon-active: rgb(0, 0, 0);
+  --threads-nav-hover-bg: rgba(0, 0, 0, 0.035);
+  --threads-text-primary: rgb(0, 0, 0);
+  --threads-text-secondary: rgb(119, 119, 119);
+  --threads-media-outline: rgba(0, 0, 0, 0.15);
+  --threads-divider: rgba(0, 0, 0, 0.15);
+  --threads-container-radius: 24px;
+  --threads-mobile-header-height: 60px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --threads-column-outline: rgb(45, 45, 45);
+    --threads-threadline: rgb(51, 54, 56);
+    --threads-page-bg: rgb(10, 10, 10);
+    --threads-elevated-bg: rgb(24, 24, 24);
+    --threads-nav-icon: rgb(184, 184, 184);
+    --threads-nav-icon-active: rgb(243, 245, 247);
+    --threads-nav-hover-bg: rgba(255, 255, 255, 0.08);
+    --threads-text-primary: rgb(243, 245, 247);
+    --threads-text-secondary: rgb(153, 153, 153);
+    --threads-media-outline: rgba(243, 245, 247, 0.2);
+    --threads-divider: rgba(255, 255, 255, 0.15);
+  }
+}
+
+.dark {
+  --threads-column-outline: rgb(45, 45, 45);
+  --threads-threadline: rgb(51, 54, 56);
+  --threads-page-bg: rgb(10, 10, 10);
+  --threads-elevated-bg: rgb(24, 24, 24);
+  --threads-nav-icon: rgb(184, 184, 184);
+  --threads-nav-icon-active: rgb(243, 245, 247);
+  --threads-nav-hover-bg: rgba(255, 255, 255, 0.08);
+  --threads-text-primary: rgb(243, 245, 247);
+  --threads-text-secondary: rgb(153, 153, 153);
+  --threads-media-outline: rgba(243, 245, 247, 0.2);
+  --threads-divider: rgba(255, 255, 255, 0.15);
+}
+
+@layer components {
+  /* =========================================================================
+   * Page Layout
+   * ========================================================================= */
+
+  .threads-page {
+    min-height: 100vh;
+    min-height: 100dvh;
+    background-color: var(--threads-page-bg);
+  }
+
+  /* --- Left sidebar (desktop only) ---------------------------------------- */
+
+  .threads-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 30;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    width: var(--threads-sidebar-width);
+    padding: 12px 0;
+    background-color: var(--threads-page-bg);
+  }
+
+  @media (min-width: 700px) {
+    .threads-sidebar {
+      display: flex;
+    }
+  }
+
+  .threads-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 4px;
+    color: var(--threads-nav-icon-active);
+  }
+
+  .threads-sidebar-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
+    color: var(--threads-nav-icon);
+    transition:
+      background-color 0.15s,
+      color 0.15s;
+  }
+
+  .threads-sidebar-link:hover {
+    color: var(--threads-nav-icon-active);
+    background-color: var(--threads-nav-hover-bg);
+  }
+
+  .threads-sidebar-link-active {
+    color: var(--threads-nav-icon-active);
+  }
+
+  /* --- Main content area -------------------------------------------------- */
+
+  .threads-main {
+    padding-bottom: var(--threads-mobile-header-height);
+  }
+
+  @media (min-width: 700px) {
+    .threads-main {
+      padding-bottom: 0;
+      padding-left: var(--threads-sidebar-width);
+    }
+  }
+
+  .threads-container {
+    max-width: var(--threads-column-max-width);
+    margin: 0 auto;
+  }
+
+  /* Mobile: full-bleed white, no border-radius */
+  .threads-content {
+    background-color: var(--threads-elevated-bg);
+    padding: 0 var(--threads-column-padding);
+  }
+
+  /* Desktop: rounded white card on gray background */
+  @media (min-width: 700px) {
+    .threads-container {
+      padding: 16px 24px 0;
+    }
+
+    .threads-content {
+      border-radius: var(--threads-container-radius);
+      border: 0.5px solid var(--threads-column-outline);
+      padding: 0 var(--threads-column-padding);
+      min-height: calc(100vh - 32px);
+    }
+  }
+
+  /* --- Home page: each date group as its own card ------------------------ */
+
+  .threads-content:has(#timeline-feed) {
+    background-color: transparent;
+    padding: 0;
+  }
+
+  .threads-content #timeline-feed {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .threads-content #timeline-feed > div {
+    background-color: var(--threads-elevated-bg);
+    padding: 0 var(--threads-column-padding) 16px;
+  }
+
+  @media (min-width: 700px) {
+    .threads-content:has(#timeline-feed) {
+      border: none;
+      border-radius: 0;
+      min-height: auto;
+    }
+
+    .threads-content #timeline-feed {
+      gap: 16px;
+    }
+
+    .threads-content #timeline-feed > div {
+      border-radius: var(--threads-container-radius);
+      border: 0.5px solid var(--threads-column-outline);
+    }
+  }
+
+  /* --- Mobile bottom tab bar ---------------------------------------------- */
+
+  .threads-mobile-tabs {
+    position: fixed;
+    inset: auto 0 0 0;
+    z-index: 30;
+    display: flex;
+    height: var(--threads-mobile-header-height);
+    background-color: var(--threads-elevated-bg);
+    border-top: 0.5px solid var(--threads-column-outline);
+  }
+
+  @media (min-width: 700px) {
+    .threads-mobile-tabs {
+      display: none;
+    }
+  }
+
+  .threads-mobile-tab {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    color: var(--threads-nav-icon);
+    transition: color 0.15s;
+  }
+
+  .threads-mobile-tab-active {
+    color: var(--threads-nav-icon-active);
+  }
+
+  /* =========================================================================
+   * Timeline & Post Components
+   * ========================================================================= */
+
+  /* Date group header — centered, muted label at top of each card */
+  .threads-date-header {
+    padding: 16px 0 8px;
+    text-align: center;
+    font-size: 13px;
+    color: var(--threads-text-secondary);
+  }
+
+  /* Post divider — full-width 0.5px line matching Threads.
+   * Targets the <hr class="border-border my-5"> used by both
+   * TimelineFeed (initial render) and the SSE load-more handler. */
+  .threads-content hr.border-border {
+    border: none;
+    border-top: 0.5px solid var(--threads-divider);
+    margin-left: calc(-1 * var(--threads-column-padding));
+    margin-right: calc(-1 * var(--threads-column-padding));
+  }
+
+  /* Thread reply container with vertical connector line */
+  .threads-replies {
+    position: relative;
+    margin-left: 16px;
+    padding-left: 16px;
+    margin-top: 8px;
+  }
+
+  .threads-replies::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: var(--threads-threadline);
+  }
+
+  /* Individual reply in thread */
+  .threads-reply {
+    padding: 12px 0;
+  }
+
+  .threads-reply + .threads-reply {
+    border-top: 0.5px solid var(--threads-divider);
+  }
+
+  /* Compact text for thread replies */
+  .threads-compact {
+    @apply text-sm;
+  }
+
+  /* Media — rounded corners + subtle outline like Threads */
+  .threads-media img {
+    border-radius: 8px;
+    outline: 1px solid var(--threads-media-outline);
+    outline-offset: -1px;
+  }
+
+  /* Image carousel — horizontal scroll like Threads.net */
+  .threads-carousel-track {
+    display: flex;
+    overflow-x: auto;
+    gap: 4px;
+    margin-inline: calc(-1 * var(--threads-column-padding));
+    padding-inline: var(--threads-column-padding);
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+  .threads-carousel-track::-webkit-scrollbar {
+    display: none; /* Chrome/Safari */
+  }
+  .threads-carousel-item {
+    flex: 0 0 auto;
+    width: 224px;
+    height: 280px;
+  }
+  .threads-carousel-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /* Link preview styling */
+  .threads-link-preview {
+    border-radius: 12px;
+    border: 0.5px solid var(--threads-column-outline);
+    padding: 12px 16px;
+    margin-top: 8px;
+  }
+
+  /* Quote block styling */
+  .threads-quote {
+    padding-left: 12px;
+    border-left: 2px solid var(--threads-text-secondary);
+  }
+}

package/src/{theme/components → themes/threads}/timeline/LinkCard.tsx

@@ -1,18 +1,26 @@
 /**
- * Link Card Component
+ * Threads Theme - Link Card
  *
- * External link emphasis for type="link" posts.
+ * Compact link preview box — date is shown at the feed level as a group header.
  */
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../../types.js";
 
 export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  // Extract domain from URL for display
+  let domain: string | undefined;
+  if (post.url) {
+    try {
+      domain = new URL(post.url).hostname.replace(/^www\./, "");
+    } catch {
+      // Invalid URL, skip domain display
+    }
+  }
+
   return (
-    <article
-      class={`h-entry timeline-card timeline-card-link${compact ? " timeline-card-compact" : ""}`}
-    >
-      {post.sourceDomain && (
+    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+      {domain && (
         <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
           <svg
             class="size-3"
@@ -24,7 +32,7 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
           >
             <path 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>
-          <span>{post.sourceDomain}</span>
+          <span>{domain}</span>
         </div>
       )}
       {post.title && (
@@ -32,19 +40,19 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
           class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
         >
           <a
-            href={post.sourceUrl || post.permalink}
+            href={post.url || post.permalink}
             class="u-url hover:underline"
-            target={post.sourceUrl ? "_blank" : undefined}
-            rel={post.sourceUrl ? "noopener noreferrer" : undefined}
+            target={post.url ? "_blank" : undefined}
+            rel={post.url ? "noopener noreferrer" : undefined}
           >
             {post.title}
           </a>
         </h2>
       )}
-      {!compact && post.contentHtml && (
+      {!compact && post.bodyHtml && (
         <div
-          class="e-content prose prose-sm text-muted-foreground"
-          dangerouslySetInnerHTML={{ __html: post.contentHtml }}
+          class="e-content prose text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
       <footer class="mt-2 text-xs text-muted-foreground">

package/src/themes/threads/timeline/NoteCard.tsx

@@ -0,0 +1,58 @@
+/**
+ * Threads Theme - Note Card
+ *
+ * Without title: plain text note — date is shown at the feed level as a group header.
+ * With title: article-style rendering with summary excerpt and "Read more" link.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+import { MediaGallery } from "../../../theme/index.js";
+
+export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  const isArticle = !!post.title;
+  const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+
+  return (
+    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+      {isArticle && (
+        <h2
+          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
+        >
+          <a href={post.permalink} class="u-url hover:underline">
+            {post.title}
+          </a>
+        </h2>
+      )}
+      {displayHtml && (
+        <div
+          class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          dangerouslySetInnerHTML={{ __html: displayHtml }}
+        />
+      )}
+      {!compact && post.media.length > 0 && (
+        <div class="threads-media mt-3">
+          <MediaGallery attachments={post.media} />
+        </div>
+      )}
+      {!compact && isArticle && post.summaryHasMore && (
+        <a
+          href={post.permalink}
+          class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
+        >
+          Read more →
+        </a>
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtRelative}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/themes/threads/timeline/QuoteCard.tsx

@@ -0,0 +1,63 @@
+/**
+ * Threads Theme - Quote Card
+ *
+ * Left-border accent blockquote — date is shown at the feed level as a group header.
+ *
+ * v2 fields:
+ * - quoteText: the quoted text
+ * - title: attribution (who said it)
+ * - url: source link
+ * - bodyHtml: commentary
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineCardProps } from "../../../types.js";
+
+export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+  return (
+    <article class={`h-entry${compact ? " threads-compact" : ""}`}>
+      {post.quoteText && (
+        <blockquote class="threads-quote">
+          <div
+            class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+          >
+            {post.quoteText}
+          </div>
+        </blockquote>
+      )}
+      {!compact && (post.title || post.url) && (
+        <div class="mt-2 text-sm text-muted-foreground">
+          &mdash;{" "}
+          {post.url ? (
+            <a
+              href={post.url}
+              class="hover:underline"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {post.title || "Source"}
+            </a>
+          ) : (
+            <span>{post.title}</span>
+          )}
+        </div>
+      )}
+      {!compact && post.bodyHtml && (
+        <div
+          class="mt-3 prose text-muted-foreground"
+          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+        />
+      )}
+      <footer class="mt-2">
+        <a
+          href={post.permalink}
+          class="u-url text-xs text-muted-foreground hover:underline"
+        >
+          <time class="dt-published" datetime={post.publishedAt}>
+            {post.publishedAtRelative}
+          </time>
+        </a>
+      </footer>
+    </article>
+  );
+};

package/src/{theme/components → themes/threads}/timeline/ThreadPreview.tsx

@@ -1,7 +1,7 @@
 /**
- * Thread Preview Component
+ * Threads Theme - Thread Preview
  *
- * Inline thread preview: root card + compact replies + "show more" link.
+ * Root post + vertical line connector + compact replies underneath.
  */
 
 import type { FC } from "hono/jsx";
@@ -20,17 +20,17 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
   const remainingCount = totalReplyCount - previewReplies.length;
 
   return (
-    <div class="timeline-thread">
+    <div>
       <TimelineItem item={{ post: rootPost }} theme={theme} />
       {previewReplies.length > 0 && (
-        <div class="timeline-thread-replies">
+        <div class="threads-replies">
           {previewReplies.map((reply) => (
-            <div key={reply.id} class="timeline-thread-reply">
+            <div key={reply.id} class="threads-reply">
               <TimelineItemFromPost post={reply} compact theme={theme} />
             </div>
           ))}
           {remainingCount > 0 && (
-            <div class="timeline-thread-reply">
+            <div class="threads-reply">
               <a
                 href={rootPost.permalink}
                 class="text-sm text-muted-foreground hover:text-foreground hover:underline"

package/src/themes/threads/timeline/TimelineFeed.tsx

@@ -0,0 +1,62 @@
+/**
+ * Threads Theme - Timeline Feed
+ *
+ * Date-grouped posts separated by thin dividers.
+ * A centered date header appears above each group.
+ */
+
+import type { FC } from "hono/jsx";
+import type { TimelineFeedProps } from "../../../types.js";
+import { TimelineItem } from "./TimelineItem.js";
+import { ThreadPreview as DefaultThreadPreview } from "./ThreadPreview.js";
+import { TimelineLoadMore as DefaultTimelineLoadMore } from "./TimelineLoadMore.js";
+import { groupByDate } from "./groupByDate.js";
+
+export const TimelineFeed: FC<TimelineFeedProps> = ({
+  items,
+  hasMore,
+  nextCursor,
+  theme,
+}) => {
+  const ResolvedThreadPreview = theme?.ThreadPreview ?? DefaultThreadPreview;
+  const ResolvedLoadMore = theme?.TimelineLoadMore ?? DefaultTimelineLoadMore;
+  const groups = groupByDate(items);
+
+  return (
+    <div>
+      <div id="timeline-feed">
+        {groups.map((group) => (
+          <div key={group.dateKey} class="threads-card">
+            <div class="threads-date-header">
+              <span>{group.label}</span>
+            </div>
+            <div id={`date-items-${group.dateKey}`} class="flex flex-col">
+              {group.items.map((item, i) => (
+                <div key={item.post.id}>
+                  {i > 0 && <hr class="border-border my-5" />}
+                  {item.threadPreview ? (
+                    <ResolvedThreadPreview
+                      rootPost={item.post}
+                      previewReplies={item.threadPreview.replies}
+                      totalReplyCount={item.threadPreview.totalReplyCount}
+                      theme={theme}
+                    />
+                  ) : (
+                    <TimelineItem item={item} theme={theme} />
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+      {hasMore && nextCursor && (
+        <ResolvedLoadMore
+          nextCursor={nextCursor}
+          lastDate={groups.at(-1)?.dateKey}
+          theme={theme}
+        />
+      )}
+    </div>
+  );
+};

package/src/{theme/components → themes/threads}/timeline/TimelineItem.tsx

@@ -1,8 +1,7 @@
 /**
- * Timeline Item Component
+ * Threads Theme - Timeline Item
  *
- * Dispatches to the correct card component based on post type.
- * Resolves card overrides from theme components if provided.
+ * Dispatches to the correct card component based on post format.
  */
 
 import type { FC } from "hono/jsx";
@@ -11,38 +10,28 @@ import type {
   TimelineCardProps,
   ThemeComponents,
   PostView,
+  Format,
 } from "../../../types.js";
 import { NoteCard } from "./NoteCard.js";
-import { ArticleCard } from "./ArticleCard.js";
 import { LinkCard } from "./LinkCard.js";
 import { QuoteCard } from "./QuoteCard.js";
-import { ImageCard } from "./ImageCard.js";
-import type { PostType } from "../../../types.js";
 
-const CARD_MAP: Record<PostType, FC<TimelineCardProps>> = {
+const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
   note: NoteCard,
-  article: ArticleCard,
   link: LinkCard,
   quote: QuoteCard,
-  image: ImageCard,
-  page: NoteCard,
 };
 
-const THEME_KEY_MAP: Record<PostType, keyof ThemeComponents> = {
+const THEME_KEY_MAP: Record<Format, keyof ThemeComponents> = {
   note: "NoteCard",
-  article: "ArticleCard",
   link: "LinkCard",
   quote: "QuoteCard",
-  image: "ImageCard",
-  page: "NoteCard",
 };
 
 interface TimelineItemProps {
   item: TimelineItemView;
   compact?: boolean;
-  /** Override card component (for direct overrides) */
   cardOverride?: FC<TimelineCardProps>;
-  /** Theme components for cascade resolution */
   theme?: ThemeComponents;
 }
 
@@ -59,9 +48,9 @@ export const TimelineItem: FC<TimelineItemProps> = ({
   cardOverride,
   theme,
 }) => {
-  const themeKey = THEME_KEY_MAP[item.post.type];
+  const themeKey = THEME_KEY_MAP[item.post.format];
   const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.type];
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[item.post.format];
   return <Card post={item.post} compact={compact} />;
 };
 
@@ -71,8 +60,8 @@ export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
   cardOverride,
   theme,
 }) => {
-  const themeKey = THEME_KEY_MAP[post.type];
+  const themeKey = THEME_KEY_MAP[post.format];
   const themeCard = theme?.[themeKey] as FC<TimelineCardProps> | undefined;
-  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.type];
+  const Card = cardOverride ?? themeCard ?? CARD_MAP[post.format];
   return <Card post={post} compact={compact} />;
 };