some progress updating docs, new code blocks, use marked instead of custom md parser

.gitignore

···
 .env*
 !.env.example
 node_modules
+.playwright-mcp

deno.lock

···
 {
   "version": "5",
   "specifiers": {
+    "jsr:@rendermaid/core@*": "0.6.0",
+    "jsr:@rendermaid/core@0.6.0": "0.6.0",
     "jsr:@shikijs/shiki@*": "3.7.0",
     "jsr:@slices/client@~0.1.0-alpha.3": "0.1.0-alpha.3",
     "jsr:@std/assert@*": "1.0.14",
···
     "npm:@takumi-rs/helpers@~0.29.8": "0.29.8",
     "npm:clsx@^2.1.1": "2.1.1",
     "npm:lucide-preact@0.544": "0.544.0_preact@10.27.1",
+    "npm:marked-highlight@*": "2.2.2_marked@16.1.1",
+    "npm:marked@*": "16.1.1",
+    "npm:mermaid@10.6.1": "10.6.1_cytoscape@3.33.1",
     "npm:pg@^8.16.3": "8.16.3",
     "npm:preact-render-to-string@^6.5.13": "6.6.1_preact@10.27.1",
     "npm:preact@^10.27.1": "10.27.1",
     "npm:shiki@^3.7.0": "3.13.0",
     "npm:tailwind-merge@^2.5.5": "2.6.0",
     "npm:ts-morph@26.0.0": "26.0.0",
+    "npm:ts-pattern@5.0.5": "5.0.5",
+    "npm:ts-pattern@^5.7.1": "5.8.0",
     "npm:typed-htmx@~0.3.1": "0.3.1"
   },
   "jsr": {
+    "@rendermaid/core@0.6.0": {
+      "integrity": "057f87e6a57c24352051643d32a0f3c8ff7573db35fad8c8b287fb752ccf2b17",
+      "dependencies": [
+        "npm:ts-pattern@5.0.5",
+        "npm:ts-pattern@^5.7.1"
+      ]
+    },
     "@shikijs/shiki@3.7.0": {
       "integrity": "6afb828d7d26efc521ef4ca16a7ef7245aca8e83dceaf58cc5cc64d3a4a4a895",
       "dependencies": [
···
     }
   },
   "npm": {
+    "@braintree/sanitize-url@6.0.4": {
+      "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+    },
     "@isaacs/balanced-match@4.0.1": {
       "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ=="
     },
···
         "path-browserify"
       ]
     },
+    "@types/d3-scale-chromatic@3.1.0": {
+      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ=="
+    },
+    "@types/d3-scale@4.0.9": {
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "dependencies": [
+        "@types/d3-time"
+      ]
+    },
+    "@types/d3-time@3.0.4": {
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g=="
+    },
+    "@types/debug@4.1.12": {
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "dependencies": [
+        "@types/ms"
+      ]
+    },
     "@types/hast@3.0.4": {
       "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
       "dependencies": [
-        "@types/unist"
+        "@types/unist@3.0.3"
+      ]
+    },
+    "@types/mdast@3.0.15": {
+      "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==",
+      "dependencies": [
+        "@types/unist@2.0.11"
       ]
     },
     "@types/mdast@4.0.4": {
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
       "dependencies": [
-        "@types/unist"
+        "@types/unist@3.0.3"
       ]
+    },
+    "@types/ms@2.1.0": {
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
+    },
+    "@types/trusted-types@2.0.7": {
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
+    "@types/unist@2.0.11": {
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
     },
     "@types/unist@3.0.3": {
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
···
     "character-entities-legacy@3.0.0": {
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
     },
+    "character-entities@2.0.2": {
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="
+    },
     "clsx@2.1.1": {
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
     },
···
     "comma-separated-tokens@2.0.3": {
       "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
     },
+    "commander@7.2.0": {
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "cose-base@1.0.3": {
+      "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+      "dependencies": [
+        "layout-base@1.0.2"
+      ]
+    },
+    "cose-base@2.2.0": {
+      "integrity": "sha512-AzlgcsCbUMymkADOJtQm3wO9S3ltPfYOFD5033keQn9NJzIbtnZj+UdBJe7DYml/8TdbtHJW3j58SOnKhWY/5g==",
+      "dependencies": [
+        "layout-base@2.0.1"
+      ]
+    },
+    "cytoscape-cose-bilkent@4.1.0_cytoscape@3.33.1": {
+      "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+      "dependencies": [
+        "cose-base@1.0.3",
+        "cytoscape"
+      ]
+    },
+    "cytoscape-fcose@2.2.0_cytoscape@3.33.1": {
+      "integrity": "sha512-ki1/VuRIHFCzxWNrsshHYPs6L7TvLu3DL+TyIGEsRcvVERmxokbf5Gdk7mFxZnTdiGtnA4cfSmjZJMviqSuZrQ==",
+      "dependencies": [
+        "cose-base@2.2.0",
+        "cytoscape"
+      ]
+    },
+    "cytoscape@3.33.1": {
+      "integrity": "sha512-iJc4TwyANnOGR1OmWhsS9ayRS3s+XQ185FmuHObThD+5AeJCakAAbWv8KimMTt08xCCLNgneQwFp+JRJOr9qGQ=="
+    },
+    "d3-array@2.12.1": {
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": [
+        "internmap@1.0.1"
+      ]
+    },
+    "d3-array@3.2.4": {
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": [
+        "internmap@2.0.3"
+      ]
+    },
+    "d3-axis@3.0.0": {
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw=="
+    },
+    "d3-brush@3.0.0_d3-selection@3.0.0": {
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dependencies": [
+        "d3-dispatch",
+        "d3-drag",
+        "d3-interpolate",
+        "d3-selection",
+        "d3-transition"
+      ]
+    },
+    "d3-chord@3.0.1": {
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dependencies": [
+        "d3-path@3.1.0"
+      ]
+    },
+    "d3-color@3.1.0": {
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-contour@4.0.2": {
+      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
+      "dependencies": [
+        "d3-array@3.2.4"
+      ]
+    },
+    "d3-delaunay@6.0.4": {
+      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
+      "dependencies": [
+        "delaunator"
+      ]
+    },
+    "d3-dispatch@3.0.1": {
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag@3.0.0": {
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dependencies": [
+        "d3-dispatch",
+        "d3-selection"
+      ]
+    },
+    "d3-dsv@3.0.1": {
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dependencies": [
+        "commander",
+        "iconv-lite",
+        "rw"
+      ],
+      "bin": true
+    },
+    "d3-ease@3.0.1": {
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-fetch@3.0.1": {
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dependencies": [
+        "d3-dsv"
+      ]
+    },
+    "d3-force@3.0.0": {
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dependencies": [
+        "d3-dispatch",
+        "d3-quadtree",
+        "d3-timer"
+      ]
+    },
+    "d3-format@3.1.0": {
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA=="
+    },
+    "d3-geo@3.1.1": {
+      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
+      "dependencies": [
+        "d3-array@3.2.4"
+      ]
+    },
+    "d3-hierarchy@3.1.2": {
+      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA=="
+    },
+    "d3-interpolate@3.0.1": {
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": [
+        "d3-color"
+      ]
+    },
+    "d3-path@1.0.9": {
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
+    "d3-path@3.1.0": {
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ=="
+    },
+    "d3-polygon@3.0.1": {
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg=="
+    },
+    "d3-quadtree@3.0.1": {
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw=="
+    },
+    "d3-random@3.0.1": {
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ=="
+    },
+    "d3-sankey@0.12.3": {
+      "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+      "dependencies": [
+        "d3-array@2.12.1",
+        "d3-shape@1.3.7"
+      ]
+    },
+    "d3-scale-chromatic@3.1.0": {
+      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
+      "dependencies": [
+        "d3-color",
+        "d3-interpolate"
+      ]
+    },
+    "d3-scale@4.0.2": {
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": [
+        "d3-array@3.2.4",
+        "d3-format",
+        "d3-interpolate",
+        "d3-time",
+        "d3-time-format"
+      ]
+    },
+    "d3-selection@3.0.0": {
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-shape@1.3.7": {
+      "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+      "dependencies": [
+        "d3-path@1.0.9"
+      ]
+    },
+    "d3-shape@3.2.0": {
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": [
+        "d3-path@3.1.0"
+      ]
+    },
+    "d3-time-format@4.1.0": {
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": [
+        "d3-time"
+      ]
+    },
+    "d3-time@3.1.0": {
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": [
+        "d3-array@3.2.4"
+      ]
+    },
+    "d3-timer@3.0.1": {
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition@3.0.1_d3-selection@3.0.0": {
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dependencies": [
+        "d3-color",
+        "d3-dispatch",
+        "d3-ease",
+        "d3-interpolate",
+        "d3-selection",
+        "d3-timer"
+      ]
+    },
+    "d3-zoom@3.0.0_d3-selection@3.0.0": {
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dependencies": [
+        "d3-dispatch",
+        "d3-drag",
+        "d3-interpolate",
+        "d3-selection",
+        "d3-transition"
+      ]
+    },
+    "d3@7.9.0_d3-selection@3.0.0": {
+      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
+      "dependencies": [
+        "d3-array@3.2.4",
+        "d3-axis",
+        "d3-brush",
+        "d3-chord",
+        "d3-color",
+        "d3-contour",
+        "d3-delaunay",
+        "d3-dispatch",
+        "d3-drag",
+        "d3-dsv",
+        "d3-ease",
+        "d3-fetch",
+        "d3-force",
+        "d3-format",
+        "d3-geo",
+        "d3-hierarchy",
+        "d3-interpolate",
+        "d3-path@3.1.0",
+        "d3-polygon",
+        "d3-quadtree",
+        "d3-random",
+        "d3-scale",
+        "d3-scale-chromatic",
+        "d3-selection",
+        "d3-shape@3.2.0",
+        "d3-time",
+        "d3-time-format",
+        "d3-timer",
+        "d3-transition",
+        "d3-zoom"
+      ]
+    },
+    "dagre-d3-es@7.0.10": {
+      "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
+      "dependencies": [
+        "d3",
+        "lodash-es"
+      ]
+    },
+    "dayjs@1.11.18": {
+      "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA=="
+    },
+    "debug@4.4.1": {
+      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "dependencies": [
+        "ms"
+      ]
+    },
+    "decode-named-character-reference@1.2.0": {
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "dependencies": [
+        "character-entities"
+      ]
+    },
+    "delaunator@5.0.1": {
+      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
+      "dependencies": [
+        "robust-predicates"
+      ]
+    },
     "dequal@2.0.3": {
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
     },
···
         "dequal"
       ]
     },
+    "diff@5.2.0": {
+      "integrity": "sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A=="
+    },
+    "dompurify@3.2.7": {
+      "integrity": "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==",
+      "optionalDependencies": [
+        "@types/trusted-types"
+      ]
+    },
+    "elkjs@0.8.2": {
+      "integrity": "sha512-L6uRgvZTH+4OF5NE/MBbzQx/WYpru1xCBE9respNj6qznEewGUIfhzmm7horWWxbNO2M0WckQypGctR8lH79xQ=="
+    },
     "fast-glob@3.3.3": {
       "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
       "dependencies": [
···
       "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
       "dependencies": [
         "@types/hast",
-        "@types/unist",
+        "@types/unist@3.0.3",
         "ccount",
         "comma-separated-tokens",
         "hast-util-whitespace",
···
     "html-void-elements@3.0.0": {
       "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="
     },
+    "iconv-lite@0.6.3": {
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dependencies": [
+        "safer-buffer"
+      ]
+    },
+    "internmap@1.0.1": {
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
+    "internmap@2.0.3": {
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="
+    },
     "is-extglob@2.1.1": {
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
···
     "is-number@7.0.0": {
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
+    "khroma@2.1.0": {
+      "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+    },
+    "kleur@4.1.5": {
+      "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
+    },
+    "layout-base@1.0.2": {
+      "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
+    },
+    "layout-base@2.0.1": {
+      "integrity": "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="
+    },
+    "lodash-es@4.17.21": {
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lucide-preact@0.544.0_preact@10.27.1": {
       "integrity": "sha512-1OYqlRfxlQ6fQ8/e39kiY1btdKGCljwDmYKgF/GnB0ytVYV+PZE5EXmKdA3/Pknqs5A5QQKX+sK9TD7knUzwuw==",
       "dependencies": [
         "preact"
       ]
     },
+    "marked-highlight@2.2.2_marked@16.1.1": {
+      "integrity": "sha512-KlHOP31DatbtPPXPaI8nx1KTrG3EW0Z5zewCwpUj65swbtKOTStteK3sNAjBqV75Pgo3fNEVNHeptg18mDuWgw==",
+      "dependencies": [
+        "marked"
+      ]
+    },
+    "marked@16.1.1": {
+      "integrity": "sha512-ij/2lXfCRT71L6u0M29tJPhP0bM5shLL3u5BePhFwPELj2blMJ6GDtD7PfJhRLhJ/c2UwrK17ySVcDzy2YHjHQ==",
+      "bin": true
+    },
+    "mdast-util-from-markdown@1.3.1": {
+      "integrity": "sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==",
+      "dependencies": [
+        "@types/mdast@3.0.15",
+        "@types/unist@2.0.11",
+        "decode-named-character-reference",
+        "mdast-util-to-string",
+        "micromark",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-decode-string",
+        "micromark-util-normalize-identifier",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0",
+        "unist-util-stringify-position@3.0.3",
+        "uvu"
+      ]
+    },
     "mdast-util-to-hast@13.2.0": {
       "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
       "dependencies": [
         "@types/hast",
-        "@types/mdast",
+        "@types/mdast@4.0.4",
         "@ungap/structured-clone",
         "devlop",
-        "micromark-util-sanitize-uri",
+        "micromark-util-sanitize-uri@2.0.1",
         "trim-lines",
         "unist-util-position",
         "unist-util-visit",
         "vfile"
       ]
     },
+    "mdast-util-to-string@3.2.0": {
+      "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+      "dependencies": [
+        "@types/mdast@3.0.15"
+      ]
+    },
     "merge2@1.4.1": {
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
+    "mermaid@10.6.1_cytoscape@3.33.1": {
+      "integrity": "sha512-Hky0/RpOw/1il9X8AvzOEChfJtVvmXm+y7JML5C//ePYMy0/9jCEmW1E1g86x9oDfW9+iVEdTV/i+M6KWRNs4A==",
+      "dependencies": [
+        "@braintree/sanitize-url",
+        "@types/d3-scale",
+        "@types/d3-scale-chromatic",
+        "cytoscape",
+        "cytoscape-cose-bilkent",
+        "cytoscape-fcose",
+        "d3",
+        "d3-sankey",
+        "dagre-d3-es",
+        "dayjs",
+        "dompurify",
+        "elkjs",
+        "khroma",
+        "lodash-es",
+        "mdast-util-from-markdown",
+        "non-layered-tidy-tree-layout",
+        "stylis",
+        "ts-dedent",
+        "uuid",
+        "web-worker"
+      ]
+    },
+    "micromark-core-commonmark@1.1.0": {
+      "integrity": "sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==",
+      "dependencies": [
+        "decode-named-character-reference",
+        "micromark-factory-destination",
+        "micromark-factory-label",
+        "micromark-factory-space",
+        "micromark-factory-title",
+        "micromark-factory-whitespace",
+        "micromark-util-character@1.2.0",
+        "micromark-util-chunked",
+        "micromark-util-classify-character",
+        "micromark-util-html-tag-name",
+        "micromark-util-normalize-identifier",
+        "micromark-util-resolve-all",
+        "micromark-util-subtokenize",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0",
+        "uvu"
+      ]
+    },
+    "micromark-factory-destination@1.1.0": {
+      "integrity": "sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==",
+      "dependencies": [
+        "micromark-util-character@1.2.0",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-factory-label@1.1.0": {
+      "integrity": "sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==",
+      "dependencies": [
+        "micromark-util-character@1.2.0",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0",
+        "uvu"
+      ]
+    },
+    "micromark-factory-space@1.1.0": {
+      "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+      "dependencies": [
+        "micromark-util-character@1.2.0",
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-factory-title@1.1.0": {
+      "integrity": "sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==",
+      "dependencies": [
+        "micromark-factory-space",
+        "micromark-util-character@1.2.0",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-factory-whitespace@1.1.0": {
+      "integrity": "sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==",
+      "dependencies": [
+        "micromark-factory-space",
+        "micromark-util-character@1.2.0",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-util-character@1.2.0": {
+      "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+      "dependencies": [
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0"
+      ]
+    },
     "micromark-util-character@2.1.1": {
       "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
       "dependencies": [
-        "micromark-util-symbol",
-        "micromark-util-types"
+        "micromark-util-symbol@2.0.1",
+        "micromark-util-types@2.0.2"
+      ]
+    },
+    "micromark-util-chunked@1.1.0": {
+      "integrity": "sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==",
+      "dependencies": [
+        "micromark-util-symbol@1.1.0"
+      ]
+    },
+    "micromark-util-classify-character@1.1.0": {
+      "integrity": "sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==",
+      "dependencies": [
+        "micromark-util-character@1.2.0",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0"
       ]
     },
+    "micromark-util-combine-extensions@1.1.0": {
+      "integrity": "sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==",
+      "dependencies": [
+        "micromark-util-chunked",
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-util-decode-numeric-character-reference@1.1.0": {
+      "integrity": "sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==",
+      "dependencies": [
+        "micromark-util-symbol@1.1.0"
+      ]
+    },
+    "micromark-util-decode-string@1.1.0": {
+      "integrity": "sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==",
+      "dependencies": [
+        "decode-named-character-reference",
+        "micromark-util-character@1.2.0",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-symbol@1.1.0"
+      ]
+    },
+    "micromark-util-encode@1.1.0": {
+      "integrity": "sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw=="
+    },
     "micromark-util-encode@2.0.1": {
       "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="
     },
+    "micromark-util-html-tag-name@1.2.0": {
+      "integrity": "sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q=="
+    },
+    "micromark-util-normalize-identifier@1.1.0": {
+      "integrity": "sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==",
+      "dependencies": [
+        "micromark-util-symbol@1.1.0"
+      ]
+    },
+    "micromark-util-resolve-all@1.1.0": {
+      "integrity": "sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==",
+      "dependencies": [
+        "micromark-util-types@1.1.0"
+      ]
+    },
+    "micromark-util-sanitize-uri@1.2.0": {
+      "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
+      "dependencies": [
+        "micromark-util-character@1.2.0",
+        "micromark-util-encode@1.1.0",
+        "micromark-util-symbol@1.1.0"
+      ]
+    },
     "micromark-util-sanitize-uri@2.0.1": {
       "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
       "dependencies": [
-        "micromark-util-character",
-        "micromark-util-encode",
-        "micromark-util-symbol"
+        "micromark-util-character@2.1.1",
+        "micromark-util-encode@2.0.1",
+        "micromark-util-symbol@2.0.1"
+      ]
+    },
+    "micromark-util-subtokenize@1.1.0": {
+      "integrity": "sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==",
+      "dependencies": [
+        "micromark-util-chunked",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0",
+        "uvu"
       ]
     },
+    "micromark-util-symbol@1.1.0": {
+      "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag=="
+    },
     "micromark-util-symbol@2.0.1": {
       "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="
+    },
+    "micromark-util-types@1.1.0": {
+      "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg=="
     },
     "micromark-util-types@2.0.2": {
       "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="
     },
+    "micromark@3.2.0": {
+      "integrity": "sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==",
+      "dependencies": [
+        "@types/debug",
+        "debug",
+        "decode-named-character-reference",
+        "micromark-core-commonmark",
+        "micromark-factory-space",
+        "micromark-util-character@1.2.0",
+        "micromark-util-chunked",
+        "micromark-util-combine-extensions",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-encode@1.1.0",
+        "micromark-util-normalize-identifier",
+        "micromark-util-resolve-all",
+        "micromark-util-sanitize-uri@1.2.0",
+        "micromark-util-subtokenize",
+        "micromark-util-symbol@1.1.0",
+        "micromark-util-types@1.1.0",
+        "uvu"
+      ]
+    },
     "micromatch@4.0.8": {
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dependencies": [
···
       "dependencies": [
         "@isaacs/brace-expansion"
       ]
+    },
+    "mri@1.2.0": {
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA=="
+    },
+    "ms@2.1.3": {
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "non-layered-tidy-tree-layout@2.0.2": {
+      "integrity": "sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw=="
     },
     "oniguruma-parser@0.12.1": {
       "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="
···
     "reusify@1.1.0": {
       "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="
     },
+    "robust-predicates@3.0.2": {
+      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
+    },
     "run-parallel@1.2.0": {
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
       "dependencies": [
         "queue-microtask"
       ]
     },
+    "rw@1.3.3": {
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
+    },
+    "sade@1.8.1": {
+      "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+      "dependencies": [
+        "mri"
+      ]
+    },
+    "safer-buffer@2.1.2": {
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
     "shiki@3.13.0": {
       "integrity": "sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g==",
       "dependencies": [
···
         "character-entities-html4",
         "character-entities-legacy"
       ]
+    },
+    "stylis@4.3.6": {
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="
     },
     "tailwind-merge@2.6.0": {
       "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA=="
···
     "trim-lines@3.0.1": {
       "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
     },
+    "ts-dedent@2.2.0": {
+      "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ=="
+    },
     "ts-morph@26.0.0": {
       "integrity": "sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==",
       "dependencies": [
···
         "code-block-writer"
       ]
     },
+    "ts-pattern@5.0.5": {
+      "integrity": "sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA=="
+    },
+    "ts-pattern@5.8.0": {
+      "integrity": "sha512-kIjN2qmWiHnhgr5DAkAafF9fwb0T5OhMVSWrm8XEdTFnX6+wfXwYOFjeF86UZ54vduqiR7BfqScFmXSzSaH8oA=="
+    },
     "typed-html@3.0.1": {
       "integrity": "sha512-JKCM9zTfPDuPqQqdGZBWSEiItShliKkBFg5c6yOR8zth43v763XkAzTWaOlVqc0Y6p9ee8AaAbipGfUnCsYZUA=="
     },
···
     "unist-util-is@6.0.0": {
       "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
       "dependencies": [
-        "@types/unist"
+        "@types/unist@3.0.3"
       ]
     },
     "unist-util-position@5.0.0": {
       "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
       "dependencies": [
-        "@types/unist"
+        "@types/unist@3.0.3"
+      ]
+    },
+    "unist-util-stringify-position@3.0.3": {
+      "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
+      "dependencies": [
+        "@types/unist@2.0.11"
       ]
     },
     "unist-util-stringify-position@4.0.0": {
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
       "dependencies": [
-        "@types/unist"
+        "@types/unist@3.0.3"
       ]
     },
     "unist-util-visit-parents@6.0.1": {
       "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
       "dependencies": [
-        "@types/unist",
+        "@types/unist@3.0.3",
         "unist-util-is"
       ]
     },
     "unist-util-visit@5.0.0": {
       "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
       "dependencies": [
-        "@types/unist",
+        "@types/unist@3.0.3",
         "unist-util-is",
         "unist-util-visit-parents"
       ]
     },
+    "uuid@9.0.1": {
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==",
+      "bin": true
+    },
+    "uvu@0.5.6": {
+      "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+      "dependencies": [
+        "dequal",
+        "diff",
+        "kleur",
+        "sade"
+      ],
+      "bin": true
+    },
     "vfile-message@4.0.3": {
       "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
       "dependencies": [
-        "@types/unist",
-        "unist-util-stringify-position"
+        "@types/unist@3.0.3",
+        "unist-util-stringify-position@4.0.0"
       ]
     },
     "vfile@6.0.3": {
       "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
       "dependencies": [
-        "@types/unist",
+        "@types/unist@3.0.3",
         "vfile-message"
       ]
+    },
+    "web-worker@1.5.0": {
+      "integrity": "sha512-RiMReJrTAiA+mBjGONMnjVDP2u3p9R1vkcGz6gDIrOMT3oGuYwX2WRMYI9ipkphSuE5XKEhydbhNEJh4NY9mlw=="
     },
     "xtend@4.0.2": {
       "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="

docs/api-reference.md

···
 
 ## Base URL
 
-```
+```bash
 https://api.slices.network/xrpc/
 ```
 
···
 - `limit` (number, optional): Maximum records (default: 50)
 - `cursor` (string, optional): Pagination cursor
 - `where` (object, optional): Filter conditions using field-specific queries
-- `sortBy` (array, optional): Sort specification with field and direction objects
+- `sortBy` (array, optional): Sort specification with field and direction
+  objects
 
 ### `[collection].getRecord`
 
···
 
 **Response**:
 
-```json
+```json Code
 {
   "count": 150
 }
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "record": {
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "rkey": "3xyz789abc",
···
 
 **Body**:
 
-```json
+```json Code
 {
   "rkey": "3abc123xyz"
 }
···
 - `limit` (number, optional): Maximum records to return (default: 50)
 - `cursor` (string, optional): Pagination cursor
 - `where` (object, optional): Filter conditions using field-specific queries
-- `sortBy` (array, optional): Sort specification with field and direction objects
+- `sortBy` (array, optional): Sort specification with field and direction
+  objects
 
 **Response**:
 
-```json
+```json Code
 {
   "records": [
     {
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "record": {
···
 
 **Response**:
 
-```json
+```json Code
 {
   "uri": "at://did:plc:abc/network.slices.slice/xyz",
   "cid": "bafyrei..."
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri"
 }
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "collections": ["com.recordcollector.album", "com.recordcollector.review"],
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "collections": ["com.recordcollector.album", "com.recordcollector.review"],
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "records": [
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "collections": ["com.recordcollector.album", "com.recordcollector.review"],
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "records": [
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "timeoutSeconds": 30
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "reposProcessed": 1,
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "collections": ["com.recordcollector.album"],
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "jobId": "job-uuid",
···
 
 **Body**:
 
-```json
+```json Code
 {
   "target": "typescript",
   "slice": "at://your-slice-uri"
···
 
 **Response**:
 
-```json
+```json Code
 {
   "success": true,
   "generatedCode": "// Generated TypeScript client code..."
···
 
 **Response**:
 
-```json
+```json Code
 {
   "count": 10
 }
···
 
 **Body**:
 
-```json
+```json Code
 {
   "slice": "at://your-slice-uri",
   "record": {
···
 
 **Response**:
 
-```json
+```json Code
 {
   "actors": [
     {
···
 
 **Response**:
 
-```json
+```json Code
 {
   "blob": {
     "$type": "blob",
···
 
 All endpoints may return error responses:
 
-```json
+```json Code
 {
   "error": "InvalidRequest",
   "message": "Detailed error message"
···
 
 ## Filtering
 
-List endpoints support filtering using the `where` parameter with field-specific query operators:
+List endpoints support filtering using the `where` parameter with field-specific
+query operators:
 
 ### Filter Operators
 
···
 
 **Exact match filtering:**
 
-```json
+```json Code
 {
   "where": {
     "artist": { "eq": "Nirvana" },
···
 
 **Text search filtering:**
 
-```json
+```json Code
 {
   "where": {
     "title": { "contains": "nevermind" },
···
 
 **Array filtering:**
 
-```json
+```json Code
 {
   "where": {
     "condition": { "in": ["Mint", "Near Mint", "Very Good Plus"] },
···
 
 **Global search across all fields:**
 
-```json
+```json Code
 {
   "where": {
     "json": { "contains": "grunge" }
···
 
 Sort parameter uses an array format with field and direction:
 
-```json
+```json Code
 {
   "sortBy": [
     { "field": "releaseDate", "direction": "desc" },
···
 
 - `[{ "field": "releaseDate", "direction": "desc" }]` - Newest releases first
 - `[{ "field": "artist", "direction": "asc" }]` - Alphabetical by artist
-- `[{ "field": "releaseDate", "direction": "desc" }, { "field": "title", "direction": "asc" }]` - Newest first, then alphabetical by title
+- `[{ "field": "releaseDate", "direction": "desc" }, { "field": "title", "direction": "asc" }]` -
+  Newest first, then alphabetical by title
 
 ## Next Steps
 

docs/concepts.md

···
 
 ### Lexicon Structure
 
-```json
+```json Code
 {
   "lexicon": 1,
   "id": "com.recordcollector.album",
···
 ### Primary Collections
 
 Collections that match your slice's domain namespace. For example, if your slice
-domain is `com.recordcollector`, then `com.recordcollector.album` would be a primary collection.
+domain is `com.recordcollector`, then `com.recordcollector.album` would be a
+primary collection.
 
 ### External Collections
 
···
 
 ### Using Generated SDKs
 
-```typescript
+```typescript Code
 // Initialize client
 const client = new AtProtoClient(apiUrl, sliceUri, oauthClient);
 
···
 
 ### Blob Structure
 
-```json
+```json Code
 {
   "$type": "blob",
   "ref": { "$link": "bafkreig5bcb..." },
···
 
 Convert blob references to CDN URLs using Bluesky's CDN:
 
-```typescript
+```typescript Code
 recordBlobToCdnUrl(record, blobRef, "avatar");
 // -> https://cdn.bsky.app/img/avatar/plain/did:plc:abc/bafkrei...@jpeg
 ```

docs/getting-started.md

···
 
 This guide will help you set up Slices and create your first slice.
 
-## Prerequisites
-
-- Docker and Docker Compose
-- PostgreSQL (or use Docker)
-- Deno (for frontend)
-- Rust and Cargo (for API development)
-- An AT Protocol account (for OAuth)
-
-## Initial Setup
-
-### 1. Clone the Repository
-
-```bash
-git clone https://tangled.sh/@slices.network/slices
-cd slice
-```
-
-### 2. Set Up the Database
-
-Start PostgreSQL using Docker:
-
-```bash
-docker-compose up -d postgres
-```
-
-Or use an existing PostgreSQL instance and create a database:
-
-```sql
-CREATE DATABASE slices;
-```
-
-### 3. Configure Environment Variables
-
-Create `.env` files for both API and frontend:
-
-**API (`/api/.env`)**:
-
-```bash
-DATABASE_URL=postgres://user:password@localhost:5432/slices
-AUTH_BASE_URL=https://aip.your-domain.com
-PORT=3000
-```
-
-**Frontend (`/frontend/.env`)**:
-
-```bash
-OAUTH_CLIENT_ID=your-client-id
-OAUTH_CLIENT_SECRET=your-client-secret
-OAUTH_REDIRECT_URI=http://localhost:8000/oauth/callback
-OAUTH_AIP_BASE_URL=https://aip.your-domain.com
-SESSION_ENCRYPTION_KEY=your-32-char-key
-API_URL=http://localhost:3000
-SLICE_URI=at://did:plc:your-did/network.slices.slice/your-slice-id
-DATABASE_URL=slices.db
-```
-
-### 4. Register OAuth Client
-
-Register your application with the AIP server:
-
-```bash
-cd frontend
-./scripts/register-oauth-client.sh
-```
-
-Save the client ID and secret to your `.env` file.
-
-### 5. Start the Services
-
-Start the API server:
-
-```bash
-cd api
-cargo run
-```
-
-Start the frontend:
-
-```bash
-cd frontend
-deno task dev
-```
-
-Visit `http://localhost:8000` to access the web interface.
-
 ## Creating Your First Slice
 
 ### 1. Log In
···
 Navigate to your slice and go to the Lexicon tab. Create a lexicon for your
 first record type:
 
-```json
+```json Code
 {
   "lexicon": 1,
   "id": "com.recordcollector.album",
···
 
 In your application:
 
-```typescript
+```typescript Code
 import { AtProtoClient } from "./generated-client.ts";
 
 const client = new AtProtoClient(
···
 - [API Reference](./api-reference.md) - Explore available endpoints
 - [SDK Usage](./sdk-usage.md) - Advanced SDK patterns
 - [Examples](./examples/) - Sample applications
-
-## Troubleshooting
-
-### Database Connection Issues
-
-- Verify PostgreSQL is running: `docker ps`
-- Check DATABASE_URL format
-- Ensure database exists
-
-### OAuth Errors
-
-- Verify client ID and secret
-- Check redirect URI matches configuration
-- Ensure AIP server is accessible
-
-### Sync Not Working
-
-- Check user has necessary permissions
-- Verify lexicons are valid
-- Check API server logs for errors
-
-### Generated Client Issues
-
-- Regenerate client after lexicon changes
-- Ensure API server is running
-- Check for TypeScript compilation errors

docs/introduction.md

···
+# Introduction
+
+Slices is an open source platform for building structured data applications on
+the AT Protocol network.
+
+## What is Slices?
+
+Slices lets you define custom data schemas and build applications that store,
+query, and sync structured records across the decentralized AT Protocol network.
+Think of it as a schema-first backend that automatically handles data
+validation, indexing, and cross-network synchronization.
+
+## How Slices Works on AT Protocol
+
+```mermaid
+flowchart LR
+    Users[Users<br/>Create/Update Records] --> PDS[PDS Nodes<br/>Store user data]
+    PDS --> Firehose[Firehose<br/>Stream of all events]
+    Firehose --> SlicesNetwork[Slices Network - AppView<br/>• Monitors all AT Protocol data<br/>• Routes to relevant slices]
+    SlicesNetwork --> SliceA[Slice A<br/>• Blog lexicons<br/>• Post records<br/>• Comment queries]
+    SlicesNetwork --> SliceB[Slice B<br/>• Music lexicons<br/>• Album records<br/>• Playlist queries]
+    SliceA --> ClientA[Application<br/>Client<br/>• Read/write data]
+    SliceB --> ClientB[Application<br/>Client<br/>• Read/write data]
+```
+
+**Flow:**
+
+1. Users create records on their Personal Data Server (PDS)
+2. The Firehose streams all network events in real-time
+3. The Slices Network monitors the firehose and routes data to relevant slices
+4. Each slice indexes only records matching its specific lexicons
+5. Application clients connect to specific slices to read/write data
+
+## Quick Start
+
+Get started in under a minute:
+
+```bash
+# Initialize a new slice project
+deno run -A jsr:@slices/cli init
+
+# Follow the prompts to:
+# 1. Name your slice
+# 2. Define your first lexicon
+# 3. Deploy to the network
+```
+
+## Simple Example
+
+Define a schema for a blog post:
+
+```json lexicons/com/myblog/post.json
+{
+  "lexicon": 1,
+  "id": "com.myblog.post",
+  "defs": {
+    "main": {
+      "type": "record",
+      "record": {
+        "type": "object",
+        "required": ["title", "content", "createdAt"],
+        "properties": {
+          "title": { "type": "string", "maxLength": 200 },
+          "content": { "type": "string", "maxLength": 10000 },
+          "tags": { "type": "array", "items": { "type": "string" } },
+          "createdAt": { "type": "string", "format": "datetime" }
+        }
+      }
+    }
+  }
+}
+```
+
+Deploy your lexicon and generate the TypeScript client:
+
+```bash
+# Push your lexicon to the slice
+deno run -A jsr:@slices/cli lexicon push
+
+# Generate TypeScript SDK from your lexicons
+deno run -A jsr:@slices/cli codegen
+```
+
+Query your data using the auto-generated API:
+
+```typescript
+// Get all posts with a specific tag
+const posts = await client.com.myblog.post.getRecords({
+  slice: "at://your-slice-uri",
+  where: { tags: { contains: "javascript" } },
+  sortBy: [{ field: "createdAt", direction: "desc" }],
+});
+```
+
+## Key Features
+
+- **Schema Validation**: Define lexicons that enforce data structure and constraints
+- **Auto-generated APIs**: REST endpoints created automatically from your schemas
+- **TypeScript SDKs**: Type-safe clients generated from your lexicons
+- **Real-time Sync**: Automatic synchronization across the AT Protocol network
+- **Advanced Querying**: Filter, sort, and paginate records with a powerful query API
+- **OAuth Built-in**: Authentication with any AT Protocol account
+
+## When to Use Slices
+
+Slices is ideal for:
+
+- **Social Applications**: Build specialized communities, forums, or social features
+- **Content Platforms**: Create blogs, documentation sites, or media libraries
+- **SaaS Products**: Develop collaborative tools with structured data needs
+- **Web APIs**: Design REST APIs with automatic validation and documentation
+- **Decentralized Apps**: Build on AT Protocol without managing infrastructure
+
+## Next Steps
+
+- [Getting Started](./getting-started.md) - Set up your first slice
+- [Core Concepts](./concepts.md) - Understand lexicons and collections
+- [API Reference](./api-reference.md) - Explore the full API

docs/plugins.md

···
+# Plugins
+
+Enhance your Slices development workflow with plugins.
+
+## Lexicon IntelliSense
+
+A VS Code extension that provides real-time validation and IntelliSense support
+for AT Protocol lexicon files.
+
+[View on VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SlicesNetwork.lexicon-intellisense)
+
+### Features
+
+- **Real-time validation**: Validates lexicon files as you type using the
+  `@slices/lexicon` validator
+- **JSON Schema support**: Provides autocomplete and validation for lexicon
+  structure
+- **Cross-lexicon validation**: Validates references between lexicon files in
+  your workspace
+- **Error diagnostics**: Shows validation errors directly in the editor
+
+### Installation
+
+Install from the VS Code marketplace:
+
+1. Open VS Code Extensions (Cmd+Shift+X on Mac, Ctrl+Shift+X on Windows/Linux)
+2. Search for "Lexicon IntelliSense" by SlicesNetwork
+3. Click Install
+
+### Configuration
+
+Configure the extension in VS Code settings:
+
+```json .vscode/settings.json
+{
+  "lexiconIntelliSense.enableValidation": true,
+  "lexiconIntelliSense.lexiconDirectory": "lexicons"
+}
+```
+
+**Settings:**
+
+- `lexiconIntelliSense.enableValidation`: Enable/disable validation (default:
+  `true`)
+- `lexiconIntelliSense.lexiconDirectory`: Directory containing lexicon files
+  relative to workspace root (default: `"lexicons"`)
+
+### Commands
+
+Access these commands via the Command Palette (Cmd+Shift+P):
+
+- **Lexicon: Validate Current File** - Validates the currently open lexicon file
+- **Lexicon: Validate Workspace** - Validates all lexicon files in the workspace
+
+### Usage
+
+The extension automatically activates for:
+
+- JSON files in directories containing "lexicons" in the path
+- JSON files with lexicon structure (containing `id` and `defs` fields)
+
+It validates:
+
+- **Structure**: Required `id` and `defs` fields
+- **Types**: Correct definition types (record, query, procedure, subscription)
+- **References**: Resolvable references to other lexicons
+- **Formats**: String formats like datetime, uri, nsid, at-uri, did
+
+### Example
+
+When editing a lexicon file like `lexicons/com/example/post.json`:
+
+```json lexicons/com/example/post.json
+{
+  "lexicon": 1,
+  "id": "com.example.post",
+  "defs": {
+    "main": {
+      "type": "record",
+      "description": "A blog post",
+      "record": {
+        "type": "object",
+        "required": ["title", "content"],
+        "properties": {
+          "title": {
+            "type": "string",
+            "maxLength": 200
+          },
+          "content": {
+            "type": "string"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+The extension provides:
+
+- Autocomplete for property types and fields
+- Validation errors for missing required fields
+- Warnings for invalid references
+- IntelliSense for lexicon-specific properties

docs/sdk-usage.md

···
 After generating your TypeScript client, you can use it directly in your
 project:
 
-```typescript
+```typescript Code
 import { AtProtoClient } from "./generated_client.ts";
 import { OAuthClient } from "@slices/oauth";
 ```
···
 
 ### Without Authentication (Read-Only)
 
-```typescript
+```typescript Code
 const client = new AtProtoClient(
   "https://api.your-domain.com",
   "at://did:plc:abc/network.slices.slice/your-slice-rkey",
···
 
 ### With Authentication (Full Access)
 
-```typescript
+```typescript Code
 import { OAuthClient } from "@slices/oauth";
 
 // Set up OAuth client
···
 
 The SDK uses `getRecords` for retrieving records:
 
-```typescript
+```typescript Code
 // Get all vinyl records
 const albums = await client.com.recordcollector.album.getRecords();
 
···
 The `countRecords` method allows you to count records without fetching them,
 using the same filtering parameters as `getRecords`:
 
-```typescript
+```typescript Code
 // Count all records
 const total = await client.com.recordcollector.album.countRecords();
 console.log(`Total albums: ${total.count}`);
···
 
 ### Getting a Single Record
 
-```typescript
+```typescript Code
 const album = await client.com.recordcollector.album.getRecord({
   uri: "at://did:plc:abc/com.recordcollector.album/3jklmno456",
 });
···
 
 ### Creating Records
 
-```typescript
+```typescript Code
 // Create with auto-generated key
 const newAlbum = await client.com.recordcollector.album.createRecord({
   title: "In Utero",
···
 
 ### Updating Records
 
-```typescript
+```typescript Code
 // Get the record key from the URI
 const uri = "at://did:plc:abc/com.recordcollector.album/3jklmno456";
 const rkey = uri.split("/").pop(); // '3jklmno456'
···
 
 ### Deleting Records
 
-```typescript
+```typescript Code
 const rkey = "3jklmno456";
 await client.com.recordcollector.album.deleteRecord(rkey);
 ```
···
 
 Access synced external collections like Bluesky profiles:
 
-```typescript
+```typescript Code
 // Get Bluesky profiles in your slice
 const profiles = await client.app.bsky.actor.profile.getRecords();
 
···
 
 ### Uploading Blobs
 
-```typescript
+```typescript Code
 // Read file as ArrayBuffer
 const file = await Deno.readFile("./nevermind-cover.jpg");
 
···
 
 ### Converting Blobs to CDN URLs
 
-```typescript
+```typescript Code
 import { recordBlobToCdnUrl } from "./generated-client.ts";
 
 // Get a record with a blob
···
 
 ### Get Slice Statistics
 
-```typescript
+```typescript Code
 const stats = await client.network.slices.slice.stats({
   slice: "at://your-slice-uri",
 });
···
 The `getActors` method retrieves actors (users) within a slice with powerful
 filtering and sorting capabilities:
 
-```typescript
+```typescript Code
 // Get all actors in the slice
 const actors = await client.network.slices.slice.getActors();
 
···
 
 The `getSliceRecords` method uses the same `where` clause approach:
 
-```typescript
+```typescript Code
 // Get records from specific collections
 const records = await client.network.slices.slice.getSliceRecords({
   where: {
···
 
 Search within specific fields of your records:
 
-```typescript
+```typescript Code
 // Search in title field only
 const titleSearch = await client.com.recordcollector.album.getRecords({
   where: {
···
 
 Use the special `json` field to search across **all fields** in a record:
 
-```typescript
+```typescript Code
 // Finds records containing "grunge" anywhere in their data
 const globalSearch = await client.com.recordcollector.album.getRecords({
   where: {
···
 
 When using `getSliceRecords`, you can search across multiple collections:
 
-```typescript
+```typescript Code
 // Search for "seattle" across all collections
 const crossCollectionSearch = await client.network.slices.slice.getSliceRecords(
   {
···
 using the separate `orWhere` parameter. This provides clean type safety and
 autocomplete for field names:
 
-```typescript
+```typescript Code
 // Find albums by either Nirvana OR Alice in Chains
 const albums = await client.com.recordcollector.album.getRecords({
   orWhere: {
···
 
 ### Sync User Collections
 
-```typescript
+```typescript Code
 // Sync current user's data (requires auth)
 const syncResult = await client.network.slices.slice.syncUserCollections({
   timeoutSeconds: 30,
···
 
 ## Error Handling
 
-```typescript
+```typescript Code
 try {
   const post = await client.com.example.post.getRecord({
     uri: "at://invalid-uri",
···
 
 ### 1. Initialize OAuth
 
-```typescript
+```typescript Code
 const oauthClient = new OAuthClient({
   clientId: process.env.OAUTH_CLIENT_ID,
   clientSecret: process.env.OAUTH_CLIENT_SECRET,
···
 
 ### 2. Start Authorization
 
-```typescript
+```typescript Code
 const authResult = await oauthClient.authorize({
   loginHint: "user.bsky.social",
 });
···
 
 ### 3. Handle Callback
 
-```typescript
+```typescript Code
 // In your callback handler
 const urlParams = new URLSearchParams(window.location.search);
 const code = urlParams.get("code");
···
 
 ### 4. Use Authenticated Client
 
-```typescript
+```typescript Code
 const client = new AtProtoClient(apiUrl, sliceUri, oauthClient);
 
 // OAuth tokens are automatically managed
···
 
 The generated SDK provides full TypeScript type safety:
 
-```typescript
+```typescript Code
 // TypeScript knows the shape of your records
 const album = await client.com.recordcollector.album.getRecord({ uri });
 
···
 
 ### Batch Operations
 
-```typescript
+```typescript Code
 // Process records in batches
 async function* getAllAlbums() {
   let cursor: string | undefined;

docs/self-hosting.md

···
+# Self-Hosting Slices
+
+This guide covers how to set up and run your own Slices instance.
+
+## Prerequisites
+
+- Docker and Docker Compose
+- PostgreSQL (or use Docker)
+- Deno (for frontend)
+- Rust and Cargo (for API development)
+- An AT Protocol account (for OAuth)
+
+## Initial Setup
+
+### 1. Clone the Repository
+
+```bash
+git clone https://tangled.sh/@slices.network/slices
+cd slice
+```
+
+### 2. Set Up the Database
+
+Start PostgreSQL using Docker:
+
+```bash
+docker-compose up -d postgres
+```
+
+Or use an existing PostgreSQL instance and create a database:
+
+```sql
+CREATE DATABASE slices;
+```
+
+### 3. Configure Environment Variables
+
+Create `.env` files for both API and frontend:
+
+**API (`/api/.env`)**:
+
+```bash
+DATABASE_URL=postgres://user:password@localhost:5432/slices
+AUTH_BASE_URL=https://aip.your-domain.com
+PORT=3000
+```
+
+**Frontend (`/frontend/.env`)**:
+
+```bash
+OAUTH_CLIENT_ID=your-client-id
+OAUTH_CLIENT_SECRET=your-client-secret
+OAUTH_REDIRECT_URI=http://localhost:8000/oauth/callback
+OAUTH_AIP_BASE_URL=https://aip.your-domain.com
+SESSION_ENCRYPTION_KEY=your-32-char-key
+API_URL=http://localhost:3000
+SLICE_URI=at://did:plc:your-did/network.slices.slice/your-slice-id
+DATABASE_URL=slices.db
+```
+
+### 4. Register OAuth Client
+
+Register your application with the AIP server:
+
+```bash
+cd frontend
+./scripts/register-oauth-client.sh
+```
+
+Save the client ID and secret to your `.env` file.
+
+### 5. Start the Services
+
+Start the API server:
+
+```bash
+cd api
+cargo run
+```
+
+Start the frontend:
+
+```bash
+cd frontend
+deno task dev
+```
+
+Visit `http://localhost:8000` to access the web interface.

frontend/src/features/docs/handlers.tsx

···
 import { codeToHtml } from "jsr:@shikijs/shiki";
 import { DocsPage } from "./templates/DocsPage.tsx";
 import { DocsIndexPage } from "./templates/DocsIndexPage.tsx";
+import { render } from "preact-render-to-string";
+import { CodeBlock } from "./templates/fragments/CodeBlock.tsx";
+import { marked } from "npm:marked";
+import type { Tokens } from "npm:marked";
+import { markedHighlight } from "npm:marked-highlight";
 
-// List of available docs
-const AVAILABLE_DOCS = [
+// Categorized documentation structure
+const DOCS_CATEGORIES = [
   {
-    slug: "getting-started",
-    title: "Getting Started",
-    description: "Learn how to set up and use Slices",
+    category: "Getting Started",
+    docs: [
+      {
+        slug: "introduction",
+        title: "Introduction",
+        description: "Overview of Slices platform",
+      },
+      {
+        slug: "getting-started",
+        title: "Quick Start",
+        description: "Learn how to set up and use Slices",
+      },
+    ],
   },
   {
-    slug: "concepts",
-    title: "Core Concepts",
-    description: "Understand slices, lexicons, and collections",
+    category: "Core Concepts",
+    docs: [
+      {
+        slug: "concepts",
+        title: "Core Concepts",
+        description: "Understand slices, lexicons, and collections",
+      },
+    ],
   },
   {
-    slug: "api-reference",
-    title: "API Reference",
-    description: "Complete endpoint documentation",
+    category: "Reference",
+    docs: [
+      {
+        slug: "api-reference",
+        title: "API Reference",
+        description: "Complete endpoint documentation",
+      },
+      {
+        slug: "sdk-usage",
+        title: "SDK Usage",
+        description: "Advanced client patterns and examples",
+      },
+    ],
   },
   {
-    slug: "sdk-usage",
-    title: "SDK Usage",
-    description: "Advanced client patterns and examples",
+    category: "Extensions",
+    docs: [
+      {
+        slug: "plugins",
+        title: "Plugins",
+        description: "Extensions and tools for development",
+      },
+    ],
   },
 ];
+
+// Flatten for backward compatibility
+const AVAILABLE_DOCS = DOCS_CATEGORIES.flatMap(category => category.docs);
 
 const DOCS_PATH = Deno.env.get("DOCS_PATH") || "../docs";
 
···
   }
 }
 
-// Markdown to HTML converter with Shiki syntax highlighting
+// Extract headers for table of contents
+function extractHeaders(html: string) {
+  const headerRegex = /<h([1-6])[^>]*>(.*?)<\/h[1-6]>/g;
+  const headers: Array<{ level: number; text: string; id: string }> = [];
+
+  let match;
+  while ((match = headerRegex.exec(html)) !== null) {
+    const level = parseInt(match[1]);
+    const text = match[2].replace(/<[^>]+>/g, ""); // Strip HTML tags
+    const id = text
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "") // Remove special characters
+      .replace(/\s+/g, "-") // Replace spaces with hyphens
+      .trim();
+
+    headers.push({ level, text, id });
+  }
+
+  return headers;
+}
+
+// Markdown to HTML converter using marked with custom renderer and Shiki
 async function markdownToHtml(markdown: string): Promise<string> {
-  // First, extract and process code blocks with Shiki
-  const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
-  const codeBlocks: { placeholder: string; replacement: string }[] = [];
+  // Configure marked with highlight extension for code blocks
+  marked.use(
+    markedHighlight({
+      async: true,
+      async highlight(code, lang, info) {
+        // Parse filename from info string (e.g., "javascript filename.js")
+        const parts = (info || "").split(/\s+/);
+        const filename =
+          parts.length > 1 ? parts.slice(1).join(" ") : undefined;
+
+        // Handle Mermaid diagrams - client-side rendering
+        if (lang === "mermaid") {
+          return `
+          <div class="my-8 w-full overflow-x-auto">
+            <div class="mermaid w-full" style="font-size: 16px;">${code}</div>
+          </div>
+        `;
+        }
 
-  let html = markdown;
-  let blockIndex = 0;
-  let match;
-  while ((match = codeBlockRegex.exec(markdown)) !== null) {
-    const [fullMatch, lang, code] = match;
-    const placeholder = `__CODE_BLOCK_${blockIndex}__`;
+        const highlightedCode = await codeToHtml(code, {
+          lang: lang || "text",
+          themes: {
+            light: "github-light",
+            dark: "github-dark",
+          },
+        });
 
-    try {
-      const highlightedCode = await codeToHtml(code.trim(), {
-        lang: lang || "text",
-        themes: {
-          light: "github-light",
-          dark: "github-dark",
-        },
-      });
+        // Generate the complete code block using composition
+        if (filename) {
+          return render(
+            <CodeBlock>
+              <CodeBlock.Header>
+                <span>{filename}</span>
+                <CodeBlock.CopyButton />
+              </CodeBlock.Header>
+              <CodeBlock.Code highlightedCode={highlightedCode} />
+            </CodeBlock>
+          );
+        } else {
+          return render(<CodeBlock.Code highlightedCode={highlightedCode} />);
+        }
+      },
+      langPrefix: "language-",
+    })
+  );
+
+  // Configure marked with custom renderer
+  const renderer = new marked.Renderer();
+
+  // Custom inline code renderer
+  renderer.codespan = function (token: Tokens.Codespan) {
+    return `<code class="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono font-normal">${token.text}</code>`;
+  };
+
+  // Custom header renderer with IDs and styling
+  renderer.heading = function (token: Tokens.Heading) {
+    const text = this.parser.parseInline(token.tokens);
+    const level = token.depth;
+    const id = text
+      .toLowerCase()
+      .replace(/<[^>]+>/g, "") // Strip HTML tags
+      .replace(/[^\w\s-]/g, "") // Remove special characters
+      .replace(/\s+/g, "-") // Replace spaces with hyphens
+      .trim();
+
+    const styles = {
+      1: "text-2xl font-bold text-zinc-900 dark:text-white mt-10 mb-6",
+      2: "text-xl font-bold text-zinc-900 dark:text-white mt-10 mb-4",
+      3: "text-lg font-semibold text-zinc-900 dark:text-white mt-8 mb-4",
+      4: "text-base font-semibold text-zinc-900 dark:text-white mt-6 mb-3",
+      5: "text-sm font-semibold text-zinc-900 dark:text-white mt-4 mb-2",
+      6: "text-xs font-semibold text-zinc-900 dark:text-white mt-4 mb-2",
+    };
+
+    return `<h${level} id="${id}" class="${
+      styles[level as keyof typeof styles]
+    }">${text}</h${level}>`;
+  };
 
-      // Wrap in a container with proper styling
-      const styledCode =
-        `<div class="my-4 [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:text-sm">${highlightedCode}</div>`;
+  // Custom link renderer to handle .md links
+  renderer.link = function (token: Tokens.Link) {
+    let href = token.href;
+    const title = token.title;
+    const text = this.parser.parseInline(token.tokens);
 
-      codeBlocks.push({
-        placeholder,
-        replacement: styledCode,
-      });
-    } catch (error) {
-      // Fallback to simple code block if Shiki fails
-      console.warn("Shiki highlighting failed:", error);
-      const fallback =
-        `<pre class="bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-md p-4 overflow-x-auto my-4"><code class="text-sm text-zinc-900 dark:text-zinc-100">${code.trim()}</code></pre>`;
-      codeBlocks.push({
-        placeholder,
-        replacement: fallback,
-      });
+    // Convert relative .md links to docs routes
+    if (href.endsWith(".md") && !href.startsWith("http")) {
+      const slug = href.replace(/^\.\//, "").replace(/\.md$/, "");
+      href = `/docs/${slug}`;
     }
 
-    // Replace the code block with placeholder
-    html = html.replace(fullMatch, placeholder);
-    blockIndex++;
-  }
+    const titleAttr = title ? ` title="${title}"` : "";
+    return `<a href="${href}"${titleAttr} class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline">${text}</a>`;
+  };
 
-  // Process other markdown elements
-  html = html
-    // Headers with inline code (process these first to handle backticks in headers)
-    .replace(
-      /^#### `([^`]+)`$/gm,
-      '<h4 class="text-base font-semibold text-zinc-900 dark:text-white mt-6 mb-3"><code class="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-2 py-1 rounded text-sm font-mono font-normal">$1</code></h4>',
-    )
-    .replace(
-      /^### `([^`]+)`$/gm,
-      '<h3 class="text-lg font-semibold text-zinc-900 dark:text-white mt-8 mb-4"><code class="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h3>',
-    )
-    .replace(
-      /^## `([^`]+)`$/gm,
-      '<h2 class="text-xl font-bold text-zinc-900 dark:text-white mt-10 mb-4"><code class="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-2 py-1 rounded font-mono font-normal">$1</code></h2>',
-    )
-    // Regular headers (without backticks)
-    .replace(
-      /^#### (.*$)/gm,
-      '<h4 class="text-base font-semibold text-zinc-900 dark:text-white mt-6 mb-3">$1</h4>',
-    )
-    .replace(
-      /^### (.*$)/gm,
-      '<h3 class="text-lg font-semibold text-zinc-900 dark:text-white mt-8 mb-4">$1</h3>',
-    )
-    .replace(
-      /^## (.*$)/gm,
-      '<h2 class="text-xl font-bold text-zinc-900 dark:text-white mt-10 mb-4">$1</h2>',
-    )
-    .replace(
-      /^# (.*$)/gm,
-      '<h1 class="text-2xl font-bold text-zinc-900 dark:text-white mt-10 mb-6">$1</h1>',
-    )
-    // Inline code (for non-header text)
-    .replace(
-      /`([^`]+)`/g,
-      '<code class="bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 px-1.5 py-0.5 rounded text-sm font-mono font-normal">$1</code>',
-    )
-    // Bold
-    .replace(/\*\*(.*?)\*\*/g, '<strong class="font-semibold text-zinc-900 dark:text-white">$1</strong>')
-    // Lists (handle both - and * syntax, process before italic to avoid conflicts)
-    .replace(
-      /^[\-\*] (.*$)/gm,
-      '<li class="mb-1" data-type="unordered">$1</li>',
-    )
-    // Numbered lists
-    .replace(/^\d+\. (.*$)/gm, '<li class="mb-1" data-type="ordered">$1</li>')
-    // Italic (use word boundaries to avoid matching list items)
-    .replace(/(?<!\*)\*(?!\*)([^\*]+)\*(?!\*)/g, '<em class="italic">$1</em>')
-    // Links (convert .md links to docs routes)
-    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
-      // Convert relative .md links to docs routes
-      if (url.endsWith(".md") && !url.startsWith("http")) {
-        const slug = url.replace(/^\.\//, "").replace(/\.md$/, "");
-        return `<a href="/docs/${slug}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline">${text}</a>`;
-      }
-      return `<a href="${url}" class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-200 underline">${text}</a>`;
-    });
+  // Custom paragraph renderer
+  renderer.paragraph = function (token: Tokens.Paragraph) {
+    const text = this.parser.parseInline(token.tokens);
+    return `<p class="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300">${text}</p>`;
+  };
 
-  // Group consecutive list items into ul/ol elements
-  html = html.replace(
-    /(<li[^>]*data-type="unordered"[^>]*>.*?<\/li>\s*)+/gs,
-    (match) => {
-      const cleanedMatch = match.replace(/data-type="unordered"/g, "");
-      return `<ul class="list-disc list-inside my-4 text-zinc-700 dark:text-zinc-300">${cleanedMatch}</ul>`;
-    },
-  );
+  // Custom list renderers
+  renderer.list = function (token: Tokens.List) {
+    const ordered = token.ordered;
+    const body = token.items
+      .map((item: Tokens.ListItem) => {
+        const text = this.parser.parseInline(item.tokens);
+        return `<li class="mb-1">${text}</li>`;
+      })
+      .join("");
+    const tag = ordered ? "ol" : "ul";
+    const listStyle = ordered ? "list-decimal" : "list-disc";
+    return `<${tag} class="${listStyle} list-inside my-4 text-zinc-700 dark:text-zinc-300">${body}</${tag}>`;
+  };
 
-  html = html.replace(
-    /(<li[^>]*data-type="ordered"[^>]*>.*?<\/li>\s*)+/gs,
-    (match) => {
-      const cleanedMatch = match.replace(/data-type="ordered"/g, "");
-      return `<ol class="list-decimal list-inside my-4 text-zinc-700 dark:text-zinc-300">${cleanedMatch}</ol>`;
-    },
-  );
+  renderer.listitem = function (token: Tokens.ListItem) {
+    const text = this.parser.parseInline(token.tokens);
+    return `<li class="mb-1">${text}</li>`;
+  };
 
-  // Process paragraphs
-  html = html.split("\n\n")
-    .map((paragraph) => {
-      const trimmed = paragraph.trim();
-      if (!trimmed) return "";
-      if (trimmed.startsWith("<") || trimmed.startsWith("__CODE_BLOCK_")) {
-        return trimmed; // Already HTML or placeholder
-      }
-      return `<p class="mb-4 leading-relaxed text-zinc-700 dark:text-zinc-300">${trimmed}</p>`;
-    })
-    .join("\n");
+  // Custom strong/bold renderer
+  renderer.strong = function (token: Tokens.Strong) {
+    const text = this.parser.parseInline(token.tokens);
+    return `<strong class="font-semibold text-zinc-900 dark:text-white">${text}</strong>`;
+  };
+
+  // Custom emphasis/italic renderer
+  renderer.em = function (token: Tokens.Em) {
+    const text = this.parser.parseInline(token.tokens);
+    return `<em class="italic">${text}</em>`;
+  };
+
+  // Custom code block renderer - return content as-is since marked-highlight handles it
+  renderer.code = function (token: Tokens.Code) {
+    return token.text; // marked-highlight has already processed this
+  };
+
+  // Set options and use the custom renderer
+  marked.setOptions({
+    renderer: renderer,
+    gfm: true,
+    breaks: false, // This helps with multi-line list items
+    pedantic: false,
+  });
 
-  // Finally, restore code blocks from placeholders
-  for (const { placeholder, replacement } of codeBlocks) {
-    html = html.replace(placeholder, replacement);
-  }
+  // Parse markdown to HTML using marked (this handles multi-line list items properly)
+  const html = await marked.parse(markdown);
 
   return html;
 }
···
 async function handleDocsIndex(request: Request): Promise<Response> {
   const { currentUser } = await withAuth(request);
   return renderHTML(
-    <DocsIndexPage
-      docs={AVAILABLE_DOCS}
-      currentUser={currentUser}
-    />,
+    <DocsIndexPage docs={AVAILABLE_DOCS} categories={DOCS_CATEGORIES} currentUser={currentUser} />
   );
 }
 
···
   // Convert to HTML with Shiki syntax highlighting
   const htmlContent = await markdownToHtml(markdownContent);
 
+  // Extract headers for table of contents
+  const headers = extractHeaders(htmlContent);
+
   return renderHTML(
     <DocsPage
       title={docInfo.title}
       content={htmlContent}
+      headers={headers}
       docs={AVAILABLE_DOCS}
+      categories={DOCS_CATEGORIES}
       currentSlug={slug}
       currentUser={currentUser}
-    />,
+    />
   );
 }
 

frontend/src/features/docs/templates/DocsIndexPage.tsx

···
 import type { AuthenticatedUser } from "../../../routes/middleware.ts";
 import { Layout } from "../../../shared/fragments/Layout.tsx";
-import { Card } from "../../../shared/fragments/Card.tsx";
 import { Text } from "../../../shared/fragments/Text.tsx";
 
 interface DocItem {
···
   description: string;
 }
 
+interface DocCategory {
+  category: string;
+  docs: DocItem[];
+}
+
 interface DocsIndexPageProps {
   docs: DocItem[];
+  categories: DocCategory[];
   currentUser?: AuthenticatedUser;
 }
 
-export function DocsIndexPage({ docs, currentUser }: DocsIndexPageProps) {
+export function DocsIndexPage({ docs, categories, currentUser }: DocsIndexPageProps) {
   return (
     <Layout title="Documentation - Slices" currentUser={currentUser}>
-      <div className="py-8 px-4">
-        <div className="mb-8">
-          <Text as="h1" size="3xl" className="font-bold mb-2">
-            Documentation
+      <div className="py-8 px-4 max-w-6xl mx-auto">
+        <div className="mb-12">
+          <Text as="h1" size="3xl" className="font-bold mb-4">
+            Slices Documentation
           </Text>
-          <Text as="p" variant="secondary">
-            Learn how to build AT Protocol applications with Slices
+          <Text as="p" size="lg" variant="secondary" className="leading-relaxed">
+            Learn how to build AT Protocol applications with Slices. These guides cover everything from basic concepts to advanced usage patterns.
           </Text>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {docs.map((doc) => (
-            <a
-              key={doc.slug}
-              href={`/docs/${doc.slug}`}
-              className="block"
-            >
-              <Card padding="md" variant="hover">
-                <Text as="h2" size="xl" className="font-semibold mb-2">
-                  {doc.title}
-                </Text>
-                <Text as="p" variant="secondary">
-                  {doc.description}
-                </Text>
-              </Card>
-            </a>
+        <div className="space-y-16">
+          {categories.map((category) => (
+            <section key={category.category}>
+              <Text as="h2" size="2xl" className="font-bold mb-8 text-zinc-900 dark:text-white">
+                {category.category}
+              </Text>
+              <div className="space-y-6">
+                {category.docs.map((doc) => (
+                  <div key={doc.slug} className="border-b border-zinc-200 dark:border-zinc-700 pb-6">
+                    <a
+                      href={`/docs/${doc.slug}`}
+                      className="block group hover:no-underline"
+                    >
+                      <Text as="h3" size="lg" className="font-semibold mb-3 text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors underline decoration-blue-600 dark:decoration-blue-400">
+                        {doc.title}
+                      </Text>
+                      <Text as="p" variant="secondary" className="leading-relaxed text-base">
+                        {doc.description}
+                      </Text>
+                    </a>
+                  </div>
+                ))}
+              </div>
+            </section>
           ))}
         </div>
+
       </div>
     </Layout>
   );
-}
+}

frontend/src/features/docs/templates/DocsPage.tsx

···
 import type { AuthenticatedUser } from "../../../routes/middleware.ts";
 import { Layout } from "../../../shared/fragments/Layout.tsx";
 import { Text } from "../../../shared/fragments/Text.tsx";
+import { Breadcrumb } from "../../../shared/fragments/Breadcrumb.tsx";
 
 interface DocItem {
   slug: string;
···
   description: string;
 }
 
+interface DocCategory {
+  category: string;
+  docs: DocItem[];
+}
+
+interface HeaderItem {
+  level: number;
+  text: string;
+  id: string;
+}
+
 interface DocsPageProps {
   title: string;
   content: string;
+  headers: HeaderItem[];
   docs: DocItem[];
+  categories: DocCategory[];
   currentSlug: string;
   currentUser?: AuthenticatedUser;
 }
 
-export function DocsPage(
-  { title, content, docs, currentSlug, currentUser }: DocsPageProps,
-) {
+export function DocsPage({
+  title,
+  content,
+  headers,
+  docs,
+  categories,
+  currentSlug,
+  currentUser,
+}: DocsPageProps) {
   return (
-    <Layout title={`${title} - Slices`} currentUser={currentUser}>
-      <div className="py-4 sm:py-8 px-4">
-        {/* Mobile navigation dropdown */}
-        <div className="sm:hidden mb-6">
-          <label
-            htmlFor="docs-nav"
-            className="block text-sm font-medium text-zinc-700 dark:text-zinc-300 mb-2"
-          >
-            Navigate to
-          </label>
-          <select
-            id="docs-nav"
-            className="block w-full px-3 py-2 text-base border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent"
-            value={currentSlug}
-            /* @ts-ignore - Hyperscript attribute */
-            _="on change set window.location to `/docs/${me.value}`"
-          >
-            {docs.map((doc) => (
-              <option
-                key={doc.slug}
-                value={doc.slug}
-                selected={doc.slug === currentSlug}
-              >
-                {doc.title}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        <div className="flex gap-8">
-          {/* Desktop Sidebar */}
-          <nav className="hidden sm:block w-64 flex-shrink-0">
-            <div className="sticky sm:top-[5rem]">
-              <Text as="h2" size="sm" className="font-semibold mb-4">
-                Documentation
-              </Text>
-              <ul className="space-y-1">
-                {docs.map((doc) => (
-                  <li key={doc.slug}>
-                    <a
-                      href={`/docs/${doc.slug}`}
-                      className={`block px-3 py-2 text-sm rounded-md transition-colors ${
-                        doc.slug === currentSlug
-                          ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-white font-medium"
-                          : "text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-50 dark:hover:bg-zinc-800"
-                      }`}
-                    >
-                      {doc.title}
-                    </a>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </nav>
+    <Layout
+      title={`${title} - Slices`}
+      currentUser={currentUser}
+    >
+      <div className="py-8 px-4 max-w-6xl mx-auto relative">
+        {/* Breadcrumb */}
+        <Breadcrumb
+          items={[
+            { label: "Documentation", href: "/docs" },
+            { label: title }
+          ]}
+        />
 
-          {/* Content */}
-          <main className="flex-1 min-w-0 overflow-x-hidden">
-            <article className="prose prose-zinc dark:prose-invert max-w-none prose-sm sm:prose-base">
+        {/* Two-column layout */}
+        <div className="flex gap-12">
+          {/* Main Content */}
+          <main className="flex-1 min-w-0">
+            <article className="prose prose-zinc dark:prose-invert max-w-none">
               <div
-                className="docs-content [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_pre]:border [&_pre]:border-zinc-200 dark:[&_pre]:border-zinc-700 [&_pre]:rounded-md [&_pre>code]:border-0 [&_:not(pre)>code]:border [&_:not(pre)>code]:border-zinc-200 dark:[&_:not(pre)>code]:border-zinc-700 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:px-1"
+                className="docs-content [&_pre]:overflow-x-auto [&_pre]:max-w-full [&_pre]:border [&_pre]:border-zinc-200 dark:[&_pre]:border-zinc-700 [&_pre]:rounded-lg [&_pre>code]:border-0 [&_:not(pre)>code]:bg-zinc-100 dark:[&_:not(pre)>code]:bg-zinc-800 [&_:not(pre)>code]:px-1.5 [&_:not(pre)>code]:py-0.5 [&_:not(pre)>code]:rounded [&_:not(pre)>code]:text-sm"
                 dangerouslySetInnerHTML={{ __html: content }}
               />
             </article>
           </main>
+
+          {/* Right Sidebar - Table of Contents */}
+          {headers.length > 0 && (
+            <aside className="hidden lg:flex w-64 flex-shrink-0 relative">
+              <div className="sticky top-1/2 -translate-y-1/2 w-64 max-h-[60vh] overflow-y-auto bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-700 rounded-lg p-4 shadow-sm">
+                <Text as="h3" size="sm" className="font-semibold mb-4 text-zinc-900 dark:text-white">
+                  On This Page
+                </Text>
+                <nav>
+                  <ul className="space-y-1 text-sm" id="toc-nav">
+                    {headers.map((header) => (
+                      <li key={header.id}>
+                        <a
+                          href={`#${header.id}`}
+                          data-target={header.id}
+                          /* @ts-ignore - Hyperscript attribute */
+                          _="on click call updateActiveTocLink(me) then on load call updateActiveTocOnScroll()"
+                          className={`block py-1.5 px-3 -mx-3 rounded-md transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800/50 ${
+                            header.level === 1
+                              ? "text-zinc-900 dark:text-white font-medium"
+                              : header.level === 2
+                              ? "text-zinc-700 dark:text-zinc-300"
+                              : "text-zinc-600 dark:text-zinc-400 ml-2"
+                          } [&.active]:bg-blue-50 dark:[&.active]:bg-blue-950/50 [&.active]:text-blue-600 dark:[&.active]:text-blue-400`}
+                        >
+                          {header.text}
+                        </a>
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </div>
+            </aside>
+          )}
         </div>
       </div>
+
+      {/* Add scroll tracking script */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            function updateActiveTocLink(clickedLink) {
+              // Remove active from all TOC links
+              document.querySelectorAll('#toc-nav a').forEach(link => {
+                link.classList.remove('active');
+              });
+              // Add active to clicked link
+              clickedLink.classList.add('active');
+            }
+
+            function updateActiveTocOnScroll() {
+              const headers = Array.from(document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]'));
+              const tocLinks = document.querySelectorAll('#toc-nav a[data-target]');
+
+              function updateActiveHeader() {
+                let activeHeader = null;
+
+                // Find the header that's currently in view
+                for (let i = headers.length - 1; i >= 0; i--) {
+                  const header = headers[i];
+                  const rect = header.getBoundingClientRect();
+
+                  // If header is above the top quarter of the viewport, it's the active one
+                  if (rect.top <= window.innerHeight / 4) {
+                    activeHeader = header;
+                    break;
+                  }
+                }
+
+                // Update TOC links
+                tocLinks.forEach(link => {
+                  link.classList.remove('active');
+                  if (activeHeader && link.dataset.target === activeHeader.id) {
+                    link.classList.add('active');
+
+                    // Scroll the active link into view within the TOC container
+                    const tocNav = document.querySelector('#toc-nav');
+                    const tocContainer = tocNav.closest('.overflow-y-auto');
+
+                    if (tocContainer && tocContainer.scrollHeight > tocContainer.clientHeight) {
+                      // Get the position of the active link relative to the scrollable container
+                      const containerRect = tocContainer.getBoundingClientRect();
+                      const linkRect = link.getBoundingClientRect();
+
+                      const isAbove = linkRect.top < containerRect.top + 40; // 40px buffer from top
+                      const isBelow = linkRect.bottom > containerRect.bottom - 40; // 40px buffer from bottom
+
+                      if (isAbove || isBelow) {
+                        // Calculate scroll position to center the link
+                        const linkOffsetTop = link.offsetTop;
+                        const containerHeight = tocContainer.clientHeight;
+                        const targetScrollTop = linkOffsetTop - (containerHeight / 2);
+
+                        tocContainer.scrollTo({
+                          top: Math.max(0, targetScrollTop),
+                          behavior: 'smooth'
+                        });
+                      }
+                    }
+                  }
+                });
+              }
+
+              // Update on scroll
+              window.addEventListener('scroll', updateActiveHeader);
+
+              // Update on page load
+              updateActiveHeader();
+            }
+
+            // Initialize scroll tracking when page loads
+            document.addEventListener('DOMContentLoaded', updateActiveTocOnScroll);
+          `,
+        }}
+      />
     </Layout>
   );
 }

frontend/src/features/docs/templates/fragments/CodeBlock.tsx

···
+import { Copy } from "lucide-preact";
+import { ComponentChildren, VNode, FunctionComponent } from "preact";
+
+interface CodeBlockProps {
+  children: ComponentChildren;
+}
+
+interface CodeBlockHeaderProps {
+  children: ComponentChildren;
+}
+
+interface CodeBlockCodeProps {
+  highlightedCode: string;
+}
+
+// No props needed for CopyButton, it finds the code automatically
+
+function CodeBlockRoot({ children }: CodeBlockProps) {
+  // Check if there's a header in the children
+  const childrenArray = Array.isArray(children) ? children : [children];
+
+  const hasHeader = childrenArray.some((child) => {
+    const vnode = child as VNode;
+    const component = vnode?.type as FunctionComponent;
+    return (
+      component === CodeBlockHeader || component?.name === "CodeBlockHeader"
+    );
+  });
+
+  // Clone children and pass hasHeader context to CodeBlockCode components
+  const enhancedChildren = childrenArray.map((child) => {
+    const vnode = child as VNode;
+    const component = vnode?.type as FunctionComponent;
+
+    if (component === CodeBlockCode || component?.name === "CodeBlockCode") {
+      return {
+        ...vnode,
+        props: {
+          ...vnode.props,
+          _hasHeader: hasHeader,
+        },
+      };
+    }
+    return child;
+  });
+
+  return (
+    <div class="my-4 border border-zinc-200 dark:border-zinc-700 rounded-md">
+      {enhancedChildren}
+    </div>
+  );
+}
+
+function CodeBlockHeader({ children }: CodeBlockHeaderProps) {
+  return (
+    <div class="bg-zinc-100 dark:bg-zinc-800 border-b border-zinc-200 dark:border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 rounded-t-md font-mono flex justify-between items-center">
+      {children}
+    </div>
+  );
+}
+
+function CodeBlockCopyButton() {
+  return (
+    <button
+      type="button"
+      // @ts-ignore Hyperscript attribute
+      _="on click writeText(the textContent of the first <pre/> in the nextElementSibling of my parentElement) to the navigator's clipboard"
+      class="text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200 p-1 rounded transition-colors"
+      title="Copy code"
+    >
+      <Copy size={16} />
+    </button>
+  );
+}
+
+function CodeBlockCode({
+  highlightedCode,
+  _hasHeader,
+}: CodeBlockCodeProps & { _hasHeader?: boolean }) {
+  const className = _hasHeader
+    ? "[&_pre]:pt-4 [&_pre]:pb-4 [&_pre]:px-4 [&_pre]:rounded-none [&_pre]:rounded-b-md [&_pre]:overflow-x-auto [&_pre]:text-sm [&_pre]:border-0"
+    : "my-4 [&_pre]:p-4 [&_pre]:rounded-md [&_pre]:overflow-x-auto [&_pre]:text-sm";
+
+  return (
+    <div
+      class={className}
+      dangerouslySetInnerHTML={{ __html: highlightedCode }}
+    />
+  );
+}
+
+export const CodeBlock = Object.assign(CodeBlockRoot, {
+  Header: CodeBlockHeader,
+  Code: CodeBlockCode,
+  CopyButton: CodeBlockCopyButton,
+});

frontend/src/shared/fragments/Layout.tsx

···
         <script src="https://unpkg.com/hyperscript.org@0.9.12"></script>
         <script src="https://cdn.tailwindcss.com/3.4.1"></script>
         <script src="https://unpkg.com/lucide@latest"></script>
+        <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
         {Deno.env.get("DENO_ENV") === "production" && (
-          <script data-goatcounter="https://slices.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
+          <script
+            data-goatcounter="https://slices.goatcounter.com/count"
+            async
+            src="//gc.zgo.at/count.js"
+          ></script>
         )}
         <style
           dangerouslySetInnerHTML={{
             __html: `
+          /* Scroll padding for anchor links to account for sticky navigation */
+          html {
+            scroll-padding-top: 5rem;
+          }
 
           .htmx-indicator {
             display: none;
···
           }
 
           /* Shiki dual theme support */
+          .shiki {
+            background-color: #fafafa !important; /* zinc-50 */
+          }
+
           @media (prefers-color-scheme: dark) {
             .shiki,
             .shiki span {
···
         `,
           }}
         />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+          let isClickScrolling = false;
+
+          function updateActiveTocLink(clickedLink) {
+            // Remove active class from all TOC links
+            const tocLinks = document.querySelectorAll('#toc-nav a');
+            tocLinks.forEach(link => link.classList.remove('active'));
+
+            // Add active class to clicked link
+            clickedLink.classList.add('active');
+
+            // Prevent scroll observer from interfering for a short time
+            isClickScrolling = true;
+            setTimeout(() => {
+              isClickScrolling = false;
+            }, 1000);
+          }
+
+          // Set up scroll tracking when page loads
+          document.addEventListener('DOMContentLoaded', function() {
+            const tocNav = document.querySelector('#toc-nav');
+            if (!tocNav) return;
+
+            function updateActiveHeaderOnScroll() {
+              if (isClickScrolling) return; // Don't update if user just clicked
+
+              const headers = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]');
+              let activeHeader = null;
+
+              // Find the header that's currently most prominent in the viewport
+              for (const header of headers) {
+                const rect = header.getBoundingClientRect();
+                // If header is above the fold but close to top, or visible in upper part of viewport
+                if (rect.top <= 150) {
+                  activeHeader = header;
+                } else {
+                  break; // Stop at the first header that's too far down
+                }
+              }
+
+              if (activeHeader) {
+                const tocLinks = document.querySelectorAll('#toc-nav a');
+                tocLinks.forEach(link => link.classList.remove('active'));
+                const activeLink = document.querySelector('#toc-nav a[data-target="' + activeHeader.id + '"]');
+                if (activeLink) activeLink.classList.add('active');
+              }
+            }
+
+            // Listen to scroll events
+            window.addEventListener('scroll', updateActiveHeaderOnScroll, { passive: true });
+
+            // Set initial active header
+            setTimeout(updateActiveHeaderOnScroll, 100);
+          });
+
+          // Initialize Mermaid diagrams with theme support
+          if (typeof mermaid !== 'undefined') {
+            // Detect if dark mode is preferred
+            const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+            if (isDarkMode) {
+              mermaid.initialize({
+                startOnLoad: true,
+                theme: 'dark',
+                themeVariables: {
+                  primaryColor: '#3b82f6',
+                  primaryTextColor: '#f9fafb',
+                  primaryBorderColor: '#6b7280',
+                  lineColor: '#9ca3af',
+                  secondaryColor: '#374151',
+                  tertiaryColor: '#1f2937',
+                  background: '#111827',
+                  mainBkg: '#1f2937',
+                  secondBkg: '#374151',
+                  tertiaryBkg: '#3b82f6'
+                }
+              });
+            } else {
+              mermaid.initialize({
+                startOnLoad: true,
+                theme: 'default',
+                themeVariables: {
+                  primaryColor: '#3b82f6',
+                  primaryTextColor: '#1f2937',
+                  primaryBorderColor: '#6b7280',
+                  lineColor: '#6b7280',
+                  secondaryColor: '#f3f4f6',
+                  tertiaryColor: '#f9fafb',
+                  background: '#ffffff',
+                  mainBkg: '#f9fafb',
+                  secondBkg: '#f3f4f6',
+                  tertiaryBkg: '#dbeafe'
+                }
+              });
+            }
+          }
+
+        `,
+          }}
+        />
       </head>
       <body className="min-h-screen bg-white dark:bg-zinc-900 dark:text-white">
         {showNavigation && <Navigation currentUser={currentUser} />}
···
             <footer className="bg-white dark:bg-zinc-900 py-6 px-6">
               <div className="flex items-center justify-center gap-4 opacity-20 hover:opacity-100 transition-opacity duration-300">
                 <Text variant="secondary" size="sm">
-                  {new Date().getFullYear()} Slices Network. All rights reserved.
+                  {new Date().getFullYear()} Slices Network. All rights
+                  reserved.
                 </Text>
                 {currentUser?.isAuthenticated && (
                   <>

frontend/src/shared/fragments/Text.tsx

···
   | "h5"
   | "h6"
   | "dt"
-  | "dd";
+  | "dd"
+  | "strong";
 
 interface TextProps {
   variant?: TextVariant;
···
     className
   );
 
-  return (
-    <Component className={classes}>
-      {children}
-    </Component>
-  );
+  return <Component className={classes}>{children}</Component>;
 }