@tiramisu-docs/kit 0.1.0

package/src/lib/components/tiramisu/CodeTabs.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import { fly } from "svelte/transition"
+  import { getLangIcon } from "./lang-icons.js"
+
+  interface TabMeta {
+    label: string
+    icon?: string
+    language?: string
+  }
+
+  let {
+    group = "",
+    tabs = [],
+    codes = [],
+    langMap = [],
+  }: { group?: string; tabs?: TabMeta[]; codes?: string[]; langMap?: string[] } = $props()
+
+  const storageKey = $derived(group ? `codetabs:${group}` : "")
+
+  function getInitial() {
+    const key = group ? `codetabs:${group}` : ""
+    if (key && typeof window !== "undefined" && window.localStorage) {
+      const saved = window.localStorage.getItem(key)
+      if (saved && tabs.some((t: TabMeta) => t.label === saved)) return saved
+    }
+    return tabs[0]?.label ?? ""
+  }
+
+  let active = $state(getInitial())
+
+  function select(label: string) {
+    if (label === active) return
+    active = label
+    if (storageKey && typeof localStorage !== "undefined") {
+      localStorage.setItem(storageKey, label)
+      window.dispatchEvent(new CustomEvent("codetabs-sync", { detail: { group, label } }))
+    }
+  }
+
+  $effect(() => {
+    if (!storageKey || typeof window === "undefined") return
+
+    function onSync(e: Event) {
+      const detail = (e as CustomEvent<{ group: string; label: string }>).detail
+      if (detail?.group === group && detail?.label !== active) {
+        select(detail.label)
+      }
+    }
+
+    function onStorage(e: StorageEvent) {
+      if (e.key === storageKey && e.newValue && e.newValue !== active) {
+        select(e.newValue)
+      }
+    }
+
+    window.addEventListener("codetabs-sync", onSync)
+    window.addEventListener("storage", onStorage)
+    return () => {
+      window.removeEventListener("codetabs-sync", onSync)
+      window.removeEventListener("storage", onStorage)
+    }
+  })
+
+  let copied = $state(false)
+
+  function copyActive() {
+    const idx = tabs.findIndex((t: TabMeta) => t.label === active)
+    if (idx === -1) return
+    const raw = (codes[idx] ?? "").replace(/<[^>]*>/g, "")
+    navigator.clipboard.writeText(raw)
+    copied = true
+    setTimeout(() => (copied = false), 2000)
+  }
+
+  function tabIcon(tab: TabMeta): string | undefined {
+    if (tab.icon) return tab.icon
+    return getLangIcon(tab.label) || getLangIcon(tab.language || "")
+  }
+</script>
+
+<div class="group relative my-4 overflow-hidden rounded-lg border border-border">
+  <div class="flex items-center border-b border-border bg-muted/50">
+    <div class="flex overflow-x-auto">
+      {#each tabs as tab, i}
+        {@const icon = tabIcon(tab)}
+        <button
+          onclick={() => select(tab.label)}
+          class="relative flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium transition-colors whitespace-nowrap {active === tab.label ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80'}"
+        >
+          {#if icon}
+            <iconify-icon icon={icon} width="14" height="14" class="shrink-0"></iconify-icon>
+          {/if}
+          {tab.label}
+          {#if active === tab.label}
+            <span class="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-primary"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+    <div class="ml-auto pr-2">
+      <button
+        onclick={copyActive}
+        class="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover:opacity-100"
+        aria-label="Copy code"
+      >
+        {#if copied}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+          Copied
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          Copy
+        {/if}
+      </button>
+    </div>
+  </div>
+  {#each tabs as tab, i}
+    {#if active === tab.label}
+      <div in:fly={{ y: 6, duration: 200 }}>
+        <pre class="overflow-x-auto p-4 text-sm leading-relaxed"><code>{@html codes[i] ?? ""}</code></pre>
+      </div>
+    {/if}
+  {/each}
+</div>

package/src/lib/components/tiramisu/Demo.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card/index.js"
+
+  let { title = "Preview", children }: { title?: string; children: Snippet } = $props()
+</script>
+
+<Card class="my-4">
+  <CardHeader>
+    <CardTitle class="text-xs font-medium tracking-wide text-muted-foreground uppercase">{title}</CardTitle>
+  </CardHeader>
+  <CardContent>
+    {@render children()}
+  </CardContent>
+</Card>

package/src/lib/components/tiramisu/FileTree.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  let { children }: { children?: import("svelte").Snippet } = $props()
+</script>
+
+<div class="file-tree my-4 rounded-lg border bg-card p-4 font-mono text-sm">
+  {@render children?.()}
+</div>
+
+<style>
+  .file-tree :global(.tree-file),
+  .file-tree :global(.tree-folder-name) {
+    position: relative;
+    display: block;
+    padding-left: 1.25rem;
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+
+  .file-tree :global(.tree-file)::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.35rem;
+    width: 14px;
+    height: 14px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .file-tree :global(.tree-folder-name)::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.35rem;
+    width: 14px;
+    height: 14px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .file-tree :global(.tree-folder-name) {
+    font-weight: 500;
+    color: var(--foreground);
+  }
+
+  /* Nesting: border aligned under parent folder icon center (7px ≈ 0.45rem) */
+  .file-tree :global(.tree-folder > .tree-file),
+  .file-tree :global(.tree-folder > .tree-folder) {
+    margin-left: 0.45rem;
+    border-left: 1px solid var(--border);
+  }
+
+  /* Nested files: shift icon away from border, increase padding to match */
+  .file-tree :global(.tree-folder > .tree-file) {
+    padding-left: 1.75rem;
+  }
+  .file-tree :global(.tree-folder > .tree-file)::before {
+    left: 0.5rem;
+  }
+
+  /* Nested folders: gap from border to folder-name content */
+  .file-tree :global(.tree-folder > .tree-folder) {
+    padding-left: 0.5rem;
+  }
+</style>

package/src/lib/components/tiramisu/MathBlock.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  let { formula = "" }: { formula?: string } = $props()
+  let container: HTMLElement
+  let html = $state("")
+
+  onMount(async () => {
+    const katex = await import("katex")
+    html = katex.default.renderToString(formula, {
+      throwOnError: false,
+      displayMode: true,
+    })
+  })
+</script>
+
+<svelte:head>
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css"
+  />
+</svelte:head>
+
+<div bind:this={container} class="math-block my-4 overflow-x-auto">
+  {@html html}
+</div>

package/src/lib/components/tiramisu/Mermaid.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { onMount } from "svelte"
+
+  let { chart = "" }: { chart?: string } = $props()
+  let container: HTMLElement
+  let idBase = `mermaid-${Math.random().toString(36).slice(2, 9)}`
+  let renderCount = 0
+
+  onMount(async () => {
+    const mermaid = (await import("mermaid")).default
+
+    async function render() {
+      const isDark = document.documentElement.classList.contains("dark")
+      mermaid.initialize({ startOnLoad: false, theme: isDark ? "dark" : "default" })
+      const rid = `${idBase}-${renderCount++}`
+      const { svg } = await mermaid.render(rid, chart)
+      container.innerHTML = svg
+    }
+
+    await render()
+
+    const observer = new MutationObserver(() => render())
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] })
+    return () => observer.disconnect()
+  })
+</script>
+
+<div bind:this={container} class="mermaid-block my-4 flex justify-center">
+  <pre class="text-sm text-muted-foreground">{chart}</pre>
+</div>

package/src/lib/components/tiramisu/NavCard.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  let {
+    title = "",
+    description = "",
+    href = "",
+    icon = "",
+    image = "",
+  }: {
+    title?: string
+    description?: string
+    href?: string
+    icon?: string
+    image?: string
+  } = $props()
+</script>
+
+{#snippet cardContent()}
+  {#if image}
+    <div class="aspect-[2/1] w-full overflow-hidden bg-muted">
+      <img src={image} alt="" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" />
+    </div>
+  {/if}
+  <div class="flex flex-col gap-2 p-5">
+    <span class="flex items-center gap-2 font-semibold text-card-foreground group-hover:text-primary">
+      {#if icon}
+        <iconify-icon icon={icon.includes(":") ? icon : `lucide:${icon}`} width="18" height="18" class="shrink-0"></iconify-icon>
+      {/if}
+      {title}
+    </span>
+    {#if description}
+      <span class="text-sm text-muted-foreground">{description}</span>
+    {/if}
+  </div>
+{/snippet}
+
+{#if href}
+  <a
+    {href}
+    class="group flex flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors hover:border-primary/30 hover:bg-accent"
+  >
+    {@render cardContent()}
+  </a>
+{:else}
+  <div
+    class="group flex flex-col overflow-hidden rounded-xl border bg-card shadow-sm"
+  >
+    {@render cardContent()}
+  </div>
+{/if}

package/src/lib/components/tiramisu/Steps.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props()
+</script>
+
+<div class="stepper my-6">
+  {@render children()}
+</div>
+
+<style>
+  .stepper :global(ol) {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+    counter-reset: step;
+  }
+
+  .stepper :global(li.step) {
+    position: relative;
+    padding-left: 2.5rem;
+    padding-bottom: 1.5rem;
+    counter-increment: step;
+  }
+
+  .stepper :global(li.step)::before {
+    content: counter(step);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1.75rem;
+    height: 1.75rem;
+    border-radius: 9999px;
+    background: var(--primary);
+    color: var(--primary-foreground);
+    font-size: 0.75rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .stepper :global(li.step)::after {
+    content: "";
+    position: absolute;
+    left: 0.8125rem;
+    top: 1.75rem;
+    width: 2px;
+    bottom: 0;
+    background: var(--border);
+  }
+
+  .stepper :global(li.step:last-child)::after {
+    display: none;
+  }
+
+  .stepper :global(li.step:last-child) {
+    padding-bottom: 0;
+  }
+</style>

package/src/lib/components/tiramisu/Tabs.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { fly } from "svelte/transition"
+
+  interface TabMeta {
+    label: string
+    icon?: string
+  }
+
+  let {
+    group = "",
+    tabs = [],
+    contents = [],
+  }: { group?: string; tabs?: TabMeta[]; contents?: string[] } = $props()
+
+  const storageKey = $derived(group ? `tabs:${group}` : "")
+
+  function getInitial() {
+    if (storageKey && typeof window !== "undefined" && window.localStorage) {
+      const saved = window.localStorage.getItem(storageKey)
+      if (saved && tabs.some((t: TabMeta) => t.label === saved)) return saved
+    }
+    return tabs[0]?.label ?? ""
+  }
+
+  let active = $state(getInitial())
+
+  function select(label: string) {
+    if (label === active) return
+    active = label
+    if (storageKey && typeof window !== "undefined" && window.localStorage) {
+      window.localStorage.setItem(storageKey, label)
+      window.dispatchEvent(new CustomEvent("tabs-sync", { detail: { group, label } }))
+    }
+  }
+
+  $effect(() => {
+    if (!storageKey || typeof window === "undefined") return
+
+    function onSync(e: Event) {
+      const detail = (e as CustomEvent<{ group: string; label: string }>).detail
+      if (detail?.group === group && detail?.label !== active) {
+        select(detail.label)
+      }
+    }
+
+    function onStorage(e: StorageEvent) {
+      if (e.key === storageKey && e.newValue && e.newValue !== active) {
+        select(e.newValue)
+      }
+    }
+
+    window.addEventListener("tabs-sync", onSync)
+    window.addEventListener("storage", onStorage)
+    return () => {
+      window.removeEventListener("tabs-sync", onSync)
+      window.removeEventListener("storage", onStorage)
+    }
+  })
+</script>
+
+<div class="my-4 overflow-hidden rounded-lg border border-border">
+  <div class="flex border-b border-border bg-muted/50">
+    <div class="flex overflow-x-auto">
+      {#each tabs as tab}
+        <button
+          onclick={() => select(tab.label)}
+          class="relative flex items-center gap-1.5 px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap {active === tab.label ? 'text-foreground' : 'text-muted-foreground hover:text-foreground/80'}"
+        >
+          {#if tab.icon}
+            <iconify-icon icon={tab.icon.includes(":") ? tab.icon : `lucide:${tab.icon}`} width="14" height="14" class="shrink-0"></iconify-icon>
+          {/if}
+          {tab.label}
+          {#if active === tab.label}
+            <span class="absolute bottom-0 left-2 right-2 h-0.5 rounded-full bg-primary"></span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  </div>
+  {#each tabs as tab, i}
+    {#if active === tab.label}
+      <div class="p-4" in:fly={{ y: 6, duration: 200 }}>
+        {@html contents[i] ?? ""}
+      </div>
+    {/if}
+  {/each}
+</div>

package/src/lib/components/tiramisu/ZoomImage.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+  import { fade } from "svelte/transition"
+
+  let { src = "", alt = "", caption = "" }: { src?: string; alt?: string; caption?: string } = $props()
+  let zoomed = $state(false)
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") zoomed = false
+  }
+
+  function scaleIn(node: Element) {
+    return {
+      duration: 250,
+      css: (t: number) => {
+        const ease = 1 - Math.pow(1 - t, 3)
+        return `opacity: ${ease}; transform: scale(${0.85 + 0.15 * ease})`
+      },
+    }
+  }
+
+  function scaleOut(node: Element) {
+    return {
+      duration: 200,
+      css: (t: number) => {
+        const ease = t * t
+        return `opacity: ${ease}; transform: scale(${0.85 + 0.15 * ease})`
+      },
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<figure class="zoom-figure">
+  <button type="button" class="zoom-trigger" onclick={() => (zoomed = true)}>
+    <img {src} {alt} class="rounded-lg" />
+  </button>
+  {#if caption}
+    <figcaption class="mt-2 text-center text-sm text-muted-foreground">{caption}</figcaption>
+  {/if}
+</figure>
+
+{#if zoomed}
+  <div class="zoom-overlay" role="dialog" aria-modal="true">
+    <button
+      type="button"
+      class="zoom-backdrop"
+      onclick={() => (zoomed = false)}
+      in:fade={{ duration: 250 }}
+      out:fade={{ duration: 200 }}
+    >
+      <img
+        {src}
+        {alt}
+        class="zoom-image"
+        in:scaleIn
+        out:scaleOut
+      />
+    </button>
+  </div>
+{/if}
+
+<style>
+  .zoom-figure {
+    margin: 0;
+  }
+
+  .zoom-trigger {
+    cursor: zoom-in;
+    background: none;
+    border: none;
+    padding: 0;
+    display: block;
+  }
+
+  .zoom-trigger img {
+    max-width: 100%;
+    height: auto;
+    transition: opacity 0.15s;
+  }
+
+  .zoom-trigger:hover img {
+    opacity: 0.85;
+  }
+
+  .zoom-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .zoom-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.8);
+    border: none;
+    cursor: zoom-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    backdrop-filter: blur(4px);
+  }
+
+  .zoom-image {
+    max-width: 90vw;
+    max-height: 90vh;
+    object-fit: contain;
+    border-radius: 0.5rem;
+  }
+</style>

package/src/lib/components/tiramisu/lang-icons.ts

@@ -0,0 +1,81 @@
+import { addIcon } from "iconify-icon"
+
+// Register custom tiramisu icon
+addIcon("custom:tiramisu", {
+  body: '<rect x="3" y="16" width="18" height="3" rx="1" fill="currentColor"/><rect x="4" y="11" width="16" height="3" rx="1" fill="currentColor" opacity="0.7"/><rect x="5" y="6" width="14" height="3" rx="1" fill="currentColor" opacity="0.5"/><circle cx="8" cy="4" r="0.7" fill="currentColor" opacity="0.6"/><circle cx="12" cy="3.5" r="0.7" fill="currentColor" opacity="0.4"/><circle cx="16" cy="4" r="0.7" fill="currentColor" opacity="0.6"/>',
+  width: 24,
+  height: 24,
+})
+
+/** Map language/tool names to Iconify icon identifiers */
+const icons: Record<string, string> = {
+  // JS/TS
+  typescript: "devicon-plain:typescript",
+  javascript: "devicon-plain:javascript",
+  tsx: "devicon-plain:typescript",
+  jsx: "devicon-plain:javascript",
+  // Web
+  html: "devicon-plain:html5",
+  css: "devicon-plain:css3",
+  svelte: "devicon-plain:svelte",
+  react: "devicon-plain:react",
+  vue: "devicon-plain:vuejs",
+  angular: "devicon-plain:angularjs",
+  // Shell
+  bash: "devicon-plain:bash",
+  shell: "devicon-plain:bash",
+  zsh: "devicon-plain:bash",
+  // Languages
+  python: "devicon-plain:python",
+  rust: "devicon-plain:rust",
+  go: "devicon-plain:go",
+  java: "devicon-plain:java",
+  csharp: "devicon-plain:csharp",
+  ruby: "devicon-plain:ruby",
+  php: "devicon-plain:php",
+  swift: "devicon-plain:swift",
+  kotlin: "devicon-plain:kotlin",
+  dart: "devicon-plain:dart",
+  c: "devicon-plain:c",
+  cpp: "devicon-plain:cplusplus",
+  // Data/Config
+  json: "devicon-plain:json",
+  yaml: "devicon-plain:yaml",
+  markdown: "devicon-plain:markdown",
+  graphql: "devicon-plain:graphql",
+  // Tools/Runtimes
+  docker: "devicon-plain:docker",
+  git: "devicon-plain:git",
+  nginx: "devicon-plain:nginx-original",
+  redis: "devicon-plain:redis",
+  postgresql: "devicon-plain:postgresql",
+  mongodb: "devicon-plain:mongodb",
+  // Package managers / runtimes
+  npm: "devicon-plain:npm",
+  yarn: "devicon-plain:yarn",
+  pnpm: "devicon-plain:pnpm",
+  bun: "devicon-plain:bun",
+  deno: "devicon-plain:denojs",
+  node: "devicon-plain:nodejs",
+  nodejs: "devicon-plain:nodejs",
+  // Custom
+  tiramisu: "custom:tiramisu",
+}
+
+// Aliases
+icons.ts = icons.typescript
+icons.js = icons.javascript
+icons.sh = icons.bash
+icons.py = icons.python
+icons.rs = icons.rust
+icons.md = icons.markdown
+icons.yml = icons.yaml
+icons["c++"] = icons.cpp
+icons["c#"] = icons.csharp
+
+/**
+ * Get an Iconify icon name for a language, or empty string if unknown.
+ */
+export function getLangIcon(language: string): string {
+  return icons[language.toLowerCase()] ?? ""
+}