@milesroxas/design-hub 0.0.0-stage → 0.1.1

package/kit/icons.ts

@@ -0,0 +1,329 @@
+// Untitled UI line icons (MIT), inlined so a prototype ships no icon font. Add a glyph by pasting its inner SVG here; paths use currentColor.
+export const icons = {
+ "calendar": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 10H3M16 2V6M8 2V6M7.8 22H16.2C17.8802 22 18.7202 22 19.362 21.673C19.9265 21.3854 20.3854 20.9265 20.673 20.362C21 19.7202 21 18.8802 21 17.2V8.8C21 7.11984 21 6.27976 20.673 5.63803C20.3854 5.07354 19.9265 4.61458 19.362 4.32698C18.7202 4 17.8802 4 16.2 4H7.8C6.11984 4 5.27976 4 4.63803 4.32698C4.07354 4.61458 3.61458 5.07354 3.32698 5.63803C3 6.27976 3 7.11984 3 8.8V17.2C3 18.8802 3 19.7202 3.32698 20.362C3.61458 20.9265 4.07354 21.3854 4.63803 21.673C5.27976 22 6.11984 22 7.8 22Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "check-circle": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M7.5 12L10.5 15L16.5 9M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "x-circle": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M15 9L9 15M9 9L15 15M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "info-circle": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12 16V12M12 8H12.01M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "alert-triangle": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M11.9998 8.99999V13M11.9998 17H12.0098M10.6151 3.89171L2.39019 18.0983C1.93398 18.8863 1.70588 19.2803 1.73959 19.6037C1.769 19.8857 1.91677 20.142 2.14613 20.3088C2.40908 20.5 2.86435 20.5 3.77487 20.5H20.2248C21.1353 20.5 21.5906 20.5 21.8535 20.3088C22.0829 20.142 22.2307 19.8857 22.2601 19.6037C22.2938 19.2803 22.0657 18.8863 21.6095 18.0983L13.3846 3.89171C12.9301 3.10654 12.7028 2.71396 12.4062 2.58211C12.1475 2.46709 11.8521 2.46709 11.5935 2.58211C11.2969 2.71396 11.0696 3.10655 10.6151 3.89171Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "arrow-left": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M19 12H5M5 12L12 19M5 12L12 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "arrow-right": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M5 12H19M19 12L12 5M19 12L12 19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "arrow-up-right": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M7 17L17 7M17 7H7M17 7V17\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "bar-chart-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M18 20V10M12 20V4M6 20V14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "briefcase-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M16 7C16 6.07003 16 5.60504 15.8978 5.22354C15.6204 4.18827 14.8117 3.37962 13.7765 3.10222C13.395 3 12.93 3 12 3C11.07 3 10.605 3 10.2235 3.10222C9.18827 3.37962 8.37962 4.18827 8.10222 5.22354C8 5.60504 8 6.07003 8 7M5.2 21H18.8C19.9201 21 20.4802 21 20.908 20.782C21.2843 20.5903 21.5903 20.2843 21.782 19.908C22 19.4802 22 18.9201 22 17.8V10.2C22 9.07989 22 8.51984 21.782 8.09202C21.5903 7.71569 21.2843 7.40973 20.908 7.21799C20.4802 7 19.9201 7 18.8 7H5.2C4.07989 7 3.51984 7 3.09202 7.21799C2.71569 7.40973 2.40973 7.71569 2.21799 8.09202C2 8.51984 2 9.07989 2 10.2V17.8C2 18.9201 2 19.4802 2.21799 19.908C2.40973 20.2843 2.71569 20.5903 3.09202 20.782C3.51984 21 4.0799 21 5.2 21Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "check": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M20 6L9 17L4 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "chevron-down": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "chevron-left-double": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M18 17L13 12L18 7M11 17L6 12L11 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "chevron-left": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "chevron-right-double": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M6 17L11 12L6 7M13 17L18 12L13 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "chevron-right": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "chevron-selector-vertical": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M7 15L12 20L17 15M7 9L12 4L17 9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "circle-dashed": {
+  "vb": "0 0 24 24",
+  "inner": "<circle cx=\"12\" cy=\"12\" r=\"10\" stroke-dasharray=\"5 5.472\" stroke-dashoffset=\"2.5\"/>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "clipboard-check": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M16 4C16.93 4 17.395 4 17.7765 4.10222C18.8117 4.37962 19.6204 5.18827 19.8978 6.22354C20 6.60504 20 7.07003 20 8V17.2C20 18.8802 20 19.7202 19.673 20.362C19.3854 20.9265 18.9265 21.3854 18.362 21.673C17.7202 22 16.8802 22 15.2 22H8.8C7.11984 22 6.27976 22 5.63803 21.673C5.07354 21.3854 4.6146 20.9265 4.32698 20.362C4 19.7202 4 18.8802 4 17.2V8C4 7.07003 4 6.60504 4.10222 6.22354C4.37962 5.18827 5.18827 4.37962 6.22354 4.10222C6.60504 4 7.07003 4 8 4M9 15L11 17L15.5 12.5M9.6 6H14.4C14.9601 6 15.2401 6 15.454 5.89101C15.6422 5.79513 15.7951 5.64215 15.891 5.45399C16 5.24008 16 4.96005 16 4.4V3.6C16 3.03995 16 2.75992 15.891 2.54601C15.7951 2.35785 15.6422 2.20487 15.454 2.10899C15.2401 2 14.9601 2 14.4 2H9.6C9.03995 2 8.75992 2 8.54601 2.10899C8.35785 2.20487 8.20487 2.35785 8.10899 2.54601C8 2.75992 8 3.03995 8 3.6V4.4C8 4.96005 8 5.24008 8.10899 5.45399C8.20487 5.64215 8.35785 5.79513 8.54601 5.89101C8.75992 6 9.03995 6 9.6 6Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "clock": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "clock-rewind": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M22.7 13.5C22.1 18.3 18 22 13 22C8 22 4 18 4 13C4 8 8 4 13 4C16.3 4 19.2 5.8 20.8 8.5M21 3V8.5H15.5M13 8V13L16 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "cube-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M20.5 7.27783L12 12.0001M12 12.0001L3.49997 7.27783M12 12.0001L12 21.5001M21 16.0586V7.94153C21 7.59889 21 7.42757 20.9495 7.27477C20.9049 7.13959 20.8318 7.01551 20.7354 6.91082C20.6263 6.79248 20.4766 6.70928 20.177 6.54288L12.777 2.43177C12.4934 2.27421 12.3516 2.19543 12.2015 2.16454C12.0685 2.13721 11.9315 2.13721 11.7986 2.16454C11.6484 2.19543 11.5066 2.27421 11.223 2.43177L3.82297 6.54288C3.52345 6.70928 3.37369 6.79248 3.26463 6.91082C3.16816 7.01551 3.09515 7.13959 3.05048 7.27477C3 7.42757 3 7.59889 3 7.94153V16.0586C3 16.4013 3 16.5726 3.05048 16.7254C3.09515 16.8606 3.16816 16.9847 3.26463 17.0893C3.37369 17.2077 3.52345 17.2909 3.82297 17.4573L11.223 21.5684C11.5066 21.726 11.6484 21.8047 11.7986 21.8356C11.9315 21.863 12.0685 21.863 12.2015 21.8356C12.3516 21.8047 12.4934 21.726 12.777 21.5684L20.177 17.4573C20.4766 17.2909 20.6263 17.2077 20.7354 17.0893C20.8318 16.9847 20.9049 16.8606 20.9495 16.7254C21 16.5726 21 16.4013 21 16.0586Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "dots-horizontal": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12C11 12.5523 11.4477 13 12 13ZM19 13C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11C18.4477 11 18 11.4477 18 12C18 12.5523 18.4477 13 19 13ZM5 13C5.55228 13 6 12.5523 6 12C6 11.4477 5.55228 11 5 11C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "download-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 10L12 15M12 15L7 10M12 15V3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "expand-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M14 10L21 3M21 3H15M21 3V9M10 14L3 21M3 21H9M3 21L3 15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "file-06": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M14 2.26953V6.40007C14 6.96012 14 7.24015 14.109 7.45406C14.2049 7.64222 14.3578 7.7952 14.546 7.89108C14.7599 8.00007 15.0399 8.00007 15.6 8.00007H19.7305M16 13H8M16 17H8M10 9H8M14 2H8.8C7.11984 2 6.27976 2 5.63803 2.32698C5.07354 2.6146 4.6146 3.07354 4.32698 3.63803C4 4.27976 4 5.11984 4 6.8V17.2C4 18.8802 4 19.7202 4.32698 20.362C4.6146 20.9265 5.07354 21.3854 5.63803 21.673C6.27976 22 7.11984 22 8.8 22H15.2C16.8802 22 17.7202 22 18.362 21.673C18.9265 21.3854 19.3854 20.9265 19.673 20.362C20 19.7202 20 18.8802 20 17.2V8L14 2Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "file-check-02": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M20 12.5V6.8C20 5.12 20 4.28 19.673 3.638C19.385 3.074 18.927 2.615 18.362 2.327C17.72 2 16.88 2 15.2 2H8.8C7.12 2 6.28 2 5.638 2.327C5.074 2.615 4.615 3.074 4.327 3.638C4 4.28 4 5.12 4 6.8V17.2C4 18.88 4 19.72 4.327 20.362C4.615 20.927 5.074 21.385 5.638 21.673C6.28 22 7.12 22 8.8 22H12M14 11H8M10 15H8M16 7H8M14.5 19L16.5 21L21 16.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "filter-lines": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M6 12H18M3 6H21M9 18H15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "grid-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M8.4 3H4.6C4.03995 3 3.75992 3 3.54601 3.10899C3.35785 3.20487 3.20487 3.35785 3.10899 3.54601C3 3.75992 3 4.03995 3 4.6V8.4C3 8.96005 3 9.24008 3.10899 9.45399C3.20487 9.64215 3.35785 9.79513 3.54601 9.89101C3.75992 10 4.03995 10 4.6 10H8.4C8.96005 10 9.24008 10 9.45399 9.89101C9.64215 9.79513 9.79513 9.64215 9.89101 9.45399C10 9.24008 10 8.96005 10 8.4V4.6C10 4.03995 10 3.75992 9.89101 3.54601C9.79513 3.35785 9.64215 3.20487 9.45399 3.10899C9.24008 3 8.96005 3 8.4 3Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M19.4 3H15.6C15.0399 3 14.7599 3 14.546 3.10899C14.3578 3.20487 14.2049 3.35785 14.109 3.54601C14 3.75992 14 4.03995 14 4.6V8.4C14 8.96005 14 9.24008 14.109 9.45399C14.2049 9.64215 14.3578 9.79513 14.546 9.89101C14.7599 10 15.0399 10 15.6 10H19.4C19.9601 10 20.2401 10 20.454 9.89101C20.6422 9.79513 20.7951 9.64215 20.891 9.45399C21 9.24008 21 8.96005 21 8.4V4.6C21 4.03995 21 3.75992 20.891 3.54601C20.7951 3.35785 20.6422 3.20487 20.454 3.10899C20.2401 3 19.9601 3 19.4 3Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M19.4 14H15.6C15.0399 14 14.7599 14 14.546 14.109C14.3578 14.2049 14.2049 14.3578 14.109 14.546C14 14.7599 14 15.0399 14 15.6V19.4C14 19.9601 14 20.2401 14.109 20.454C14.2049 20.6422 14.3578 20.7951 14.546 20.891C14.7599 21 15.0399 21 15.6 21H19.4C19.9601 21 20.2401 21 20.454 20.891C20.6422 20.7951 20.7951 20.6422 20.891 20.454C21 20.2401 21 19.9601 21 19.4V15.6C21 15.0399 21 14.7599 20.891 14.546C20.7951 14.3578 20.6422 14.2049 20.454 14.109C20.2401 14 19.9601 14 19.4 14Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M8.4 14H4.6C4.03995 14 3.75992 14 3.54601 14.109C3.35785 14.2049 3.20487 14.3578 3.10899 14.546C3 14.7599 3 15.0399 3 15.6V19.4C3 19.9601 3 20.2401 3.10899 20.454C3.20487 20.6422 3.35785 20.7951 3.54601 20.891C3.75992 21 4.03995 21 4.6 21H8.4C8.96005 21 9.24008 21 9.45399 20.891C9.64215 20.7951 9.79513 20.6422 9.89101 20.454C10 20.2401 10 19.9601 10 19.4V15.6C10 15.0399 10 14.7599 9.89101 14.546C9.79513 14.3578 9.64215 14.2049 9.45399 14.109C9.24008 14 8.96005 14 8.4 14Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "help-circle": {
+  "vb": "0 0 24 24",
+  "inner": "<circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3\"/><path d=\"M12 17h.01\"/>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "log-out-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M16 17L21 12M21 12L16 7M21 12H9M9 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H9\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "logo": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12 2 2 7l10 5 10-5-10-5Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"></path><path d=\"m2 17 10 5 10-5M2 12l10 5 10-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "pie-chart-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21.21 15.89A10 10 0 1 1 8 2.83M22 12A10 10 0 0 0 12 2V12H22Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "plus": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "refresh-cw-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M22 10C22 10 19.995 7.26822 18.3662 5.63824C16.7373 4.00827 14.4864 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.1031 21 19.5649 18.2543 20.6482 14.5M22 10V4M22 10H16\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "search-md": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "settings-02": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M12.0005 15C13.6573 15 15.0005 13.6569 15.0005 12C15.0005 10.3431 13.6573 9 12.0005 9C10.3436 9 9.00049 10.3431 9.00049 12C9.00049 13.6569 10.3436 15 12.0005 15Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path><path d=\"M9.28957 19.3711L9.87402 20.6856C10.0478 21.0768 10.3313 21.4093 10.6902 21.6426C11.0492 21.8759 11.4681 22.0001 11.8962 22C12.3244 22.0001 12.7433 21.8759 13.1022 21.6426C13.4612 21.4093 13.7447 21.0768 13.9185 20.6856L14.5029 19.3711C14.711 18.9047 15.0609 18.5159 15.5029 18.26C15.9477 18.0034 16.4622 17.8941 16.9729 17.9478L18.4029 18.1C18.8286 18.145 19.2582 18.0656 19.6396 17.8713C20.021 17.6771 20.3379 17.3763 20.5518 17.0056C20.766 16.635 20.868 16.2103 20.8455 15.7829C20.823 15.3555 20.677 14.9438 20.4251 14.5978L19.5785 13.4344C19.277 13.0171 19.1159 12.5148 19.1185 12C19.1184 11.4866 19.281 10.9864 19.5829 10.5711L20.4296 9.40778C20.6814 9.06175 20.8275 8.65007 20.85 8.22267C20.8725 7.79528 20.7704 7.37054 20.5562 7C20.3423 6.62923 20.0255 6.32849 19.644 6.13423C19.2626 5.93997 18.833 5.86053 18.4074 5.90556L16.9774 6.05778C16.4667 6.11141 15.9521 6.00212 15.5074 5.74556C15.0645 5.48825 14.7144 5.09736 14.5074 4.62889L13.9185 3.31444C13.7447 2.92317 13.4612 2.59072 13.1022 2.3574C12.7433 2.12408 12.3244 1.99993 11.8962 2C11.4681 1.99993 11.0492 2.12408 10.6902 2.3574C10.3313 2.59072 10.0478 2.92317 9.87402 3.31444L9.28957 4.62889C9.0825 5.09736 8.73245 5.48825 8.28957 5.74556C7.84479 6.00212 7.33024 6.11141 6.81957 6.05778L5.38513 5.90556C4.95946 5.86053 4.52987 5.93997 4.14844 6.13423C3.76702 6.32849 3.45014 6.62923 3.23624 7C3.02206 7.37054 2.92002 7.79528 2.94251 8.22267C2.96499 8.65007 3.11103 9.06175 3.36291 9.40778L4.20957 10.5711C4.51151 10.9864 4.67411 11.4866 4.67402 12C4.67411 12.5134 4.51151 13.0137 4.20957 13.4289L3.36291 14.5922C3.11103 14.9382 2.96499 15.3499 2.94251 15.7773C2.92002 16.2047 3.02206 16.6295 3.23624 17C3.45036 17.3706 3.76727 17.6712 4.14864 17.8654C4.53001 18.0596 4.95949 18.1392 5.38513 18.0944L6.81513 17.9422C7.3258 17.8886 7.84034 17.9979 8.28513 18.2544C8.72966 18.511 9.08134 18.902 9.28957 19.3711Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "share-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 12V16.2C21 17.88 21 18.72 20.673 19.362C20.385 19.927 19.927 20.385 19.362 20.673C18.72 21 17.88 21 16.2 21H7.8C6.12 21 5.28 21 4.638 20.673C4.074 20.385 3.615 19.927 3.327 19.362C3 18.72 3 17.88 3 16.2V12M16 7L12 3M12 3L8 7M12 3V14\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "shield-tick": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M9 11.5L11 13.5L15.5 9M20 12C20 16.9084 14.646 20.4784 12.698 21.615C12.4766 21.7442 12.3659 21.8087 12.2097 21.8422C12.0884 21.8682 11.9116 21.8682 11.7903 21.8422C11.6341 21.8087 11.5234 21.7442 11.302 21.615C9.35396 20.4784 4 16.9084 4 12V7.21759C4 6.41808 4 6.01833 4.13076 5.6747C4.24627 5.37113 4.43398 5.10027 4.67766 4.88552C4.9535 4.64243 5.3278 4.50207 6.0764 4.22134L11.4382 2.21067C11.6461 2.13271 11.75 2.09373 11.857 2.07827C11.9518 2.06457 12.0482 2.06457 12.143 2.07827C12.25 2.09373 12.3539 2.13271 12.5618 2.21067L17.9236 4.22134C18.6722 4.50207 19.0465 4.64243 19.3223 4.88552C19.566 5.10027 19.7537 5.37113 19.8692 5.6747C20 6.01833 20 6.41808 20 7.21759V12Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "stars-02": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M4.5 22V17M4.5 7V2M2 4.5H7M2 19.5H7M13 3L11.266 7.509C10.984 8.242 10.843 8.609 10.624 8.917C10.429 9.19 10.19 9.429 9.917 9.624C9.609 9.843 9.242 9.984 8.509 10.266L4 12L8.509 13.734C9.242 14.016 9.609 14.157 9.917 14.376C10.19 14.571 10.429 14.81 10.624 15.083C10.843 15.391 10.984 15.758 11.266 16.491L13 21L14.734 16.491C15.016 15.758 15.157 15.391 15.376 15.083C15.571 14.81 15.81 14.571 16.083 14.376C16.391 14.157 16.758 14.016 17.491 13.734L22 12L17.491 10.266C16.758 9.984 16.391 9.843 16.083 9.624C15.81 9.429 15.571 9.19 15.376 8.917C15.157 8.609 15.016 8.242 14.734 7.509L13 3Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "tag-03": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 11L13.4059 3.40589C12.887 2.88703 12.6276 2.6276 12.3249 2.44208C12.0564 2.27759 11.7638 2.15638 11.4577 2.08289C11.1124 2 10.7455 2 10.0118 2L6 2M3 8.7L3 10.6745C3 11.1637 3 11.4083 3.05526 11.6385C3.10425 11.8425 3.18506 12.0376 3.29472 12.2166C3.4184 12.4184 3.59136 12.5914 3.93726 12.9373L11.7373 20.7373C12.5293 21.5293 12.9253 21.9253 13.382 22.0737C13.7837 22.2042 14.2163 22.2042 14.618 22.0737C15.0747 21.9253 15.4707 21.5293 16.2627 20.7373L18.7373 18.2627C19.5293 17.4707 19.9253 17.0747 20.0737 16.618C20.2042 16.2163 20.2042 15.7837 20.0737 15.382C19.9253 14.9253 19.5293 14.5293 18.7373 13.7373L11.4373 6.43726C11.0914 6.09136 10.9184 5.9184 10.7166 5.79472C10.5376 5.68506 10.3425 5.60425 10.1385 5.55526C9.90829 5.5 9.6637 5.5 9.17452 5.5H6.2C5.0799 5.5 4.51984 5.5 4.09202 5.71799C3.7157 5.90973 3.40973 6.21569 3.21799 6.59202C3 7.01984 3 7.57989 3 8.7Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "target-04": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M16 8V5L19 2L20 4L22 5L19 8H16ZM16 8L12 11.9999M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "trash-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M16 6V5.2C16 4.0799 16 3.51984 15.782 3.09202C15.5903 2.71569 15.2843 2.40973 14.908 2.21799C14.4802 2 13.9201 2 12.8 2H11.2C10.0799 2 9.51984 2 9.09202 2.21799C8.71569 2.40973 8.40973 2.71569 8.21799 3.09202C8 3.51984 8 4.0799 8 5.2V6M10 11.5V16.5M14 11.5V16.5M3 6H21M19 6V17.2C19 18.8802 19 19.7202 18.673 20.362C18.3854 20.9265 17.9265 21.3854 17.362 21.673C16.7202 22 15.8802 22 14.2 22H9.8C8.11984 22 7.27976 22 6.63803 21.673C6.07354 21.3854 5.6146 20.9265 5.32698 20.362C5 19.7202 5 18.8802 5 17.2V6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "trend-down-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M22 17L13.5 8.5L8.5 13.5L2 7M22 17H16M22 17V11\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>",
+  "rootStroke": false,
+  "rootFill": true
+ },
+ "triangle-down": {
+  "vb": "0 0 10 6",
+  "inner": "<path d=\"M0 0h10L5 6z\" fill=\"currentColor\"/>",
+  "rootStroke": false,
+  "rootFill": false
+ },
+ "upload-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 8L12 3M12 3L7 8M12 3V15\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "message-text-square-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M7 8.5H12M7 12H15M9.68375 18H16.2C17.8802 18 18.7202 18 19.362 17.673C19.9265 17.3854 20.3854 16.9265 20.673 16.362C21 15.7202 21 14.8802 21 13.2V7.8C21 6.11984 21 5.27976 20.673 4.63803C20.3854 4.07354 19.9265 3.6146 19.362 3.32698C18.7202 3 17.8802 3 16.2 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V20.3355C3 20.8684 3 21.1348 3.10923 21.2716C3.20422 21.3906 3.34827 21.4599 3.50054 21.4597C3.67563 21.4595 3.88367 21.2931 4.29976 20.9602L6.68521 19.0518C7.17252 18.662 7.41617 18.4671 7.68749 18.3285C7.9282 18.2055 8.18443 18.1156 8.44921 18.0613C8.74767 18 9.0597 18 9.68375 18Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "x-close": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M18 6L6 18M6 6L18 18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "sliders-04": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M20 20V13M12 20V10M4 20L4 16M13.4067 5.0275L18.5751 6.96567M10.7988 5.40092L5.20023 9.59983M21.0607 6.43934C21.6464 7.02513 21.6464 7.97487 21.0607 8.56066C20.4749 9.14645 19.5251 9.14645 18.9393 8.56066C18.3536 7.97487 18.3536 7.02513 18.9393 6.43934C19.5251 5.85355 20.4749 5.85355 21.0607 6.43934ZM5.06066 9.43934C5.64645 10.0251 5.64645 10.9749 5.06066 11.5607C4.47487 12.1464 3.52513 12.1464 2.93934 11.5607C2.35355 10.9749 2.35355 10.0251 2.93934 9.43934C3.52513 8.85355 4.47487 8.85355 5.06066 9.43934ZM13.0607 3.43934C13.6464 4.02513 13.6464 4.97487 13.0607 5.56066C12.4749 6.14645 11.5251 6.14645 10.9393 5.56066C10.3536 4.97487 10.3536 4.02513 10.9393 3.43934C11.5251 2.85355 12.4749 2.85355 13.0607 3.43934Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "variable": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M19.9061 21C21.2464 18.2888 22 15.2329 22 12C22 8.76711 21.2464 5.71116 19.9061 3M4.09393 3C2.75363 5.71116 2 8.76711 2 12C2 15.2329 2.75363 18.2888 4.09393 21M16.5486 8.625H16.459C15.8056 8.625 15.1848 8.91202 14.7596 9.41072L9.38471 15.7143C8.95948 16.213 8.33871 16.5 7.6853 16.5H7.59563M8.71483 8.625H10.1089C10.6086 8.625 11.0477 8.95797 11.185 9.44094L12.9594 15.6841C13.0967 16.167 13.5358 16.5 14.0355 16.5H15.4296\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "edit-02": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M2.5 21.4998L8.04927 19.3655C8.40421 19.229 8.58168 19.1607 8.74772 19.0716C8.8952 18.9924 9.0358 18.901 9.16804 18.7984C9.31692 18.6829 9.45137 18.5484 9.72028 18.2795L21 6.99982C22.1046 5.89525 22.1046 4.10438 21 2.99981C19.8955 1.89525 18.1046 1.89524 17 2.99981L5.72028 14.2795C5.45138 14.5484 5.31692 14.6829 5.20139 14.8318C5.09877 14.964 5.0074 15.1046 4.92823 15.2521C4.83911 15.4181 4.77085 15.5956 4.63433 15.9506L2.5 21.4998ZM2.5 21.4998L4.55812 16.1488C4.7054 15.7659 4.77903 15.5744 4.90534 15.4867C5.01572 15.4101 5.1523 15.3811 5.2843 15.4063C5.43533 15.4351 5.58038 15.5802 5.87048 15.8703L8.12957 18.1294C8.41967 18.4195 8.56472 18.5645 8.59356 18.7155C8.61877 18.8475 8.58979 18.9841 8.51314 19.0945C8.42545 19.2208 8.23399 19.2944 7.85107 19.4417L2.5 21.4998Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "line-chart-down-04": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M21 21H4.6C4.03995 21 3.75992 21 3.54601 20.891C3.35785 20.7951 3.20487 20.6422 3.10899 20.454C3 20.2401 3 19.9601 3 19.4V3M20 15L16.0811 10.8173C15.9326 10.6588 15.8584 10.5796 15.7688 10.5386C15.6897 10.5024 15.6026 10.4875 15.516 10.4953C15.4179 10.5042 15.3215 10.5542 15.1287 10.6543L11.8713 12.3457C11.6785 12.4458 11.5821 12.4958 11.484 12.5047C11.3974 12.5125 11.3103 12.4976 11.2312 12.4614C11.1416 12.4204 11.0674 12.3412 10.9189 12.1827L7 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "users-01": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M22 21V19C22 17.1362 20.7252 15.5701 19 15.126M15.5 3.29076C16.9659 3.88415 18 5.32131 18 7C18 8.67869 16.9659 10.1159 15.5 10.7092M17 21C17 19.1362 17 18.2044 16.6955 17.4693C16.2895 16.4892 15.5108 15.7105 14.5307 15.3045C13.7956 15 12.8638 15 11 15H8C6.13623 15 5.20435 15 4.46927 15.3045C3.48915 15.7105 2.71046 16.4892 2.30448 17.4693C2 18.2044 2 19.1362 2 21M13.5 7C13.5 9.20914 11.7091 11 9.5 11C7.29086 11 5.5 9.20914 5.5 7C5.5 4.79086 7.29086 3 9.5 3C11.7091 3 13.5 4.79086 13.5 7Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ },
+ "sliders-02": {
+  "vb": "0 0 24 24",
+  "inner": "<path d=\"M3 8L15 8M15 8C15 9.65686 16.3431 11 18 11C19.6569 11 21 9.65685 21 8C21 6.34315 19.6569 5 18 5C16.3431 5 15 6.34315 15 8ZM9 16L21 16M9 16C9 17.6569 7.65685 19 6 19C4.34315 19 3 17.6569 3 16C3 14.3431 4.34315 13 6 13C7.65685 13 9 14.3431 9 16Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>",
+  "rootStroke": true,
+  "rootFill": true
+ }
+} as const;
+
+export type IconName = keyof typeof icons;

package/kit/motion.ts

@@ -0,0 +1,18 @@
+// tokens.css curves as arrays, for motion/react and WAAPI.
+// Keep both in step: a curve changed here changes there.
+
+export const ease = {
+  out: [0.23, 1, 0.32, 1],
+  inOut: [0.77, 0, 0.175, 1],
+  drawer: [0.32, 0.72, 0, 1],
+  press: [0.33, 1, 0.68, 1],
+  morph: [0.45, 0, 0.55, 1],
+  hover: [0.25, 0.46, 0.45, 0.94],
+} as const;
+
+export const spring = {
+  snappy: { type: 'spring', duration: 0.3, bounce: 0 },
+  gentle: { type: 'spring', duration: 0.45, bounce: 0.15 },
+} as const;
+
+export const cssEase = (curve: readonly number[]) => `cubic-bezier(${curve.join(', ')})`;

package/kit/prefs.ts

@@ -0,0 +1,111 @@
+import { useSyncExternalStore } from 'react';
+
+// Theme, reduced motion and speed for the page, mirrored onto <html>
+// (.dark-mode, [data-motion="reduce"]) so CSS and JS read one source.
+
+export type Appearance = 'system' | 'light' | 'dark';
+
+type LapseHandle = { engine: { setSpeed(x: number): void; getSpeed(): number } };
+
+const root = document.documentElement;
+const darkQuery = matchMedia('(prefers-color-scheme: dark)');
+const motionQuery = matchMedia('(prefers-reduced-motion: reduce)');
+const params = new URLSearchParams(location.search);
+const urlReduce = params.get('motion') === 'reduce';
+const listeners = new Set<() => void>();
+
+let appearance: Appearance = readAppearance();
+let forceReduce = false;
+let speed = 1;
+let lapse: LapseHandle | null = null;
+
+function readAppearance(): Appearance {
+  const fromUrl = params.get('theme');
+  if (fromUrl === 'light' || fromUrl === 'dark' || fromUrl === 'system') return fromUrl;
+  try {
+    const saved = localStorage.getItem('proto:appearance');
+    if (saved === 'light' || saved === 'dark' || saved === 'system') return saved;
+  } catch {}
+  return 'light';
+}
+
+function emit() {
+  for (const fn of listeners) fn();
+}
+
+function subscribe(fn: () => void) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+function applyTheme() {
+  const dark = appearance === 'dark' || (appearance === 'system' && darkQuery.matches);
+  // The browser chrome and native controls follow the app's theme, not the OS: the class decides.
+  root.style.colorScheme = dark ? 'dark' : 'light';
+  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', dark ? '#0c0e12' : '#ffffff');
+  if (dark === root.classList.contains('dark-mode')) return;
+  root.classList.add('no-tx');
+  root.classList.toggle('dark-mode', dark);
+  requestAnimationFrame(() => requestAnimationFrame(() => root.classList.remove('no-tx')));
+}
+
+function applyMotion() {
+  if (motionQuery.matches || urlReduce || forceReduce) root.dataset.motion = 'reduce';
+  else delete root.dataset.motion;
+}
+
+export function setAppearance(next: Appearance) {
+  if (next === appearance) return;
+  appearance = next;
+  try {
+    localStorage.setItem('proto:appearance', next);
+  } catch {}
+  applyTheme();
+  emit();
+}
+
+export function setForceReduce(on: boolean) {
+  forceReduce = on;
+  applyMotion();
+  emit();
+}
+
+export const isDark = () => root.classList.contains('dark-mode');
+export const prefersReducedMotion = () => root.dataset.motion === 'reduce';
+
+export const useAppearance = () => useSyncExternalStore(subscribe, () => appearance);
+export const useDark = () => useSyncExternalStore(subscribe, isDark);
+export const useReducedMotion = () => useSyncExternalStore(subscribe, prefersReducedMotion);
+
+export function attachLapse(handle: LapseHandle) {
+  lapse = handle;
+}
+
+export function setSpeed(x: number) {
+  speed = x;
+  if (lapse) lapse.engine.setSpeed(x);
+  emit();
+}
+
+export const getSpeed = () => (lapse ? lapse.engine.getSpeed() : speed);
+export const useSpeed = () => useSyncExternalStore(subscribe, getSpeed);
+
+function retime(e: Event) {
+  if (lapse || speed === 1) return;
+  for (const a of (e.target as Element).getAnimations?.() ?? []) {
+    if (a.playbackRate === 1) a.playbackRate = speed;
+  }
+}
+
+darkQuery.addEventListener('change', () => {
+  applyTheme();
+  emit();
+});
+motionQuery.addEventListener('change', () => {
+  applyMotion();
+  emit();
+});
+document.addEventListener('transitionrun', retime);
+document.addEventListener('animationstart', retime);
+applyTheme();
+applyMotion();

package/kit/space.css

@@ -0,0 +1,12 @@
+.space { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 96px 32px 128px; background: var(--bg-secondary); }
+.space > * { width: min(var(--space-width), 100%); }
+.space[data-width="narrow"] { --space-width: 560px; }
+.space[data-width="wide"] { --space-width: 824px; }
+.space[data-width="full"] { --space-width: 1280px; }
+.space-head { display: flex; flex-direction: column; gap: 4px; }
+.space-title { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--text-primary); text-wrap: balance; }
+.space-lede { color: var(--text-tertiary); max-width: 65ch; text-wrap: pretty; }
+
+@media (max-width: 720px) {
+  .space { padding: 32px 16px 128px; }
+}

package/kit/ui/Button.tsx

@@ -0,0 +1,135 @@
+import {
+  type ButtonHTMLAttributes,
+  type CSSProperties,
+  type InputHTMLAttributes,
+  type ReactNode,
+  type Ref,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+import { Icon, type IconName } from '../Icon';
+import './ui.css';
+
+type Kind = 'primary' | 'secondary' | 'tertiary' | 'primary-error' | 'secondary-error';
+
+type ButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+  kind?: Kind;
+  size?: 'md' | 'sm' | null;
+  icon?: IconName;
+  iconSize?: number;
+  trailing?: ReactNode;
+  busy?: boolean;
+  ref?: Ref<HTMLButtonElement>;
+} & ({ label: ReactNode } | { label?: undefined; 'aria-label': string });
+
+const buttonClass = (kind: string, size: string | null, iconOnly: boolean, busy?: boolean, extra?: string) =>
+  ['btn', `btn-${kind}`, size && `btn-${size}`, iconOnly && 'btn-icon', busy && 'is-busy', extra]
+    .filter(Boolean)
+    .join(' ');
+
+export function Button({
+  label,
+  kind = 'secondary',
+  size = 'md',
+  icon,
+  iconSize = 20,
+  trailing,
+  busy,
+  className,
+  type = 'button',
+  ...rest
+}: ButtonProps) {
+  const cls = buttonClass(kind, size, label == null, busy, className);
+  const content = (
+    <>
+      {icon ? <Icon name={icon} size={iconSize} /> : null}
+      {label != null ? <span className="btn-label">{label}</span> : null}
+      {trailing}
+    </>
+  );
+  return (
+    <button
+      type={type}
+      className={cls}
+      aria-busy={busy || undefined}
+      aria-disabled={busy || undefined}
+      {...rest}
+    >
+      {busy === undefined ? content : <span className="btn-content">{content}</span>}
+    </button>
+  );
+}
+
+export function Chevron({ className = 'btn-chevron' }: { className?: string }) {
+  return <Icon name="chevron-down" size={20} className={className} />;
+}
+
+type SegOption<T extends string> = T | { value: T; label: string };
+
+export function Segmented<T extends string>({
+  options,
+  value,
+  onChange,
+  label,
+  className,
+  style,
+}: {
+  options: readonly SegOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a fieldset would bring its own border and padding
+    <div
+      className={className ? `segmented ${className}` : 'segmented'}
+      role="group"
+      aria-label={label}
+      style={style}
+    >
+      {options.map((o) => {
+        const v = typeof o === 'string' ? o : o.value;
+        return (
+          <button key={v} type="button" aria-pressed={v === value} onClick={() => onChange(v)}>
+            {typeof o === 'string' ? o : o.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+type Tone = 'success' | 'error' | 'warning' | 'brand';
+
+export function Badge({
+  tone,
+  dot,
+  className,
+  children,
+}: {
+  tone?: Tone;
+  dot?: boolean;
+  className?: string;
+  children: ReactNode;
+}) {
+  const cls = ['badge', tone ? `badge-${tone}` : '', className ?? ''].filter(Boolean).join(' ');
+  return (
+    <span className={cls}>
+      {dot ? <i className="dot" /> : null}
+      {children}
+    </span>
+  );
+}
+
+export function Checkbox({
+  indeterminate,
+  ...rest
+}: Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & { indeterminate?: boolean }) {
+  const ref = useRef<HTMLInputElement>(null);
+  useLayoutEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate;
+  }, [indeterminate]);
+  return <input ref={ref} type="checkbox" className="checkbox" {...rest} />;
+}