@inklu/docs 0.2.0

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@inklu/docs",
+  "version": "0.2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/styles.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./shiki": {
+      "types": "./dist/shiki.d.ts",
+      "import": "./dist/shiki.mjs",
+      "require": "./dist/shiki.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.6.0",
+    "@lisse/react": "^0.5.2",
+    "@radix-ui/react-icons": "^1.3.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "motion": "^12.42.2",
+    "next-themes": "^0.4.6",
+    "react-use-measure": "^2.1.7",
+    "shiki": "^4.3.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "next": "*",
+    "react": "*",
+    "react-dom": "*"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4",
+    "@types/node": "^20.19.43",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "build": "tsup && pnpm run build:css",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
+    "dev": "tsup --watch & pnpm run build:css --watch"
+  }
+}

package/src/components/content/changelog-content.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+import type { ReactNode } from "react";
+import { Badge } from "@/components/ui/badge";
+import { CHANGELOG, type ChangeKind } from "@/lib/constants";
+import { colReveal } from "@/lib/motions";
+import { cn, formatChangelogDate } from "@/lib/utils";
+
+function Col({ children }: { children: ReactNode }) {
+  const reduced = useReducedMotion() ?? false;
+  return (
+    <motion.div
+      className="mx-auto w-full"
+      initial={reduced ? false : "hidden"}
+      whileInView="show"
+      viewport={{ once: true, margin: "0px 0px -64px 0px" }}
+      variants={colReveal}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+const KIND_LABEL: Record<ChangeKind, string> = {
+  new: "New",
+  improved: "Improved",
+  fixed: "Fixed",
+};
+
+function KindTag({ kind }: { kind: ChangeKind }) {
+  return (
+    <Badge variant="secondary" className="align-top mt-0.5">
+      {KIND_LABEL[kind]}
+    </Badge>
+  );
+}
+
+export function ChangelogContent() {
+  return (
+    <div className="w-full">
+      <div className="relative mx-auto w-full">
+        <main className="typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full">
+          {/* Page Header (Title & Date) */}
+          <section id="changelog-header" className="scroll-mt-24">
+            <Col>
+              <h1 className="tracking-tight mb-2">Changelog</h1>
+              <p className="text-muted-foreground/60 mb-8 mt-0">
+                16 February, 2026
+              </p>
+            </Col>
+          </section>
+
+          {CHANGELOG.map((entry: (typeof CHANGELOG)[number]) => (
+            <section
+              key={entry.version}
+              id={`v${entry.version}`}
+              className="scroll-mt-24"
+            >
+              <Col>
+                <div className="not-typeset mt-16 flex items-center gap-3">
+                  <Badge
+                    variant="secondary"
+                    className="text-foreground align-middle"
+                  >
+                    {entry.version === "next" ? "Up next" : `v${entry.version}`}
+                  </Badge>
+                  <span className="text-muted-foreground">
+                    {entry.date
+                      ? formatChangelogDate(entry.date)
+                      : "In progress"}
+                  </span>
+                </div>
+                <h2>{entry.title}</h2>
+                <p>{entry.summary}</p>
+
+                <div className="not-typeset mt-4 overflow-hidden rounded-2xl bg-card">
+                  {entry.changes.map(
+                    (
+                      change: (typeof CHANGELOG)[number]["changes"][number],
+                      i: number,
+                    ) => (
+                      <div
+                        key={change.text}
+                        className={cn(
+                          "flex gap-3 px-4 py-3",
+                          i > 0 && "border-t border-border",
+                        )}
+                      >
+                        <KindTag kind={change.kind} />
+                        <span className="text-muted-foreground">
+                          {change.text}
+                        </span>
+                      </div>
+                    ),
+                  )}
+                </div>
+              </Col>
+            </section>
+          ))}
+
+          <Col>
+            <p className="mt-16">
+              Full commit history lives on{" "}
+              <a
+                href="https://github.com/your-username/your-repo"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                GitHub
+              </a>
+              .
+            </p>
+          </Col>
+        </main>
+      </div>
+    </div>
+  );
+}

package/src/components/content/code-block.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+import { CopyMorphIcon } from "@/components/shared/command-block";
+import { Button } from "@/components/ui/button";
+import { anchoredToastManager } from "@/components/ui/toast";
+import { useCopyToClipboard } from "@/hooks/use-copy-to-clipboard";
+import { cn } from "@/lib/utils";
+import { copy } from "@/lib/utils/audio";
+
+export interface CodeBlockProps {
+  html: string;
+  code: string;
+  className?: string;
+}
+
+export function CodeBlock({ html, code, className }: CodeBlockProps) {
+  const buttonRef = React.useRef<HTMLButtonElement>(null);
+  const { copyToClipboard, isCopied } = useCopyToClipboard({ timeout: 1800 });
+
+  async function handleCopy() {
+    const success = await copyToClipboard(code);
+    if (success) {
+      copy();
+      anchoredToastManager.add({
+        title: "Copied!",
+        positionerProps: {
+          anchor: buttonRef.current,
+          sideOffset: 6,
+        },
+        data: {
+          tooltipStyle: true,
+        },
+        timeout: 2000,
+      });
+    } else {
+      anchoredToastManager.add({
+        title: "Failed to copy",
+        positionerProps: {
+          anchor: buttonRef.current,
+          sideOffset: 6,
+        },
+        data: {
+          tooltipStyle: true,
+        },
+        timeout: 2000,
+      });
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        "group relative mt-6 overflow-hidden rounded-xl not-typeset",
+        "bg-code",
+        "transition-colors",
+        className,
+      )}
+    >
+      <Button
+        ref={buttonRef}
+        variant="ghost"
+        size="icon-xs"
+        onClick={handleCopy}
+        className={cn(
+          "absolute right-3 top-3 z-20 rounded-lg",
+          "bg-transparent",
+          "text-muted-foreground",
+          "opacity-0",
+          "translate-y-1",
+          "transition-all duration-200",
+          "group-hover:translate-y-0",
+          "group-hover:opacity-100",
+          "hover:bg-code-foreground/10",
+          "hover:text-code-foreground",
+          "focus-visible:translate-y-0",
+          "focus-visible:opacity-100",
+        )}
+      >
+        <CopyMorphIcon copied={isCopied} />
+      </Button>
+
+      <div
+        className={cn(
+          "[&_pre]:m-0",
+          "[&_pre]:overflow-x-auto",
+          "[&_pre]:bg-transparent!",
+          "[&_pre]:px-5",
+          "[&_pre]:py-4",
+          "[&_pre]:font-mono",
+          "[&_pre]:leading-relaxed",
+
+          "[&_code]:bg-transparent!",
+          "[&_code]:p-0",
+          "[&_code]:font-inherit",
+
+          "[&_.line]:min-h-6",
+
+          "[&_pre::-webkit-scrollbar]:h-2",
+          "[&_pre::-webkit-scrollbar-track]:bg-transparent",
+          "[&_pre::-webkit-scrollbar-thumb]:rounded-full",
+          "[&_pre::-webkit-scrollbar-thumb]:bg-code-foreground/10",
+          "[&_pre::-webkit-scrollbar-thumb:hover]:bg-code-foreground/20",
+        )}
+        dangerouslySetInnerHTML={{
+          __html: html,
+        }}
+      />
+    </div>
+  );
+}

package/src/components/content/docs-content.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { motion, useReducedMotion } from "motion/react";
+import type { ReactNode } from "react";
+import { CodeBlock } from "@/components/content/code-block";
+import { CommandBlock } from "@/components/shared/command-block";
+import { ScrollFade } from "@/components/shared/scroll-fade";
+import { colReveal } from "@/lib/motions";
+
+export function DocsCol({ children }: { children: ReactNode }) {
+  const reduced = useReducedMotion() ?? false;
+  return (
+    <motion.div
+      className="mx-auto w-full"
+      initial={reduced ? false : "hidden"}
+      whileInView="show"
+      viewport={{ once: true, margin: "0px 0px -64px 0px" }}
+      variants={colReveal}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+export function DocsFrame({ children }: { children: ReactNode }) {
+  return (
+    <div className="relative min-h-screen overflow-x-clip pb-24">
+      {/* Top scroll fade */}
+      <ScrollFade />
+
+      {/* Shiki code block styles */}
+      <style>{`.docs-code .shiki{margin:0;padding:16px 18px;overflow-x:auto;line-height:1.65;background:transparent !important;font-size:var(--typeset-size)}.docs-code .shiki code{background:transparent;padding:0}`}</style>
+
+      <div className="w-full">
+        <div className="relative mx-auto w-full">
+          <main className="typeset typeset-docs mx-auto max-w-(--layout-content-width) w-full">
+            {children}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+import { TextEffect } from "@/components/motion-primitives/text-effect";
+
+export function DocsHeader({
+  title,
+  date,
+  children,
+}: {
+  title: string;
+  date: string;
+  children?: ReactNode;
+}) {
+  return (
+    <section id="docs-header" className="scroll-mt-24">
+      <DocsCol>
+        <h1 className="tracking-tight mb-2">
+          <TextEffect preset="fade-in-blur" per="word">
+            {title}
+          </TextEffect>
+        </h1>
+        <p className="text-muted-foreground/60 mb-8 mt-0">{date}</p>
+        {children}
+      </DocsCol>
+    </section>
+  );
+}
+
+export function DocsOverview({ children }: { children: ReactNode }) {
+  return (
+    <section id="overview" className="scroll-mt-24">
+      <DocsCol>{children}</DocsCol>
+    </section>
+  );
+}
+
+export function DocsSection({
+  id,
+  title,
+  children,
+}: {
+  id: string;
+  title?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section id={id} className="scroll-mt-24 mt-12">
+      <DocsCol>
+        {title && <h2>{title}</h2>}
+        {children}
+      </DocsCol>
+    </section>
+  );
+}
+
+export function DocsInstallation({
+  install,
+}: {
+  install: { id: string; command: string }[];
+}) {
+  return (
+    <DocsSection id="installation" title="Installation">
+      <p>Install the package using your preferred package manager:</p>
+      <CommandBlock items={install} />
+    </DocsSection>
+  );
+}
+
+export function DocsCode({ code, html }: { code: string; html: string }) {
+  return <CodeBlock code={code} html={html} />;
+}

package/src/components/layout/docs-layout.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import { ArrowLeftIcon } from "@radix-ui/react-icons";
+import { motion, useMotionValueEvent, useScroll } from "motion/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import * as React from "react";
+import { SlidingNumber } from "../motion-primitives/sliding-number";
+import { ScrollFade } from "../shared/scroll-fade";
+
+export type DocsLayoutProps = {
+  children: React.ReactNode;
+  links: {
+    group: string;
+    items: { title: string; url: string; isAnchor: boolean }[];
+  }[];
+  indexUrl?: string;
+  indexLabel?: string;
+  header?: React.ReactNode;
+};
+
+export function DocsLayout({
+  children,
+  links,
+  indexUrl = "/",
+  indexLabel = "Index",
+  header,
+}: DocsLayoutProps) {
+  const pathname = usePathname();
+  const [activeHash, setActiveHash] = React.useState("");
+
+  const { scrollYProgress } = useScroll();
+  const [progress, setProgress] = React.useState(0);
+
+  useMotionValueEvent(scrollYProgress, "change", (latest) => {
+    setProgress(Math.round(latest * 100));
+  });
+
+  // Scrollspy to detect currently active section
+  React.useEffect(() => {
+    // Only extract sections for the current page path
+    const currentPathLinks = links.flatMap((g) =>
+      g.items.filter((i) => i.isAnchor && i.url.startsWith(pathname)),
+    );
+    const sections = currentPathLinks.map((i) => i.url.split("#")[1]);
+    if (!sections.length) {
+      setActiveHash("");
+      return;
+    }
+
+    const observerOptions = {
+      root: null,
+      rootMargin: "-20% 0px -60% 0px", // Trigger when the section occupies the main focal area
+      threshold: 0,
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setActiveHash(`#${entry.target.id}`);
+        }
+      }
+    }, observerOptions);
+
+    for (const id of sections) {
+      if (id) {
+        const el = document.getElementById(id);
+        if (el) observer.observe(el);
+      }
+    }
+
+    // Capture initial hash if present
+    if (typeof window !== "undefined" && window.location.hash) {
+      setActiveHash(window.location.hash);
+    } else {
+      // default to first
+      setActiveHash(`#${sections[0]}`);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [links, pathname]);
+
+  const handleAnchorClick = (
+    e: React.MouseEvent<HTMLAnchorElement>,
+    url: string,
+  ) => {
+    if (!url.includes("#")) return;
+
+    const hash = url.split("#")[1];
+    const element = document.getElementById(hash);
+
+    if (element && url.startsWith(pathname)) {
+      e.preventDefault();
+      element.scrollIntoView({ behavior: "smooth" });
+      window.history.pushState(null, "", `#${hash}`);
+      setActiveHash(`#${hash}`);
+    }
+  };
+
+  const isLinkActive = (url: string, isAnchor: boolean) => {
+    if (isAnchor) {
+      if (!url.startsWith(pathname)) return false;
+      const hash = url.split("#")[1];
+      if (activeHash) {
+        return activeHash === `#${hash}`;
+      }
+      return false;
+    }
+    return pathname === url;
+  };
+
+  return (
+    <>
+      <ScrollFade />
+      {header}
+      <div className="mx-auto w-full max-w-(--layout-max-width) px-6 py-12 md:py-24 flex flex-col md:flex-row gap-10 md:gap-16">
+        {/* Sticky Minimalist Sidebar */}
+        <aside className="w-full md:w-48 shrink-0 md:sticky md:top-24 md:self-start flex flex-col gap-6 md:gap-8">
+          <div className="flex items-center justify-between">
+            <Link
+              href={indexUrl}
+              className="text-sm text-muted-foreground hover:text-foreground flex items-center gap-1.5 transition-opacity duration-200 select-none opacity-60 hover:opacity-100"
+            >
+              <ArrowLeftIcon className="size-3.5" />
+              {indexLabel}
+            </Link>
+
+            <div className="text-xs font-mono text-muted-foreground opacity-50 flex items-center gap-0.5">
+              <SlidingNumber value={progress} />%
+            </div>
+          </div>
+          <div className="flex flex-row flex-wrap gap-x-6 gap-y-2 md:flex-col md:gap-y-4">
+            {links.map((group) => (
+              <div key={group.group} className="flex flex-col gap-1.5 md:gap-2">
+                <nav className="flex flex-row flex-wrap gap-x-1 gap-y-1 md:flex-col md:gap-y-1">
+                  {group.items.map((link) => {
+                    const active = isLinkActive(link.url, link.isAnchor);
+                    return (
+                      <Link
+                        key={link.title}
+                        href={link.url}
+                        onClick={(e) => handleAnchorClick(e, link.url)}
+                        className={`relative text-sm transition-colors duration-200 px-2 py-1.5 -ml-2 rounded-md ${
+                          active
+                            ? "text-foreground font-medium"
+                            : "text-muted-foreground hover:text-foreground"
+                        }`}
+                      >
+                        {active && (
+                          <motion.div
+                            layoutId="activeDocsLinkBg"
+                            className="absolute inset-0 bg-secondary/50 rounded-md"
+                            transition={{
+                              type: "spring",
+                              duration: 0.3,
+                              bounce: 0,
+                            }}
+                          />
+                        )}
+                        <span className="relative z-10">{link.title}</span>
+                      </Link>
+                    );
+                  })}
+                </nav>
+              </div>
+            ))}
+          </div>
+        </aside>
+
+        {/* Main Content */}
+        <main className="flex-1 min-w-0">{children}</main>
+      </div>
+    </>
+  );
+}
+
+export function DocsNavbar({
+  logo,
+  right,
+}: {
+  logo?: React.ReactNode;
+  right?: React.ReactNode;
+}) {
+  return (
+    <header className="sticky top-4 z-(--z-header) mx-auto flex w-full max-w-(--layout-max-width) items-center justify-between px-(--layout-padding) py-3">
+      {logo}
+      {right}
+    </header>
+  );
+}