@inklu/docs 0.2.0 → 0.2.2

package/dist/shiki.js

@@ -25,8 +25,8 @@ __export(shiki_exports, {
 module.exports = __toCommonJS(shiki_exports);
 var import_shiki = require("shiki");
 async function highlightSnippets(snippets, options) {
-  const light = options?.lightTheme || "github-light";
-  const dark = options?.darkTheme || "github-dark";
+  const light = options?.lightTheme || "vitesse-light";
+  const dark = options?.darkTheme || "vitesse-dark";
   const entries = await Promise.all(
     Object.entries(snippets).map(
       async ([key, s]) => [

package/dist/shiki.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shiki.ts"],"sourcesContent":["import { codeToHtml } from \"shiki\";\n\nexport type SnippetInput = Record<string, { code: string; lang: string }>;\n\nexport async function highlightSnippets<T extends SnippetInput>(\n  snippets: T,\n  options?: { lightTheme?: string; darkTheme?: string },\n): Promise<Record<keyof T, string>> {\n  const light = options?.lightTheme || \"github-light\";\n  const dark = options?.darkTheme || \"github-dark\";\n\n  const entries = await Promise.all(\n    Object.entries(snippets).map(\n      async ([key, s]) =>\n        [\n          key,\n          await codeToHtml(s.code, {\n            lang: s.lang,\n            themes: { light, dark },\n          }),\n        ] as const,\n    ),\n  );\n  return Object.fromEntries(entries) as Record<keyof T, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAI3B,eAAsB,kBACpB,UACA,SACkC;AAClC,QAAM,QAAQ,SAAS,cAAc;AACrC,QAAM,OAAO,SAAS,aAAa;AAEnC,QAAM,UAAU,MAAM,QAAQ;AAAA,IAC5B,OAAO,QAAQ,QAAQ,EAAE;AAAA,MACvB,OAAO,CAAC,KAAK,CAAC,MACZ;AAAA,QACE;AAAA,QACA,UAAM,yBAAW,EAAE,MAAM;AAAA,UACvB,MAAM,EAAE;AAAA,UACR,QAAQ,EAAE,OAAO,KAAK;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACA,SAAO,OAAO,YAAY,OAAO;AACnC;","names":[]}
+{"version":3,"sources":["../src/shiki.ts"],"sourcesContent":["import { codeToHtml } from \"shiki\";\n\nexport type SnippetInput = Record<string, { code: string; lang: string }>;\n\nexport async function highlightSnippets<T extends SnippetInput>(\n  snippets: T,\n  options?: { lightTheme?: string; darkTheme?: string },\n): Promise<Record<keyof T, string>> {\n  const light = options?.lightTheme || \"vitesse-light\";\n  const dark = options?.darkTheme || \"vitesse-dark\";\n\n  const entries = await Promise.all(\n    Object.entries(snippets).map(\n      async ([key, s]) =>\n        [\n          key,\n          await codeToHtml(s.code, {\n            lang: s.lang,\n            themes: { light, dark },\n          }),\n        ] as const,\n    ),\n  );\n  return Object.fromEntries(entries) as Record<keyof T, string>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAI3B,eAAsB,kBACpB,UACA,SACkC;AAClC,QAAM,QAAQ,SAAS,cAAc;AACrC,QAAM,OAAO,SAAS,aAAa;AAEnC,QAAM,UAAU,MAAM,QAAQ;AAAA,IAC5B,OAAO,QAAQ,QAAQ,EAAE;AAAA,MACvB,OAAO,CAAC,KAAK,CAAC,MACZ;AAAA,QACE;AAAA,QACA,UAAM,yBAAW,EAAE,MAAM;AAAA,UACvB,MAAM,EAAE;AAAA,UACR,QAAQ,EAAE,OAAO,KAAK;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACA,SAAO,OAAO,YAAY,OAAO;AACnC;","names":[]}

package/dist/shiki.mjs

@@ -1,8 +1,8 @@
 // src/shiki.ts
 import { codeToHtml } from "shiki";
 async function highlightSnippets(snippets, options) {
-  const light = options?.lightTheme || "github-light";
-  const dark = options?.darkTheme || "github-dark";
+  const light = options?.lightTheme || "vitesse-light";
+  const dark = options?.darkTheme || "vitesse-dark";
   const entries = await Promise.all(
     Object.entries(snippets).map(
       async ([key, s]) => [

package/dist/shiki.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shiki.ts"],"sourcesContent":["import { codeToHtml } from \"shiki\";\n\nexport type SnippetInput = Record<string, { code: string; lang: string }>;\n\nexport async function highlightSnippets<T extends SnippetInput>(\n  snippets: T,\n  options?: { lightTheme?: string; darkTheme?: string },\n): Promise<Record<keyof T, string>> {\n  const light = options?.lightTheme || \"github-light\";\n  const dark = options?.darkTheme || \"github-dark\";\n\n  const entries = await Promise.all(\n    Object.entries(snippets).map(\n      async ([key, s]) =>\n        [\n          key,\n          await codeToHtml(s.code, {\n            lang: s.lang,\n            themes: { light, dark },\n          }),\n        ] as const,\n    ),\n  );\n  return Object.fromEntries(entries) as Record<keyof T, string>;\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAI3B,eAAsB,kBACpB,UACA,SACkC;AAClC,QAAM,QAAQ,SAAS,cAAc;AACrC,QAAM,OAAO,SAAS,aAAa;AAEnC,QAAM,UAAU,MAAM,QAAQ;AAAA,IAC5B,OAAO,QAAQ,QAAQ,EAAE;AAAA,MACvB,OAAO,CAAC,KAAK,CAAC,MACZ;AAAA,QACE;AAAA,QACA,MAAM,WAAW,EAAE,MAAM;AAAA,UACvB,MAAM,EAAE;AAAA,UACR,QAAQ,EAAE,OAAO,KAAK;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACA,SAAO,OAAO,YAAY,OAAO;AACnC;","names":[]}
+{"version":3,"sources":["../src/shiki.ts"],"sourcesContent":["import { codeToHtml } from \"shiki\";\n\nexport type SnippetInput = Record<string, { code: string; lang: string }>;\n\nexport async function highlightSnippets<T extends SnippetInput>(\n  snippets: T,\n  options?: { lightTheme?: string; darkTheme?: string },\n): Promise<Record<keyof T, string>> {\n  const light = options?.lightTheme || \"vitesse-light\";\n  const dark = options?.darkTheme || \"vitesse-dark\";\n\n  const entries = await Promise.all(\n    Object.entries(snippets).map(\n      async ([key, s]) =>\n        [\n          key,\n          await codeToHtml(s.code, {\n            lang: s.lang,\n            themes: { light, dark },\n          }),\n        ] as const,\n    ),\n  );\n  return Object.fromEntries(entries) as Record<keyof T, string>;\n}\n"],"mappings":";AAAA,SAAS,kBAAkB;AAI3B,eAAsB,kBACpB,UACA,SACkC;AAClC,QAAM,QAAQ,SAAS,cAAc;AACrC,QAAM,OAAO,SAAS,aAAa;AAEnC,QAAM,UAAU,MAAM,QAAQ;AAAA,IAC5B,OAAO,QAAQ,QAAQ,EAAE;AAAA,MACvB,OAAO,CAAC,KAAK,CAAC,MACZ;AAAA,QACE;AAAA,QACA,MAAM,WAAW,EAAE,MAAM;AAAA,UACvB,MAAM,EAAE;AAAA,UACR,QAAQ,EAAE,OAAO,KAAK;AAAA,QACxB,CAAC;AAAA,MACH;AAAA,IACJ;AAAA,EACF;AACA,SAAO,OAAO,YAAY,OAAO;AACnC;","names":[]}

package/dist/styles.css

@@ -340,9 +340,6 @@
   .mb-8 {
     margin-bottom: calc(var(--spacing) * 8);
   }
-  .-ml-2 {
-    margin-left: calc(var(--spacing) * -2);
-  }
   .ml-auto {
     margin-left: auto;
   }
@@ -584,17 +581,11 @@
     margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
     margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
   }
-  .gap-x-1 {
-    column-gap: var(--spacing);
-  }
-  .gap-x-6 {
-    column-gap: calc(var(--spacing) * 6);
-  }
-  .gap-y-1 {
-    row-gap: var(--spacing);
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
   }
-  .gap-y-2 {
-    row-gap: calc(var(--spacing) * 2);
+  .gap-y-1\.5 {
+    row-gap: calc(var(--spacing) * 1.5);
   }
   .self-start {
     align-self: flex-start;
@@ -749,9 +740,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-5 {
-    padding-inline: calc(var(--spacing) * 5);
-  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -788,12 +776,15 @@
   .py-3 {
     padding-block: calc(var(--spacing) * 3);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
   }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -843,6 +834,9 @@
   .text-\[10px\] {
     font-size: 10px;
   }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
   .text-\[16px\] {
     font-size: 16px;
   }
@@ -900,6 +894,24 @@
   .text-foreground {
     color: var(--foreground);
   }
+  .text-foreground\/35 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 35%, transparent);
+    }
+  }
+  .text-foreground\/45 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 45%, transparent);
+    }
+  }
+  .text-foreground\/50 {
+    color: var(--foreground);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--foreground) 50%, transparent);
+    }
+  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -934,12 +946,6 @@
   .opacity-0 {
     opacity: 0%;
   }
-  .opacity-50 {
-    opacity: 50%;
-  }
-  .opacity-60 {
-    opacity: 60%;
-  }
   .opacity-100 {
     opacity: 100%;
   }
@@ -1139,15 +1145,20 @@
     .hover\:text-foreground:hover {
       color: var(--foreground);
     }
+    .hover\:text-foreground\/75:hover {
+      color: var(--foreground);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-foreground\/75:hover {
+        color: color-mix(in oklab, var(--foreground) 75%, transparent);
+      }
+    }
     .hover\:underline:hover {
       text-decoration-line: underline;
     }
     .hover\:opacity-80:hover {
       opacity: 80%;
     }
-    .hover\:opacity-100:hover {
-      opacity: 100%;
-    }
   }
   .focus-visible\:translate-y-0:focus-visible {
     --tw-translate-y: 0px;
@@ -1527,9 +1538,6 @@
     .md\:flex-row {
       flex-direction: row;
     }
-    .md\:gap-2 {
-      gap: calc(var(--spacing) * 2);
-    }
     .md\:gap-5 {
       gap: calc(var(--spacing) * 5);
     }
@@ -1539,11 +1547,8 @@
     .md\:gap-16 {
       gap: calc(var(--spacing) * 16);
     }
-    .md\:gap-y-1 {
-      row-gap: var(--spacing);
-    }
-    .md\:gap-y-4 {
-      row-gap: calc(var(--spacing) * 4);
+    .md\:gap-y-2 {
+      row-gap: calc(var(--spacing) * 2);
     }
     .md\:self-start {
       align-self: flex-start;
@@ -1558,8 +1563,8 @@
   .dark\:text-white:is(.dark *) {
     color: var(--color-white);
   }
-  .\[\&_\.line\]\:min-h-6 .line {
-    min-height: calc(var(--spacing) * 6);
+  .\[\&_\.line\]\:min-h-5 .line {
+    min-height: calc(var(--spacing) * 5);
   }
   .\[\&_code\]\:bg-transparent\! code {
     background-color: transparent !important;
@@ -1567,6 +1572,9 @@
   .\[\&_code\]\:p-0 code {
     padding: 0px;
   }
+  .\[\&_code\]\:text-\[13px\] code {
+    font-size: 13px;
+  }
   .\[\&_img\]\:size-full img {
     width: 100%;
     height: 100%;
@@ -1583,18 +1591,21 @@
   .\[\&_pre\]\:bg-transparent\! pre {
     background-color: transparent !important;
   }
-  .\[\&_pre\]\:px-5 pre {
-    padding-inline: calc(var(--spacing) * 5);
+  .\[\&_pre\]\:px-4 pre {
+    padding-inline: calc(var(--spacing) * 4);
   }
-  .\[\&_pre\]\:py-4 pre {
-    padding-block: calc(var(--spacing) * 4);
+  .\[\&_pre\]\:py-3\.5 pre {
+    padding-block: calc(var(--spacing) * 3.5);
   }
   .\[\&_pre\]\:font-mono pre {
     font-family: var(--font-geist-mono);
   }
-  .\[\&_pre\]\:leading-relaxed pre {
-    --tw-leading: var(--leading-relaxed);
-    line-height: var(--leading-relaxed);
+  .\[\&_pre\]\:text-\[13px\] pre {
+    font-size: 13px;
+  }
+  .\[\&_pre\]\:leading-5 pre {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
   }
   .\[\&_pre\:\:-webkit-scrollbar\]\:h-2 pre::-webkit-scrollbar {
     height: calc(var(--spacing) * 2);
@@ -1722,7 +1733,21 @@
     --typeset-flow: 1.5em;
     --typeset-body: currentColor;
     @supports (color: color-mix(in lab, red, red)) {
-      --typeset-body: color-mix(in oklab, currentColor 82%, transparent);
+      --typeset-body: color-mix(in oklab, currentColor 78%, transparent);
+    }
+    --typeset-muted: var(
+      --color-muted-foreground,
+      currentColor
+    );
+    @supports (color: color-mix(in lab, red, red)) {
+      --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 58%, transparent)
+    );
+    }
+    --typeset-faint: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      --typeset-faint: color-mix(in oklab, currentColor 42%, transparent);
     }
   }
   .typeset-docs {
@@ -1735,6 +1760,24 @@
   }
   .dark .typeset {
     --typeset-leading: 1.85;
+    --typeset-body: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      --typeset-body: color-mix(in oklab, currentColor 80%, transparent);
+    }
+    --typeset-muted: var(
+      --color-muted-foreground,
+      currentColor
+    );
+    @supports (color: color-mix(in lab, red, red)) {
+      --typeset-muted: var(
+      --color-muted-foreground,
+      color-mix(in oklab, currentColor 55%, transparent)
+    );
+    }
+    --typeset-faint: currentColor;
+    @supports (color: color-mix(in lab, red, red)) {
+      --typeset-faint: color-mix(in oklab, currentColor 40%, transparent);
+    }
   }
   .dark .typeset-docs {
     --typeset-leading: 1.6;
@@ -1749,16 +1792,6 @@
     @media (min-width: 48rem), print {
       font-size: var(--typeset-size);
     }
-    --typeset-muted: var(
-      --color-muted-foreground,
-      currentColor
-    );
-    @supports (color: color-mix(in lab, red, red)) {
-      --typeset-muted: var(
-      --color-muted-foreground,
-      color-mix(in oklab, currentColor 60%, transparent)
-    );
-    }
     --typeset-rule: var(
       --color-border,
       currentColor
@@ -1782,17 +1815,18 @@
     margin-block-end: 0;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(h1) {
-    font-size: 1.45em;
-    line-height: 1.3;
+    font-size: 1.25em;
+    line-height: 1.35;
+    letter-spacing: -0.01em;
     margin-block-start: var(--typeset-flow);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(h2) {
-    font-size: 1.25em;
+    font-size: 1.125em;
     line-height: 1.4;
     margin-block-start: calc(var(--typeset-flow) * 1.4);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(h3) {
-    font-size: 1.125em;
+    font-size: 1.0625em;
     line-height: 1.45;
     margin-block-start: var(--typeset-flow);
   }
@@ -1802,17 +1836,17 @@
     margin-block-start: var(--typeset-flow);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(h5) {
-    font-size: 0.875em;
+    font-size: 0.9375em;
     line-height: 1.5;
     font-weight: 500;
     color: var(--typeset-muted);
-    margin-block-start: calc(var(--typeset-flow) / 0.875);
+    margin-block-start: calc(var(--typeset-flow) / 0.9375);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(h6) {
     font-size: 0.8125em;
     line-height: 1.5;
     font-weight: 500;
-    letter-spacing: 0.08em;
+    letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--typeset-muted);
     margin-block-start: calc(var(--typeset-flow) / 0.8125);
@@ -1848,6 +1882,7 @@
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(strong, b) {
     font-weight: 600;
+    color: var(--color-foreground, currentColor);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(:is(h1, h2, h3, h4) :is(strong, b)) {
     font-weight: 600;
@@ -1865,7 +1900,7 @@
     cursor: help;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(del, s) {
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
     text-decoration-line: line-through;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(sup, sub) {
@@ -1922,10 +1957,10 @@
     margin-block-start: 0.5em;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(ul > li)::marker {
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(ol > li)::marker {
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(ul.contains-task-list) {
     list-style-type: none;
@@ -1945,12 +1980,13 @@
     font-weight: 500;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(summary)::marker {
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(kbd) {
     font-family: inherit;
     font-size: 0.85em;
     font-weight: 500;
+    color: var(--typeset-body);
     border: 1px solid var(--typeset-rule);
     border-block-end-width: 2px;
     border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
@@ -1978,6 +2014,7 @@
     @supports (color: color-mix(in lab, red, red)) {
       background-color: var( --color-muted, color-mix(in oklab, currentColor 8%, transparent) );
     }
+    color: var(--typeset-body);
     font-family: var(--typeset-font-mono);
     font-size: 0.85em;
     border-radius: min(calc(var(--radius, 0.5em) * 0.6), 0.35em);
@@ -2001,12 +2038,14 @@
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(pre code) {
     background-color: transparent;
+    color: inherit;
     font-family: inherit;
     font-size: inherit;
     padding: 0;
     border-radius: 0;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(blockquote) {
+    color: var(--typeset-muted);
     border-inline-start: 2px solid var(--typeset-rule);
     padding-inline-start: 1em;
     margin-block-start: var(--typeset-flow);
@@ -2027,7 +2066,7 @@
     border-block-start: 1px solid var(--typeset-rule);
     padding-block-start: var(--typeset-flow);
     font-size: 0.875em;
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(math[display="block"]) {
     margin-block-start: var(--typeset-flow);
@@ -2052,7 +2091,7 @@
     margin-inline: 0;
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(figcaption, caption) {
-    color: var(--typeset-muted);
+    color: var(--typeset-faint);
     font-size: 0.875em;
     text-align: center;
     margin-block-start: calc(0.75em / 0.875);
@@ -2084,6 +2123,7 @@
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(thead th) {
     font-weight: 500;
+    color: var(--typeset-muted);
     text-align: start;
     white-space: nowrap;
     padding: 0.65em 1em;
@@ -2099,6 +2139,7 @@
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(tbody th, tfoot th) {
     font-weight: 500;
+    color: var(--color-foreground, currentColor);
   }
   .typeset *:not( :where( .not-typeset, [data-not-typeset], .not-typeset *, [data-not-typeset] * ) ):where(th:first-child, td:first-child) {
     padding-inline-start: 0;
@@ -2206,10 +2247,10 @@
     color: var(--foreground);
   }
   .dark .shiki, .dark .shiki span {
-    color: var(--shiki-dark);
-    font-style: var(--shiki-dark-font-style);
-    font-weight: var(--shiki-dark-font-weight);
-    text-decoration: var(--shiki-dark-text-decoration);
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
   }
 }
 @property --tw-translate-x {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inklu/docs",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "publishConfig": {
     "access": "public"
   },
@@ -25,6 +25,7 @@
     "@base-ui/react": "^1.6.0",
     "@lisse/react": "^0.5.2",
     "@radix-ui/react-icons": "^1.3.2",
+    "@vercel/analytics": "^2.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "motion": "^12.42.2",

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

@@ -85,16 +85,18 @@ export function CodeBlock({ html, code, className }: CodeBlockProps) {
           "[&_pre]:m-0",
           "[&_pre]:overflow-x-auto",
           "[&_pre]:bg-transparent!",
-          "[&_pre]:px-5",
-          "[&_pre]:py-4",
+          "[&_pre]:px-4",
+          "[&_pre]:py-3.5",
           "[&_pre]:font-mono",
-          "[&_pre]:leading-relaxed",
+          "[&_pre]:text-[13px]",
+          "[&_pre]:leading-5",
 
           "[&_code]:bg-transparent!",
           "[&_code]:p-0",
           "[&_code]:font-inherit",
+          "[&_code]:text-[13px]",
 
-          "[&_.line]:min-h-6",
+          "[&_.line]:min-h-5",
 
           "[&_pre::-webkit-scrollbar]:h-2",
           "[&_pre::-webkit-scrollbar-track]:bg-transparent",

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { ArrowLeftIcon } from "@radix-ui/react-icons";
-import { motion, useMotionValueEvent, useScroll } from "motion/react";
+import { useMotionValueEvent, useScroll } from "motion/react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import * as React from "react";
@@ -121,52 +121,39 @@ export function DocsLayout({
           <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"
+              className="text-sm text-foreground/50 hover:text-foreground flex items-center gap-1.5 transition-colors duration-200 select-none"
             >
               <ArrowLeftIcon className="size-3.5" />
               {indexLabel}
             </Link>
 
-            <div className="text-xs font-mono text-muted-foreground opacity-50 flex items-center gap-0.5">
+            <div className="text-xs font-mono text-foreground/35 flex items-center gap-0.5 tabular-nums">
               <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>
+
+          <nav className="flex flex-row flex-wrap gap-x-4 gap-y-1.5 md:flex-col md:gap-y-2">
+            {links
+              .flatMap((group) => 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)}
+                    aria-current={active ? "location" : undefined}
+                    className={`text-sm transition-colors duration-200 ${
+                      active
+                        ? "text-foreground font-medium"
+                        : "text-foreground/45 hover:text-foreground/75"
+                    }`}
+                  >
+                    {link.title}
+                  </Link>
+                );
+              })}
+          </nav>
         </aside>
 
         {/* Main Content */}

package/src/components/layout/site-header.tsx

@@ -135,7 +135,7 @@ export function SiteHeader({
                     )}
                   >
                     <GitHubLogoIcon />
-                    <span className="hidden sm:inline">GitHub</span>
+                    <span className="hidden sm:inline text-sm">GitHub</span>
                   </Button>
                 }
               />

package/src/components/layout/site-provider.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Analytics } from "@vercel/analytics/react";
 import type * as React from "react";
 import { DirectionProvider } from "../ui/direction";
 import { AnchoredToastProvider, ToastProvider } from "../ui/toast";
@@ -18,6 +19,7 @@ export function SiteProvider({ children }: { children: React.ReactNode }) {
           <AnchoredToastProvider>{children}</AnchoredToastProvider>
         </ToastProvider>
       </DirectionProvider>
+      <Analytics />
     </ThemeProvider>
   );
 }

package/src/components/shared/command-block.tsx

@@ -123,7 +123,7 @@ export function CommandBlock({
   return (
     <div className="not-typeset mt-6 rounded-2xl border-0 bg-code overflow-hidden">
       {items.length > 1 && (
-        <div className="flex items-center gap-0.5 px-3 pb-1.5 pt-3 justify-between">
+        <div className="flex items-center gap-0.5 px-3 pb-1.5 pt-2.5 justify-between">
           <div className="flex items-center gap-0.5 ">
             {items.map((it, i) => {
               const isActive = i === active;
@@ -133,7 +133,7 @@ export function CommandBlock({
                   type="button"
                   onClick={() => setActive(i)}
                   className={cn(
-                    "relative cursor-pointer rounded-md px-1.5 py-0.5 font-mono outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+                    "relative cursor-pointer rounded-md px-1.5 py-0.5 font-mono text-xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
                     isActive
                       ? "text-foreground"
                       : "text-muted-foreground hover:bg-accent hover:text-foreground",
@@ -168,7 +168,7 @@ export function CommandBlock({
 
       <div className="flex items-center">
         <div className="flex-1 overflow-x-auto">
-          <pre className="flex items-center overflow-x-auto px-5 py-4 font-mono text-foreground">
+          <pre className="flex items-center overflow-x-auto px-4 py-3.5 font-mono text-[13px] leading-5 text-foreground">
             <code>
               <TextMorph>{cur.command}</TextMorph>
             </code>

package/src/shiki.ts

@@ -6,8 +6,8 @@ export async function highlightSnippets<T extends SnippetInput>(
   snippets: T,
   options?: { lightTheme?: string; darkTheme?: string },
 ): Promise<Record<keyof T, string>> {
-  const light = options?.lightTheme || "github-light";
-  const dark = options?.darkTheme || "github-dark";
+  const light = options?.lightTheme || "vitesse-light";
+  const dark = options?.darkTheme || "vitesse-dark";
 
   const entries = await Promise.all(
     Object.entries(snippets).map(

package/src/styles.css

@@ -104,9 +104,9 @@
   /* Shiki dual-theme support need !important to overwrite conficts */
   .dark .shiki,
   .dark .shiki span {
-    color: var(--shiki-dark);
-    font-style: var(--shiki-dark-font-style);
-    font-weight: var(--shiki-dark-font-weight);
-    text-decoration: var(--shiki-dark-text-decoration);
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
   }
 }