livemark 0.0.0-dev

package/build/website/components/Cards.tsx

@@ -0,0 +1,66 @@
+import { Link } from "@tanstack/react-router"
+import { icons } from "lucide-react"
+import {
+  Card as CardElement,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "../elements/card.tsx"
+
+function toPascalCase(name: string) {
+  return name
+    .split("-")
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("")
+}
+
+/** Grid container for card components */
+export function Cards(props: { children: React.ReactNode }) {
+  return (
+    <div className="not-prose grid grid-cols-1 gap-4 my-4 sm:grid-cols-2">
+      {props.children}
+    </div>
+  )
+}
+
+/** Card component with optional icon, title, description, and link */
+export function Card(props: {
+  title: string
+  href?: string
+  icon?: string
+  children?: React.ReactNode
+}) {
+  const Icon = props.icon
+    ? icons[toPascalCase(props.icon) as keyof typeof icons]
+    : undefined
+
+  const card = (
+    <CardElement size="sm" className="transition-colors hover:bg-accent">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {Icon && <Icon className="size-5 text-primary" />}
+          {props.title}
+        </CardTitle>
+      </CardHeader>
+      {props.children && (
+        <CardContent>
+          <div className="text-muted-foreground text-sm">{props.children}</div>
+        </CardContent>
+      )}
+    </CardElement>
+  )
+
+  if (props.href?.startsWith("http")) {
+    return (
+      <a href={props.href} target="_blank" rel="noopener noreferrer">
+        {card}
+      </a>
+    )
+  }
+
+  if (props.href) {
+    return <Link to={props.href}>{card}</Link>
+  }
+
+  return card
+}

package/build/website/components/CodeBlock.tsx

@@ -0,0 +1,118 @@
+import { Check, ChevronDown, Clipboard, WrapText } from "lucide-react"
+import { useRef, useState } from "react"
+
+export function CodeBlock(props: React.ComponentProps<"pre">) {
+  const [copied, setCopied] = useState(false)
+  const [wrap, setWrap] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const preRef = useRef<HTMLPreElement>(null)
+  const extra = props as Record<string, unknown>
+  const meta = extra["data-meta"] as string | undefined
+  const title = meta?.match(/title="([^"]+)"/)?.[1]
+  const maxLines = meta?.match(/maxLines=(\d+)/)?.[1]
+  const icon = extra.icon as string | undefined
+  const style = props.style as Record<string, string> | undefined
+  const collapsedHeight = maxLines
+    ? `${Number(maxLines) * 1.5 + 1.75}rem`
+    : undefined
+
+  const handleCopy = () => {
+    const text = preRef.current?.textContent ?? ""
+    navigator.clipboard.writeText(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleWrapToggle = () => {
+    setWrap(prev => !prev)
+  }
+
+  return (
+    <figure
+      className="shiki not-prose my-4 relative rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar"
+      style={{ ...style, backgroundColor: undefined }}
+    >
+      {title ? (
+        <div className="flex items-center gap-2 h-9.5 border-b px-4 text-muted-foreground">
+          {icon && (
+            <span
+              className="size-3.5 [&>svg]:size-full"
+              dangerouslySetInnerHTML={{ __html: icon }}
+            />
+          )}
+          <span className="flex-1 truncate text-xs font-medium">{title}</span>
+          <button
+            type="button"
+            onClick={handleWrapToggle}
+            className={`-me-2 p-1 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            aria-label="Toggle word wrap"
+          >
+            <WrapText className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="-me-2 p-1 rounded-md hover:text-foreground transition-colors"
+            aria-label="Copy code"
+          >
+            {copied ? (
+              <Check className="size-3.5" />
+            ) : (
+              <Clipboard className="size-3.5" />
+            )}
+          </button>
+        </div>
+      ) : (
+        <div className="empty:hidden absolute top-2 right-2 z-10 backdrop-blur-lg rounded-lg text-muted-foreground">
+          <button
+            type="button"
+            onClick={handleWrapToggle}
+            className={`p-1 rounded-md hover:text-foreground transition-colors ${wrap ? "text-foreground" : ""}`}
+            aria-label="Toggle word wrap"
+          >
+            <WrapText className="size-3.5" />
+          </button>
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="p-1 rounded-md hover:text-foreground transition-colors"
+            aria-label="Copy code"
+          >
+            {copied ? (
+              <Check className="size-3.5" />
+            ) : (
+              <Clipboard className="size-3.5" />
+            )}
+          </button>
+        </div>
+      )}
+      <div
+        className="text-[0.8125rem] py-3.5 overflow-auto transition-[max-height] duration-300"
+        style={{
+          maxHeight: collapsedHeight && !expanded ? collapsedHeight : "600px",
+        }}
+      >
+        <pre
+          {...props}
+          ref={preRef}
+          style={undefined}
+          className={
+            wrap
+              ? "min-w-full whitespace-pre-wrap break-words [&>code]:flex [&>code]:flex-col"
+              : "min-w-full w-max [&>code]:flex [&>code]:flex-col"
+          }
+        />
+      </div>
+      {collapsedHeight && !expanded && (
+        <button
+          type="button"
+          onClick={() => setExpanded(true)}
+          className="flex items-center justify-center gap-1 w-full py-1.5 text-xs text-muted-foreground hover:text-foreground border-t cursor-pointer transition-colors"
+        >
+          <ChevronDown className="size-3.5" />
+          Expand
+        </button>
+      )}
+    </figure>
+  )
+}

package/build/website/components/CodeTabs.tsx

@@ -0,0 +1,83 @@
+import { Children, useEffect, useState } from "react"
+
+/** Tabbed code block component for grouping multiple code blocks with optional sync */
+export function CodeTabs(props: {
+  tabs: string
+  sync?: string
+  children: React.ReactNode
+}) {
+  const names = JSON.parse(props.tabs) as string[]
+  const children = Children.toArray(props.children)
+
+  const getInitialIndex = () => {
+    if (!props.sync) return 0
+    const saved =
+      typeof window !== "undefined"
+        ? localStorage.getItem("livemark-tab-" + props.sync)
+        : null
+    if (!saved) return 0
+    const idx = names.indexOf(saved)
+    return idx >= 0 ? idx : 0
+  }
+
+  const [active, setActive] = useState(getInitialIndex)
+
+  const handleSelect = (i: number) => {
+    setActive(i)
+    if (props.sync) {
+      localStorage.setItem("livemark-tab-" + props.sync, names[i]!)
+      window.dispatchEvent(
+        new CustomEvent("livemark-tab-sync", {
+          detail: { sync: props.sync, title: names[i] },
+        }),
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (!props.sync) return
+    const handler = (e: Event) => {
+      const { sync, title } = (
+        e as CustomEvent<{ sync: string; title: string }>
+      ).detail
+      if (sync !== props.sync) return
+      const idx = names.indexOf(title)
+      if (idx >= 0) setActive(idx)
+    }
+    window.addEventListener("livemark-tab-sync", handler)
+    return () => window.removeEventListener("livemark-tab-sync", handler)
+  }, [props.sync, names])
+
+  return (
+    <div className="not-prose my-4 rounded-xl border shadow-sm overflow-hidden text-sm bg-sidebar dark:bg-sidebar">
+      <div className="flex border-b">
+        {names.map((name, i) => (
+          <button
+            key={name}
+            type="button"
+            onClick={() => handleSelect(i)}
+            className={`px-4 py-2 text-xs font-medium transition-colors cursor-pointer ${
+              i === active
+                ? "text-foreground border-b-2 border-primary -mb-px"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {name}
+          </button>
+        ))}
+      </div>
+      {children.map((child, i) => (
+        <div
+          key={names[i]}
+          className={
+            i === active
+              ? "[&>figure]:my-0 [&>figure]:rounded-none [&>figure]:border-0 [&>figure]:shadow-none"
+              : "hidden"
+          }
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}

package/build/website/components/Columns.tsx

@@ -0,0 +1,17 @@
+/** Grid layout for arranging content side by side */
+export function Columns(props: { cols?: string; children: React.ReactNode }) {
+  const cols = props.cols ? parseInt(props.cols, 10) : undefined
+  const style = cols
+    ? { gridTemplateColumns: `repeat(${cols}, 1fr)` }
+    : undefined
+  return (
+    <div className="grid gap-6 my-4 sm:grid-cols-2" style={style}>
+      {props.children}
+    </div>
+  )
+}
+
+/** Single column within a Columns grid */
+export function Column(props: { children: React.ReactNode }) {
+  return <div className="max-w-none">{props.children}</div>
+}

package/build/website/components/Content.tsx

@@ -0,0 +1,7 @@
+export function Content(props: { children: React.ReactNode }) {
+  return (
+    <div className="w-full max-w-7xl mx-auto px-4 md:px-10">
+      {props.children}
+    </div>
+  )
+}

package/build/website/components/ContentTab.tsx

@@ -0,0 +1,7 @@
+/** Simple wrapper that provides a title prop for ContentTabs to read */
+export function ContentTab(props: {
+  title: string
+  children: React.ReactNode
+}) {
+  return <div>{props.children}</div>
+}

package/build/website/components/ContentTabs.tsx

@@ -0,0 +1,82 @@
+import { Children, isValidElement, useEffect, useState } from "react"
+
+/** Tabbed container component for grouping content tabs with optional sync across groups */
+export function ContentTabs(props: {
+  sync?: string
+  children: React.ReactNode
+}) {
+  const children = Children.toArray(props.children)
+  const titles = children.map(child =>
+    isValidElement<{ title: string }>(child) ? child.props.title : "",
+  )
+
+  const getInitialIndex = () => {
+    if (!props.sync) return 0
+    const saved =
+      typeof window !== "undefined"
+        ? localStorage.getItem("livemark-tab-" + props.sync)
+        : null
+    if (!saved) return 0
+    const idx = titles.indexOf(saved)
+    return idx >= 0 ? idx : 0
+  }
+
+  const [active, setActive] = useState(getInitialIndex)
+
+  const handleSelect = (i: number) => {
+    setActive(i)
+    if (props.sync) {
+      localStorage.setItem("livemark-tab-" + props.sync, titles[i]!)
+      window.dispatchEvent(
+        new CustomEvent("livemark-tab-sync", {
+          detail: { sync: props.sync, title: titles[i] },
+        }),
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (!props.sync) return
+    const handler = (e: Event) => {
+      const { sync, title } = (
+        e as CustomEvent<{ sync: string; title: string }>
+      ).detail
+      if (sync !== props.sync) return
+      const idx = titles.indexOf(title)
+      if (idx >= 0) setActive(idx)
+    }
+    window.addEventListener("livemark-tab-sync", handler)
+    return () => window.removeEventListener("livemark-tab-sync", handler)
+  }, [props.sync, titles])
+
+  return (
+    <div className="not-prose my-4 rounded-xl border bg-card">
+      <div className="flex border-b">
+        {titles.map((title, i) => (
+          <button
+            key={title}
+            type="button"
+            onClick={() => handleSelect(i)}
+            className={`px-4 py-2 text-sm font-medium transition-colors cursor-pointer ${
+              i === active
+                ? "text-foreground border-b-2 border-primary -mb-px"
+                : "text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {title}
+          </button>
+        ))}
+      </div>
+      {children.map((child, i) => (
+        <div
+          key={titles[i]}
+          className={
+            i === active ? "p-4 prose dark:prose-invert max-w-none" : "hidden"
+          }
+        >
+          {child}
+        </div>
+      ))}
+    </div>
+  )
+}

package/build/website/components/DefaultCatchBoundary.tsx

@@ -0,0 +1,54 @@
+import type { ErrorComponentProps } from "@tanstack/react-router"
+import {
+  ErrorComponent,
+  Link,
+  rootRouteId,
+  useMatch,
+  useRouter,
+} from "@tanstack/react-router"
+
+export function DefaultCatchBoundary({ error }: ErrorComponentProps) {
+  const router = useRouter()
+  const isRoot = useMatch({
+    strict: false,
+    select: state => state.id === rootRouteId,
+  })
+
+  console.error(error)
+
+  return (
+    <div className="min-h-[60vh] flex flex-col items-center justify-center gap-6 px-4">
+      <ErrorComponent error={error} />
+      <div className="flex gap-3 items-center flex-wrap">
+        <button
+          type="button"
+          onClick={() => {
+            router.invalidate()
+          }}
+          className="bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/80 transition-colors"
+        >
+          Try Again
+        </button>
+        {isRoot ? (
+          <Link
+            to="/"
+            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+          >
+            Home
+          </Link>
+        ) : (
+          <Link
+            to="/"
+            className="border border-border px-4 py-2 text-sm font-medium hover:bg-card transition-colors"
+            onClick={(e: any) => {
+              e.preventDefault()
+              window.history.back()
+            }}
+          >
+            Go Back
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}

package/build/website/components/DefinitionList.tsx

@@ -0,0 +1,21 @@
+import type { ComponentProps } from "react"
+
+/** Styled wrapper for definition lists produced by remark-definition-list */
+export function DefinitionList(props: ComponentProps<"dl">) {
+  return <dl {...props} className="not-prose space-y-4" />
+}
+
+/** Styled definition term rendered as bold text */
+export function DefinitionTerm(props: ComponentProps<"dt">) {
+  return <dt {...props} className="text-foreground font-semibold" />
+}
+
+/** Styled definition detail with a left border accent */
+export function DefinitionDetail(props: ComponentProps<"dd">) {
+  return (
+    <dd
+      {...props}
+      className="ml-0 pl-4 border-l-2 border-border text-muted-foreground"
+    />
+  )
+}

package/build/website/components/Details.tsx

@@ -0,0 +1,30 @@
+import { useState } from "react"
+import { ChevronRight } from "lucide-react"
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "../elements/collapsible.tsx"
+
+/** Collapsible content section with a summary label */
+export function Details(props: { summary: string; children: React.ReactNode }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Collapsible
+      open={open}
+      onOpenChange={setOpen}
+      className="not-prose my-4 rounded-xl border border-border bg-card px-4 py-3"
+    >
+      <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 text-sm font-semibold select-none">
+        <ChevronRight
+          className={`size-4 shrink-0 transition-transform ${open ? "rotate-90" : ""}`}
+        />
+        {props.summary}
+      </CollapsibleTrigger>
+      <CollapsibleContent className="mt-3 text-sm [&>p]:my-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0">
+        {props.children}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}

package/build/website/components/FileTree.tsx

@@ -0,0 +1,52 @@
+import { File, Folder } from "lucide-react"
+
+interface TreeItem {
+  name: string
+  isDir: boolean
+  children?: TreeItem[]
+}
+
+/** Renders a file/directory tree from a JSON-serialized tree structure */
+export function FileTree(props: { tree: string }) {
+  const items: TreeItem[] = JSON.parse(props.tree)
+
+  return (
+    <div className="not-prose my-4 rounded-xl border border-border bg-card p-4 font-mono text-sm">
+      <TreeItems items={items} depth={0} />
+    </div>
+  )
+}
+
+function TreeItems(props: { items: TreeItem[]; depth: number }) {
+  return (
+    <ul className={props.depth > 0 ? "ml-4 border-l border-border pl-2" : ""}>
+      {props.items.map((item, index) => (
+        <TreeNode
+          key={`${item.name}-${index}`}
+          item={item}
+          depth={props.depth}
+        />
+      ))}
+    </ul>
+  )
+}
+
+function TreeNode(props: { item: TreeItem; depth: number }) {
+  const { item, depth } = props
+
+  return (
+    <li className="py-0.5">
+      <span className="inline-flex items-center gap-2">
+        {item.isDir ? (
+          <Folder className="size-4 shrink-0 text-primary" />
+        ) : (
+          <File className="size-4 shrink-0 text-muted-foreground" />
+        )}
+        <span className={item.isDir ? "font-semibold" : ""}>{item.name}</span>
+      </span>
+      {item.children && item.children.length > 0 && (
+        <TreeItems items={item.children} depth={depth + 1} />
+      )}
+    </li>
+  )
+}

package/build/website/components/Footer.tsx

@@ -0,0 +1,9 @@
+export function Footer() {
+  return (
+    <footer className="border-t bg-card">
+      <div className="w-full max-w-7xl mx-auto px-4 md:px-10 py-4 flex items-center justify-center text-xs text-muted-foreground">
+        <span>&copy; {new Date().getFullYear()} My Project</span>
+      </div>
+    </footer>
+  )
+}

package/build/website/components/FootnoteRef.tsx

@@ -0,0 +1,52 @@
+import { type ComponentProps, useEffect, useState } from "react"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../elements/hover-card.tsx"
+
+const FOOTNOTE_PREFIX = "#user-content-fn-"
+
+/** Wraps footnote reference links in a HoverCard that previews footnote content inline */
+export function FootnoteRef(props: ComponentProps<"a">) {
+  const href = props.href ?? ""
+  if (!href.startsWith(FOOTNOTE_PREFIX)) {
+    return <a {...props} />
+  }
+
+  return <FootnoteHoverCard {...props} href={href} />
+}
+
+function FootnoteHoverCard(props: ComponentProps<"a"> & { href: string }) {
+  const [footnoteHtml, setFootnoteHtml] = useState("")
+
+  useEffect(() => {
+    const targetId = props.href.slice(1)
+    const el = document.getElementById(targetId)
+    if (!el) return
+
+    const wrapper = document.createElement("div")
+    wrapper.innerHTML = el.innerHTML
+    for (const backref of wrapper.querySelectorAll("[data-footnote-backref]")) {
+      backref.remove()
+    }
+    setFootnoteHtml(wrapper.innerHTML)
+  }, [props.href])
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger render={<a {...props} />} />
+      <HoverCardContent
+        className="prose dark:prose-invert text-sm w-80 [&>p]:my-1 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0"
+        side="top"
+        sideOffset={8}
+      >
+        {footnoteHtml ? (
+          <div dangerouslySetInnerHTML={{ __html: footnoteHtml }} />
+        ) : (
+          <p className="text-muted-foreground">Footnote not found</p>
+        )}
+      </HoverCardContent>
+    </HoverCard>
+  )
+}

package/build/website/components/Heading.tsx

@@ -0,0 +1,20 @@
+/** Heading component that wraps content in an anchor link to itself */
+function createHeading(Tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6") {
+  return function Heading(props: React.HTMLAttributes<HTMLHeadingElement>) {
+    if (!props.id) return <Tag {...props} />
+    return (
+      <Tag {...props}>
+        <a href={`#${props.id}`}>{props.children}</a>
+      </Tag>
+    )
+  }
+}
+
+export const headingComponents = {
+  h1: createHeading("h1"),
+  h2: createHeading("h2"),
+  h3: createHeading("h3"),
+  h4: createHeading("h4"),
+  h5: createHeading("h5"),
+  h6: createHeading("h6"),
+}

package/build/website/components/InlineBadge.tsx

@@ -0,0 +1,9 @@
+import { Badge } from "../elements/badge.tsx"
+
+/** Inline badge rendered from :badge text directives */
+export function InlineBadge(props: {
+  label: string
+  variant?: "default" | "secondary" | "destructive" | "outline"
+}) {
+  return <Badge variant={props.variant}>{props.label}</Badge>
+}

package/build/website/components/InlineIcon.tsx

@@ -0,0 +1,21 @@
+import { icons } from "lucide-react"
+
+function toPascalCase(name: string) {
+  return name
+    .split("-")
+    .map(s => s.charAt(0).toUpperCase() + s.slice(1))
+    .join("")
+}
+
+/** Renders a Lucide icon inline by name */
+export function InlineIcon(props: { name: string; className?: string }) {
+  const key = toPascalCase(props.name)
+  if (!(key in icons)) return null
+  const Icon = icons[key as keyof typeof icons]
+
+  const className = props.className
+    ? `inline-block size-4 align-text-bottom ${props.className}`
+    : "inline-block size-4 align-text-bottom"
+
+  return <Icon className={className} />
+}