@jant/core 0.5.3 → 0.6.0

package/src/styles/tokens.css

@@ -321,6 +321,7 @@
     transparent
   );
   --site-thread-item-spacing: 32px;
+  --site-thread-context-max-height: 160px;
   --site-thread-dot-ring: color-mix(
     in srgb,
     var(--site-accent) 16%,

package/src/styles/ui.css

@@ -2624,6 +2624,113 @@
       var(--site-thread-dot-ring);
   }
 
+  /* Collapsible ancestor context wrapper.
+     Server-rendered with `data-collapsed`. Crop and fade are always active
+     while data-collapsed is set; JS only toggles the Show more/less button
+     visibility based on real overflow. Negative left margin + matching
+     padding extends the shell's box past the content edge so the dot
+     markers (which live at left:-31.5px on desktop) survive
+     `overflow: hidden`. `box-sizing: content-box` keeps the inner content
+     width identical to before. */
+  .thread-context-shell {
+    position: relative;
+    box-sizing: content-box;
+    margin-left: -40px;
+    padding-left: 40px;
+    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .thread-context-shell[data-collapsed] {
+    max-height: var(--site-thread-context-max-height);
+    overflow: hidden;
+    /* Soft fade at the bottom edge so the cap doesn't make a hard cut
+       through text when content barely overflows. Combined with the
+       shell's opacity:0.5 this produces a smooth "context drifts off"
+       look instead of a guillotine slice right above the toggle. */
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      black 0%,
+      black 60%,
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      black 0%,
+      black 60%,
+      transparent 100%
+    );
+  }
+
+  /* Push ancestor context into the visual background so the focused post
+     below the shell (latest reply on the home feed, anchor post on the
+     detail page) reads as the primary content. Opacity works on both real
+     painted content AND empty space, sidestepping the gradient-on-empty
+     visibility problem. The dots inside the shell get muted along with
+     the content, which actually reinforces the "this is background" feel
+     — the rail line itself lives on `.thread-group::before` and stays at
+     full strength. */
+  .thread-context-shell {
+    opacity: 0.5;
+    transition: opacity 0.22s ease;
+  }
+
+  /* When the user expands the shell, restore full strength — they've
+     opted in to reading the context. */
+  .thread-context-shell:not([data-collapsed]) {
+    opacity: 1;
+  }
+
+  /* Hide the legacy gradient-overlay element — opacity replaces it. */
+  .thread-context-fade {
+    display: none;
+  }
+
+  .thread-context-toggle[hidden] {
+    display: none;
+  }
+
+  .thread-context-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    margin: 0 0 6px;
+    padding: 0.3rem 0;
+    border: 0;
+    background: transparent;
+    color: var(--site-text-secondary);
+    font-size: var(--type-thread-context-meta);
+    line-height: 1.2;
+    cursor: pointer;
+    transition: color 0.18s ease;
+  }
+
+  .thread-context-toggle:hover {
+    color: var(--site-text-primary);
+  }
+
+  .thread-context-toggle:focus-visible {
+    outline: 2px solid var(--site-accent);
+    outline-offset: 4px;
+    border-radius: 2px;
+  }
+
+  .thread-context-toggle-chevron {
+    width: 10px;
+    height: 10px;
+    opacity: 0.7;
+    transition:
+      transform 0.2s ease,
+      opacity 0.18s ease;
+  }
+
+  .thread-context-toggle:hover .thread-context-toggle-chevron {
+    opacity: 1;
+  }
+
+  .thread-context-toggle[aria-expanded="true"] .thread-context-toggle-chevron {
+    transform: rotate(180deg);
+  }
+
   .thread-item-gap {
     padding-top: 0.15rem;
     padding-bottom: 0.35rem;
@@ -2701,6 +2808,15 @@
     scroll-margin-top: 80px;
   }
 
+  /* When a child post has an ancestor shell above it (toggle button sits
+     directly before the current post), leave enough room above the scroll
+     landing so the user can see the Show more button + a peek of the
+     faded shell on initial load. Otherwise everything above is hidden in
+     the viewport and the user has to discover it by scrolling up. */
+  .thread-context-toggle + .thread-detail-item {
+    scroll-margin-top: 152px;
+  }
+
   .thread-group-detail .thread-item-current::before {
     background-color: var(--site-accent);
     box-shadow:
@@ -4432,6 +4548,24 @@
     position: relative;
   }
 
+  jant-compose-editor.compose-editor-dragover {
+    position: relative;
+  }
+
+  jant-compose-editor.compose-editor-dragover::after {
+    content: "";
+    position: absolute;
+    inset: 6px;
+    z-index: 5;
+    pointer-events: none;
+    border-radius: 14px;
+    background: color-mix(in srgb, var(--site-accent) 4%, transparent);
+    box-shadow:
+      inset 0 0 0 1.5px color-mix(in srgb, var(--site-accent) 45%, transparent),
+      inset 0 0 28px -12px
+        color-mix(in srgb, var(--site-accent) 45%, transparent);
+  }
+
   .compose-edit-loading {
     display: flex;
     flex: 1;
@@ -9663,19 +9797,6 @@
     box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
   }
 
-  .tiptap-bubble-menu-docked {
-    left: 50% !important;
-    top: auto !important;
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--tiptap-docked-offset, 16px)
-    );
-    transform: translateX(-50%);
-    gap: 4px;
-    padding: 6px;
-    border-radius: 12px;
-    max-width: calc(100vw - 24px);
-  }
-
   .tiptap-bubble-menu::after {
     content: "";
     position: absolute;
@@ -9687,10 +9808,6 @@
     border-top: 5px solid var(--color-foreground);
   }
 
-  .tiptap-bubble-menu-docked::after {
-    display: none;
-  }
-
   .tiptap-bubble-btn {
     display: flex;
     align-items: center;
@@ -9747,11 +9864,6 @@
     flex: 1;
   }
 
-  .tiptap-link-input-docked .tiptap-link-input-fields {
-    min-width: 0;
-    width: 100%;
-  }
-
   .tiptap-link-input-text {
     border: none;
     outline: none;
@@ -9767,17 +9879,6 @@
     color: var(--color-muted-foreground);
   }
 
-  .tiptap-link-input-docked {
-    left: 50% !important;
-    top: auto !important;
-    bottom: calc(
-      env(safe-area-inset-bottom) + var(--tiptap-docked-offset, 16px)
-    );
-    transform: translateX(-50%);
-    width: min(calc(100vw - 24px), 420px);
-    max-width: calc(100vw - 24px);
-  }
-
   .tiptap-link-input::before {
     content: "";
     position: absolute;
@@ -9800,11 +9901,6 @@
     border-top: 5px solid var(--color-background);
   }
 
-  .tiptap-link-input-docked::before,
-  .tiptap-link-input-docked::after {
-    display: none;
-  }
-
   .tiptap-link-input-field {
     border: none;
     outline: none;

package/src/types/app-context.ts

@@ -24,6 +24,12 @@ export type AppSession = Awaited<ReturnType<Auth["api"]["getSession"]>>;
 
 export interface AppVariables {
   services: Services;
+  /**
+   * Builds a `Services` object scoped to an arbitrary site. Used by
+   * host-agnostic handlers (e.g. the Telegram webhook) that resolve the
+   * target site from request data rather than the hostname.
+   */
+  servicesForSite: (siteId: string) => Services;
   hostedHandoff: HostedHandoffService;
   auth: Auth;
   currentSite: Site;

package/src/types/bindings.ts

@@ -53,6 +53,9 @@ export interface Bindings {
   HOSTED_CONTROL_PLANE_PROVIDER_NAME?: EnvBindingValue;
   HOSTED_CONTROL_PLANE_SSO_SECRET?: EnvBindingValue;
   HOSTED_CONTROL_PLANE_INTERNAL_TOKEN?: EnvBindingValue;
+  // Telegram bot integration
+  TELEGRAM_BOT_TOKENS?: EnvBindingValue;
+  TELEGRAM_WEBHOOK_SECRET?: EnvBindingValue;
   // Timeline
   PAGE_SIZE?: EnvBindingValue;
   SEARCH_PAGE_SIZE?: EnvBindingValue;

package/src/types/config.ts

@@ -396,6 +396,46 @@ export const CONFIG_FIELDS = {
     envOnly: true,
     envKeys: ["GITHUB_APP_WEBHOOK_SECRET"],
   },
+
+  // Telegram bot pool (env-only). When TELEGRAM_BOT_TOKENS is set the bot
+  // tokens are platform-managed (hosted, or a single-site operator who opts
+  // in) and the settings UI hides the token field. Comma-separated list of
+  // `<bot_id>:<secret>` tokens; TELEGRAM_WEBHOOK_SECRET is the shared
+  // `secret_token` used when registering every pool bot's webhook.
+  TELEGRAM_BOT_TOKENS: {
+    defaultValue: "",
+    envOnly: true,
+    envKeys: ["TELEGRAM_BOT_TOKENS"],
+  },
+  TELEGRAM_WEBHOOK_SECRET: {
+    defaultValue: "",
+    envOnly: true,
+    envKeys: ["TELEGRAM_WEBHOOK_SECRET"],
+  },
+
+  // Telegram bring-your-own bot (DB-only, single-site, managed via the
+  // Telegram settings page when TELEGRAM_BOT_TOKENS is not set).
+  TELEGRAM_BOT_TOKEN: {
+    defaultValue: "",
+    envOnly: false,
+    internal: true,
+  },
+  TELEGRAM_BOT_ID: {
+    defaultValue: "",
+    envOnly: false,
+    internal: true,
+  },
+  TELEGRAM_BOT_USERNAME: {
+    defaultValue: "",
+    envOnly: false,
+    internal: true,
+  },
+  /** Per-site `secret_token` for a bring-your-own bot's webhook. */
+  TELEGRAM_BOT_WEBHOOK_SECRET: {
+    defaultValue: "",
+    envOnly: false,
+    internal: true,
+  },
 } as const satisfies Record<string, ConfigField>;
 
 export type ConfigKey = keyof typeof CONFIG_FIELDS;

package/src/ui/dash/settings/SettingsRootContent.tsx

@@ -24,6 +24,7 @@ const ICONS = {
   key: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/></svg>`,
   shield: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>`,
   gitBranch: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>`,
+  send: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"/><path d="m21.854 2.147-10.94 10.939"/></svg>`,
 };
 
 export function SettingsRootContent({
@@ -114,23 +115,6 @@ export function SettingsRootContent({
             }),
           )}
         />
-        <SettingsDirectoryLink
-          href={toPublicPath("/settings/github-sync", sitePathPrefix)}
-          icon={ICONS.gitBranch}
-          tone="subtle"
-          name={i18n._(
-            msg({
-              message: "GitHub Sync",
-              comment: "@context: Settings item — GitHub sync settings",
-            }),
-          )}
-          description={i18n._(
-            msg({
-              message: "Back up and sync content with a GitHub repository",
-              comment: "@context: Settings item description for GitHub sync",
-            }),
-          )}
-        />
       </SettingsDirectorySection>
 
       <SettingsDirectorySection
@@ -225,6 +209,53 @@ export function SettingsRootContent({
         />
       </SettingsDirectorySection>
 
+      <SettingsDirectorySection
+        title={i18n._(
+          msg({
+            message: "Integrations",
+            comment:
+              "@context: Settings group label for third-party integrations",
+          }),
+        )}
+      >
+        <SettingsDirectoryLink
+          href={toPublicPath("/settings/github-sync", sitePathPrefix)}
+          icon={ICONS.gitBranch}
+          tone="subtle"
+          name={i18n._(
+            msg({
+              message: "GitHub Sync",
+              comment: "@context: Settings item — GitHub sync settings",
+            }),
+          )}
+          description={i18n._(
+            msg({
+              message: "Back up and sync content with a GitHub repository",
+              comment: "@context: Settings item description for GitHub sync",
+            }),
+          )}
+        />
+        <SettingsDirectoryLink
+          href={toPublicPath("/settings/telegram", sitePathPrefix)}
+          icon={ICONS.send}
+          tone="subtle"
+          name={i18n._(
+            msg({
+              message: "Telegram",
+              comment:
+                "@context: Settings item — Telegram integration settings",
+            }),
+          )}
+          description={i18n._(
+            msg({
+              message: "Post notes by messaging a Telegram bot",
+              comment:
+                "@context: Settings item description for Telegram integration",
+            }),
+          )}
+        />
+      </SettingsDirectorySection>
+
       <SettingsDirectorySection
         title={i18n._(
           msg({