@opencode-ai/ui 0.0.0-beta-202606251302

package/src/assets/icons/app/powershell.svg

@@ -0,0 +1,14 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.9013 7.2002H10.604C9.83641 7.2002 9.09532 7.84723 8.91004 8.66305L4.03999 31.3373C3.85472 32.1532 4.33113 32.8002 5.0987 32.8002H29.396C30.1636 32.8002 30.9047 32.1532 31.09 31.3373L35.96 8.69118C36.1453 7.87536 35.6689 7.2002 34.9013 7.2002Z" fill="url(#paint0_linear_5437_79143)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7489 26.5009H25.2421C25.8826 26.5009 26.3999 27.0942 26.3999 27.8223C26.3999 28.5505 25.8826 29.1438 25.2421 29.1438H19.7489C19.1085 29.1438 18.5912 28.5505 18.5912 27.8223C18.5912 27.0942 19.1085 26.5009 19.7489 26.5009ZM23.3208 20.6216C23.2222 20.8374 23.0252 21.0531 22.6803 21.3228L12.4575 29.3596C11.8909 29.7911 11.1027 29.6293 10.6593 28.982C10.2405 28.3347 10.339 27.4448 10.881 27.0133L20.0938 19.7047V19.5429L14.305 12.8006C13.837 12.2612 13.8862 11.3713 14.4035 10.8049C14.9455 10.2655 15.7584 10.2655 16.2264 10.8049L23.173 18.8956C23.5917 19.408 23.6163 20.1092 23.3208 20.6216Z" fill="#2C5591"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2368 20.6216C23.1387 20.8374 22.9426 21.0531 22.5993 21.3228L12.448 29.3596C11.8841 29.7911 11.0994 29.6293 10.6581 28.982C10.2412 28.3347 10.3393 27.4448 10.8788 27.0133L20.0492 19.7047V19.5429L14.287 12.8006C13.8212 12.2612 13.8702 11.3713 14.3851 10.8049C14.9246 10.2655 15.7337 10.2655 16.1996 10.8049L23.1142 18.8956C23.5311 19.3811 23.5556 20.0822 23.2368 20.6216ZM19.7795 26.6357H25.2475C25.885 26.6357 26.3999 27.202 26.3999 27.8763C26.3999 28.5775 25.885 29.1168 25.2475 29.1168H19.7795C19.142 29.1168 18.6271 28.5505 18.6271 27.8763C18.6271 27.1751 19.142 26.6357 19.7795 26.6357Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_5437_79143" x1="9.76654" y1="10.3425" x2="29.068" y2="26.4694" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2D4664"/>
+<stop offset="0.169" stop-color="#29405B"/>
+<stop offset="0.445" stop-color="#1E2F43"/>
+<stop offset="0.79" stop-color="#0C131B"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/icons/app/sublimetext.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5436_78897)">
+<path d="M35.911 20.0773C35.911 19.7026 35.552 19.4866 35.1114 19.5939L4.79962 27.0055C4.35812 27.1135 4 27.5052 4 27.8792V35.4541C4 35.8288 4.35812 36.0455 4.79962 35.9375L35.1114 28.5266C35.552 28.4187 35.911 28.0269 35.911 27.6523V20.0774V20.0773Z" fill="url(#paint0_linear_5436_78897)"/>
+<path d="M4 19.8353C4 20.21 4.35812 20.6016 4.79962 20.7097L35.1159 28.1219C35.5573 28.2299 35.9155 28.0133 35.9155 27.6393V20.0637C35.9155 19.6897 35.5573 19.298 35.1159 19.19L4.79962 11.7778C4.35812 11.6699 4 11.8858 4 12.2603V19.8353V19.8353Z" fill="#FF9800"/>
+<path d="M35.911 4.51106C35.911 4.1365 35.552 3.91973 35.1114 4.02778L4.79962 11.4387C4.35812 11.5466 4 11.9383 4 12.313V19.8879C4 20.2626 4.35812 20.4786 4.79962 20.3712L35.1114 12.9596C35.552 12.8517 35.911 12.46 35.911 12.086V4.51106Z" fill="#FF9800"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_5436_78897" x1="1762.84" y1="981.852" x2="1845.15" y2="624.882" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF9700"/>
+<stop offset="0.53" stop-color="#F48E00"/>
+<stop offset="1" stop-color="#D06F00"/>
+</linearGradient>
+<clipPath id="clip0_5436_78897">
+<rect width="32" height="32" fill="white" transform="translate(4 4)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/app/vscode.svg

@@ -0,0 +1,39 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_5437_79124" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="30" height="30">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.0227 34.1285C26.2519 34.2179 26.4969 34.2592 26.7427 34.2497C26.9884 34.2403 27.2296 34.1804 27.4512 34.0738L33.3809 31.2206C33.6863 31.0736 33.9439 30.8433 34.1243 30.5563C34.3046 30.2693 34.4002 29.9372 34.4001 29.5983V10.2522C34.4001 9.91323 34.3044 9.58119 34.1241 9.29424C33.9437 9.00729 33.686 8.77709 33.3806 8.63014L27.4518 5.77692C27.1167 5.6157 26.7398 5.56263 26.3733 5.62507C26.0067 5.6875 25.6687 5.86235 25.4059 6.1254L14.0543 16.4807L9.10994 12.7281C8.88691 12.5587 8.61163 12.4728 8.33186 12.4852C8.05209 12.4976 7.78549 12.6076 7.57835 12.7961L5.99262 14.2387C5.86908 14.3511 5.77035 14.488 5.70276 14.6408C5.63517 14.7935 5.60021 14.9587 5.6001 15.1257C5.59999 15.2928 5.63474 15.458 5.70213 15.6108C5.76952 15.7636 5.86807 15.9007 5.99147 16.0133L10.2792 19.9252L5.99176 23.8371C5.86836 23.9497 5.76981 24.0868 5.70242 24.2396C5.63503 24.3925 5.60028 24.5577 5.60039 24.7247C5.60049 24.8917 5.63546 25.0569 5.70305 25.2097C5.77064 25.3624 5.86936 25.4994 5.99291 25.6118L7.57864 27.0547C7.78578 27.2431 8.05237 27.3531 8.33214 27.3655C8.61191 27.3779 8.8872 27.292 9.11022 27.1226L14.0546 23.3694L25.4059 33.7253C25.5814 33.9011 25.7913 34.0384 26.0227 34.1285ZM27.2044 13.3876L18.5918 19.9252L27.2047 26.4631L27.2044 13.3876Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5437_79124)">
+<path d="M33.3807 8.6342L27.4467 5.77724C27.1116 5.61588 26.7346 5.56266 26.368 5.62494C26.0013 5.68722 25.663 5.86191 25.3999 6.12486L5.97403 23.8369C5.85059 23.9494 5.75201 24.0865 5.68459 24.2393C5.61718 24.3922 5.58241 24.5574 5.58252 24.7245C5.58263 24.8915 5.61761 25.0567 5.68522 25.2094C5.75284 25.3622 5.8516 25.4991 5.97518 25.6115L7.56206 27.0541C7.76938 27.2425 8.03605 27.3524 8.31587 27.3648C8.59569 27.3772 8.87105 27.2913 9.09422 27.1221L32.4879 9.37551C33.2727 8.78022 34.3999 9.3398 34.3999 10.3251V10.2559C34.3999 9.91713 34.3042 9.58524 34.1239 9.2984C33.9436 9.01157 33.686 8.78145 33.3807 8.63449V8.6342Z" fill="#0065A9"/>
+<g filter="url(#filter0_d_5437_79124)">
+<path d="M33.3807 31.2161L27.4467 34.0731C27.1116 34.2345 26.7346 34.2877 26.3679 34.2255C26.0012 34.1632 25.663 33.9885 25.3999 33.7255L5.97403 16.0135C5.85059 15.9009 5.75201 15.7638 5.68459 15.611C5.61718 15.4582 5.58241 15.2929 5.58252 15.1259C5.58263 14.9588 5.61761 14.7937 5.68522 14.6409C5.75284 14.4882 5.8516 14.3512 5.97518 14.2388L7.56206 12.7962C7.76938 12.6079 8.03605 12.498 8.31587 12.4856C8.59569 12.4731 8.87105 12.559 9.09422 12.7282L32.4879 30.4748C33.2727 31.0701 34.3999 30.5105 34.3999 29.5253V29.5944C34.3999 29.9332 34.3042 30.2651 34.1239 30.5519C33.9436 30.8388 33.686 31.0692 33.3807 31.2161Z" fill="#007ACC"/>
+</g>
+<g filter="url(#filter1_d_5437_79124)">
+<path d="M27.447 34.0738C27.1118 34.235 26.7347 34.2881 26.3679 34.2257C26.0012 34.1633 25.6629 33.9884 25.3999 33.7253C26.064 34.3898 27.1999 33.9194 27.1999 32.98V6.87104C27.1999 5.93159 26.064 5.46128 25.3999 6.12541C25.6629 5.86234 26.0012 5.68749 26.3679 5.62506C26.7347 5.56263 27.1118 5.6157 27.447 5.77693L33.3798 8.63044C33.6853 8.77731 33.9432 9.00748 34.1236 9.29443C34.3041 9.58139 34.3999 9.91347 34.3999 10.2525V29.5986C34.3999 29.9376 34.3042 30.2697 34.1238 30.5567C33.9434 30.8437 33.6856 31.0739 33.3801 31.2209L27.447 34.0738Z" fill="#1F9CF0"/>
+</g>
+<path opacity="0.25" fill-rule="evenodd" clip-rule="evenodd" d="M26.0052 34.1285C26.2343 34.2179 26.4793 34.2591 26.7251 34.2497C26.9709 34.2403 27.212 34.1804 27.4336 34.0738L33.3633 31.2206C33.6687 31.0736 33.9265 30.8434 34.1068 30.5564C34.2872 30.2694 34.3829 29.9372 34.3828 29.5983V10.2522C34.3828 9.91323 34.2871 9.58119 34.1068 9.29424C33.9264 9.00729 33.6687 8.77709 33.3633 8.63014L27.4339 5.77692C27.0989 5.6157 26.722 5.56263 26.3554 5.62507C25.9889 5.6875 25.6508 5.86235 25.388 6.1254L14.0367 16.4807L9.09236 12.7281C8.86936 12.5588 8.59413 12.4729 8.31442 12.4853C8.03472 12.4977 7.76818 12.6077 7.56106 12.7961L5.97504 14.2387C5.8515 14.3511 5.75277 14.488 5.68518 14.6408C5.6176 14.7935 5.58263 14.9587 5.58252 15.1257C5.58241 15.2928 5.61716 15.458 5.68456 15.6108C5.75195 15.7636 5.85049 15.9007 5.97389 16.0133L10.2616 19.9252L5.97389 23.8371C5.85049 23.9497 5.75195 24.0868 5.68456 24.2396C5.61716 24.3925 5.58241 24.5577 5.58252 24.7247C5.58263 24.8917 5.6176 25.0569 5.68518 25.2097C5.75277 25.3624 5.8515 25.4994 5.97504 25.6118L7.56106 27.0544C7.76818 27.2428 8.03472 27.3527 8.31442 27.3651C8.59413 27.3775 8.86936 27.2916 9.09236 27.1223L14.0367 23.3697L25.388 33.7256C25.5635 33.9014 25.7737 34.0384 26.0052 34.1285ZM27.1868 13.3876L18.5739 19.9252L27.1868 26.4631V13.3876Z" fill="url(#paint0_linear_5437_79124)" style="mix-blend-mode:overlay"/>
+</g>
+<defs>
+<filter id="filter0_d_5437_79124" x="-7.75188" y="-0.850024" width="55.4862" height="48.4354" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6.6672"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow_5437_79124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5437_79124" result="shape"/>
+</filter>
+<filter id="filter1_d_5437_79124" x="12.0655" y="-7.73479" width="35.6688" height="55.3202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6.6672"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow_5437_79124"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5437_79124" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5437_79124" x1="19.9825" y1="5.59951" x2="19.9825" y2="34.2509" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/assets/icons/app/zed-dark.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5437_79100)">
+<mask id="mask0_5437_79100" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="30" height="30">
+<path d="M5.6001 5.59961H34.4001V34.3996H5.6001V5.59961Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5437_79100)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3001 7.39961C8.0614 7.39961 7.83248 7.49443 7.6637 7.66321C7.49492 7.832 7.4001 8.06091 7.4001 8.29961V28.0996H5.6001V8.29961C5.6001 7.58352 5.88456 6.89677 6.39091 6.39042C6.89726 5.88407 7.58401 5.59961 8.3001 5.59961H32.4138C33.6165 5.59961 34.2186 7.05371 33.3684 7.90421L18.5166 22.7557H22.7001V20.8996H24.5001V23.206C24.5001 23.5641 24.3579 23.9074 24.1047 24.1606C23.8515 24.4138 23.5081 24.556 23.1501 24.556H16.7166L13.623 27.6496H27.6501V16.3996H29.4501V27.6496C29.4501 28.127 29.2605 28.5848 28.9229 28.9224C28.5853 29.26 28.1275 29.4496 27.6501 29.4496H11.823L8.673 32.5996H31.7001C31.9388 32.5996 32.1677 32.5048 32.3365 32.336C32.5053 32.1672 32.6001 31.9383 32.6001 31.6996V11.8996H34.4001V31.6996C34.4001 32.4157 34.1156 33.1024 33.6093 33.6088C33.1029 34.1151 32.4162 34.3996 31.7001 34.3996H7.5864C6.3837 34.3996 5.7816 32.9455 6.6318 32.095L21.4272 17.2996H17.3001V19.0996H15.5001V16.8496C15.5001 16.4916 15.6423 16.1482 15.8955 15.895C16.1487 15.6418 16.4921 15.4996 16.8501 15.4996H23.2272L26.3772 12.3496H12.3501V23.5996H10.5501V12.3496C10.5501 11.8722 10.7397 11.4144 11.0773 11.0768C11.4149 10.7393 11.8727 10.5496 12.3501 10.5496H28.1772L31.3272 7.39961H8.3001Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_5437_79100">
+<rect width="28.8" height="28.8" fill="white" transform="translate(5.6001 5.59961)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/app/zed.svg

@@ -0,0 +1,15 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_5437_79109)">
+<mask id="mask0_5437_79109" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="30" height="30">
+<path d="M5.6001 5.59961H34.4001V34.3996H5.6001V5.59961Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_5437_79109)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.3001 7.39961C8.0614 7.39961 7.83248 7.49443 7.6637 7.66321C7.49492 7.832 7.4001 8.06091 7.4001 8.29961V28.0996H5.6001V8.29961C5.6001 7.58352 5.88456 6.89677 6.39091 6.39042C6.89726 5.88407 7.58401 5.59961 8.3001 5.59961H32.4138C33.6165 5.59961 34.2186 7.05371 33.3684 7.90421L18.5166 22.7557H22.7001V20.8996H24.5001V23.206C24.5001 23.5641 24.3579 23.9074 24.1047 24.1606C23.8515 24.4138 23.5081 24.556 23.1501 24.556H16.7166L13.623 27.6496H27.6501V16.3996H29.4501V27.6496C29.4501 28.127 29.2605 28.5848 28.9229 28.9224C28.5853 29.26 28.1275 29.4496 27.6501 29.4496H11.823L8.673 32.5996H31.7001C31.9388 32.5996 32.1677 32.5048 32.3365 32.336C32.5053 32.1672 32.6001 31.9383 32.6001 31.6996V11.8996H34.4001V31.6996C34.4001 32.4157 34.1156 33.1024 33.6093 33.6088C33.1029 34.1151 32.4162 34.3996 31.7001 34.3996H7.5864C6.3837 34.3996 5.7816 32.9455 6.6318 32.095L21.4272 17.2996H17.3001V19.0996H15.5001V16.8496C15.5001 16.4916 15.6423 16.1482 15.8955 15.895C16.1487 15.6418 16.4921 15.4996 16.8501 15.4996H23.2272L26.3772 12.3496H12.3501V23.5996H10.5501V12.3496C10.5501 11.8722 10.7397 11.4144 11.0773 11.0768C11.4149 10.7393 11.8727 10.5496 12.3501 10.5496H28.1772L31.3272 7.39961H8.3001Z" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_5437_79109">
+<rect width="28.8" height="28.8" fill="white" transform="translate(5.6001 5.59961)"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/accordion.css

@@ -0,0 +1,123 @@
+[data-component="accordion"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0px;
+  align-self: stretch;
+
+  [data-slot="accordion-item"] {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    overflow: visible;
+
+    & + [data-slot="accordion-item"] {
+      margin-top: -1px;
+    }
+
+    [data-slot="accordion-header"] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      padding: 0;
+
+      [data-slot="accordion-trigger"] {
+        width: 100%;
+        display: flex;
+        height: 32px;
+        padding: 8px 12px;
+        justify-content: space-between;
+        align-items: center;
+        align-self: stretch;
+        cursor: default;
+        user-select: none;
+
+        background-color: var(--background-stronger);
+        border: 1px solid var(--border-weak-base);
+        border-radius: 0;
+        box-shadow: none;
+        overflow: clip;
+        color: var(--text-strong);
+        transition: background-color 0.15s ease;
+
+        /* text-12-regular */
+        font-family: var(--font-family-sans);
+        font-size: var(--font-size-small);
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 166.667% */
+        letter-spacing: var(--letter-spacing-normal);
+
+        &:hover:not([data-disabled]) {
+          background-color: var(--surface-base-hover);
+        }
+        &:active:not([data-disabled]) {
+          background-color: var(--surface-base-active);
+        }
+        &:focus-visible {
+          outline: none;
+        }
+        &[data-disabled] {
+          cursor: not-allowed;
+        }
+      }
+    }
+
+    &:first-child {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-top-left-radius: var(--radius-lg);
+        border-top-right-radius: var(--radius-lg);
+      }
+    }
+
+    &:last-child:not([data-expanded]) {
+      [data-slot="accordion-header"] [data-slot="accordion-trigger"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
+      }
+    }
+
+    &[data-expanded] {
+      [data-slot="accordion-content"] {
+        border: 1px solid var(--border-weak-base);
+        border-top: 0;
+        background-color: var(--background-stronger);
+      }
+    }
+
+    &:last-child[data-expanded] {
+      [data-slot="accordion-content"] {
+        border-bottom-left-radius: var(--radius-lg);
+        border-bottom-right-radius: var(--radius-lg);
+      }
+    }
+
+    [data-slot="accordion-content"] {
+      overflow: hidden;
+      width: 100%;
+      border: 0;
+      background-color: transparent;
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/components/accordion.tsx

@@ -0,0 +1,92 @@
+import { Accordion as Kobalte } from "@kobalte/core/accordion"
+import { splitProps } from "solid-js"
+import type { ComponentProps, ParentProps } from "solid-js"
+
+export interface AccordionProps extends ComponentProps<typeof Kobalte> {}
+export interface AccordionItemProps extends ComponentProps<typeof Kobalte.Item> {}
+export interface AccordionHeaderProps extends ComponentProps<typeof Kobalte.Header> {}
+export interface AccordionTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {}
+export interface AccordionContentProps extends ComponentProps<typeof Kobalte.Content> {}
+
+function AccordionRoot(props: AccordionProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte
+      {...rest}
+      data-component="accordion"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function AccordionItem(props: AccordionItemProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.Item
+      {...rest}
+      data-slot="accordion-item"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function AccordionHeader(props: ParentProps<AccordionHeaderProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Header
+      {...rest}
+      data-slot="accordion-header"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Header>
+  )
+}
+
+function AccordionTrigger(props: ParentProps<AccordionTriggerProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Trigger
+      {...rest}
+      data-slot="accordion-trigger"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Trigger>
+  )
+}
+
+function AccordionContent(props: ParentProps<AccordionContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="accordion-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+export const Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+})

package/src/components/animated-number.css

@@ -0,0 +1,75 @@
+[data-component="animated-number"] {
+  display: inline-flex;
+  align-items: baseline;
+  vertical-align: baseline;
+  line-height: inherit;
+  font-variant-numeric: tabular-nums;
+
+  [data-slot="animated-number-value"] {
+    display: inline-flex;
+    flex-direction: row-reverse;
+    align-items: baseline;
+    justify-content: flex-end;
+    line-height: inherit;
+    width: var(--animated-number-width, 1ch);
+    overflow: hidden;
+    transition: width var(--tool-motion-spring-ms, 560ms) var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-digit"] {
+    display: inline-block;
+    width: 1ch;
+    height: 1em;
+    line-height: 1em;
+    overflow: hidden;
+    vertical-align: baseline;
+    -webkit-mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      #000 var(--tool-motion-mask, 18%),
+      #000 calc(100% - var(--tool-motion-mask, 18%)),
+      transparent 100%
+    );
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      #000 var(--tool-motion-mask, 18%),
+      #000 calc(100% - var(--tool-motion-mask, 18%)),
+      transparent 100%
+    );
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+  }
+
+  [data-slot="animated-number-strip"] {
+    display: inline-flex;
+    flex-direction: column;
+    transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
+    transition-property: transform;
+    transition-duration: var(--animated-number-duration, 560ms);
+    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-strip"][data-animating="false"] {
+    transition-duration: 0ms;
+  }
+
+  [data-slot="animated-number-cell"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1ch;
+    height: 1em;
+    line-height: 1em;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="animated-number"] [data-slot="animated-number-value"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="animated-number"] [data-slot="animated-number-strip"] {
+    transition-duration: 0ms;
+  }
+}

package/src/components/animated-number.tsx

@@ -0,0 +1,109 @@
+import { For, Index, createEffect, createMemo, on } from "solid-js"
+import { createStore } from "solid-js/store"
+
+const TRACK = Array.from({ length: 30 }, (_, index) => index % 10)
+const DURATION = 600
+
+function normalize(value: number) {
+  return ((value % 10) + 10) % 10
+}
+
+function spin(from: number, to: number, direction: 1 | -1) {
+  if (from === to) return 0
+  if (direction > 0) return (to - from + 10) % 10
+  return -((from - to + 10) % 10)
+}
+
+function Digit(props: { value: number; direction: 1 | -1 }) {
+  const [state, setState] = createStore({
+    step: props.value + 10,
+    animating: false,
+  })
+  const step = () => state.step
+  const animating = () => state.animating
+  let last = props.value
+
+  createEffect(
+    on(
+      () => props.value,
+      (next) => {
+        const delta = spin(last, next, props.direction)
+        last = next
+        if (!delta) {
+          setState("animating", false)
+          setState("step", next + 10)
+          return
+        }
+
+        setState("animating", true)
+        setState("step", (value) => value + delta)
+      },
+      { defer: true },
+    ),
+  )
+
+  return (
+    <span data-slot="animated-number-digit">
+      <span
+        data-slot="animated-number-strip"
+        data-animating={animating() ? "true" : "false"}
+        onTransitionEnd={() => {
+          setState("animating", false)
+          setState("step", (value) => normalize(value) + 10)
+        }}
+        style={{
+          "--animated-number-offset": `${step()}`,
+          "--animated-number-duration": `var(--tool-motion-odometer-ms, ${DURATION}ms)`,
+        }}
+      >
+        <For each={TRACK}>{(value) => <span data-slot="animated-number-cell">{value}</span>}</For>
+      </span>
+    </span>
+  )
+}
+
+export function AnimatedNumber(props: { value: number; class?: string }) {
+  const target = createMemo(() => {
+    if (!Number.isFinite(props.value)) return 0
+    return Math.max(0, Math.round(props.value))
+  })
+
+  const [state, setState] = createStore({
+    value: target(),
+    direction: 1 as 1 | -1,
+  })
+  const value = () => state.value
+  const direction = () => state.direction
+
+  createEffect(
+    on(
+      target,
+      (next) => {
+        const current = value()
+        if (next === current) return
+
+        setState("direction", next > current ? 1 : -1)
+        setState("value", next)
+      },
+      { defer: true },
+    ),
+  )
+
+  const label = createMemo(() => value().toString())
+  const digits = createMemo(() =>
+    Array.from(label(), (char) => {
+      const code = char.charCodeAt(0) - 48
+      if (code < 0 || code > 9) return 0
+      return code
+    }).reverse(),
+  )
+  const width = createMemo(() => `${digits().length}ch`)
+
+  return (
+    <span data-component="animated-number" class={props.class} aria-label={label()}>
+      <span data-slot="animated-number-value" style={{ "--animated-number-width": width() }}>
+        <Index each={digits()}>{(digit) => <Digit value={digit()} direction={direction()} />}</Index>
+      </span>
+    </span>
+  )
+}

package/src/components/app-icon.css

@@ -0,0 +1,5 @@
+img[data-component="app-icon"] {
+  display: block;
+  box-sizing: border-box;
+  object-fit: contain;
+}

package/src/components/app-icon.tsx

@@ -0,0 +1,85 @@
+import type { Component, ComponentProps } from "solid-js"
+import { createSignal, onCleanup, onMount, splitProps } from "solid-js"
+import type { IconName } from "./app-icons/types"
+
+import androidStudio from "../assets/icons/app/android-studio.svg"
+import antigravity from "../assets/icons/app/antigravity.svg"
+import cursor from "../assets/icons/app/cursor.svg"
+import fileExplorer from "../assets/icons/app/file-explorer.svg"
+import finder from "../assets/icons/app/finder.png"
+import ghostty from "../assets/icons/app/ghostty.svg"
+import iterm2 from "../assets/icons/app/iterm2.svg"
+import powershell from "../assets/icons/app/powershell.svg"
+import terminal from "../assets/icons/app/terminal.png"
+import textmate from "../assets/icons/app/textmate.png"
+import vscode from "../assets/icons/app/vscode.svg"
+import warp from "../assets/icons/app/warp.png"
+import xcode from "../assets/icons/app/xcode.png"
+import zed from "../assets/icons/app/zed.svg"
+import zedDark from "../assets/icons/app/zed-dark.svg"
+import sublimetext from "../assets/icons/app/sublimetext.svg"
+
+const icons = {
+  vscode,
+  cursor,
+  zed,
+  "file-explorer": fileExplorer,
+  finder,
+  terminal,
+  iterm2,
+  ghostty,
+  warp,
+  xcode,
+  "android-studio": androidStudio,
+  antigravity,
+  textmate,
+  powershell,
+  "sublime-text": sublimetext,
+} satisfies Record<IconName, string>
+
+const themed: Partial<Record<IconName, { light: string; dark: string }>> = {
+  zed: {
+    light: zed,
+    dark: zedDark,
+  },
+}
+
+const scheme = () => {
+  if (typeof document !== "object") return "light" as const
+  if (document.documentElement.dataset.colorScheme === "dark") return "dark" as const
+  return "light" as const
+}
+
+export type AppIconProps = Omit<ComponentProps<"img">, "src"> & {
+  id: IconName
+}
+
+export const AppIcon: Component<AppIconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["id", "class", "classList", "alt", "draggable"])
+  const [mode, setMode] = createSignal(scheme())
+
+  onMount(() => {
+    const sync = () => setMode(scheme())
+    const observer = new MutationObserver(sync)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-color-scheme"],
+    })
+    sync()
+    onCleanup(() => observer.disconnect())
+  })
+
+  return (
+    <img
+      data-component="app-icon"
+      {...rest}
+      src={themed[local.id]?.[mode()] ?? icons[local.id]}
+      alt={local.alt ?? ""}
+      draggable={local.draggable ?? false}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}