repomix-output.xml

This file is a merged representation of the entire codebase, combined into a single document by Repomix.

<file_summary>
This section contains a summary of this file.

<purpose>
This file contains a packed representation of the entire repository's contents.
It is designed to be easily consumable by AI systems for analysis, code review,
or other automated processes.
</purpose>

<file_format>
The content is organized as follows:
1. This summary section
2. Repository information
3. Directory structure
4. Repository files (if enabled)
5. Multiple file entries, each consisting of:
  - File path as an attribute
  - Full contents of the file
</file_format>

<usage_guidelines>
- This file should be treated as read-only. Any changes should be made to the
  original repository files, not this packed version.
- When processing this file, use the file path to distinguish
  between different files in the repository.
- Be aware that this file may contain sensitive information. Handle it with
  the same level of security as you would the original repository.
</usage_guidelines>

<notes>
- Some files may have been excluded based on .gitignore rules and Repomix's configuration
- Binary files are not included in this packed representation. Please refer to the Repository Structure section for a complete list of file paths, including binary files
- Files matching patterns in .gitignore are excluded
- Files matching default ignore patterns are excluded
- Files are sorted by Git change count (files with more changes are at the bottom)
</notes>

</file_summary>

<directory_structure>
public/
  favicon.ico
  logo192.png
  logo512.png
  manifest.json
  robots.txt
  tanstack-circle-logo.png
  tanstack-word-logo-white.svg
src/
  components/
    Header.tsx
  data/
    demo.punk-songs.ts
  lib/
    utils.ts
  routes/
    demo/
      api.names.ts
      start.api-request.tsx
      start.server-funcs.tsx
      start.ssr.data-only.tsx
      start.ssr.full-ssr.tsx
      start.ssr.index.tsx
      start.ssr.spa-mode.tsx
    __root.tsx
    index.tsx
  logo.svg
  router.tsx
  styles.css
.cta.json
.cursorrules
.gitignore
components.json
package.json
README.md
tsconfig.json
vite.config.ts
</directory_structure>

<files>
This section contains the contents of the repository's files.

<file path="public/manifest.json">
{
  "short_name": "TanStack App",
  "name": "Create TanStack App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
</file>

<file path="public/robots.txt">
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:
</file>

<file path="public/tanstack-word-logo-white.svg">
<svg height="660" viewBox="0 0 3178 660" width="3178" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(.9778)"><g transform="translate(740.0222 38)"><path d="m101.695801 467h101.445312v-264.858398h90.917969v-80.390625h-283.28125v80.390625h90.917969z"/><path d="m241.544434 467h106.708984l68.666992-262.944336h33.017578v-82.304687h-95.703125zm70.820312-68.666992h211.025391l-21.054688-71.538086h-168.916015zm175.136719 68.666992h106.708984l-112.690429-345.249023h-62.685547v82.304687z"/><path d="m600.313965 467h101.445312v-179.443359h41.391602l-66.274414-38.759766 149.536133 218.203125h83.500976v-345.249023h-101.445312v176.572265h-41.391602l66.513672 38.759766-148.818359-215.332031h-84.458008z"/><path d="m1072.01318 473.220703c31.74154 0 58.85743-4.74528 81.34766-14.23584s39.67692-22.96875 51.56006-40.43457 17.82471-38.081869 17.82471-61.848145v-.239257c0-18.66211-3.94776-34.572754-11.84327-47.731934-7.8955-13.15918-19.89827-23.965658-36.0083-32.419434-16.11002-8.453776-36.52669-14.913737-61.25-19.379882l-34.69238-6.220703c-17.22656-3.190105-29.74772-6.898601-37.56348-11.125489-7.81575-4.226888-11.72363-10.248209-11.72363-18.063965v-.239257c0-5.263672 1.59505-10.008952 4.78516-14.23584 3.1901-4.226888 7.93538-7.576498 14.23584-10.048828 6.30045-2.472331 14.07633-3.708497 23.32763-3.708497 9.25131 0 17.5057 1.276042 24.76319 3.828126 7.25748 2.552083 13.07942 6.101074 17.46582 10.646972 4.38639 4.545899 6.8986 10.008952 7.53662 16.38916l.23926 2.392578h93.31054l-.23925-5.263671c-.95704-21.533204-7.01823-40.235189-18.1836-56.105957-11.16536-15.870769-27.27539-28.112793-48.33008-36.726075-21.05468-8.613281-46.97428-12.919922-77.75879-12.919922-27.27539 0-51.59993 4.625651-72.973628 13.876954-21.373698 9.251302-38.161621 22.330729-50.36377 39.238281-12.202148 16.907552-18.303222 36.925456-18.303222 60.053711v.239258c0 26.796875 9.131673 48.728841 27.395019 65.795898s44.541831 28.631185 78.835451 34.692383l34.69238 6.220703c19.14063 3.509115 32.61882 7.33724 40.43457 11.484375 7.81576 4.147135 11.72363 10.288086 11.72363 18.422852v.239257c0 5.742188-1.99381 10.846354-5.98144 15.3125s-9.61019 7.975261-16.86768 10.527344c-7.25748 2.552083-15.99039 3.828125-26.19873 3.828125-9.57031 0-18.3431-1.315918-26.31836-3.947754s-14.59472-6.260579-19.8584-10.88623c-5.26367-4.625651-8.61328-10.048828-10.04882-16.269532l-.47852-2.15332h-93.310546l.239258 4.545899c1.276042 22.649739 8.015137 41.909993 20.217285 57.780761 12.202149 15.870769 29.189453 27.953288 50.961914 36.247559 21.772459 8.294271 47.572429 12.441406 77.399899 12.441406z"/><path d="m1303.73682 467h101.44531v-264.858398h90.91797v-80.390625h-283.28125v80.390625h90.91797z"/><path d="m1443.58545 467h106.70898l68.667-262.944336h33.01757v-82.304687h-95.70312zm70.82031-68.666992h211.02539l-21.05469-71.538086h-168.91601zm175.13672 68.666992h106.70898l-112.69042-345.249023h-62.68555v82.304687z"/><path d="m1941.12451 473.220703c31.74154 0 59.65495-6.300456 83.74024-18.901367 24.08528-12.600912 42.94677-29.667969 56.58447-51.201172 13.63769-21.533203 20.45654-45.777995 20.45654-72.734375v-2.631836h-97.13867l-.23926 2.631836c-1.11653 12.122396-4.46614 22.689616-10.04883 31.70166-5.58268 9.012044-12.91992 15.990397-22.01171 20.935059-9.0918 4.944661-19.45964 7.416992-31.10352 7.416992-13.87695 0-25.9196-3.748372-36.12793-11.245117s-18.06396-18.462728-23.56689-32.897949c-5.50293-14.435222-8.2544-31.861166-8.2544-52.277832v-.239258c0-20.257162 2.75147-37.483724 8.2544-51.679688 5.50293-14.195963 13.31868-25.042317 23.44726-32.539062s22.13135-11.245117 36.0083-11.245117c12.60091 0 23.40739 2.591959 32.41944 7.775878 9.01204 5.18392 16.11002 12.281902 21.29394 21.293946s8.2544 19.260254 9.21143 30.744629l.23925 2.871093h97.13868v-2.15332c0-27.115885-6.69922-51.480306-20.09766-73.093262-13.39844-21.612955-32.10042-38.719889-56.10596-51.3208-24.00553-12.600912-52.03857-18.901368-84.09912-18.901368-35.09114 0-65.43701 6.978353-91.0376 20.935059-25.60058 13.956706-45.33935 34.213867-59.2163 60.771484-13.87696 26.557618-20.81543 58.817546-20.81543 96.779786v.239257c0 37.96224 6.8986 70.262045 20.6958 96.899414 13.7972 26.63737 33.49609 46.974284 59.09668 61.010743 25.60058 14.036458 56.0262 21.054687 91.27685 21.054687z"/><path d="m2214.23975 379.670898 75.36621-101.445312h26.0791l116.04004-156.474609h-106.46973l-106.70898 146.425781h-4.30664zm-99.05274 87.329102h101.44531v-345.249023h-101.44531zm203.84766 0h117.9541l-140.20508-226.577148-74.16992 64.121093z"/></g><path d="m305.114318.62443771c8.717817-1.14462121 17.926803-.36545135 26.712694-.36545135 32.548987 0 64.505987 5.05339923 95.64868 14.63098274 39.74418 12.2236582 76.762804 31.7666864 109.435876 57.477568 40.046637 31.5132839 73.228974 72.8472109 94.520714 119.2362609 39.836383 86.790386 39.544267 191.973146-1.268422 278.398081-26.388695 55.880442-68.724007 102.650458-119.964986 136.75724-41.808813 27.828603-90.706831 44.862601-140.45707 50.89341-63.325458 7.677926-131.784923-3.541603-188.712259-32.729444-106.868873-54.795293-179.52309291-165.076271-180.9604082-285.932068-.27660564-23.300971.08616998-46.74071 4.69884909-69.814998 7.51316071-37.57857 20.61272131-73.903917 40.28618971-106.877282 21.2814003-35.670293 48.7704861-67.1473767 81.6882804-92.5255597 38.602429-29.7610135 83.467691-51.1674988 130.978372-62.05777669 11.473831-2.62966514 22.9946-4.0869914 34.57273-5.4964306l3.658171-.44480576c3.050084-.37153079 6.104217-.74794222 9.162589-1.14972654zm-110.555861 549.44131429c-14.716752 1.577863-30.238964 4.25635-42.869928 12.522173 2.84343.683658 6.102369.004954 9.068638 0 7.124652-.011559 14.317732-.279903 21.434964.032202 17.817402.781913 36.381729 3.63214 53.58741 8.350042 22.029372 6.040631 41.432961 17.928687 62.656049 25.945156 22.389644 8.456554 44.67706 11.084675 68.427 11.084675 11.96813 0 23.845573-.035504 35.450133-3.302696-6.056202-3.225083-14.72582-2.619864-21.434964-3.963236-14.556814-2.915455-28.868774-6.474936-42.869928-11.470264-10.304996-3.676672-20.230803-8.214291-30.11097-12.848661l-6.348531-2.985046c-9.1705-4.309263-18.363277-8.560752-27.845391-12.142608-24.932161-9.418465-52.560181-14.071964-79.144482-11.221737zm22.259385-62.614168c-29.163917 0-58.660076 5.137344-84.915434 18.369597-6.361238 3.206092-12.407546 7.02566-18.137277 11.258891-1.746125 1.290529-4.841829 2.948483-5.487351 5.191839-.654591 2.275558 1.685942 4.182039 3.014086 5.637703 6.562396-3.497556 12.797498-7.199878 19.78612-9.855246 45.19892-17.169893 99.992458-13.570779 145.098218 2.172348 22.494346 7.851335 43.219483 19.592421 65.129314 28.800338 24.503461 10.297807 49.53043 16.975034 75.846795 20.399104 31.04195 4.037546 66.433549.7654 94.808495-13.242161 9.970556-4.921843 23.814245-12.422267 28.030337-23.320339-5.207047.454947-9.892236 2.685918-14.83959 4.224149-7.866632 2.445646-15.827248 4.51974-23.908229 6.138887-27.388113 5.486604-56.512458 6.619429-84.091013 1.639788-25.991939-4.693152-50.142596-14.119246-74.179513-24.03502l-3.068058-1.268177c-2.045137-.846788-4.089983-1.695816-6.135603-2.544467l-3.069142-1.272366c-12.279956-5.085721-24.606928-10.110797-37.210937-14.51024-24.485325-8.546552-50.726667-13.784628-76.671218-13.784628zm51.114145-447.9909432c-34.959602 7.7225298-66.276908 22.7605319-96.457338 41.7180089-17.521434 11.0054099-34.281927 22.2799893-49.465301 36.4444283-22.5792616 21.065423-39.8360564 46.668751-54.8866988 73.411509-15.507372 27.55357-25.4498976 59.665686-30.2554517 90.824149-4.7140432 30.568106-5.4906485 62.70747-.0906864 93.301172 6.7503648 38.248526 19.5989769 74.140579 39.8896436 107.337631 6.8187918-3.184625 11.659796-10.445603 17.3128555-15.336896 11.4149428-9.875888 23.3995608-19.029311 36.2745548-26.928535 4.765981-2.923712 9.662222-5.194315 14.83959-7.275014 1.953055-.785216 5.14604-1.502727 6.06527-3.647828 1.460876-3.406732-1.240754-9.335897-1.704904-12.865654-1.324845-10.095517-2.124534-20.362774-1.874735-30.549941.725492-29.668947 6.269727-59.751557 16.825623-87.521453 7.954845-20.924233 20.10682-39.922168 34.502872-56.971512 4.884699-5.785498 10.077731-11.170545 15.437296-16.512656 3.167428-3.157378 7.098271-5.858983 9.068639-9.908915-10.336599.006606-20.674847 2.987289-30.503603 6.013385-21.174447 6.519522-41.801477 16.19312-59.358362 29.841512-8.008432 6.226409-13.873368 14.387371-21.44733 20.939921-2.32322 2.010516-6.484901 4.704691-9.695199 3.187928-4.8500728-2.29042-4.1014979-11.835213-4.6571581-16.222019-2.1369011-16.873476 4.2548401-38.216325 12.3778671-52.843142 13.039878-23.479694 37.150915-43.528712 65.467327-42.82854 12.228647.302197 22.934587 4.551115 34.625711 7.324555-2.964621-4.211764-6.939158-7.28162-10.717482-10.733763-9.257431-8.459031-19.382979-16.184864-30.503603-22.028985-4.474136-2.350694-9.291232-3.77911-14.015169-5.506421-2.375159-.867783-5.36616-2.062533-6.259834-4.702213-1.654614-4.888817 7.148561-9.416813 10.381943-11.478522 12.499882-7.969406 27.826705-14.525258 42.869928-14.894334 23.509209-.577147 46.479246 12.467678 56.162903 34.665926 3.404469 7.803171 4.411273 16.054969 5.079109 24.382907l.121749 1.56229.174325 2.345587c.01913.260708.038244.521433.057403.782164l.11601 1.56437.120128 1.563971c7.38352-6.019164 12.576553-14.876995 19.78612-21.323859 16.861073-15.07846 39.936636-21.7722 61.831627-14.984333 19.786945 6.133107 36.984382 19.788105 47.105807 37.959541 2.648042 4.754231 10.035685 16.373942 4.698379 21.109183-4.177345 3.707277-9.475079.818243-13.880788-.719162-3.33605-1.16376-6.782939-1.90214-10.241828-2.585698l-1.887262-.369639c-.629089-.122886-1.257979-.246187-1.886079-.372129-11.980496-2.401886-25.91652-2.152533-37.923398-.041284-7.762754 1.364839-15.349083 4.127545-23.083807 5.271929v1.651348c21.149714.175043 41.608563 12.240618 52.043268 30.549941 4.323267 7.585468 6.482428 16.267431 8.138691 24.770223 2.047864 10.50918.608423 21.958802-2.263037 32.201289-.962925 3.433979-2.710699 9.255807-6.817143 10.046802-2.902789.558982-5.36781-2.330878-7.024898-4.279468-4.343878-5.10762-8.475879-9.96341-13.573278-14.374161-12.895604-11.157333-26.530715-21.449361-40.396663-31.373138-7.362086-5.269452-15.425755-12.12007-23.908229-15.340199 2.385052 5.745041 4.721463 11.086326 5.532694 17.339156 2.385876 18.392716-5.314223 35.704625-16.87179 49.540445-3.526876 4.222498-7.29943 8.475545-11.744712 11.755948-1.843407 1.360711-4.156734 3.137561-6.595373 2.752797-7.645687-1.207961-8.555849-12.73272-9.728176-18.637115-3.970415-19.998652-2.375984-39.861068 3.132802-59.448534-4.901187 2.485279-8.443727 7.923994-11.521293 12.385111-6.770975 9.816439-12.645804 20.199291-16.858599 31.375615-16.777806 44.519521-16.616219 96.664142 5.118834 139.523233 2.427098 4.786433 6.110614 4.144058 10.894733 4.144058.720854 0 1.44257-.004515 2.164851-.010924l2.168232-.022283c4.338648-.045438 8.686803-.064635 12.979772.508795 2.227588.297243 5.320818.032202 7.084256 1.673642 2.111344 1.966755.986008 5.338808.4996 7.758859-1.358647 6.765574-1.812904 12.914369-1.812904 19.816178 9.02412-1.398692 11.525415-15.866153 14.724172-23.118874 3.624982-8.216283 7.313444-16.440823 10.667192-24.770223 1.648843-4.093692 3.854171-8.671229 3.275427-13.210785-.649644-5.10184-4.335633-10.510831-6.904531-14.862134-4.86244-8.234447-10.389363-16.70834-13.969002-25.595896-2.861567-7.104926-.197036-15.983399 7.871579-18.521521 4.450228-1.400344 9.198073 1.345848 12.094266 4.562675 6.07269 6.74328 9.992815 16.777697 14.401823 24.692609l34.394873 61.925556c2.920926 5.243856 5.848447 10.481933 8.836976 15.687808 1.165732 2.031158 2.352075 5.167068 4.740424 6.0332 2.127008.77118 5.033095-.325315 7.148561-.748886 5.492297-1.099798 10.97635-2.287117 16.488434-3.28288 6.605266-1.193099 16.673928-.969342 21.434964-6.129805-6.963066-2.205375-15.011895-2.074919-22.259386-1.577863-4.352947.298894-9.178287 1.856116-13.178381-.686135-5.953149-3.783239-9.910373-12.522173-13.552668-18.377854-8.980425-14.439388-17.441465-29.095929-26.041008-43.760726l-1.376261-2.335014-2.765943-4.665258c-1.380597-2.334387-2.750786-4.67476-4.079753-7.036188-1.02723-1.826391-2.549937-4.233231-1.078344-6.24705 1.545791-2.114476 4.91472-2.239146 7.956473-2.243117l.603351.000261c1.195428.001526 2.315572.002427 3.222811-.11692 12.27399-1.615019 24.718635-2.952611 37.098976-2.952611-.963749-3.352237-3.719791-7.141255-2.838484-10.73046 1.972017-8.030506 13.526287-10.543033 18.899867-4.780653 3.60767 3.868283 5.704174 9.192229 8.051303 13.859765 3.097352 6.162006 6.624228 12.118418 9.940876 18.16483 5.805578 10.585967 12.146205 20.881297 18.116667 31.375615.49237.865561.999687 1.726685 1.512269 2.587098l.771613 1.290552c2.577138 4.303168 5.164895 8.635123 6.553094 13.461506-20.735854-.9487-36.30176-25.018751-45.343193-41.283704-.721369 2.604176.450959 4.928448 1.388326 7.431066 1.948109 5.197619 4.276275 10.147535 7.20627 14.862134 4.184765 6.732546 8.982075 13.665732 15.313633 18.553722 11.236043 8.673707 26.05255 8.721596 39.572241 7.794364 8.669619-.595311 19.50252-4.542034 28.030338-1.864372 8.513803 2.673532 11.940924 12.063098 6.884745 19.276187-3.787393 5.403211-8.842747 7.443452-15.128962 8.257566 4.445282 9.53571 10.268996 18.385285 14.490036 28.072919 1.758491 4.035895 3.59118 10.22102 7.8048 12.350433 2.805507 1.416857 6.824562.09743 9.85761.034678-3.043765-8.053625-8.742992-14.887729-11.541904-23.118874 8.533589.390544 16.786875 4.843404 24.732651 7.685374 15.630376 5.590144 31.063836 11.701854 46.475333 17.86913l7.112077 2.848685c6.338978 2.538947 12.71588 5.052299 18.961699 7.812528 2.285297 1.009799 5.449427 3.370401 7.975455 1.917215 2.061054-1.186494 3.394144-4.015253 4.665403-5.931643 3.55573-5.361927 6.775921-10.928622 9.965609-16.513481 12.774414-22.36586 22.143967-46.872692 28.402976-71.833646 20.645168-82.323009 2.934117-173.156241-46.677107-241.922507-19.061454-26.420745-43.033164-49.262193-69.46165-68.1783861-66.13923-47.336721-152.911262-66.294198-232.486917-48.7172481zm135.205158 410.5292842c-17.532977 4.570931-35.601827 8.714164-53.58741 11.040088 2.365265 8.052799 8.145286 15.885969 12.376218 23.118874 1.635653 2.796558 3.3859 6.541816 6.618457 7.755557 3.651364 1.370619 8.063669-.853747 11.508927-1.975838-1.595256-4.364513-4.279573-8.292245-6.476657-12.385112-.905215-1.687677-2.305907-3.685809-1.559805-5.68972 1.410585-3.786541 7.266452-3.563609 10.509727-4.221671 8.54678-1.733916 17.004522-3.898008 25.557073-5.611281 3.150939-.631641 7.538512-2.342438 10.705115-1.285575 2.371037.791232 3.800147 2.744743 5.152304 4.781948l.606196.918752c.80912 1.222827 1.637246 2.41754 2.671212 3.351165 3.457625 3.121874 8.628398 3.60159 13.017619 4.453686-2.678546-6.027421-7.130424-11.301001-9.984571-17.339156-1.659561-3.511592-3.023155-8.677834-6.656381-10.707341-5.005064-2.795733-15.341663 2.461334-20.458024 3.795624zm-110.472507-40.151706c-.825246 10.467897-4.036369 18.984725-9.068639 28.072919 5.76683.729896 11.649079.989984 17.312856 2.39363 4.244947 1.051908 8.156828 3.058296 12.366325 4.211763-2.250671-6.157877-6.426367-11.651913-9.661398-17.339156-3.266358-5.740912-6.189758-12.717032-10.949144-17.339156z"/></g></svg>
</file>

<file path="src/components/Header.tsx">
import { Link } from '@tanstack/react-router'

import { useState } from 'react'
import {
  ChevronDown,
  ChevronRight,
  Home,
  Menu,
  Network,
  SquareFunction,
  StickyNote,
  X,
} from 'lucide-react'

export default function Header() {
  const [isOpen, setIsOpen] = useState(false)
  const [groupedExpanded, setGroupedExpanded] = useState<
    Record<string, boolean>
  >({})

  return (
    <>
      <header className="p-4 flex items-center bg-gray-800 text-white shadow-lg">
        <button
          onClick={() => setIsOpen(true)}
          className="p-2 hover:bg-gray-700 rounded-lg transition-colors"
          aria-label="Open menu"
        >
          <Menu size={24} />
        </button>
        <h1 className="ml-4 text-xl font-semibold">
          <Link to="/">
            <img
              src="/tanstack-word-logo-white.svg"
              alt="TanStack Logo"
              className="h-10"
            />
          </Link>
        </h1>
      </header>

      <aside
        className={`fixed top-0 left-0 h-full w-80 bg-gray-900 text-white shadow-2xl z-50 transform transition-transform duration-300 ease-in-out flex flex-col ${
          isOpen ? 'translate-x-0' : '-translate-x-full'
        }`}
      >
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <h2 className="text-xl font-bold">Navigation</h2>
          <button
            onClick={() => setIsOpen(false)}
            className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
            aria-label="Close menu"
          >
            <X size={24} />
          </button>
        </div>

        <nav className="flex-1 p-4 overflow-y-auto">
          <Link
            to="/"
            onClick={() => setIsOpen(false)}
            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
            activeProps={{
              className:
                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
            }}
          >
            <Home size={20} />
            <span className="font-medium">Home</span>
          </Link>

          {/* Demo Links Start */}

          <Link
            to="/demo/start/server-funcs"
            onClick={() => setIsOpen(false)}
            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
            activeProps={{
              className:
                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
            }}
          >
            <SquareFunction size={20} />
            <span className="font-medium">Start - Server Functions</span>
          </Link>

          <Link
            to="/demo/start/api-request"
            onClick={() => setIsOpen(false)}
            className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
            activeProps={{
              className:
                'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
            }}
          >
            <Network size={20} />
            <span className="font-medium">Start - API Request</span>
          </Link>

          <div className="flex flex-row justify-between">
            <Link
              to="/demo/start/ssr"
              onClick={() => setIsOpen(false)}
              className="flex-1 flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
              activeProps={{
                className:
                  'flex-1 flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
              }}
            >
              <StickyNote size={20} />
              <span className="font-medium">Start - SSR Demos</span>
            </Link>
            <button
              className="p-2 hover:bg-gray-800 rounded-lg transition-colors"
              onClick={() =>
                setGroupedExpanded((prev) => ({
                  ...prev,
                  StartSSRDemo: !prev.StartSSRDemo,
                }))
              }
            >
              {groupedExpanded.StartSSRDemo ? (
                <ChevronDown size={20} />
              ) : (
                <ChevronRight size={20} />
              )}
            </button>
          </div>
          {groupedExpanded.StartSSRDemo && (
            <div className="flex flex-col ml-4">
              <Link
                to="/demo/start/ssr/spa-mode"
                onClick={() => setIsOpen(false)}
                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
                activeProps={{
                  className:
                    'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
                }}
              >
                <StickyNote size={20} />
                <span className="font-medium">SPA Mode</span>
              </Link>

              <Link
                to="/demo/start/ssr/full-ssr"
                onClick={() => setIsOpen(false)}
                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
                activeProps={{
                  className:
                    'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
                }}
              >
                <StickyNote size={20} />
                <span className="font-medium">Full SSR</span>
              </Link>

              <Link
                to="/demo/start/ssr/data-only"
                onClick={() => setIsOpen(false)}
                className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-800 transition-colors mb-2"
                activeProps={{
                  className:
                    'flex items-center gap-3 p-3 rounded-lg bg-cyan-600 hover:bg-cyan-700 transition-colors mb-2',
                }}
              >
                <StickyNote size={20} />
                <span className="font-medium">Data Only</span>
              </Link>
            </div>
          )}

          {/* Demo Links End */}
        </nav>
      </aside>
    </>
  )
}
</file>

<file path="src/data/demo.punk-songs.ts">
import { createServerFn } from '@tanstack/react-start'

export const getPunkSongs = createServerFn({
  method: 'GET',
}).handler(async () => [
  { id: 1, name: 'Teenage Dirtbag', artist: 'Wheatus' },
  { id: 2, name: 'Smells Like Teen Spirit', artist: 'Nirvana' },
  { id: 3, name: 'The Middle', artist: 'Jimmy Eat World' },
  { id: 4, name: 'My Own Worst Enemy', artist: 'Lit' },
  { id: 5, name: 'Fat Lip', artist: 'Sum 41' },
  { id: 6, name: 'All the Small Things', artist: 'blink-182' },
  { id: 7, name: 'Beverly Hills', artist: 'Weezer' },
])
</file>

<file path="src/lib/utils.ts">
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
</file>

<file path="src/routes/demo/api.names.ts">
import { createFileRoute } from '@tanstack/react-router'
import { json } from '@tanstack/react-start'

export const Route = createFileRoute('/demo/api/names')({
  server: {
    handlers: {
      GET: () => json(['Alice', 'Bob', 'Charlie']),
    },
  },
})
</file>

<file path="src/routes/demo/start.api-request.tsx">
import { useEffect, useState } from 'react'

import { createFileRoute } from '@tanstack/react-router'

function getNames() {
  return fetch('/demo/api/names').then((res) => res.json())
}

export const Route = createFileRoute('/demo/start/api-request')({
  component: Home,
})

function Home() {
  const [names, setNames] = useState<Array<string>>([])

  useEffect(() => {
    getNames().then(setNames)
  }, [])

  return (
    <div
      className="flex items-center justify-center min-h-screen p-4 text-white"
      style={{
        backgroundColor: '#000',
        backgroundImage:
          'radial-gradient(ellipse 60% 60% at 0% 100%, #444 0%, #222 60%, #000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-2xl mb-4">Start API Request Demo - Names List</h1>
        <ul className="mb-4 space-y-2">
          {names.map((name) => (
            <li
              key={name}
              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
            >
              <span className="text-lg text-white">{name}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/demo/start.server-funcs.tsx">
import fs from 'node:fs'
import { useCallback, useState } from 'react'
import { createFileRoute, useRouter } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/react-start'

/*
const loggingMiddleware = createMiddleware().server(
  async ({ next, request }) => {
    console.log("Request:", request.url);
    return next();
  }
);
const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
  loggingMiddleware,
]);
*/

const TODOS_FILE = 'todos.json'

async function readTodos() {
  return JSON.parse(
    await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
      JSON.stringify(
        [
          { id: 1, name: 'Get groceries' },
          { id: 2, name: 'Buy a new phone' },
        ],
        null,
        2,
      ),
    ),
  )
}

const getTodos = createServerFn({
  method: 'GET',
}).handler(async () => await readTodos())

const addTodo = createServerFn({ method: 'POST' })
  .inputValidator((d: string) => d)
  .handler(async ({ data }) => {
    const todos = await readTodos()
    todos.push({ id: todos.length + 1, name: data })
    await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
    return todos
  })

export const Route = createFileRoute('/demo/start/server-funcs')({
  component: Home,
  loader: async () => await getTodos(),
})

function Home() {
  const router = useRouter()
  let todos = Route.useLoaderData()

  const [todo, setTodo] = useState('')

  const submitTodo = useCallback(async () => {
    todos = await addTodo({ data: todo })
    setTodo('')
    router.invalidate()
  }, [addTodo, todo])

  return (
    <div
      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
      style={{
        backgroundImage:
          'radial-gradient(50% 50% at 20% 60%, #23272a 0%, #18181b 50%, #000000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-2xl mb-4">Start Server Functions - Todo Example</h1>
        <ul className="mb-4 space-y-2">
          {todos?.map((t) => (
            <li
              key={t.id}
              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
            >
              <span className="text-lg text-white">{t.name}</span>
            </li>
          ))}
        </ul>
        <div className="flex flex-col gap-2">
          <input
            type="text"
            value={todo}
            onChange={(e) => setTodo(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                submitTodo()
              }
            }}
            placeholder="Enter a new todo..."
            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
          />
          <button
            disabled={todo.trim().length === 0}
            onClick={submitTodo}
            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
          >
            Add todo
          </button>
        </div>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/demo/start.ssr.data-only.tsx">
import { createFileRoute } from '@tanstack/react-router'
import { getPunkSongs } from '@/data/demo.punk-songs'

export const Route = createFileRoute('/demo/start/ssr/data-only')({
  ssr: 'data-only',
  component: RouteComponent,
  loader: async () => await getPunkSongs(),
})

function RouteComponent() {
  const punkSongs = Route.useLoaderData()

  return (
    <div
      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
      style={{
        backgroundImage:
          'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-3xl font-bold mb-6 text-pink-400">
          Data Only SSR - Punk Songs
        </h1>
        <ul className="space-y-3">
          {punkSongs.map((song) => (
            <li
              key={song.id}
              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
            >
              <span className="text-lg text-white font-medium">
                {song.name}
              </span>
              <span className="text-white/60"> - {song.artist}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/demo/start.ssr.full-ssr.tsx">
import { createFileRoute } from '@tanstack/react-router'
import { getPunkSongs } from '@/data/demo.punk-songs'

export const Route = createFileRoute('/demo/start/ssr/full-ssr')({
  component: RouteComponent,
  loader: async () => await getPunkSongs(),
})

function RouteComponent() {
  const punkSongs = Route.useLoaderData()

  return (
    <div
      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
      style={{
        backgroundImage:
          'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-3xl font-bold mb-6 text-purple-400">
          Full SSR - Punk Songs
        </h1>
        <ul className="space-y-3">
          {punkSongs.map((song) => (
            <li
              key={song.id}
              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
            >
              <span className="text-lg text-white font-medium">
                {song.name}
              </span>
              <span className="text-white/60"> - {song.artist}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/demo/start.ssr.index.tsx">
import { createFileRoute, Link } from '@tanstack/react-router'

export const Route = createFileRoute('/demo/start/ssr/')({
  component: RouteComponent,
})

function RouteComponent() {
  return (
    <div
      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-900 to-black p-4 text-white"
      style={{
        backgroundImage:
          'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-4xl font-bold mb-8 text-center bg-gradient-to-r from-pink-500 via-purple-500 to-green-400 bg-clip-text text-transparent">
          SSR Demos
        </h1>
        <div className="flex flex-col gap-4">
          <Link
            to="/demo/start/ssr/spa-mode"
            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-pink-600 to-pink-500 hover:from-pink-700 hover:to-pink-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-pink-500/50 border-2 border-pink-400"
          >
            SPA Mode
          </Link>
          <Link
            to="/demo/start/ssr/full-ssr"
            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-purple-500/50 border-2 border-purple-400"
          >
            Full SSR
          </Link>
          <Link
            to="/demo/start/ssr/data-only"
            className="text-2xl font-bold py-6 px-8 rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white text-center shadow-lg transform transition-all hover:scale-105 hover:shadow-green-500/50 border-2 border-green-400"
          >
            Data Only
          </Link>
        </div>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/demo/start.ssr.spa-mode.tsx">
import { useEffect, useState } from 'react'
import { createFileRoute } from '@tanstack/react-router'
import { getPunkSongs } from '@/data/demo.punk-songs'

export const Route = createFileRoute('/demo/start/ssr/spa-mode')({
  ssr: false,
  component: RouteComponent,
})

function RouteComponent() {
  const [punkSongs, setPunkSongs] = useState<
    Awaited<ReturnType<typeof getPunkSongs>>
  >([])

  useEffect(() => {
    getPunkSongs().then(setPunkSongs)
  }, [])

  return (
    <div
      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-zinc-800 to-black p-4 text-white"
      style={{
        backgroundImage:
          'radial-gradient(50% 50% at 20% 60%, #1a1a1a 0%, #0a0a0a 50%, #000000 100%)',
      }}
    >
      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
        <h1 className="text-3xl font-bold mb-6 text-green-400">
          SPA Mode - Punk Songs
        </h1>
        <ul className="space-y-3">
          {punkSongs.map((song) => (
            <li
              key={song.id}
              className="bg-white/10 border border-white/20 rounded-lg p-4 backdrop-blur-sm shadow-md"
            >
              <span className="text-lg text-white font-medium">
                {song.name}
              </span>
              <span className="text-white/60"> - {song.artist}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}
</file>

<file path="src/routes/__root.tsx">
import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanStackDevtools } from '@tanstack/react-devtools'

import Header from '../components/Header'

import appCss from '../styles.css?url'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
    ],
  }),

  shellComponent: RootDocument,
})

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <Header />
        {children}
        <TanStackDevtools
          config={{
            position: 'bottom-right',
          }}
          plugins={[
            {
              name: 'Tanstack Router',
              render: <TanStackRouterDevtoolsPanel />,
            },
          ]}
        />
        <Scripts />
      </body>
    </html>
  )
}
</file>

<file path="src/routes/index.tsx">
import { createFileRoute } from '@tanstack/react-router'

import {
  Zap,
  Server,
  Route as RouteIcon,
  Shield,
  Waves,
  Sparkles,
} from 'lucide-react'

export const Route = createFileRoute('/')({
  component: App,
})

function App() {
  const features = [
    {
      icon: <Zap className="w-12 h-12 text-cyan-400" />,
      title: 'Powerful Server Functions',
      description:
        'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.',
    },
    {
      icon: <Server className="w-12 h-12 text-cyan-400" />,
      title: 'Flexible Server Side Rendering',
      description:
        'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.',
    },
    {
      icon: <RouteIcon className="w-12 h-12 text-cyan-400" />,
      title: 'API Routes',
      description:
        'Build type-safe API endpoints alongside your application. No separate backend needed.',
    },
    {
      icon: <Shield className="w-12 h-12 text-cyan-400" />,
      title: 'Strongly Typed Everything',
      description:
        'End-to-end type safety from server to client. Catch errors before they reach production.',
    },
    {
      icon: <Waves className="w-12 h-12 text-cyan-400" />,
      title: 'Full Streaming Support',
      description:
        'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',
    },
    {
      icon: <Sparkles className="w-12 h-12 text-cyan-400" />,
      title: 'Next Generation Ready',
      description:
        'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',
    },
  ]

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
      <section className="relative py-20 px-6 text-center overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10"></div>
        <div className="relative max-w-5xl mx-auto">
          <div className="flex items-center justify-center gap-6 mb-6">
            <img
              src="/tanstack-circle-logo.png"
              alt="TanStack Logo"
              className="w-24 h-24 md:w-32 md:h-32"
            />
            <h1 className="text-6xl md:text-7xl font-bold text-white">
              <span className="text-gray-300">TANSTACK</span>{' '}
              <span className="bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent">
                START
              </span>
            </h1>
          </div>
          <p className="text-2xl md:text-3xl text-gray-300 mb-4 font-light">
            The framework for next generation AI applications
          </p>
          <p className="text-lg text-gray-400 max-w-3xl mx-auto mb-8">
            Full-stack framework powered by TanStack Router for React and Solid.
            Build modern applications with server functions, streaming, and type
            safety.
          </p>
          <div className="flex flex-col items-center gap-4">
            <a
              href="https://tanstack.com/start"
              target="_blank"
              rel="noopener noreferrer"
              className="px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50"
            >
              Documentation
            </a>
            <p className="text-gray-400 text-sm mt-2">
              Begin your TanStack Start journey by editing{' '}
              <code className="px-2 py-1 bg-slate-700 rounded text-cyan-400">
                /src/routes/index.tsx
              </code>
            </p>
          </div>
        </div>
      </section>

      <section className="py-16 px-6 max-w-7xl mx-auto">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <div
              key={index}
              className="bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10"
            >
              <div className="mb-4">{feature.icon}</div>
              <h3 className="text-xl font-semibold text-white mb-3">
                {feature.title}
              </h3>
              <p className="text-gray-400 leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </section>
    </div>
  )
}
</file>

<file path="src/logo.svg">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="5355px" height="3786px" viewBox="0 0 5355 3786" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>logo</title>
    <g id="logo" stroke="none" fill="none" transform="translate(0.9778, 0)" fill-rule="evenodd" stroke-width="1">
        <g id="Layer_1" transform="translate(1117.351, 496.0658)" fill="#61DAFB">
            <g id="Group" fill-rule="nonzero">
                <path d="M3119.93396,1389.62036 C3119.93396,1182.92626 2861.10536,987.043843 2464.27723,865.571309 C2555.85295,461.086847 2515.15263,139.280027 2335.81684,36.2509659 C2294.48058,12.0836553 2246.14895,0.635981858 2193.36572,0.635981858 L2193.36572,142.459936 C2222.61908,142.459936 2246.14895,148.183773 2265.86317,158.995464 C2352.35135,208.602049 2389.87196,397.488661 2360.6186,640.433731 C2353.62323,700.216026 2342.17627,763.178229 2328.18553,827.412397 C2203.5408,796.885268 2067.4491,773.353939 1924.36204,758.090375 C1838.5098,640.433731 1749.47785,533.588779 1659.80995,440.099446 C1867.12721,247.396943 2061.72562,141.823954 2194.00166,141.823954 L2194.00166,0 C2019.11747,0 1790.17817,124.652444 1558.69509,340.886276 C1327.21202,125.924408 1098.27272,2.54392743 923.388526,2.54392743 L923.388526,144.367882 C1055.02863,144.367882 1250.26298,249.304888 1457.58024,440.735428 C1368.54828,534.224761 1279.51633,640.433731 1194.93598,758.090375 C1051.21297,773.353939 915.121273,796.885268 790.476541,828.048379 C775.849863,764.450193 765.038841,702.759953 757.407531,643.61364 C727.518233,400.66857 764.402898,211.781959 850.255137,161.539392 C869.333413,150.091718 894.13517,145.003864 923.388526,145.003864 L923.388526,3.17990929 C869.969355,3.17990929 821.637724,14.6275827 779.665518,38.7948933 C600.965673,141.823954 560.901295,462.994793 653.112959,866.20729 C257.556717,988.315807 0,1183.56224 0,1389.62036 C0,1595.67848 258.828602,1792.19688 655.656729,1913.66941 C564.081007,2318.15387 604.781328,2639.96069 784.117116,2742.98975 C825.453379,2767.15706 873.78501,2778.60474 927.204181,2778.60474 C1102.08837,2778.60474 1331.02768,2653.95229 1562.51075,2437.71846 C1793.99382,2652.68033 2022.93313,2776.06081 2197.81732,2776.06081 C2251.23649,2776.06081 2299.56812,2764.61314 2341.54033,2740.44583 C2520.24017,2637.41676 2560.30455,2316.24593 2468.09289,1913.03343 C2862.37724,1791.56089 3119.93396,1595.67848 3119.93396,1389.62036 L3119.93396,1389.62036 Z M2291.93681,965.42046 C2268.40694,1047.46212 2239.15358,1132.04771 2206.08457,1216.63329 C2180.01093,1165.75475 2152.6654,1114.8762 2122.7761,1063.99765 C2093.52275,1013.1191 2062.36156,963.512515 2031.20038,915.177893 C2121.50422,928.533513 2208.62834,945.069041 2291.93681,965.42046 Z M2000.67514,1642.74114 C1951.07162,1728.59869 1900.19622,1810.00437 1847.41299,1885.68621 C1752.65756,1893.95397 1656.63024,1898.40585 1559.96698,1898.40585 C1463.30372,1898.40585 1367.91234,1893.95397 1273.79285,1886.32219 C1221.00962,1810.64035 1169.49828,1729.87065 1119.89476,1644.64908 C1071.56313,1561.33546 1027.6831,1476.74987 987.61872,1391.52831 C1027.04716,1306.30674 1071.56313,1221.08517 1119.25882,1137.77154 C1168.86234,1051.91399 1219.73774,970.508315 1272.52096,894.826474 C1367.2764,886.55871 1463.30372,882.106837 1559.96698,882.106837 C1656.63024,882.106837 1752.02162,886.55871 1846.14111,894.190492 C1898.92434,969.872333 1950.43568,1050.64203 2000.0392,1135.8636 C2048.37083,1219.17722 2092.25086,1303.76281 2132.31524,1388.98438 C2092.25086,1474.20595 2048.37083,1559.42752 2000.67514,1642.74114 Z M2206.08457,1560.0635 C2240.42547,1645.28507 2269.67882,1730.50664 2293.84464,1813.18428 C2210.53617,1833.5357 2122.7761,1850.70721 2031.83632,1864.06283 C2062.99751,1815.09222 2094.15869,1764.84966 2123.41204,1713.33513 C2152.6654,1662.45658 2180.01093,1610.94205 2206.08457,1560.0635 Z M1561.23886,2238.65614 C1502.09621,2177.60188 1442.95356,2109.55182 1384.44685,2035.14195 C1441.68167,2037.68587 1500.18838,2039.59382 1559.33104,2039.59382 C1618.47369,2039.59382 1678.25229,2038.32185 1736.12305,2035.14195 C1678.88823,2109.55182 1619.74558,2177.60188 1561.23886,2238.65614 Z M1088.09764,1864.06283 C997.7938,1850.70721 910.669676,1834.17168 827.361207,1813.82026 C850.89108,1731.7786 880.144435,1647.19301 913.213446,1562.60742 C939.287089,1613.48597 966.632617,1664.36452 996.521915,1715.24307 C1026.41121,1766.12162 1056.93645,1815.7282 1088.09764,1864.06283 Z M1558.05915,540.584579 C1617.20181,601.638838 1676.34446,669.688896 1734.85117,744.098774 C1677.61634,741.554846 1619.10963,739.646901 1559.96698,739.646901 C1500.82433,739.646901 1441.04573,740.918864 1383.17496,744.098774 C1440.40979,669.688896 1499.55244,601.638838 1558.05915,540.584579 Z M1087.46169,915.177893 C1056.30051,964.148497 1025.13933,1014.39106 995.885972,1065.90559 C966.632617,1116.78414 939.287089,1167.66269 913.213446,1218.54124 C878.87255,1133.31967 849.619195,1048.0981 825.453379,965.42046 C908.761848,945.705023 996.521915,928.533513 1087.46169,915.177893 Z M511.933721,1711.42718 C286.810072,1615.39392 141.179237,1489.46951 141.179237,1389.62036 C141.179237,1289.77121 286.810072,1163.21082 511.933721,1067.81354 C566.624777,1044.28221 626.403373,1023.29481 688.089797,1003.57937 C724.33852,1128.23182 772.034208,1257.97211 831.176862,1390.89232 C772.670151,1523.17655 725.610405,1652.28087 689.997624,1776.29733 C627.039316,1756.58189 567.26072,1734.95851 511.933721,1711.42718 Z M854.070792,2620.24525 C767.582611,2570.63867 730.062003,2381.75206 759.315358,2138.80699 C766.310726,2079.02469 777.757691,2016.06249 791.748426,1951.82832 C916.393158,1982.35545 1052.48486,2005.88678 1195.57192,2021.15034 C1281.42416,2138.80699 1370.45611,2245.65194 1460.12401,2339.14127 C1252.80675,2531.84378 1058.20834,2637.41676 925.932296,2637.41676 C897.314883,2636.78078 873.149068,2631.05695 854.070792,2620.24525 L854.070792,2620.24525 Z M2362.52643,2135.62708 C2392.41573,2378.57215 2355.53106,2567.45876 2269.67882,2617.70133 C2250.60055,2629.149 2225.79879,2634.23686 2196.54543,2634.23686 C2064.90533,2634.23686 1869.67098,2529.29985 1662.35372,2337.86931 C1751.38568,2244.37998 1840.41763,2138.17101 1924.99798,2020.51436 C2068.72099,2005.2508 2204.81269,1981.71947 2329.45742,1950.55636 C2344.0841,2014.79053 2355.53106,2076.48077 2362.52643,2135.62708 L2362.52643,2135.62708 Z M2607.3643,1711.42718 C2552.67324,1734.95851 2492.89464,1755.94591 2431.20822,1775.66135 C2394.9595,1651.0089 2347.26381,1521.2686 2288.12115,1388.3484 C2346.62787,1256.06417 2393.68761,1126.95985 2429.30039,1002.94339 C2492.2587,1022.65883 2552.0373,1044.28221 2608.00024,1067.81354 C2833.12389,1163.8468 2978.75472,1289.77121 2978.75472,1389.62036 C2978.75472,1489.46951 2832.48794,1616.0299 2607.3643,1711.42718 L2607.3643,1711.42718 Z" id="Shape"></path>
            </g>
            <path d="M1537.37834,1099.4829 C1545.02735,1098.47702 1553.10731,1099.16174 1560.81604,1099.16174 C1589.37451,1099.16174 1617.41357,1103.60261 1644.73816,1112.01928 C1679.60968,1122.76128 1712.08981,1139.93545 1740.75715,1162.52987 C1775.89405,1190.22336 1805.00822,1226.54711 1823.68958,1267.31325 C1858.64201,1343.58359 1858.38571,1436.01692 1822.57667,1511.96611 C1799.42324,1561.07316 1762.27826,1602.17408 1717.31944,1632.14671 C1680.63641,1656.60215 1637.73331,1671.57142 1594.08247,1676.87122 C1538.52074,1683.61849 1478.45443,1673.7589 1428.50641,1648.10898 C1334.7397,1599.95554 1270.99292,1503.04196 1269.73182,1396.83535 C1269.48913,1376.35874 1269.80743,1355.76018 1273.85459,1335.48277 C1280.44663,1302.45918 1291.94018,1270.53691 1309.20168,1241.56031 C1327.87397,1210.21369 1351.99288,1182.55201 1380.87494,1160.24997 C1414.74469,1134.09636 1454.10946,1115.2846 1495.79531,1105.71435 C1505.55336,1103.47438 1515.35011,1102.20236 1525.19388,1100.99838 L1528.67012,1100.57481 C1531.56864,1100.22174 1534.47131,1099.86541 1537.37834,1099.4829 Z M1440.28829,1582.05277 C1427.38628,1583.43854 1413.77812,1585.79095 1402.70469,1593.0505 C1405.19749,1593.65093 1408.05457,1593.05485 1410.65507,1593.0505 C1416.90117,1593.04035 1423.20727,1592.80467 1429.44687,1593.07878 C1445.06719,1593.76551 1461.34234,1596.26875 1476.42637,1600.4123 C1488.01412,1603.59545 1498.77315,1608.6274 1509.54524,1613.66442 L1512.23902,1614.92271 C1518.52742,1617.854 1524.84413,1620.73472 1531.35625,1623.19891 C1550.98501,1630.62598 1570.52415,1632.93415 1591.34546,1632.93415 L1593.25225,1632.93318 C1603.09908,1632.91995 1612.8672,1632.72906 1622.42421,1630.03352 C1617.1148,1627.20106 1609.51424,1627.7326 1603.63241,1626.55277 C1590.87061,1623.99224 1578.32347,1620.86608 1566.04881,1616.47888 C1546.68964,1609.55943 1528.85694,1599.16793 1509.6734,1591.90838 C1487.81565,1583.63651 1463.59446,1579.54953 1440.28829,1582.05277 Z M1459.80285,1527.06119 C1434.23516,1527.06119 1408.3762,1531.57312 1385.35841,1543.19449 C1379.78158,1546.01028 1374.48085,1549.36485 1369.45766,1553.08274 C1367.92685,1554.21616 1365.21288,1555.67227 1364.64696,1557.64252 C1364.07308,1559.64106 1366.125,1561.31545 1367.28937,1562.5939 C1373.04255,1559.52213 1378.5088,1556.27053 1384.63565,1553.93842 C1424.26105,1538.85878 1472.29796,1542.01974 1511.84169,1555.84631 C1531.56224,1562.74183 1549.73174,1573.05357 1568.93985,1581.14052 C1590.42177,1590.18468 1612.36265,1596.04903 1635.43392,1599.05625 C1662.64806,1602.60227 1693.67549,1599.72848 1718.5515,1587.42618 C1727.29258,1583.10352 1739.42919,1576.51619 1743.1254,1566.94484 C1738.56043,1567.3444 1734.45298,1569.30378 1730.11569,1570.65475 C1723.2191,1572.80266 1716.24011,1574.62426 1709.1556,1576.04629 C1685.14474,1580.86496 1659.61174,1581.85988 1635.43392,1577.48645 C1610.81165,1573.03264 1588.07413,1563.72547 1565.31061,1554.26664 L1562.27515,1553.00498 C1550.63735,1548.16833 1538.97057,1543.34664 1527.01968,1539.16769 C1505.55366,1531.66159 1482.54816,1527.06119 1459.80285,1527.06119 Z M1504.61407,1133.60828 C1473.96537,1140.39067 1446.50982,1153.59796 1420.05097,1170.24757 C1404.69012,1179.91319 1389.99637,1189.81522 1376.68527,1202.25529 C1356.89028,1220.75623 1341.76143,1243.24263 1328.5667,1266.72974 C1314.97155,1290.92897 1306.25505,1319.13178 1302.04207,1346.49704 C1297.90932,1373.34381 1297.22848,1401.57056 1301.96257,1428.43981 C1307.88054,1462.03199 1319.14478,1493.55458 1336.93339,1522.71025 C1342.91135,1519.91332 1347.1554,1513.53629 1352.11138,1509.24045 C1362.11874,1500.56685 1372.62552,1492.52776 1383.91289,1485.59018 C1388.09117,1483.02239 1392.38365,1481.02821 1396.9226,1479.20082 C1398.63482,1478.51119 1401.43407,1477.88103 1402.23995,1475.99707 C1403.52069,1473.00507 1401.1522,1467.79772 1400.74528,1464.69767 C1399.58381,1455.83117 1398.88273,1446.81384 1399.10172,1437.86685 C1399.73775,1411.80978 1404.59833,1385.3894 1413.85256,1361.00019 C1420.82649,1342.62325 1431.48,1325.93811 1444.10086,1310.96434 C1448.38322,1305.88316 1452.9359,1301.15368 1457.63457,1296.46192 C1458.21308,1295.88421 1458.82064,1295.32387 1459.43565,1294.76658 L1460.17587,1294.09838 C1462.27545,1292.20409 1464.36137,1290.27877 1465.58495,1287.7593 C1456.52296,1287.76511 1447.45953,1290.38292 1438.84277,1293.04062 C1420.27936,1298.76647 1402.19587,1307.26241 1386.80393,1319.24926 C1379.78303,1324.71767 1374.6413,1331.88512 1368.00129,1337.63997 C1365.96455,1339.40573 1362.31605,1341.77192 1359.50162,1340.4398 C1355.24961,1338.42822 1355.90588,1330.0454 1355.41874,1326.19264 C1353.54534,1311.37332 1359.14891,1292.62874 1366.27028,1279.78257 C1377.7022,1259.16128 1398.84008,1241.55301 1423.66478,1242.16794 C1434.3855,1242.43335 1443.77128,1246.16501 1454.02076,1248.60081 C1451.42171,1244.90179 1447.93728,1242.20565 1444.62486,1239.17377 C1436.50897,1231.74453 1427.63201,1224.95924 1417.88268,1219.82657 C1415.26773,1218.45023 1412.51915,1217.43388 1409.75022,1216.45975 L1408.08733,1215.8778 C1407.25557,1215.58681 1406.42402,1215.29391 1405.59574,1214.9905 C1403.51346,1214.22836 1400.89128,1213.17906 1400.10781,1210.86073 C1398.65722,1206.56707 1406.37487,1202.59031 1409.20954,1200.77959 C1420.16806,1193.78038 1433.60492,1188.02263 1446.79315,1187.69848 C1467.40342,1187.1916 1487.541,1198.64836 1496.03056,1218.14421 C1499.41855,1225.92354 1500.09804,1234.21057 1500.70889,1242.5268 L1500.82326,1244.08631 C1500.88069,1244.86613 1500.93897,1245.64593 1501.00027,1246.42534 C1507.47332,1241.13895 1512.02599,1233.35946 1518.34654,1227.69743 C1533.12846,1214.45461 1553.35856,1208.57576 1572.55366,1214.53728 C1589.90066,1219.92375 1604.97747,1231.9164 1613.85081,1247.87566 C1616.17232,1252.05111 1622.64899,1262.25625 1617.96983,1266.41503 C1614.3076,1269.67098 1609.66313,1267.13366 1605.80069,1265.78341 C1601.8125,1264.38966 1597.64361,1263.69061 1593.51375,1262.86103 C1583.01058,1260.75155 1570.79301,1260.97055 1560.26672,1262.82477 C1553.46119,1264.02346 1546.81034,1266.44983 1540.02939,1267.4549 L1540.02939,1268.90522 C1558.57112,1269.05895 1576.50717,1279.65567 1585.65516,1295.73603 C1589.44532,1302.39805 1591.33824,1310.02308 1592.79026,1317.49075 C1594.5856,1326.72055 1593.32366,1336.77631 1590.80628,1345.77188 C1589.9621,1348.78781 1588.42984,1353.9009 1584.82977,1354.5956 C1582.28492,1355.08653 1580.12387,1352.54848 1578.67112,1350.83711 C1574.86289,1346.35128 1571.2404,1342.08663 1566.77157,1338.21284 C1555.46613,1328.41379 1543.51238,1319.37471 1531.35625,1310.65904 C1524.90199,1306.03109 1517.83266,1300.01446 1510.39617,1297.18635 C1512.48712,1302.23199 1514.53542,1306.92303 1515.24662,1312.41465 C1517.33829,1328.56825 1510.5877,1343.77263 1500.4553,1355.92409 C1497.36333,1359.63254 1494.05597,1363.36782 1490.15884,1366.24887 C1488.54275,1367.44393 1486.51468,1369.00447 1484.37675,1368.66655 C1477.67386,1367.60564 1476.87593,1357.4839 1475.84816,1352.2983 C1472.36734,1334.73427 1473.76516,1317.28988 1478.59466,1300.08698 C1474.29784,1302.2697 1471.19213,1307.04631 1468.49406,1310.96434 C1462.55802,1319.58573 1457.40762,1328.70458 1453.71431,1338.52031 C1439.00539,1377.62006 1439.14705,1423.41664 1458.20194,1461.05811 C1460.32975,1465.26184 1463.55905,1464.69767 1467.75323,1464.69767 C1472.80895,1464.69767 1477.91309,1464.44387 1482.93123,1465.11536 C1484.88413,1465.37642 1487.59593,1465.14364 1489.14192,1466.58526 C1490.99291,1468.31258 1490.00634,1471.27412 1489.57991,1473.39956 C1488.3888,1479.3415 1487.99056,1484.74174 1487.99056,1490.80333 C1495.9019,1489.57492 1498.09476,1476.86871 1500.89908,1470.49893 C1504.07706,1463.28289 1507.3107,1456.0596 1510.25089,1448.74421 C1511.69641,1445.14888 1513.6298,1441.12861 1513.12242,1437.1417 C1512.55289,1432.66095 1509.32142,1427.91044 1507.06929,1424.08887 C1502.80645,1416.85687 1497.96105,1409.41458 1494.82282,1401.60899 C1492.31412,1395.36901 1494.65008,1387.5714 1501.72375,1385.34226 C1505.62522,1384.1124 1509.7876,1386.52427 1512.32666,1389.34948 C1515.93315,1393.3614 1518.67364,1398.69976 1521.26801,1403.88732 L1522.0059,1405.3641 C1522.98612,1407.32427 1523.95508,1409.24214 1524.95258,1411.03604 L1555.1062,1465.42283 C1557.66694,1470.0283 1560.23347,1474.6287 1562.85348,1479.20082 C1563.87546,1480.9847 1564.91552,1483.73885 1567.00936,1484.49954 C1568.87408,1485.17684 1571.42182,1484.21383 1573.27642,1483.84182 C1578.09146,1482.87591 1582.89927,1481.83314 1587.73166,1480.9586 C1593.52242,1479.91074 1602.34951,1480.10726 1606.52346,1475.57503 C1600.41901,1473.63813 1593.36269,1473.75271 1587.00889,1474.18925 C1586.22321,1474.2433 1585.41997,1474.34419 1584.60911,1474.45086 L1583.91244,1474.54275 C1581.00382,1474.92353 1578.03411,1475.22838 1575.45555,1473.58665 C1570.23649,1470.26398 1566.76723,1462.58891 1563.57407,1457.4461 C1555.70103,1444.76455 1548.28333,1431.89228 1540.7442,1419.01276 C1538.34102,1414.90692 1535.86628,1410.83299 1533.5361,1406.68509 C1532.63554,1405.08104 1531.3006,1402.96721 1532.59073,1401.19855 C1533.93235,1399.36006 1536.8405,1399.23436 1539.486,1399.22865 L1540.63853,1399.22883 C1541.48104,1399.22712 1542.26426,1399.21253 1542.92044,1399.12605 C1553.68091,1397.70765 1564.591,1396.53289 1575.44471,1396.53289 C1574.5998,1393.58875 1572.18361,1390.26101 1572.95624,1387.10875 C1574.68509,1380.05587 1584.81459,1377.84921 1589.52555,1382.91009 C1592.68835,1386.30745 1594.52634,1390.98326 1596.58404,1395.08258 C1599.29945,1400.49442 1602.39143,1405.72571 1605.2991,1411.03604 C1610.38879,1420.33328 1615.94754,1429.37526 1621.18178,1438.59201 C1621.64941,1439.41555 1622.13242,1440.23451 1622.62001,1441.05306 L1623.35349,1442.2811 C1625.55616,1445.9674 1627.74247,1449.68746 1628.92907,1453.82031 C1610.75017,1452.98711 1597.1037,1431.84732 1589.17718,1417.56245 C1588.54476,1419.8496 1589.57253,1421.89091 1590.39431,1424.08887 C1592.10219,1428.65373 1594.14327,1433.00105 1596.71197,1437.1417 C1600.38071,1443.05463 1604.58646,1449.14377 1610.13726,1453.4367 C1619.98778,1461.05448 1632.97725,1461.09654 1644.82982,1460.28219 C1652.43038,1459.75935 1661.92747,1456.2931 1669.40371,1458.64478 C1676.86767,1460.99284 1679.87219,1469.23933 1675.4395,1475.5743 C1672.11913,1480.31973 1667.68716,1482.1116 1662.1761,1482.8266 C1666.07323,1491.20144 1671.17882,1498.97368 1674.87936,1507.48195 C1676.42101,1511.02652 1678.02771,1516.45867 1681.72174,1518.32885 C1684.1813,1519.57322 1687.70476,1518.41442 1690.3638,1518.35931 C1687.69536,1511.28612 1682.69891,1505.284 1680.24514,1498.0549 C1687.72644,1498.3979 1694.96201,1502.30868 1701.92799,1504.80467 C1717.73912,1510.4696 1733.32041,1516.74438 1748.90749,1523.00031 C1754.4648,1525.23017 1760.05536,1527.43755 1765.53101,1529.86175 C1767.5345,1530.74862 1770.30846,1532.82184 1772.523,1531.54557 C1774.3299,1530.50352 1775.49861,1528.01913 1776.61311,1526.33604 C1779.73038,1521.62687 1782.55349,1516.73786 1785.34985,1511.83289 C1796.54904,1492.18983 1804.76323,1470.66644 1810.25043,1448.74421 C1828.34983,1376.44313 1812.82274,1296.66786 1769.32912,1236.27314 C1752.61815,1213.06883 1731.60241,1193.00808 1708.43284,1176.39473 C1650.44929,1134.82074 1574.37719,1118.17113 1504.61407,1133.60828 Z M1623.14697,1494.16008 C1607.776,1498.17456 1591.93524,1501.81339 1576.16747,1503.85616 C1578.24107,1510.92862 1583.30835,1517.80819 1587.01757,1524.16056 C1588.45153,1526.61667 1589.98595,1529.90599 1592.8199,1530.97197 C1596.02101,1532.17573 1599.88923,1530.22215 1602.90965,1529.23667 C1601.5111,1525.40348 1599.15779,1521.95391 1597.23163,1518.35931 C1596.43804,1516.87709 1595.21007,1515.1222 1595.86417,1513.36225 C1597.10081,1510.03668 1602.23459,1510.23247 1605.07793,1509.65452 C1612.5708,1508.13169 1619.98561,1506.23105 1627.48354,1504.72635 C1630.24594,1504.17161 1634.09247,1502.66908 1636.8686,1503.59728 C1640.50626,1504.81337 1641.61498,1509.15561 1644.25884,1511.54718 C1647.2901,1514.289 1651.82326,1514.71032 1655.67124,1515.45868 C1653.32299,1510.16503 1649.42008,1505.53345 1646.91788,1500.23038 C1645.46296,1497.14628 1644.26751,1492.60897 1641.0823,1490.82654 C1636.69442,1488.37115 1627.63243,1492.98823 1623.14697,1494.16008 Z M1526.29692,1458.89641 C1525.57344,1468.08996 1522.75828,1475.56995 1518.34654,1483.55176 C1523.40226,1484.1928 1528.55916,1484.42122 1533.52454,1485.65399 C1537.24604,1486.57784 1540.67554,1488.33997 1544.36596,1489.35302 C1542.39282,1483.94479 1538.73203,1479.1196 1535.89592,1474.12472 C1533.03234,1469.0827 1530.46942,1462.95584 1526.29692,1458.89641 Z" id="Combined-Shape-Copy" fill-rule="nonzero"></path>
        </g>
    </g>
</svg>
</file>

<file path="src/router.tsx">
import { createRouter } from '@tanstack/react-router'

// Import the generated route tree
import { routeTree } from './routeTree.gen'

// Create a new router instance
export const getRouter = () => {
  return createRouter({
    routeTree,
    scrollRestoration: true,
    defaultPreloadStaleTime: 0,
  })
}
</file>

<file path="src/styles.css">
@import 'tailwindcss';

@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

body {
  @apply m-0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.871 0.006 286.286);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.21 0.006 285.885);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.871 0.006 286.286);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.274 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.274 0.006 286.033);
  --sidebar-ring: oklch(0.442 0.017 285.786);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
</file>

<file path=".cta.json">
{
  "projectName": "tanstack-start-config-check",
  "mode": "file-router",
  "typescript": true,
  "tailwind": true,
  "packageManager": "pnpm",
  "addOnOptions": {},
  "git": true,
  "version": 1,
  "framework": "react-cra",
  "chosenAddOns": [
    "nitro",
    "start",
    "shadcn"
  ]
}
</file>

<file path=".cursorrules">
# shadcn instructions

Use the latest version of Shadcn to install new components, like this command to add a button component:

```bash
pnpx shadcn@latest add button
```
</file>

<file path=".gitignore">
node_modules
.DS_Store
dist
dist-ssr
*.local
count.txt
.env
.nitro
.tanstack
.output
.vinxi
todos.json
</file>

<file path="components.json">
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/styles.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
</file>

<file path="package.json">
{
  "name": "tanstack-start-config-check",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite dev --port 3000",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest run"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.0.6",
    "@tanstack/nitro-v2-vite-plugin": "^1.132.31",
    "@tanstack/react-devtools": "^0.7.0",
    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-devtools": "^1.132.0",
    "@tanstack/react-router-ssr-query": "^1.131.7",
    "@tanstack/react-start": "^1.132.0",
    "@tanstack/router-plugin": "^1.132.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^0.544.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.6",
    "tw-animate-css": "^1.3.6",
    "vite-tsconfig-paths": "^5.1.4"
  },
  "devDependencies": {
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.2.0",
    "@types/node": "^22.10.2",
    "@types/react": "^19.0.8",
    "@types/react-dom": "^19.0.3",
    "@vitejs/plugin-react": "^5.0.4",
    "jsdom": "^27.0.0",
    "typescript": "^5.7.2",
    "vite": "^7.1.7",
    "vitest": "^3.0.5",
    "web-vitals": "^5.1.0"
  }
}
</file>

<file path="README.md">
Welcome to your new TanStack app! 

# Getting Started

To run this application:

```bash
pnpm install
pnpm start
```

# Building For Production

To build this application for production:

```bash
pnpm build
```

## Testing

This project uses [Vitest](https://vitest.dev/) for testing. You can run the tests with:

```bash
pnpm test
```

## Styling

This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.



## Shadcn

Add components using the latest version of [Shadcn](https://ui.shadcn.com/).

```bash
pnpx shadcn@latest add button
```



## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.

### Adding A Route

To add a new route to your application just add another a new file in the `./src/routes` directory.

TanStack will automatically generate the content of the route file for you.

Now that you have two routes you can use a `Link` component to navigate between them.

### Adding Links

To use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/react-router`.

```tsx
import { Link } from "@tanstack/react-router";
```

Then anywhere in your JSX you can use it like so:

```tsx
<Link to="/about">About</Link>
```

This will create a link that will navigate to the `/about` route.

More information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/react/api/router/linkComponent).

### Using A Layout

In the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.

Here is an example layout that includes a header:

```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'

import { Link } from "@tanstack/react-router";

export const Route = createRootRoute({
  component: () => (
    <>
      <header>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>
      </header>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
})
```

The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.

More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).


## Data Fetching

There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.

For example:

```tsx
const peopleRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "/people",
  loader: async () => {
    const response = await fetch("https://swapi.dev/api/people");
    return response.json() as Promise<{
      results: {
        name: string;
      }[];
    }>;
  },
  component: () => {
    const data = peopleRoute.useLoaderData();
    return (
      <ul>
        {data.results.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    );
  },
});
```

Loaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#loader-parameters).

### React-Query

React-Query is an excellent addition or alternative to route loading and integrating it into you application is a breeze.

First add your dependencies:

```bash
pnpm add @tanstack/react-query @tanstack/react-query-devtools
```

Next we'll need to create a query client and provider. We recommend putting those in `main.tsx`.

```tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// ...

const queryClient = new QueryClient();

// ...

if (!rootElement.innerHTML) {
  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <QueryClientProvider client={queryClient}>
      <RouterProvider router={router} />
    </QueryClientProvider>
  );
}
```

You can also add TanStack Query Devtools to the root route (optional).

```tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const rootRoute = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <ReactQueryDevtools buttonPosition="top-right" />
      <TanStackRouterDevtools />
    </>
  ),
});
```

Now you can use `useQuery` to fetch your data.

```tsx
import { useQuery } from "@tanstack/react-query";

import "./App.css";

function App() {
  const { data } = useQuery({
    queryKey: ["people"],
    queryFn: () =>
      fetch("https://swapi.dev/api/people")
        .then((res) => res.json())
        .then((data) => data.results as { name: string }[]),
    initialData: [],
  });

  return (
    <div>
      <ul>
        {data.map((person) => (
          <li key={person.name}>{person.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;
```

You can find out everything you need to know on how to use React-Query in the [React-Query documentation](https://tanstack.com/query/latest/docs/framework/react/overview).

## State Management

Another common requirement for React applications is state management. There are many options for state management in React. TanStack Store provides a great starting point for your project.

First you need to add TanStack Store as a dependency:

```bash
pnpm add @tanstack/store
```

Now let's create a simple counter in the `src/App.tsx` file as a demonstration.

```tsx
import { useStore } from "@tanstack/react-store";
import { Store } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

function App() {
  const count = useStore(countStore);
  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
    </div>
  );
}

export default App;
```

One of the many nice features of TanStack Store is the ability to derive state from other state. That derived state will update when the base state updates.

Let's check this out by doubling the count using derived state.

```tsx
import { useStore } from "@tanstack/react-store";
import { Store, Derived } from "@tanstack/store";
import "./App.css";

const countStore = new Store(0);

const doubledStore = new Derived({
  fn: () => countStore.state * 2,
  deps: [countStore],
});
doubledStore.mount();

function App() {
  const count = useStore(countStore);
  const doubledCount = useStore(doubledStore);

  return (
    <div>
      <button onClick={() => countStore.setState((n) => n + 1)}>
        Increment - {count}
      </button>
      <div>Doubled - {doubledCount}</div>
    </div>
  );
}

export default App;
```

We use the `Derived` class to create a new store that is derived from another store. The `Derived` class has a `mount` method that will start the derived store updating.

Once we've created the derived store we can use it in the `App` component just like we would any other store using the `useStore` hook.

You can find out everything you need to know on how to use TanStack Store in the [TanStack Store documentation](https://tanstack.com/store/latest).

# Demo files

Files prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.

# Learn More

You can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).
</file>

<file path="tsconfig.json">
{
  "include": ["**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "target": "ES2022",
    "jsx": "react-jsx",
    "module": "ESNext",
    "lib": ["ES2022", "DOM", "DOM.Iterable"],
    "types": ["vite/client"],

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": false,
    "noEmit": true,

    /* Linting */
    "skipLibCheck": true,
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}
</file>

<file path="vite.config.ts">
import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'

const config = defineConfig({
  plugins: [
    nitroV2Plugin(),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
})

export default config
</file>

</files>