@tnotesjs/ui 0.1.1 → 0.1.3

package/src/styles/swiper.css

@@ -0,0 +1,151 @@
+/* Shared swiper chrome for site preview and Desk (tokenized with --tn-*). */
+
+.tn-swiper {
+  margin: 1rem 0;
+  overflow: visible;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
+  background: transparent;
+  padding: 0;
+  border: none;
+}
+
+.tn-swiper:hover {
+  box-shadow: 0 4px 16px rgb(0 0 0 / 0.28);
+}
+
+.tn-swiper-tabs {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+  border-bottom: 1px solid var(--tn-c-divider);
+  border-radius: 8px 8px 0 0;
+  background: var(--tn-c-bg-soft);
+  box-shadow: inset 0 -1px var(--tn-c-divider);
+}
+
+.tn-swiper-tabs::-webkit-scrollbar {
+  height: 4px;
+}
+
+.tn-tab-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 0 0.3rem;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--tn-c-text-2);
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  user-select: none;
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease,
+    font-size 0.2s ease;
+}
+
+.tn-tab-prev {
+  left: 0.5rem;
+}
+
+.tab-tab-line {
+  left: 1.1rem;
+  color: var(--tn-c-brand-strong, var(--tn-c-brand));
+  cursor: default;
+  opacity: 0.5;
+}
+
+.tn-tab-next {
+  left: 1.5rem;
+}
+
+.tn-tab-prev:hover,
+.tn-tab-next:hover {
+  color: var(--tn-c-brand-strong, var(--tn-c-brand));
+  font-size: 1rem;
+  transform: translateY(-50%) scale(1.5);
+}
+
+.tn-tab-nav:active {
+  transform: translateY(-50%) scale(0.95);
+}
+
+.tn-swiper .tn-tab {
+  position: relative;
+  flex: none;
+  padding: 0.25rem 0.75rem;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  color: var(--tn-c-text-2);
+  cursor: pointer;
+  font-size: 0.875rem;
+  line-height: 2rem;
+  white-space: nowrap;
+  transition:
+    color 0.2s ease,
+    transform 0.2s ease;
+}
+
+.tn-swiper .tn-tab::after {
+  position: absolute;
+  right: 8px;
+  bottom: -1px;
+  left: 8px;
+  z-index: 1;
+  height: 2px;
+  border-radius: 2px;
+  content: "";
+  background-color: transparent;
+  transition: background-color 0.2s ease;
+}
+
+.tn-swiper .tn-tab:hover {
+  color: var(--tn-c-text);
+  transform: translateY(-1px);
+}
+
+.tn-swiper .tn-tab.active {
+  color: var(--tn-c-text);
+  font-weight: 500;
+}
+
+.tn-swiper .tn-tab.active::after {
+  background-color: var(--tn-c-brand-strong, var(--tn-c-brand));
+}
+
+.tn-swiper .swiper-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin: 0;
+  border-radius: 0 0 8px 8px;
+  background: var(--tn-c-bg);
+}
+
+.tn-swiper .swiper-wrapper {
+  display: block;
+}
+
+.tn-swiper .swiper-slide {
+  display: none;
+}
+
+.tn-swiper .swiper-slide.is-active,
+.tn-swiper .swiper-slide:not([hidden]).is-active {
+  display: block;
+}
+
+.tn-swiper .swiper-slide img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 auto;
+  object-fit: contain;
+}

package/src/styles/tokens.css

@@ -1,35 +1,71 @@
-/**
- * Host-neutral design tokens for @tnotesjs/ui.
- * VitePress themes should alias these to --vp-*; Desk aliases to --editor-*.
- */
+/* Canonical palette: hosts map their variables TO these tokens, never back. */
 :root {
-  --tn-c-brand: #3451b2;
-  --tn-c-text: #213547;
-  --tn-c-text-2: #476582;
+  --tn-c-brand: #646cff;
+  --tn-c-brand-hover: #747bff;
+  --tn-c-brand-strong: #3451b2;
+  --tn-c-text: #3c3c43;
+  --tn-c-text-2: #67676c;
   --tn-c-bg: #ffffff;
   --tn-c-bg-soft: #f6f6f7;
   --tn-c-bg-elv: #ffffff;
+  --tn-c-bg-chrome: #f6f6f7;
+  --tn-c-bg-input: #f6f6f7;
   --tn-c-divider: #e2e2e3;
-  --tn-c-danger: #cb2a2a;
-  --tn-c-success-soft: #e3f9e5;
-  --tn-c-danger-soft: #fde8e8;
+  --tn-c-divider-strong: #c2c2c4;
+  --tn-c-hover: rgba(142, 150, 170, 0.14);
+  --tn-c-highlight: rgba(100, 108, 255, 0.16);
+  --tn-c-brand-soft: var(--tn-c-highlight);
+  --tn-c-success: #18794e;
+  --tn-c-warning: #915930;
+  --tn-c-danger: #b8272c;
+  --tn-c-success-soft: rgba(16, 185, 129, 0.14);
+  --tn-c-warning-soft: rgba(234, 179, 8, 0.14);
+  --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #e8e8e9;
   --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12);
-  --tn-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --tn-font-sans:
+    "Punctuation SC", Inter, ui-sans-serif, system-ui, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --tn-font-mono:
+    "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, monospace;
+  --tn-prose-size: 16px;
+  --tn-prose-line-height: 28px;
+  --tn-heading-weight: 600;
+  --tn-heading-1-size: 32px;
+  --tn-heading-1-line: 40px;
+  --tn-heading-2-size: 24px;
+  --tn-heading-2-line: 32px;
+  --tn-heading-3-size: 20px;
+  --tn-heading-3-line: 28px;
+  --tn-heading-4-size: 18px;
+  --tn-heading-4-line: 24px;
+  --tn-heading-5-size: 16px;
+  --tn-heading-5-line: 24px;
+  --tn-heading-6-size: 16px;
+  --tn-heading-6-line: 24px;
+  color-scheme: light;
 }
 
-html.dark,
-html[data-theme='dark'] {
-  --tn-c-brand: #a8b1ff;
+:root.dark:not([data-theme="light"]),
+:root[data-theme="dark"] {
+  --tn-c-brand-strong: #a8b1ff;
   --tn-c-text: #dfdfd6;
   --tn-c-text-2: #98989f;
   --tn-c-bg: #1b1b1f;
-  --tn-c-bg-soft: #161618;
+  --tn-c-bg-soft: #202127;
   --tn-c-bg-elv: #202127;
+  --tn-c-bg-chrome: #161618;
+  --tn-c-bg-input: #161618;
   --tn-c-divider: #2e2e32;
+  --tn-c-divider-strong: #3c3f44;
+  --tn-c-hover: rgba(101, 117, 133, 0.16);
+  --tn-c-success: #3dd68c;
+  --tn-c-warning: #f9b44e;
   --tn-c-danger: #f66f81;
-  --tn-c-success-soft: #1c3b2a;
-  --tn-c-danger-soft: #3b1c1c;
+  --tn-c-success-soft: rgba(16, 185, 129, 0.16);
+  --tn-c-warning-soft: rgba(234, 179, 8, 0.16);
+  --tn-c-danger-soft: rgba(244, 63, 94, 0.14);
   --tn-c-default-soft: #2e2e32;
-  --tn-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
+  --tn-shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);
+  color-scheme: dark;
 }

package/src/swiper/hydrate.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from "vitest";
+
+import { hydrateTnSwipers } from "./hydrate";
+
+function swiperShell(titles: string[]): HTMLElement {
+  const root = document.createElement("div");
+  root.innerHTML = `
+    <div class="tn-swiper">
+      <div class="tn-swiper-tabs"></div>
+      <div class="swiper-container">
+        <div class="swiper-wrapper">
+          ${titles
+            .map(
+              (title) =>
+                `<div class="swiper-slide" data-title="${title}"><img alt="${title}" src="/${title}.svg"></div>`,
+            )
+            .join("")}
+        </div>
+      </div>
+    </div>
+  `;
+  document.body.append(root);
+  return root;
+}
+
+describe("hydrateTnSwipers", () => {
+  it("builds tabs and shows only the active slide", () => {
+    const root = swiperShell(["A", "B", "C"]);
+    expect(hydrateTnSwipers(root)).toBe(1);
+
+    const host = root.querySelector(".tn-swiper")!;
+    const tabs = [...host.querySelectorAll(".tn-tab")].map(
+      (tab) => tab.textContent,
+    );
+    expect(tabs).toEqual(["A", "B", "C"]);
+    expect(host.querySelectorAll(".tn-tab-nav")).toHaveLength(3); // < / >
+
+    const slides = [...host.querySelectorAll(".swiper-slide")] as HTMLElement[];
+    expect(slides[0]!.classList.contains("is-active")).toBe(true);
+    expect(slides[0]!.hidden).toBe(false);
+    expect(slides[1]!.hidden).toBe(true);
+    expect(slides[2]!.hidden).toBe(true);
+
+    ;(host.querySelectorAll(".tn-tab")[1] as HTMLButtonElement).click();
+    expect(slides[0]!.hidden).toBe(true);
+    expect(slides[1]!.hidden).toBe(false);
+    expect(slides[1]!.classList.contains("is-active")).toBe(true);
+
+    // Idempotent
+    expect(hydrateTnSwipers(root)).toBe(0);
+    root.remove();
+  });
+
+  it("omits the tab bar for a single slide", () => {
+    const root = swiperShell(["solo"]);
+    hydrateTnSwipers(root);
+    expect(root.querySelector(".tn-swiper-tabs")).toBeNull();
+    expect(root.querySelector(".swiper-slide")!.classList.contains("is-active")).toBe(
+      true,
+    );
+    root.remove();
+  });
+});

package/src/swiper/hydrate.ts

@@ -0,0 +1,164 @@
+/**
+ * Client-side tab activation for `.tn-swiper` shells emitted by the SSG
+ * markdown pipeline (empty `.tn-swiper-tabs`, all slides in the wrapper).
+ * Desk also uses this after building slide DOM so both hosts share one path.
+ */
+
+export function applySwiperTabsPadding(tabs: HTMLElement, hasNav: boolean): void {
+  tabs.style.padding = hasNav ? "0 0.8rem 0 3rem" : "0 0.8rem";
+}
+
+export function createSwiperTabNav(handlers: {
+  onPrev: () => void;
+  onNext: () => void;
+}): {
+  prev: HTMLButtonElement;
+  line: HTMLSpanElement;
+  next: HTMLButtonElement;
+} {
+  const prev = document.createElement("button");
+  prev.type = "button";
+  prev.className = "tn-tab-nav tn-tab-prev";
+  prev.textContent = "<";
+  prev.title = "上一页";
+  prev.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handlers.onPrev();
+  });
+
+  const line = document.createElement("span");
+  line.className = "tn-tab-nav tab-tab-line";
+  line.textContent = "/";
+
+  const next = document.createElement("button");
+  next.type = "button";
+  next.className = "tn-tab-nav tn-tab-next";
+  next.textContent = ">";
+  next.title = "下一页";
+  next.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    handlers.onNext();
+  });
+
+  return { prev, line, next };
+}
+
+export function wrapSlideIndex(
+  index: number,
+  length: number,
+  delta: -1 | 1,
+): number {
+  if (length <= 0) return 0;
+  return (index + delta + length) % length;
+}
+
+const READY = "tnSwiperReady";
+
+/**
+ * Hydrate every `.tn-swiper` under `root` (or `document`). Idempotent:
+ * already-hydrated roots are skipped via `data-tn-swiper-ready`.
+ * When `root` itself is a `.tn-swiper`, it is included.
+ */
+export function hydrateTnSwipers(root: ParentNode = document): number {
+  const hosts: HTMLElement[] = [];
+  if (root instanceof HTMLElement && root.classList.contains("tn-swiper")) {
+    hosts.push(root);
+  }
+  hosts.push(...root.querySelectorAll<HTMLElement>(".tn-swiper"));
+
+  let count = 0;
+  const seen = new Set<HTMLElement>();
+  for (const host of hosts) {
+    if (seen.has(host)) continue;
+    seen.add(host);
+    if (host.dataset[READY] === "true") continue;
+    if (hydrateOne(host)) {
+      host.dataset[READY] = "true";
+      count += 1;
+    }
+  }
+  return count;
+}
+
+function hydrateOne(host: HTMLElement): boolean {
+  const tabs = host.querySelector<HTMLElement>(".tn-swiper-tabs");
+  const wrapper = host.querySelector<HTMLElement>(".swiper-wrapper");
+  if (!wrapper) return false;
+
+  const slides = [
+    ...wrapper.querySelectorAll<HTMLElement>(":scope > .swiper-slide"),
+  ];
+  if (slides.length === 0) {
+    // Empty shell — still mark ready so we don't loop.
+    return true;
+  }
+
+  // Ensure tabs host exists (site always emits it; Desk may omit for 1 slide).
+  let tabsEl = tabs;
+  if (!tabsEl) {
+    tabsEl = document.createElement("div");
+    tabsEl.className = "tn-swiper-tabs";
+    host.prepend(tabsEl);
+  }
+
+  const useTabs = slides.length > 1;
+  tabsEl.replaceChildren();
+  applySwiperTabsPadding(tabsEl, useTabs);
+
+  const tabButtons: HTMLButtonElement[] = [];
+
+  const activate = (index: number): void => {
+    tabButtons.forEach((button, buttonIndex) =>
+      button.classList.toggle("active", buttonIndex === index),
+    );
+    slides.forEach((slide, slideIndex) => {
+      const on = slideIndex === index;
+      slide.classList.toggle("is-active", on);
+      slide.hidden = !on;
+    });
+  };
+
+  const activeIndex = (): number => {
+    const found = tabButtons.findIndex((button) =>
+      button.classList.contains("active"),
+    );
+    return found >= 0 ? found : 0;
+  };
+
+  if (useTabs) {
+    const nav = createSwiperTabNav({
+      onPrev: () => activate(wrapSlideIndex(activeIndex(), slides.length, -1)),
+      onNext: () => activate(wrapSlideIndex(activeIndex(), slides.length, 1)),
+    });
+    tabsEl.append(nav.prev, nav.line);
+
+    slides.forEach((slide, index) => {
+      const title =
+        slide.dataset.title?.trim() ||
+        slide.querySelector("img")?.getAttribute("alt")?.trim() ||
+        "img";
+      slide.dataset.title = title;
+      const tab = document.createElement("button");
+      tab.type = "button";
+      tab.className = "tn-tab";
+      tab.textContent = title;
+      tab.addEventListener("click", () => activate(index));
+      tabButtons.push(tab);
+      tabsEl!.append(tab);
+    });
+
+    tabsEl.append(nav.next);
+    // Multi-slide: tabs stay above the container.
+    if (tabsEl.parentElement !== host || host.firstElementChild !== tabsEl) {
+      host.prepend(tabsEl);
+    }
+  } else {
+    // Single slide: drop empty tab bar (Desk parity).
+    tabsEl.remove();
+  }
+
+  activate(0);
+  return true;
+}