motion-ui-skill 2.0.0

package/components/docks/Icons.tsx

@@ -0,0 +1,222 @@
+import type { SVGProps } from "react";
+
+export function AppleAppStoreIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <defs>
+        <linearGradient id="SVG5lqYietg" x1="50%" x2="50%" y1="0%" y2="100%">
+          <stop offset="0%" stopColor="#17c9fb" />
+          <stop offset="100%" stopColor="#1a74e8" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#SVG5lqYietg)"
+        d="M56.064 0h143.872C230.9 0 256 25.1 256 56.064v143.872C256 230.9 230.9 256 199.936 256H56.064C25.1 256 0 230.9 0 199.936V56.064C0 25.1 25.1 0 56.064 0"
+      />
+      <path
+        fill="#fff"
+        d="m82.042 185.81l.024.008l-8.753 15.16c-3.195 5.534-10.271 7.43-15.805 4.235s-7.43-10.271-4.235-15.805l6.448-11.168l.619-1.072c1.105-1.588 3.832-4.33 9.287-3.814c0 0 12.837 1.393 13.766 8.065c0 0 .126 2.195-1.351 4.391m124.143-38.72h-27.294c-1.859-.125-2.67-.789-2.99-1.175l-.02-.035l-29.217-50.606l-.038.025l-1.752-2.512c-2.872-4.392-7.432 6.84-7.432 6.84c-5.445 12.516.773 26.745 2.94 31.046l40.582 70.29c3.194 5.533 10.27 7.43 15.805 4.234c5.533-3.195 7.43-10.271 4.234-15.805l-10.147-17.576c-.197-.426-.539-1.582 1.542-1.587h13.787c6.39 0 11.57-5.18 11.57-11.57s-5.18-11.57-11.57-11.57m-53.014 15.728s1.457 7.411-4.18 7.411H48.092c-6.39 0-11.57-5.18-11.57-11.57s5.18-11.57 11.57-11.57h25.94c4.188-.242 5.18-2.66 5.18-2.66l.024.012l33.86-58.648l-.01-.002c.617-1.133.103-2.204.014-2.373l-11.183-19.369c-3.195-5.533-1.299-12.61 4.235-15.804s12.61-1.3 15.805 4.234l5.186 8.983l5.177-8.967c3.195-5.533 10.271-7.43 15.805-4.234s7.43 10.27 4.235 15.804l-47.118 81.61c-.206.497-.269 1.277 1.264 1.414h28.164l.006.275s16.278.253 18.495 15.454"
+      />
+    </svg>
+  );
+}
+
+export function AppleMusicIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      viewBox="0 0 361 361"
+      {...props}
+    >
+      <linearGradient
+        id="a"
+        x1="180"
+        x2="180"
+        y1="358.605"
+        y2="7.759"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop offset="0" style={{ stopColor: "#fa233b" }} />
+        <stop offset="1" style={{ stopColor: "#fb5c74" }} />
+      </linearGradient>
+      <path
+        d="M360 112.61c0-4.3 0-8.6-.02-12.9-.02-3.62-.06-7.24-.16-10.86-.21-7.89-.68-15.84-2.08-23.64-1.42-7.92-3.75-15.29-7.41-22.49a75.633 75.633 0 0 0-33.06-33.05c-7.19-3.66-14.56-5.98-22.47-7.41C287 .86 279.04.39 271.15.18c-3.62-.1-7.24-.14-10.86-.16-4.3-.02-8.6-.02-12.9-.02H112.61c-4.3 0-8.6 0-12.9.02-3.62.02-7.24.06-10.86.16C80.96.4 73 .86 65.2 2.27c-7.92 1.42-15.28 3.75-22.47 7.41A75.633 75.633 0 0 0 9.67 42.73c-3.66 7.2-5.99 14.57-7.41 22.49C.86 73.02.39 80.98.18 88.86.08 92.48.04 96.1.02 99.72 0 104.01 0 108.31 0 112.61v134.77c0 4.3 0 8.6.02 12.9.02 3.62.06 7.24.16 10.86.21 7.89.68 15.84 2.08 23.64 1.42 7.92 3.75 15.29 7.41 22.49a75.633 75.633 0 0 0 33.06 33.05c7.19 3.66 14.56 5.98 22.47 7.41 7.8 1.4 15.76 1.87 23.65 2.08 3.62.1 7.24.14 10.86.16 4.3.03 8.6.02 12.9.02h134.77c4.3 0 8.6 0 12.9-.02 3.62-.02 7.24-.06 10.86-.16 7.89-.21 15.85-.68 23.65-2.08 7.92-1.42 15.28-3.75 22.47-7.41a75.633 75.633 0 0 0 33.06-33.05c3.66-7.2 5.99-14.57 7.41-22.49 1.4-7.8 1.87-15.76 2.08-23.64.1-3.62.14-7.24.16-10.86.03-4.3.02-8.6.02-12.9V112.61z"
+        style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "url(#a)" }}
+      />
+      <path
+        d="M254.5 55c-.87.08-8.6 1.45-9.53 1.64l-107 21.59-.04.01c-2.79.59-4.98 1.58-6.67 3-2.04 1.71-3.17 4.13-3.6 6.95-.09.6-.24 1.82-.24 3.62v133.92c0 3.13-.25 6.17-2.37 8.76s-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.28 14.54-7.46 22.38.7 6.69 3.71 13.09 8.88 17.82 3.49 3.2 7.85 5.63 12.99 6.66 5.33 1.07 11.01.7 19.31-.98 4.42-.89 8.56-2.28 12.5-4.61 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1.19-8.7 1.19-13.26V142.81c0-6.22 1.76-7.86 6.78-9.08 0 0 88.94-17.94 93.09-18.75 5.79-1.11 8.52.54 8.52 6.61v79.29c0 3.14-.03 6.32-2.17 8.92-2.12 2.59-4.74 3.37-7.81 3.99l-6.99 1.41c-8.84 1.78-14.59 2.99-19.8 5.01-4.98 1.93-8.71 4.39-11.68 7.51-5.89 6.17-8.49 14.54-7.67 22.38.7 6.69 3.92 13.09 9.09 17.82 3.49 3.2 7.85 5.56 12.99 6.6 5.33 1.07 11.01.69 19.31-.98 4.42-.89 8.56-2.22 12.5-4.55 3.9-2.3 7.24-5.37 9.85-9.11 2.62-3.75 4.31-7.92 5.24-12.35.96-4.57 1-8.7 1-13.26V64.46c.02-6.16-3.23-9.96-9.02-9.46z"
+        style={{ fillRule: "evenodd", clipRule: "evenodd", fill: "#fff" }}
+      />
+    </svg>
+  );
+}
+
+// export function AppleMapsIcon(props: SVGProps<SVGSVGElement>) {
+//   return (
+//     <svg xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com" viewBox="0 0 500 500" {...props}>
+//       <path style={{ fill: 'rgb(45, 47, 47)', stroke: 'rgb(47, 47, 47)' }} d="M 0.101 123.353 C 0.101 123.353 1.473 102.766 2.542 94.752 C 3.326 88.878 4.071 84.283 5.304 79.581 C 6.416 75.339 7.845 71.529 9.401 67.722 C 10.911 64.027 12.44 60.644 14.468 57.049 C 16.712 53.07 20.082 48.312 22.446 44.975 C 24.187 42.518 25.398 40.869 27.189 38.722 C 29.248 36.253 31.861 33.336 34.197 31.068 C 36.281 29.045 38.134 27.525 40.449 25.677 C 43.152 23.519 46.825 20.791 49.505 18.993 C 51.532 17.633 53.029 16.743 55.004 15.651 C 57.2 14.437 59.493 13.275 62.119 12.093 C 65.245 10.686 69.092 9.053 72.576 7.889 C 75.92 6.772 78.958 6.03 82.603 5.194 C 86.892 4.21 91.81 3.315 96.725 2.498 C 102.051 1.612 108.527 0.442 113.436 0.127 C 117.269 -0.119 118.744 0.238 123.727 0.259 C 136.954 0.314 172.544 0.067 196.227 -0.072 C 218.982 -0.206 237.842 -0.462 263.155 -0.553 C 296.344 -0.672 352.685 -1.804 378.214 -0.553 C 390.995 0.073 398.441 0.856 406.914 2.266 C 413.784 3.409 419.192 4.529 425.365 6.622 C 432.001 8.871 439.217 12.027 445.353 15.591 C 451.215 18.996 456.412 23.105 461.497 27.379 C 466.575 31.648 471.773 36.095 475.847 41.217 C 479.869 46.273 482.883 52.03 485.841 57.874 C 488.884 63.886 491.739 70.293 493.785 76.836 C 495.851 83.443 497.201 90.426 498.141 97.337 C 499.083 104.264 499.115 112.105 499.423 118.35 C 499.671 123.367 499.8 125.183 499.935 131.931 C 500.328 151.653 500.225 208.174 500.191 248.015 C 500.155 290.288 500.258 355.917 499.679 378.705 C 499.474 386.782 499.462 389.654 498.91 395.106 C 498.355 400.588 497.363 406.215 496.347 411.506 C 495.382 416.533 494.503 421.344 493.016 426.112 C 491.519 430.912 489.711 435.564 487.379 440.206 C 484.901 445.139 481.606 450.53 478.41 454.813 C 475.582 458.604 472.746 461.429 469.441 464.807 C 465.737 468.592 461.53 472.841 457.14 476.338 C 452.734 479.848 447.48 483.415 443.046 485.82 C 439.456 487.767 436.772 488.69 432.796 490.176 C 427.476 492.165 420.267 494.916 413.833 496.326 C 407.452 497.725 400.9 498.036 394.358 498.633 C 387.747 499.236 383.868 499.61 374.37 499.914 C 350.881 500.666 293.067 499.831 251.88 499.914 C 209.967 499.999 143.004 500.497 125.034 500.426 C 120.184 500.407 119.281 500.619 115.797 500.316 C 111.189 499.915 105.798 498.829 99.848 497.712 C 92.211 496.278 80.91 494.42 73.807 492.179 C 68.629 490.545 64.996 488.672 60.787 486.645 C 56.646 484.651 52.64 482.735 48.743 480.135 C 44.595 477.368 40.396 473.81 36.699 470.37 C 33.151 467.069 29.857 463.562 26.934 459.954 C 24.135 456.498 21.976 453.117 19.448 449.212 C 16.561 444.752 12.816 439.402 10.659 434.564 C 8.757 430.298 7.794 426.075 6.753 421.87 C 5.753 417.831 5.235 414.349 4.474 409.826 C 3.5 404.039 2.144 397.681 1.545 389.97 C 0.72 379.348 1.347 368.708 1.219 351.886 C 0.968 318.86 0.418 246.903 0.243 205.083 C 0.112 173.879 0.101 123.353 0.101 123.353 C 0.101 123.353 0.101 123.353 0.101 123.353 C 0.101 123.353 0.101 123.353 0.101 123.353" bxD="M 0.101 123.353 R 2.542 94.752 R 5.304 79.581 R 9.401 67.722 R 14.468 57.049 R 22.446 44.975 R 27.189 38.722 R 34.197 31.068 R 40.449 25.677 R 49.505 18.993 R 55.004 15.651 R 62.119 12.093 R 72.576 7.889 R 82.603 5.194 R 96.725 2.498 R 113.436 0.127 R 123.727 0.259 R 196.227 -0.072 R 263.155 -0.553 R 378.214 -0.553 R 406.914 2.266 R 425.365 6.622 R 445.353 15.591 R 461.497 27.379 R 475.847 41.217 R 485.841 57.874 R 493.785 76.836 R 498.141 97.337 R 499.423 118.35 R 499.935 131.931 R 500.191 248.015 R 499.679 378.705 R 498.91 395.106 R 496.347 411.506 R 493.016 426.112 R 487.379 440.206 R 478.41 454.813 R 469.441 464.807 R 457.14 476.338 R 443.046 485.82 R 432.796 490.176 R 413.833 496.326 R 394.358 498.633 R 374.37 499.914 R 251.88 499.914 R 125.034 500.426 R 115.797 500.316 R 99.848 497.712 R 73.807 492.179 R 60.787 486.645 R 48.743 480.135 R 36.699 470.37 R 26.934 459.954 R 19.448 449.212 R 10.659 434.564 R 6.753 421.87 R 4.474 409.826 R 1.545 389.97 R 1.219 351.886 R 0.243 205.083 R 0.101 123.353 R 0.101 123.353 Z 1@45091c20" />
+//       <path style={{ fill: 'rgb(85, 85, 85)', stroke: 'rgb(85, 85, 85)' }} d="M 12.506 60.201 C 12.506 60.201 9.87 65.191 8.724 68.143 C 7.705 70.767 6.96 73.314 6.18 75.71 C 5.478 77.865 4.742 79.681 4.238 81.87 C 3.685 84.273 3.489 87.076 3.099 89.571 C 2.729 91.935 2.303 93.71 1.961 96.468 C 1.455 100.551 1.095 107.221 0.689 111.735 C 0.365 115.337 -0.021 116.669 -0.249 121.444 C -0.884 134.759 -0.178 197.284 -0.178 197.284 L 76.538 247.769 L 77.722 245.898 C 77.722 245.898 78.405 244.871 79.532 243.205 C 81.314 240.57 84.435 236.101 86.732 233.205 C 88.615 230.831 90.241 229.116 92.172 226.965 C 94.296 224.598 96.81 221.795 98.972 219.605 C 100.82 217.732 102.227 216.365 104.286 214.563 C 106.916 212.261 110.315 209.45 113.586 207.062 C 116.977 204.586 120.371 202.217 124.311 199.994 C 128.746 197.491 139.004 192.989 139.004 192.989 L 138.788 128.611 L 138.788 -0.476 L 113.96 -0.07 C 113.96 -0.07 114.112 78.535 114.127 95.554 C 114.132 101.752 114.439 105.206 114.127 108.237 C 113.95 109.958 113.902 111.16 113.293 112.243 C 112.736 113.233 111.67 113.835 110.79 114.579 C 109.892 115.339 108.921 116.311 107.953 116.749 C 107.134 117.12 106.313 117.214 105.449 117.249 C 104.536 117.286 103.552 117.173 102.612 116.915 C 101.604 116.638 100.753 116.175 99.608 115.58 C 97.959 114.723 96.067 113.459 93.767 112.076 C 90.443 110.077 85.649 107.345 81.585 104.733 C 77.361 102.018 73.907 99.409 68.902 96.055 C 61.754 91.266 50.769 84.19 42.701 78.866 C 35.754 74.282 23.342 66.016 23.342 66.016 L 13.187 59.206 L 12.506 60.201 Z" />
+//       <path style={{ fill: 'rgb(85, 85, 85)', stroke: 'rgb(85, 85, 85)' }} d="M 239.27 -0.729 L 263.585 -0.832 L 263.56 207.072 L 263.073 206.742 C 263.073 206.742 262.614 206.437 262.39 206.274 C 262.164 206.11 261.945 205.936 261.723 205.763 C 261.499 205.588 261.344 205.45 261.052 205.229 C 260.531 204.835 259.564 204.174 258.839 203.634 C 258.121 203.1 257.509 202.562 256.722 202.007 C 255.793 201.352 254.665 200.622 253.598 199.988 C 252.528 199.352 251.435 198.793 250.31 198.198 C 249.138 197.578 247.928 196.96 246.697 196.342 C 245.423 195.702 244.095 195.004 242.79 194.422 C 241.523 193.857 238.982 192.892 238.982 192.892 L 239.27 -0.729 Z" />
+//       <polygon style={{ stroke: 'rgb(71, 71, 71)', fill: 'rgb(72, 72, 72)' }} points="114.665 500.258 114.665 414.406 263.475 412.816 264.111 500.894" />
+//       <polygon style={{ fill: 'rgb(0, 135, 255)', stroke: 'rgb(1, 131, 255)' }} points="139.396 -0.372 139.077 198.575 239.349 199.533 238.71 -1.011" />
+//       <path style={{ fill: 'rgb(63, 63, 63)', stroke: 'rgb(63, 63, 63)' }} d="M 440.456 487.457 L 285.126 384.993 L 293.216 244.36 L 499.94 380.637 L 499.956 380.825 C 499.956 380.825 500.117 384.09 500.089 385.994 C 500.054 388.347 499.864 391.522 499.651 393.883 C 499.477 395.817 499.252 397.317 498.994 399.143 C 498.712 401.138 498.394 403.12 498.008 405.388 C 497.543 408.114 496.983 411.314 496.364 414.373 C 495.713 417.59 494.983 421.205 494.173 424.234 C 493.466 426.878 492.737 429.284 491.872 431.576 C 491.078 433.679 490.155 435.538 489.242 437.492 C 488.329 439.446 487.425 441.354 486.393 443.3 C 485.314 445.334 484.028 447.655 482.887 449.436 C 481.955 450.891 481.14 451.946 480.147 453.271 C 479.041 454.747 477.75 456.416 476.532 457.873 C 475.375 459.257 474.302 460.464 473.025 461.818 C 471.591 463.339 469.76 465.157 468.314 466.529 C 467.136 467.647 466.1 468.47 465.027 469.488 C 463.945 470.514 462.968 471.614 461.849 472.665 C 460.673 473.77 459.38 474.901 458.124 475.952 C 456.895 476.981 455.777 477.883 454.398 478.911 C 452.764 480.13 450.505 481.672 448.919 482.746 C 447.724 483.556 446.907 484.158 445.742 484.828 C 444.418 485.589 441.359 487.019 441.359 487.019 L 440.456 487.457 Z" />
+//       <circle style={{ fill: 'rgb(255, 255, 255)', stroke: 'rgb(255, 255, 255)' }} cx="187.457" cy="305.332" r="121.246" transform="matrix(1.05274, 0, 0, 1.053851, -8.338326, -10.586183)" />
+//       <path style={{ stroke: 'rgb(87, 89, 88)', fill: 'rgb(88, 88, 88)' }} d="M 453.48 95.415 C 454.206 95.861 461.601 98.551 465.322 99.881 C 469.958 101.538 479.247 104.752 485.094 105.299 C 489.974 105.756 499.169 105.187 499.169 105.187 L 499.281 106.416 C 499.281 106.416 499.385 108.348 499.449 109.489 C 499.529 110.924 499.652 111.565 499.728 113.119 C 499.798 114.552 499.841 116.13 499.896 117.252 C 499.934 118.024 500.007 119.206 500.007 119.206 L 499.951 121.385 L 500.51 195.952 C 500.51 195.952 490.836 194.166 486.379 193.941 C 482.401 193.741 478.871 193.581 475.096 193.159 C 471.257 192.73 467.376 192.138 463.534 191.372 C 459.649 190.597 456.06 189.605 451.916 188.523 C 447.106 187.267 440.879 185.688 436.388 184.222 C 432.855 183.069 430.228 181.996 427.061 180.703 C 423.7 179.33 420.165 177.772 416.783 176.179 C 413.407 174.588 410.1 172.987 406.785 171.152 C 403.359 169.255 399.622 166.832 396.564 164.952 C 394.058 163.412 392.188 162.336 389.75 160.707 C 386.793 158.731 383.08 156.09 380.142 153.837 C 377.531 151.835 375.413 150.073 372.937 147.917 C 370.163 145.502 366.866 142.351 364.336 139.985 C 362.315 138.095 360.671 136.698 358.918 134.846 C 357.072 132.896 355.214 130.434 353.556 128.535 C 352.162 126.938 350.977 125.752 349.646 124.178 C 348.154 122.414 346.471 120.285 345.066 118.425 C 343.793 116.739 342.802 115.286 341.547 113.51 C 340.076 111.428 338.275 109.023 336.799 106.696 C 335.334 104.386 334.077 101.957 332.722 99.602 C 331.377 97.265 330.03 95.08 328.7 92.62 C 327.254 89.947 325.787 87.076 324.399 84.13 C 322.933 81.02 321.312 77.335 320.154 74.411 C 319.225 72.067 318.701 70.125 317.864 67.988 C 317.01 65.806 315.881 63.677 315.071 61.453 C 314.261 59.227 313.621 56.92 313.005 54.639 C 312.394 52.377 311.926 50.133 311.385 47.824 C 310.827 45.443 310.259 42.979 309.709 40.563 C 309.161 38.157 308.564 35.711 308.09 33.358 C 307.639 31.117 307.191 28.796 306.917 26.767 C 306.684 25.045 306.594 23.5 306.47 21.964 C 306.356 20.55 306.309 19.334 306.191 17.886 C 306.056 16.233 305.802 14.117 305.688 12.58 C 305.601 11.401 305.567 10.48 305.52 9.452 C 305.474 8.452 305.427 7.474 305.409 6.492 C 305.391 5.519 305.401 4.609 305.409 3.587 C 305.418 2.444 305.464 -0.043 305.464 -0.043 L 394.609 0.404 C 394.609 0.404 394.685 8.49 394.944 11.854 C 395.149 14.522 395.353 16.585 395.838 19.003 C 396.353 21.57 397.207 23.998 398.016 26.823 C 398.978 30.182 399.775 33.92 401.256 37.826 C 403.05 42.559 406.33 49.042 408.405 53.075 C 409.813 55.811 410.611 57.467 412.203 59.833 C 414.178 62.768 417.313 66.361 419.632 69.161 C 421.587 71.522 423.149 73.505 425.162 75.584 C 427.283 77.775 429.95 80.018 432.088 81.952 C 433.906 83.597 434.907 84.868 437.17 86.476 C 440.794 89.051 452.419 94.966 452.419 94.966 L 453.48 95.415 Z" />
+//       <path style={{ fill: 'rgb(61, 61, 61)', stroke: 'rgb(61, 61, 61)' }} d="M 381.083 -0.001 L 316.765 -0.64 C 316.765 -0.64 316.754 4.509 316.893 7.416 C 317.057 10.856 317.354 14.863 317.788 18.668 C 318.238 22.616 318.906 26.645 319.578 30.688 C 320.266 34.827 320.869 38.786 321.88 43.219 C 323.047 48.334 324.532 54.438 326.355 59.586 C 328.066 64.417 330.581 69.137 332.365 73.268 C 333.835 76.671 334.81 79.479 336.329 82.603 C 337.939 85.914 339.96 89.404 341.827 92.577 C 343.587 95.567 345.192 98.084 347.198 101.144 C 349.58 104.777 352.49 109.41 355.254 112.908 C 357.707 116.012 360.199 118.373 362.798 121.22 C 365.559 124.245 368.235 127.418 371.365 130.554 C 374.824 134.019 379.206 137.908 382.746 141.039 C 385.74 143.687 388.059 145.967 391.185 148.2 C 394.604 150.643 399.3 153.013 402.565 154.977 C 405.043 156.468 406.647 157.523 409.087 158.941 C 412.127 160.708 416.037 162.969 419.444 164.695 C 422.638 166.313 426.012 167.823 428.907 169.043 C 431.301 170.052 433.379 170.796 435.556 171.6 C 437.638 172.369 439.509 173.053 441.694 173.774 C 444.16 174.588 447.146 175.463 449.622 176.204 C 451.796 176.854 453.499 177.459 455.759 177.994 C 458.475 178.637 461.699 179.12 464.838 179.656 C 468.204 180.231 471.771 180.833 475.323 181.318 C 478.971 181.817 483.126 182.319 486.448 182.597 C 489.13 182.822 491.387 182.966 493.737 182.981 C 495.938 182.995 500.13 182.725 500.13 182.725 L 500.13 118.918 L 500.078 116.872 C 500.078 116.872 496.32 116.768 494.248 116.616 C 491.917 116.445 489.559 116.16 486.832 115.849 C 483.469 115.465 479.112 115.085 475.579 114.443 C 472.373 113.861 469.432 113.235 466.5 112.269 C 463.594 111.312 460.806 110.274 457.851 109.056 C 454.612 107.721 451.23 106.264 447.831 104.597 C 444.195 102.813 440.39 100.367 436.962 98.203 C 433.766 96.186 430.458 93.995 427.884 92.065 C 425.855 90.544 424.478 89.327 422.641 87.718 C 420.503 85.845 418.022 83.757 415.864 81.452 C 413.577 79.01 411.482 76.18 409.343 73.396 C 407.132 70.518 404.801 67.396 402.716 64.497 C 400.763 61.781 399.062 59.463 397.353 56.465 C 395.385 53.014 393.435 48.506 391.952 44.754 C 390.635 41.423 389.626 38.592 388.628 35.163 C 387.51 31.32 386.473 26.491 385.687 22.76 C 385.047 19.722 384.558 17.226 384.152 14.448 C 383.749 11.685 383.421 8.701 383.257 6.137 C 383.116 3.94 383.129 -0.001 383.129 -0.001 L 381.083 -0.001 Z" />
+//       <circle style={{ stroke: 'rgb(1, 137, 255)', fill: 'rgb(1, 134, 255)' }} cx="187.935" cy="297.57" r="92.289" transform="matrix(1.143598, 0, 0, 1.145328, -25.869421, -29.833115)" />
+//       <path style={{ stroke: 'rgb(255, 255, 255)', fill: 'rgb(255, 255, 255)' }} d="M 175.515 249.33 L 131.486 361.462 C 131.486 361.462 130.866 363.45 130.813 364.491 C 130.757 365.579 130.829 366.789 131.206 367.856 C 131.604 368.983 132.5 370.237 133.225 371.053 C 133.792 371.691 134.331 372.158 135.019 372.511 C 135.742 372.882 136.607 373.09 137.487 373.184 C 138.463 373.288 139.653 373.221 140.628 373.016 C 141.531 372.826 142.385 372.484 143.152 372.062 C 143.894 371.654 145.171 370.548 145.171 370.548 L 179.312 336.363 L 180.726 334.802 C 180.726 334.802 182.029 333.363 182.735 332.638 C 183.483 331.87 184.456 330.897 185.104 330.32 C 185.524 329.946 185.782 329.674 186.186 329.444 C 186.603 329.206 187.137 329.04 187.577 328.929 C 187.955 328.833 188.279 328.78 188.659 328.775 C 189.081 328.769 189.581 328.763 189.998 328.929 C 190.444 329.107 190.808 329.496 191.235 329.857 C 191.743 330.286 192.277 330.811 192.822 331.36 C 193.44 331.982 194.092 332.702 194.738 333.411 C 195.417 334.156 196.798 335.729 196.798 335.729 L 227.42 365.741 L 228.698 367.152 C 228.698 367.152 230.894 369.614 231.932 370.492 C 232.754 371.187 233.512 371.701 234.344 372.118 C 235.123 372.509 236.022 372.783 236.755 372.96 C 237.343 373.102 237.806 373.176 238.382 373.184 C 239.031 373.194 239.788 373.112 240.457 372.96 C 241.115 372.81 241.801 372.577 242.364 372.286 C 242.872 372.023 243.303 371.685 243.71 371.333 C 244.104 370.992 244.443 370.592 244.775 370.211 C 245.095 369.844 245.459 369.518 245.673 369.09 C 245.897 368.644 245.963 368.096 246.065 367.575 C 246.171 367.032 246.244 366.418 246.29 365.893 C 246.33 365.435 246.368 365.083 246.346 364.603 C 246.318 363.992 246.221 363.187 246.065 362.528 C 245.916 361.9 245.7 361.393 245.448 360.733 C 245.129 359.897 244.271 357.929 244.271 357.929 L 201.79 249.359 L 199.967 244.864 C 199.967 244.864 198.779 241.672 198.226 240.322 C 197.766 239.199 197.434 238.154 196.824 237.293 C 196.256 236.491 195.462 235.806 194.749 235.274 C 194.13 234.812 193.543 234.484 192.842 234.208 C 192.078 233.907 191.135 233.711 190.318 233.591 C 189.568 233.481 188.874 233.48 188.131 233.479 C 187.36 233.478 186.476 233.434 185.775 233.591 C 185.17 233.726 184.709 233.954 184.149 234.264 C 183.466 234.642 182.585 235.314 182.018 235.779 C 181.605 236.118 181.347 236.387 181.008 236.732 C 180.637 237.11 180.208 237.503 179.886 237.966 C 179.549 238.451 179.386 238.917 179.103 239.563 C 178.715 240.451 178.201 241.696 177.867 242.758 C 177.554 243.75 176.793 245.675 176.793 245.675 L 175.515 249.33 Z" />
+//     </svg>
+//   );
+// }
+
+export function AppleSafariIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 32 32"
+      width="64"
+      height="64"
+      {...props}
+    >
+      <defs>
+        <linearGradient
+          id="A"
+          x1="67.763"
+          y1="41.314"
+          x2="67.763"
+          y2="133.674"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#f7f8f8" />
+          <stop offset="1" stopColor="#cdcccc" />
+        </linearGradient>
+        <radialGradient
+          id="B"
+          cx="-1258.61"
+          cy="397.67"
+          r=".04"
+          gradientTransform="matrix(1209.4699,0,0,-1209.4699,1522313.3,481056.29)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#69cce3" />
+          <stop offset="1" stopColor="#396fb6" />
+        </radialGradient>
+      </defs>
+      <g transform="matrix(.335585 0 0 .335585 -4.789443 -12.347336)">
+        <circle r="47.678" cy="84.472" cx="61.949" fill="url(#A)" />
+        <circle r="43.706" cy="84.472" cx="61.949" fill="url(#B)" />
+        <path
+          d="M61.95 43.556V50.5m0 74.887v-6.954m4-74.685l-.3 2.97m-7.724 78.477l.3-2.97m44.64-37.753H95.9m-74.9 0h6.954m74.72 4.013l-2.97-.3m-78.5-7.737l2.97.3M90.88 55.54l-4.92 4.907m-52.956 52.956l4.92-4.907M93.574 58.5l-2.3 1.897M30.3 110.434l2.3-1.897m58.28 4.866l-4.92-4.907M33.004 55.54l4.92 4.907M87.898 116.1l-1.883-2.3M35.987 52.833l1.883 2.3m39.734-8.47l-2.666 6.432M46.28 122.28l2.666-6.432M81.232 48.38l-1.402 2.625m-37.177 69.558l1.402-2.625m55.7-17.812l-6.418-2.653M24.14 68.817l6.418 2.653m67.47 32.298l-2.625-1.416M25.858 65.175l2.625 1.416m71.262 2.226l-6.418 2.653M24.14 100.126l6.418-2.653m70.548-24.876l-2.86.866M22.78 96.346l2.86-.866m51.964 26.8l-2.666-6.432M46.28 46.662l2.666 6.432m24.878 70.534l-.866-2.845M50.06 45.315l.866 2.845m18.994-3.82l-1.347 6.817m-14.6 73.447l1.347-6.817m18.514-72.472l-.866 2.845M50.06 123.628l.866-2.845m51.156-28.326l-6.83-1.36m-73.45-14.6l6.83 1.36m72.474 18.5l-2.86-.866M22.78 72.597l2.86.866M95.966 61.74L90.18 65.6m-62.26 41.604l5.786-3.862m64.32-38.167L95.4 66.6m-69.544 37.177l2.625-1.416m56.2 16.15l-3.862-5.786M39.203 50.44l3.862 5.786m38.167 64.337l-1.402-2.625M42.653 48.38l1.402 2.625m40.627-.565l-3.862 5.786m-41.617 62.276l3.862-5.786m44.833-59.883l-1.883 2.3M35.987 116.1l1.883-2.3m58.096-6.596l-5.786-3.862M27.92 61.74l5.786 3.862m59.868 44.832l-2.3-1.897M30.3 58.5l2.3 1.897m69.482 16.1l-6.83 1.36m-73.45 14.6l6.83-1.36m74.04-10.638l-2.97.3m-78.5 7.737l2.97-.3m45.748 36.42l-1.347-6.817m-14.6-73.45l1.347 6.817m10.64 74.038l-.3-2.97m-7.724-78.477l.3 2.97"
+          fill="none"
+          stroke="#dededd"
+          strokeLinecap="round"
+          strokeWidth=".99"
+        />
+        <path d="M57.592 80.115l4.357 4.357-30 30z" fill="#dededd" />
+        <path d="M91.925 54.482l-29.975 30-4.357-4.357z" fill="#ee4544" />
+        <path d="M66.292 88.828L61.95 84.47l29.976-30z" fill="#cb2026" />
+        <path d="M66.292 88.828L61.95 84.47l-30 30z" fill="#ababab" />
+      </g>
+    </svg>
+  );
+}
+
+export function NotionCalendarIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="94.5 88 312.85 325"
+      {...props}
+    >
+      <path
+        d="M398.579 135.841C404.242 141.152 407.35 148.439 407.35 156.355V372.638C407.35 372.725 407.347 372.812 407.343 372.9C407.329 373.178 407.3 373.455 407.3 373.733L407.325 373.859C407.325 386.91 397.107 398.225 384.27 399.798C383.352 399.948 382.433 400.062 381.489 400.125L169.818 412.937C169.151 412.975 168.497 413 167.842 413C167.767 413 167.695 412.994 167.622 412.987C167.55 412.981 167.477 412.975 167.402 412.975C167.251 412.975 167.103 412.981 166.955 412.987C166.807 412.994 166.659 413 166.508 413C158.97 413 151.91 410.231 146.461 405.109C140.559 399.559 137.275 391.944 137.275 383.688V373.405C137.275 371.316 136.872 370.196 134.443 370.196C134.443 370.196 127.786 370.322 127.094 370.322C118.687 370.322 110.822 367.227 104.744 361.513C98.1621 355.32 94.5378 346.837 94.5378 337.638L94.5 136.495C94.5 117.806 109.677 101.658 128.327 100.501L329.264 88.066C338.438 87.4996 347.134 90.5956 353.716 96.7752C360.297 102.955 363.921 111.425 363.921 120.637V126.993C363.921 126.993 363.795 129.12 366.552 129.032L377.563 128.365C385.453 127.861 392.916 130.53 398.579 135.841Z"
+        fill="white"
+      />
+      <path
+        d="M128.454 357.071C122.803 357.008 117.782 355.562 113.881 351.924C113.881 351.924 113.868 351.924 113.856 351.899C113.403 351.458 112.975 351.006 112.572 350.552C109.489 347.028 107.815 342.51 107.815 337.627L107.777 136.484C107.777 124.843 117.593 114.397 129.209 113.679L330.12 101.245C330.561 101.22 330.988 101.207 331.429 101.207C336.45 101.207 341.132 103.019 344.706 106.392C345.196 106.858 345.662 107.336 346.09 107.84C346.837 108.692 347.5 109.602 348.08 110.564C347.501 109.609 346.834 108.702 346.09 107.852C349.098 111.351 350.746 115.806 350.746 120.639V125.787C350.746 125.787 350.872 130.003 346.694 130.28L346.719 130.305L161.928 141.884C148.375 142.727 137.364 154.469 137.364 168.049C137.364 168.049 137.288 353.699 137.275 354C137.137 357.071 134.607 357.071 132.518 357.071H128.454Z"
+        fill="black"
+      />
+      <path
+        d="M394.126 373.546C394.151 373.244 394.176 372.941 394.176 372.639L394.126 155.274C394.05 154.129 393.861 153.009 393.546 151.939C392.817 149.434 391.457 147.182 389.532 145.382C386.776 142.802 383.177 141.405 379.313 141.405C378.974 141.405 378.633 141.417 378.294 141.443L163.854 154.884C163.779 154.889 163.703 154.902 163.628 154.914C163.527 154.93 163.426 154.947 163.326 154.947C156.505 155.652 150.792 161.617 150.326 168.451C150.301 168.753 150.301 169.043 150.301 169.345V382.318C150.301 382.42 150.307 382.519 150.314 382.616C150.32 382.711 150.326 382.804 150.326 382.896C150.464 387.667 152.365 392.021 155.75 395.205C158.77 398.049 162.646 399.66 166.837 399.875H167.504L381.83 386.899C381.893 386.899 381.956 386.889 382.019 386.88C382.065 386.873 382.111 386.866 382.158 386.862C382.174 386.862 382.191 386.861 382.208 386.861C388.538 385.691 393.684 380.002 394.126 373.546ZM183.927 376.339C176.59 376.855 170.096 374.364 170.297 364.748V215.08C170.297 209.946 174.526 206.661 179.194 206.421L365.747 195.233C370.404 194.994 374.216 198.367 374.216 203.036V352.968C374.216 358.455 372.845 365.516 363.406 365.881H363.381L363.368 365.893L183.927 376.339Z"
+        fill="black"
+      />
+      <path
+        d="M227.066 252.787C218.406 253.322 215.462 259.932 215.474 270.09V271.876C214.441 272.119 213.576 272.349 212.53 272.41C206.291 272.799 201.79 267.733 201.778 258.644C201.766 244.744 214.221 231.658 237.952 230.188C259.081 228.875 272.606 239.082 272.631 257.089C272.643 270.636 261.392 280.247 250.311 283.26C271.098 284.282 279.771 295.873 279.795 310.66C279.819 335.97 261.307 350.319 232.722 352.106L232.029 352.154C210.547 353.491 195.465 345.338 195.453 331.255C195.453 323.236 201.327 316.444 210.159 315.897C210.852 315.849 211.545 315.994 212.238 315.946C213.99 330.283 223.697 335.557 233.391 334.961C242.745 334.378 249.325 328.084 249.313 319.165V318.813C249.301 304.901 237.685 304.209 220.193 303.516L217.408 286.93C233.683 283.954 241.82 278.631 241.808 269.008C241.808 258.668 236.067 252.253 227.066 252.811V252.787Z"
+        fill="black"
+      />
+      <path
+        d="M305.181 245.959C287.859 250.965 284.041 243.358 285.938 235.388C296.325 232.958 323.341 224.854 333.558 221.196L333.68 327.987L352.57 330.732C352.57 337.683 348.605 342.032 341.501 342.482C335.614 342.846 321.93 343.345 315.349 343.758C305.132 344.39 286.424 345.921 286.424 345.921C285.901 344.524 285.731 343.114 285.731 341.862C285.731 338.472 287.105 334.998 291.606 333.478L305.29 329.056L305.193 245.971L305.181 245.959Z"
+        fill="black"
+      />
+    </svg>
+  );
+}
+
+export function NetflixIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <defs>
+        <path
+          id="SVG8fYEGcDn"
+          fill="#b1060f"
+          stroke="#000"
+          d="m141.676 41.275l-.067 38.361l-.068 38.361l-3.156-8.905l-.006-.017l-4.078 85.402c4.01 11.324 6.158 17.369 6.182 17.393c.031.032 2.317.17 5.078.307c8.366.415 18.734 1.304 26.599 2.282c1.821.226 3.388.342 3.483.257c.094-.084.145-39.143.114-86.797l-.058-86.644zm-61.538-.115v86.732c0 47.703.047 86.779.104 86.836s3.011-.222 6.565-.62c3.553-.398 8.465-.893 10.914-1.1c3.756-.317 14.97-1.038 16.268-1.046c.378-.002.402-1.95.457-36.735l.058-36.734l2.713 7.677l.96 2.713l4.077-85.381l-1.401-3.96a32066 32066 0 0 0-6.283-17.754l-.225-.628z"
+        />
+        <path
+          id="SVGk3mpMeLQ"
+          fill="url(#SVG4ILQC65E)"
+          d="M80.138 41.16v48.685l34.296 90.976c.004-2.085.008-3.211.012-5.594l.058-36.734l2.713 7.677c15.104 42.738 23.218 65.652 23.266 65.7c.031.032 2.317.17 5.078.307c8.366.415 18.734 1.304 26.599 2.282c1.821.226 3.388.342 3.483.257c.064-.058.107-19.21.118-46.227l-34.136-98.14l-.016 9.287l-.068 38.361l-3.156-8.905c-3.084-8.701-5.143-14.52-17.532-49.55a32066 32066 0 0 0-6.283-17.754l-.225-.628z"
+        />
+        <path
+          id="SVGVthXec6c"
+          fill="#e50914"
+          d="m80.139 41.16l34.365 97.377v-.044l2.713 7.677c15.104 42.738 23.218 65.652 23.266 65.7c.031.032 2.317.17 5.078.307c8.366.415 18.734 1.304 26.599 2.282c1.812.225 3.37.34 3.48.258l-34.1-96.737v.017l-3.156-8.905c-3.084-8.701-5.143-14.52-17.532-49.55c-3.332-9.42-6.159-17.408-6.283-17.754l-.225-.628z"
+        />
+        <radialGradient
+          id="SVG4ILQC65E"
+          cx="48.34%"
+          cy="49.419%"
+          r="70.438%"
+          fx="48.34%"
+          fy="49.419%"
+          gradientTransform="matrix(1 0 0 .55088 0 .222)"
+        >
+          <stop offset="0%" />
+          <stop offset="100%" stopOpacity="0" />
+        </radialGradient>
+      </defs>
+      <path d="M0 0h255.904v255.904H0z" />
+      <use href="#SVG8fYEGcDn" strokeWidth="2.956" />
+      <use href="#SVGk3mpMeLQ" />
+      <use href="#SVGVthXec6c" />
+      <use href="#SVG8fYEGcDn" strokeWidth="2.956" />
+      <use href="#SVGk3mpMeLQ" />
+      <use href="#SVGVthXec6c" />
+    </svg>
+  );
+}
+
+export function AdobePhotoshopIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 250" {...props}>
+      <rect width="256" height="249.6" fill="#001e36" rx="42.5" />
+      <path
+        fill="#31a8ff"
+        d="M57.644 175.035V65.297q0-1.201 1.031-1.202l1.087-.003l1.858-.02l2.582-.051l8.65-.183l9.275-.172q4.893-.085 9.702-.086q13.05 0 21.982 3.263a38.1 38.1 0 0 1 14.34 8.758a33.6 33.6 0 0 1 7.814 12.108a40.2 40.2 0 0 1 2.405 13.824q0 13.741-6.355 22.669a35.9 35.9 0 0 1-16.6 12.756l-.573.21c-6.973 2.601-14.695 3.541-23.164 3.6l-1.316.004l-1.953-.01l-.985-.014l-1.098-.026l-.662-.026l-.402-.021l-.989-.036l-1.209-.025l-1.82-.013l-.405-.001v34.263a1.366 1.366 0 0 1-1.546 1.546H58.847q-1.204.001-1.203-1.374M80.84 84.703v35.792q2.23.173 4.12.172h5.668a40.3 40.3 0 0 0 11.533-1.727l.746-.233a18.5 18.5 0 0 0 8.759-5.668q3.228-3.807 3.344-10.492l.005-.499c.09-3.322-.774-6.6-2.491-9.445a16 16 0 0 0-7.47-6.097a31.8 31.8 0 0 0-12.537-2.146l-2.178.006l-1.374.012l-1.311.017l-1.85.036l-1.35.038l-.701.026l-.937.044l-.798.049l-.455.036l-.393.038l-.173.02zm123.93 29.284a40.2 40.2 0 0 0-9.458-3.442l-.76-.164a54.3 54.3 0 0 0-11.009-1.363l-.926-.011a22.2 22.2 0 0 0-6.44.773a5.8 5.8 0 0 0-3.35 2.146a5.4 5.4 0 0 0-.858 2.92a4.56 4.56 0 0 0 1.03 2.747a11.7 11.7 0 0 0 3.235 2.637l.372.197a72 72 0 0 0 7.556 3.52a75 75 0 0 1 16.4 7.814a24.94 24.94 0 0 1 8.416 8.845a23.6 23.6 0 0 1 2.49 10.99a24.7 24.7 0 0 1-4.122 14.169a27.1 27.1 0 0 1-11.936 9.53q-7.556 3.32-18.557 3.432l-.762.004a70 70 0 0 1-13.556-1.188l-.956-.186a46.3 46.3 0 0 1-10.905-3.435a2.22 2.22 0 0 1-1.202-1.89v-18.718a1.01 1.01 0 0 1 .43-.945a.83.83 0 0 1 .944.086a45.9 45.9 0 0 0 13.223 5.238a54.5 54.5 0 0 0 12.537 1.632q6.009 0 8.844-1.546a4.86 4.86 0 0 0 2.834-4.465q0-2.23-2.576-4.293q-1.08-.864-3.097-1.88l-.643-.316l-.686-.323l-.36-.164l-.754-.334l-.393-.17l-.82-.344l-.427-.175l-.886-.355l-.46-.18l-.953-.367l-.997-.373a63 63 0 0 1-15.199-7.728a26.2 26.2 0 0 1-8.071-9.016a23.7 23.7 0 0 1-2.49-10.905a24.6 24.6 0 0 1 3.606-12.88c2.7-4.27 6.576-7.67 11.163-9.788q7.555-3.776 18.89-3.779a83.6 83.6 0 0 1 13.224.945a34.7 34.7 0 0 1 9.206 2.49c.473.136.854.485 1.03.945c.117.419.174.852.172 1.288v17.345c.025.41-.172.803-.515 1.03a1.66 1.66 0 0 1-1.478 0"
+      />
+    </svg>
+  );
+}
+
+export function SpotifyIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <path
+        fill="#1ed760"
+        d="M128 0C57.308 0 0 57.309 0 128c0 70.696 57.309 128 128 128c70.697 0 128-57.304 128-128C256 57.314 198.697.007 127.998.007zm58.699 184.614c-2.293 3.76-7.215 4.952-10.975 2.644c-30.053-18.357-67.885-22.515-112.44-12.335a7.98 7.98 0 0 1-9.552-6.007a7.97 7.97 0 0 1 6-9.553c48.76-11.14 90.583-6.344 124.323 14.276c3.76 2.308 4.952 7.215 2.644 10.975m15.667-34.853c-2.89 4.695-9.034 6.178-13.726 3.289c-34.406-21.148-86.853-27.273-127.548-14.92c-5.278 1.594-10.852-1.38-12.454-6.649c-1.59-5.278 1.386-10.842 6.655-12.446c46.485-14.106 104.275-7.273 143.787 17.007c4.692 2.89 6.175 9.034 3.286 13.72zm1.345-36.293C162.457 88.964 94.394 86.71 55.007 98.666c-6.325 1.918-13.014-1.653-14.93-7.978c-1.917-6.328 1.65-13.012 7.98-14.935C93.27 62.027 168.434 64.68 215.929 92.876c5.702 3.376 7.566 10.724 4.188 16.405c-3.362 5.69-10.73 7.565-16.4 4.187z"
+      />
+    </svg>
+  );
+}

package/components/docks/app-dock.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import {
+  Home,
+  LayoutGrid,
+  Search,
+  UserRound,
+  type LucideIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+export type AppDockItem = Readonly<{
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+}>;
+
+export type AppDockProps = Readonly<
+  {
+    items?: readonly AppDockItem[];
+    activeId?: string;
+    showLabels?: boolean;
+    onSelect?: (id: string) => void;
+  } & ComponentPropsWithoutRef<"div">
+>;
+
+const DEFAULT_ITEMS: readonly AppDockItem[] = [
+  { id: "home", label: "Home", icon: Home },
+  { id: "search", label: "Search", icon: Search },
+  { id: "apps", label: "Apps", icon: LayoutGrid },
+  { id: "profile", label: "Profile", icon: UserRound },
+];
+
+// App dock — bottom launcher matching MacDock frosted tray + hover motion.
+export const AppDock = forwardRef<HTMLDivElement, AppDockProps>(
+  (
+    {
+      className,
+      items = DEFAULT_ITEMS,
+      activeId: activeIdProp,
+      showLabels = false,
+      onSelect,
+      ...props
+    },
+    ref,
+  ) => {
+    const [activeId, setActiveId] = useState(
+      activeIdProp ?? items[0]?.id ?? "",
+    );
+    const currentId = activeIdProp ?? activeId;
+
+    return (
+      <div
+        ref={ref}
+        data-slot="app-dock"
+        className={cn("relative overflow-visible pt-10 font-sans", className)}
+        {...props}
+      >
+        <nav
+          aria-label="App dock"
+          className="mx-auto inline-flex items-end gap-2.5 rounded-2xl border border-neutral-50/20 bg-white/10 p-3 shadow-xl shadow-black/10 backdrop-blur-md"
+        >
+          {items.map((item) => {
+            const Icon = item.icon ?? Home;
+            const active = item.id === currentId;
+
+            return (
+              <button
+                key={item.id}
+                type="button"
+                aria-label={item.label}
+                aria-current={active ? "page" : undefined}
+                onClick={() => {
+                  setActiveId(item.id);
+                  onSelect?.(item.id);
+                }}
+                className="group relative flex flex-col items-center outline-none"
+              >
+                <span className="ease-smooth pointer-events-none absolute -top-10 left-1/2 z-20 -translate-x-1/2 rounded-md bg-rose-200 px-2 py-0.5 text-[10px] font-medium whitespace-nowrap text-neutral-800 opacity-0 shadow-sm transition-[opacity,transform] duration-200 group-hover:-translate-y-0.5 group-hover:opacity-100 group-focus-visible:opacity-100">
+                  {item.label}
+                </span>
+
+                <span
+                  className={cn(
+                    "ease-smooth flex size-11 origin-bottom cursor-pointer items-center justify-center rounded-lg shadow-md transition-transform duration-300 will-change-transform group-hover:-translate-y-2 group-hover:scale-125 group-focus-visible:-translate-y-2 group-focus-visible:scale-125",
+                    active
+                      ? "bg-neutral-900 text-white"
+                      : "bg-neutral-50 text-neutral-700",
+                  )}
+                >
+                  <Icon size={18} aria-hidden strokeWidth={1.75} />
+                </span>
+
+                {showLabels ? (
+                  <span className="mt-1 text-[10px] font-medium text-neutral-500">
+                    {item.label}
+                  </span>
+                ) : null}
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+    );
+  },
+);
+
+AppDock.displayName = "AppDock";

package/components/docks/editor-tool-dock.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
+
+import {
+  AudioLines,
+  Folder,
+  MousePointer2,
+  PenLine,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react";
+
+import { cn } from "@/lib/cn";
+
+export type EditorToolItem = Readonly<{
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+}>;
+
+export type EditorToolDockProps = Readonly<
+  {
+    tools?: readonly EditorToolItem[];
+    activeId?: string;
+    showAllTools?: boolean;
+    allToolsLabel?: string;
+    onSelect?: (id: string) => void;
+    onAllTools?: () => void;
+  } & ComponentPropsWithoutRef<"nav">
+>;
+
+const DEFAULT_TOOLS: readonly EditorToolItem[] = [
+  { id: "select", label: "Select", icon: MousePointer2 },
+  { id: "draw", label: "Draw", icon: PenLine },
+  { id: "generate", label: "Generate", icon: Sparkles },
+  { id: "audio", label: "Audio", icon: AudioLines },
+];
+
+// Editor tool dock — vertical frosted tool strip aligned with MacDock styling.
+export const EditorToolDock = forwardRef<HTMLElement, EditorToolDockProps>(
+  (
+    {
+      className,
+      tools = DEFAULT_TOOLS,
+      activeId: activeIdProp,
+      showAllTools = true,
+      allToolsLabel = "All tools",
+      onSelect,
+      onAllTools,
+      ...props
+    },
+    ref,
+  ) => {
+    const [activeId, setActiveId] = useState(
+      activeIdProp ?? tools[0]?.id ?? "select",
+    );
+    const currentId = activeIdProp ?? activeId;
+
+    return (
+      <nav
+        ref={ref}
+        data-slot="editor-tool-dock"
+        aria-label="Editor tools"
+        className={cn(
+          "inline-flex flex-col items-center gap-2.5 rounded-2xl border border-neutral-50 bg-white/50 p-2.5 font-sans shadow-xl shadow-black/10 backdrop-blur-md",
+          className,
+        )}
+        {...props}
+      >
+        {tools.map((tool) => {
+          const Icon = tool.icon ?? MousePointer2;
+          const active = tool.id === currentId;
+
+          return (
+            <button
+              key={tool.id}
+              type="button"
+              aria-label={tool.label}
+              aria-pressed={active}
+              title={tool.label}
+              onClick={() => {
+                setActiveId(tool.id);
+                onSelect?.(tool.id);
+              }}
+              className={cn(
+                "ease-smooth flex size-11 items-center justify-center rounded-lg shadow-xs shadow-neutral-100 transition-[background-color,color,transform] duration-300 will-change-transform",
+                active
+                  ? "bg-neutral-900 text-white"
+                  : "bg-neutral-50 text-neutral-600 hover:scale-110 hover:text-neutral-900",
+              )}
+            >
+              <Icon size={17} aria-hidden strokeWidth={1.75} />
+            </button>
+          );
+        })}
+
+        {showAllTools ? (
+          <button
+            type="button"
+            aria-label={allToolsLabel}
+            onClick={onAllTools}
+            className="ease-smooth flex size-11 items-center justify-center rounded-lg bg-rose-200 text-white shadow-xs transition-transform duration-300 hover:scale-110"
+          >
+            <Folder size={16} aria-hidden fill="currentColor" />
+          </button>
+        ) : null}
+      </nav>
+    );
+  },
+);
+
+EditorToolDock.displayName = "EditorToolDock";

package/components/docks/mac-dock.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
+
+import Link from "next/link";
+
+import { cn } from "@/lib/cn";
+
+import {
+  AdobePhotoshopIcon,
+  AppleAppStoreIcon,
+  AppleMusicIcon,
+  AppleSafariIcon,
+  NotionCalendarIcon,
+  SpotifyIcon,
+} from "./Icons";
+
+export type MacDockItem = Readonly<{
+  title: string;
+  icon: ReactNode;
+  href: string;
+}>;
+
+export type MacDockProps = Readonly<
+  {
+    items?: readonly MacDockItem[];
+    desktopClassName?: string;
+  } & Omit<ComponentPropsWithoutRef<"div">, "children">
+>;
+
+const DEFAULT_ITEMS: readonly MacDockItem[] = [
+  {
+    title: "Adobe Photoshop",
+    href: "#",
+    icon: <AdobePhotoshopIcon className="size-full" />,
+  },
+  {
+    title: "Spotify",
+    href: "#",
+    icon: <SpotifyIcon className="size-full" />,
+  },
+  {
+    title: "Notion Calendar",
+    href: "#",
+    icon: <NotionCalendarIcon className="size-full" />,
+  },
+  {
+    title: "Apple Music",
+    href: "#",
+    icon: <AppleMusicIcon className="size-full" />,
+  },
+  {
+    title: "App Store",
+    href: "#",
+    icon: <AppleAppStoreIcon className="size-full" />,
+  },
+  {
+    title: "Safari",
+    href: "#",
+    icon: <AppleSafariIcon className="size-full" />,
+  },
+];
+
+function DockLink({
+  href,
+  className,
+  children,
+  ariaLabel,
+}: Readonly<{
+  href: string;
+  className?: string;
+  children: ReactNode;
+  ariaLabel: string;
+}>) {
+  if (!href || href === "#") {
+    return (
+      <button type="button" aria-label={ariaLabel} className={className}>
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <Link href={href} aria-label={ariaLabel} className={className}>
+      {children}
+    </Link>
+  );
+}
+
+function DockIcon({ item }: Readonly<{ item: MacDockItem }>) {
+  return (
+    <DockLink
+      href={item.href}
+      ariaLabel={item.title}
+      className="group relative z-10 flex flex-col items-center outline-none"
+    >
+      <span className="ease-smooth pointer-events-none absolute -top-10 left-1/2 z-20 -translate-x-1/2 rounded-md bg-neutral-950 px-2 py-0.5 text-[10px] font-medium whitespace-nowrap text-white opacity-0 shadow-sm transition-[opacity,transform] duration-200 group-hover:-translate-y-0.5 group-hover:opacity-100 group-focus-visible:opacity-100">
+        {item.title}
+      </span>
+
+      {/* Transform on the outer wrapper — backdrop-blur fails if transform/will-change sit on the same node. */}
+      <span className="ease-smooth origin-bottom cursor-pointer transition-transform duration-300 group-hover:-translate-y-2 group-hover:scale-125 group-focus-visible:-translate-y-2 group-focus-visible:scale-125">
+        <span className="flex size-11 items-center justify-center rounded-lg border border-white/20 bg-white/50 shadow-xs shadow-black/5 backdrop-blur-xl">
+          <span className="size-8">{item.icon}</span>
+        </span>
+      </span>
+    </DockLink>
+  );
+}
+
+// Mac dock — frosted app tray with smooth hover lift (design reference for docks/).
+export const MacDock = forwardRef<HTMLDivElement, MacDockProps>(
+  ({ className, items = DEFAULT_ITEMS, desktopClassName, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="mac-dock"
+      className={cn("relative overflow-visible pt-10 font-sans", className)}
+      {...props}
+    >
+      <nav
+        aria-label="Application dock"
+        className={cn(
+          "relative mx-auto inline-flex items-end gap-2.5 p-3",
+          desktopClassName,
+        )}
+      >
+        {/* Tray glass as a sibling layer so icon tiles can blur the page behind, not a nested filter. */}
+        <span
+          aria-hidden
+          className="pointer-events-none absolute inset-0 rounded-2xl border border-white/20 bg-white/10 shadow-xl shadow-black/10 backdrop-blur-md"
+        />
+        {items.map((item) => (
+          <DockIcon key={item.title} item={item} />
+        ))}
+      </nav>
+    </div>
+  ),
+);
+
+MacDock.displayName = "MacDock";