@polpo-ai/dashboard 0.1.0

package/components/icons/coding-agents.tsx

@@ -0,0 +1,151 @@
+import type { SVGProps } from "react";
+
+/**
+ * Brand glyphs for the coding agents the `skills` CLI can target.
+ * Paths are taken from each agent's public brand material. Icons either
+ * use their brand fill (Cursor/Claude/Trae/Qoder) or `currentColor` so
+ * they inherit from the parent (the ones without a strict brand color).
+ *
+ * The gradient IDs in CursorIcon are suffixed `-polpo` to reduce the
+ * chance of collision with other SVGs on the same page.
+ */
+
+export function CursorIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12.692 1.273L20.5205 6.1985C20.819 6.386 21 6.714 21 7.0665V16.444C21 16.79 20.8225 17.1115 20.5295 17.2955L12.686 22.225C12.4175 22.394 12.077 22.398 11.8045 22.236L3.49 17.2915C3.299 17.178 3.1545 17.006 3.0735 16.8065C3.0255 16.6885 3 16.561 3 16.43V7.06851C3 6.716 3.1855 6.3895 3.489 6.209L11.8105 1.2615C12.083 1.0995 12.4235 1.104 12.692 1.273Z" fill="url(#cursor-a-polpo)" />
+      <path d="M12.5 11.4995L20.8975 16.8745C20.814 17.0375 20.6915 17.178 20.5295 17.2955L12.712 22.2095C12.409 22.3905 12.0985 22.41 11.779 22.2225L3.49 17.2915C3.2985 17.176 3.1575 17.0165 3.0735 16.8065L12.5 11.4995Z" fill="url(#cursor-b-polpo)" />
+      <path d="M12.248 1.146V11.589L3.0735 16.8065C3.0235 16.6805 2.9995 16.555 3 16.43V7.0685C3.021 6.7405 3.1185 6.435 3.489 6.209L11.8545 1.2385C11.993 1.1745 12.125 1.14 12.248 1.146Z" fill="url(#cursor-c-polpo)" />
+      <path d="M4.264 7.9994L11.74 11.8359C11.904 11.9324 12.005 12.1084 12.005 12.299L11.9995 20.476C11.9995 21.0285 12.733 21.221 13.004 20.7395L20.001 7.7839C20.2025 7.4259 19.9435 6.9839 19.533 6.9839L4.5355 6.9999C3.9885 6.9999 3.7925 7.7224 4.264 7.9994Z" fill="#E0E0E0" />
+      <defs>
+        <linearGradient id="cursor-a-polpo" x1="15.451" y1="17.86" x2="8.257" y2="5.112" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#636363" />
+          <stop offset="1" stopColor="#444" />
+        </linearGradient>
+        <linearGradient id="cursor-b-polpo" x1="13.56" y1="20.903" x2="10.544" y2="13.121" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#A1AAB3" />
+          <stop offset="1" stopColor="#8F979E" />
+        </linearGradient>
+        <linearGradient id="cursor-c-polpo" x1="9.31" y1="11.899" x2="4.424" y2="3.242" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#636363" />
+          <stop offset="0.997" stopColor="#90989F" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export function ClaudeCodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M5.924 15.296l3.934-2.206.067-.192-.067-.107h-.192l-.658-.04-2.248-.06-1.95-.08-1.888-.103-.476-.1-.446-.587.046-.293.4-.268.572.05 1.267.086 1.898.132 1.377.08 2.041.214h.324l.046-.131-.112-.082-.086-.079-1.965-1.33-2.126-1.407-1.114-.81-.603-.41-.303-.385-.131-.84.546-.602.735.05.187.05.744.572L7.332 7.647 9.407 9.174l.304.253.12-.086.016-.06-.136-.228-1.13-2.04-1.205-2.075L6.84 4.08l-.141-.516c-.054-.198-.083-.403-.087-.608l.623-.844.345-.112.83.112.35.304.517 1.178.835 1.858 1.296 2.525.38.748.203.694.076.213h.131v-.122l.107-1.421.197-1.746.192-2.245.067-.634.313-.758.622-.41.487.234.4.57-.056.37-.239 1.544-.466 2.42-.303 1.618h.176l.203-.202.82-1.089 1.376-1.72.608-.682.709-.754.456-.358h.861l.634.941-.284.972-.886 1.122-.734.952-1.053 1.417-.659 1.133.061.092.157-.017 2.38-.505 1.285-.233 1.535-.263.694.324.075.33-.273.673-1.64.405-1.925.385-2.866.677-.035.025.04.05 1.291.123.552.03h1.351l2.517.186.658.435.394.533-.065.404-1.013.517-1.366-.325-3.19-.758-1.094-.274h-.15v.092l.91.89 1.672 1.508 2.09 1.942.107.482-.268.379-.284-.041-1.837-1.38-.71-.623-1.605-1.35h-.106v.142l.37.54 1.954 2.935.102.9-.143.294-.506.177-.557-.102-1.144-1.604-1.18-1.806-.952-1.619-.116.067-.561 6.045-.264.308-.607.233-.506-.384-.269-.622.268-1.23.324-1.603.263-1.275.238-1.584.142-.527-.01-.035-.117.015-1.194 1.64-1.817 2.454-1.438 1.538-.345.136-.598-.308.056-.552.334-.49 1.99-2.53 1.2-1.57.775-.906-.005-.131h-.045l-5.287 3.43-.941.12-.406-.379.051-.622.192-.202 1.59-1.094-.005.005z"
+        fill="#D97757"
+      />
+    </svg>
+  );
+}
+
+export function TraeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 28 21" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M28 20.9645H3.99933V16.9675H0V0.966675H28V20.9645ZM3.99933 16.9675H24.0007V4.96484H3.99933V16.9675ZM14.0012 10.9055L11.172 13.7335L8.344 10.9055L11.172 8.07751L14.0012 10.9055ZM22.001 10.9043L19.173 13.7312L16.3438 10.9043L19.173 8.07517L22.001 10.9043Z"
+        fill="#32F08C"
+      />
+    </svg>
+  );
+}
+
+export function ClineIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.776 5.993c2.063 0 3.735 1.68 3.735 3.753v1.25l1.088 2.172a.998.998 0 0 1-.001.778l-1.086 2.148v1.251c0 2.07-1.672 3.752-3.735 3.752H8.305c-2.063 0-3.735-1.682-3.735-3.752v-1.251l-1.11-2.141a.997.997 0 0 1-.007-.7L4.57 10.996V9.745c0-2.072 1.672-3.752 3.735-3.752h7.471zM9.199 10.2a2.45 2.45 0 0 0-2.45 2.45v3.032a2.45 2.45 0 0 0 4.9 0v-3.032a2.45 2.45 0 0 0-2.45-2.45zm5.494 0a2.45 2.45 0 0 0-2.45 2.45v3.032a2.45 2.45 0 1 0 4.9 0v-3.032a2.45 2.45 0 0 0-2.45-2.45z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.04 7.168a2.084 2.084 0 1 0 0-4.168 2.084 2.084 0 0 0 0 4.168z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function WindsurfIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.835 6.753h-.171a2.401 2.401 0 0 0-2.4 2.4v3.53a1.37 1.37 0 0 1-1.32 1.332 1.34 1.34 0 0 1-1.104-.58l-3.729-5.373a1.619 1.619 0 0 0-1.358-.662c-.85 0-1.615.729-1.615 1.63v3.705a1.331 1.331 0 0 1-1.32 1.332 1.34 1.34 0 0 1-1.104-.58L3.306 6.823c-.094-.135-.306-.068-.306.098v3.213c0 .162.05.32.141.453l4.106 5.917c.243.35.6.609 1.014.703 1.032.237 1.984-.565 1.984-1.588v-3.701c0-.735.59-1.332 1.32-1.332h.002c.44 0 .851.216 1.104.58l3.729 5.372a1.64 1.64 0 0 0 1.358.662c.868 0 1.614-.73 1.614-1.63v-3.704c0-.735.59-1.331 1.32-1.331h.145a.165.165 0 0 0 .165-.166V6.919a.165.165 0 0 0-.165-.165v-.001z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function RooIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="40 110 300 200" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="currentColor"
+        d="M278.25 193.336c-12.22 6.163-24.098 12.177-35.998 18.146-2.744 1.376-4.872 3.179-6.473 5.943-3.755 6.479-7.714 12.854-11.891 19.069-1.994 2.967-2.196 5.257-.412 8.545 9.288 17.12 18.265 34.408 27.353 51.635 3.33 6.312 2.42 7.041-4.707 7.87-8.285.962-12.844-2.433-17.25-9.161-11.489-17.546-23.78-34.569-35.887-51.705-2.136-3.024-3.153-6.047-2.97-9.74.344-6.981.342-13.98.592-20.967.098-2.725-.714-4.704-3.056-6.34-8.872-6.197-17.675-12.495-26.406-18.887-3.06-2.24-5.555-.953-8.284.512-12.173 6.53-24.384 12.99-36.572 19.492-1.478.789-2.923 1.583-4.674 1.553-19.133-.331-38.266-.61-57.372-1.819-2.48-.156-4.258-.73-4.289-3.616-.029-2.817 1.92-3.744 4.164-4.1 14.92-2.363 29.838-4.747 44.79-6.888 2.931-.42 5.343-1.258 7.65-3.116 26.979-21.727 54.044-43.347 80.981-65.125 2.77-2.239 5.09-2.756 8.554-1.699 26.884 8.208 53.848 16.156 80.757 24.283 3.093.934 4.673.22 5.45-2.935 1.072-4.358 2.36-8.663 3.596-12.979.493-1.717.588-3.857 2.809-4.32 2.338-.486 3.109 1.614 4.07 3.064 11.774 17.767 23.5 35.565 35.238 53.355a198.5 198.5 0 0 1 4.625 7.115c1.604 2.95.778 4.677-2.859 4.879-8.778.486-17.271.33-24.17-6.445-4.986-4.9-10.4-5.558-16.426-1.343-3.242 2.268-7.046 3.733-10.93 5.724z"
+      />
+    </svg>
+  );
+}
+
+export function QoderIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 360 360" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="#FEFEFE"
+        d="M206.873 51.045c8.46 4.648 17.035 9.057 25.626 13.455 10.315 5.281 20.574 10.63 30.713 16.245 4.593 2.537 9.211 5 13.89 7.376 1.026.524 2.053 1.047 3.11 1.587a93.4 93.4 0 0 1 5.853 2.973c15.257 7.76 27.992 20.035 33.934 36.358 3.245 11.228 4.588 21.721 4.518 33.398.005 1.556.013 3.112.021 4.668.018 4.167.012 8.334-.001 12.5-.01 4.386 0 8.772.006 13.158.007 7.35-.002 14.7-.021 22.05-.022 8.482-.015 16.963.007 25.445.018 7.314.021 14.628.01 21.942-.006 4.355-.007 8.71.006 13.065.012 4.087.003 8.174-.02 12.26a112.23 112.23 0 0 0 .005 4.495c.047 8.878.016 16.259-6.46 23.05-6.18 4.293-11.352 6.835-19.07 5.977-5.879-1.83-11.496-4.252-17.036-6.925-.67-.323-1.341-.646-2.032-.978a173 173 0 0 1-6.008-3.187c-3.346-1.668-3.346-1.668-7.002-2.079-3.168 1.456-6.252 3.057-9.336 4.68-21.147 10.827-44.935 16.47-68.375 10.575-14.403-4.748-27.962-13.067-41.185-20.369-8.46-4.648-17.036-9.058-25.628-13.455-10.361-5.306-20.67-10.677-30.854-16.318-4.387-2.425-8.792-4.785-13.267-7.046-18.433-9.321-33.036-19.831-40.378-40.137-3.534-11.38-4.613-21.82-4.566-33.668-.005-1.654-.012-3.307-.019-4.96-.01-3.442-.006-6.883.008-10.325a185 185 0 0 0-.02-10.445c-.2-25.234.891-47.703 12.594-70.603a92 92 0 0 1 .92-1.804c13.697-26.604 37.341-49.42 66.051-58.873 36.456-11.42 59.416-3.204 91.916 14.76z"
+      />
+      <path
+        fill="#2ADB5C"
+        d="M301.695 102.855c13.583 12.64 21.36 28.625 22.678 47.212.14 4.115.17 8.214.145 12.331.006 1.556.013 3.112.022 4.668.018 4.168.011 8.335-.002 12.502-.01 4.385 0 8.77.006 13.156.008 7.35-.002 14.7-.021 22.05-.022 8.482-.015 16.964.007 25.446.018 7.314.021 14.628.01 21.942-.006 4.355-.007 8.71.006 13.065.012 4.087.003 8.174-.02 12.26.003 1.495-.001 2.99-.016 4.484.048 8.879.017 16.26-6.46 23.05-6.178 4.294-11.35 6.836-19.07 5.978-5.878-1.83-11.495-4.252-17.035-6.925-.671-.323-1.342-.646-2.033-.978a170 170 0 0 1-6.007-3.188c-3.346-1.667-3.346-1.667-7.002-2.078-3.168 1.455-6.252 3.056-9.336 4.679-21.01 10.752-45.564 16.99-68.804.363a21 21 0 0 1-2.61-1.086 61 61 0 0 1-2.329-1.091c-4.453-2.048-7.387-4.367-10.723-8.027a80 80 0 0 1-2.025-1.829c-12.744-11.742-18.56-27.311-20.976-44.17-.202-1.277-.403-2.555-.61-3.871-.337-3.735-.411-6.515.61-10.13a63 63 0 0 1 11.976-7.997c25.523-18.013 42.983-46.076 48.98-76.622 2.073-12.123 1.601-24.621 1.708-36.88.03-2.673.067-5.347.102-8.02.084-6.493.153-12.986.21-19.48 7.94-4.155 15.643-7.947 24.31-10.375.816-.247 1.63-.493 2.47-.746 21.549-6.275 47.484-4.03 64.917 10.97z"
+      />
+    </svg>
+  );
+}
+
+export function CopilotIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.038 4.47c1.101 1.133 1.564 2.68 1.758 4.848.518 0 1 .112 1.326.545l.608.803a1.6 1.6 0 0 1 .27.796v2.183c0 .283-.144.558-.378.724-2.756 1.967-6.158 3.548-9.622 3.548-3.834 0-7.671-2.152-9.623-3.548A.73.73 0 0 1 0 13.645v-2.183c0-.288.094-.566.268-.797l.608-.803c.327-.43.812-.545 1.328-.545l.024-.247c.208-2.039.675-3.51 1.735-4.6 2.05-2.117 4.758-2.376 5.955-2.387h.165c1.197.011 3.904.27 5.955 2.387zM10 8.077c-.236 0-.51.013-.801.041-.103.373-.254.709-.475.924-.875.852-1.93.983-2.495.983-.532 0-1.089-.108-1.543-.386-.43.137-.843.335-.87.829-.034.8-.052 1.602-.052 2.403v.4c-.002.469-.004.938-.01 1.408.001.272.169.525.424.637 2.068.919 4.025 1.381 5.825 1.381s3.757-.462 5.824-1.38a.73.73 0 0 0 .425-.638c.025-1.402.005-2.81-.063-4.211-.026-.497-.44-.692-.871-.83-.455.278-1.01.386-1.542.386-.564 0-1.618-.131-2.494-.983-.222-.215-.373-.551-.475-.924a10.9 10.9 0 0 0-.807-.04zm-2.103 3.344c.45 0 .813.355.813.791v1.46c0 .438-.364.792-.813.792a.83.83 0 0 1-.814-.791v-1.46c0-.438.364-.792.814-.792zm4.167 0c.449 0 .813.355.813.791v1.46c0 .438-.364.792-.813.792a.83.83 0 0 1-.814-.791v-1.46c0-.438.364-.792.814-.792zM6.362 4.239c-.875.085-1.613.365-1.988.755-.812.864-.637 3.056-.175 3.52.338.328.975.547 1.663.547h.075c.54-.011 1.487-.147 2.275-.925.362-.342.587-1.194.562-2.058-.025-.695-.225-1.267-.525-1.51-.325-.28-1.063-.402-1.888-.329zm5.388.328c-.3.244-.5.817-.525 1.51-.025.865.2 1.718.562 2.06.807.798 1.78.92 2.314.925h.037c.687 0 1.325-.22 1.662-.547.463-.463.638-2.655-.175-3.52-.375-.389-1.113-.67-1.988-.754-.825-.074-1.562.047-1.887.327zM10 6.346c-.2 0-.438.013-.7.037.025.133.037.28.05.438l-.001.133c0 .07-.004.14-.01.209.187-.018.354-.022.51-.023h.303c.156 0 .322.005.51.023-.013-.122-.013-.23-.013-.34.012-.159.025-.305.05-.44C10.467 6.36 10.234 6.348 10 6.346z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function CodexIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.958 8.337a5.2 5.2 0 0 0 .212-1.919 5.2 5.2 0 0 0-.61-1.831 5.02 5.02 0 0 0-5.04-2.218 4.9 4.9 0 0 0-1.582-1.136A4.9 4.9 0 0 0 9.026.834a5.01 5.01 0 0 0-4.465 3.2 4.9 4.9 0 0 0-1.786.765 4.9 4.9 0 0 0-1.311 1.44A4.96 4.96 0 0 0 .86 9.052c.103.975.518 1.89 1.183 2.612A4.95 4.95 0 0 0 1.83 13.58a4.98 4.98 0 0 0 .61 1.836 5.01 5.01 0 0 0 5.04 2.217 5.01 5.01 0 0 0 3.494 1.535 5.01 5.01 0 0 0 4.466-3.2 4.96 4.96 0 0 0 1.787-.765c.534-.382.98-.874 1.31-1.442a4.94 4.94 0 0 0 .605-2.803 4.94 4.94 0 0 0-1.183-2.622zM10.974 17.97a3.73 3.73 0 0 1-2.229-.795c.028-.015.077-.042.11-.062l3.7-2.108c.092-.052.17-.127.223-.218.053-.092.081-.196.08-.302V9.338l1.565.89c.016.01.027.025.03.043v4.262c-.003 1.895-1.558 3.432-3.479 3.436m-7.48-3.15a3.7 3.7 0 0 1-.416-2.305c.027.016.075.046.11.065l3.7 2.109c.187.108.42.108.608 0l4.517-2.574v1.782c0 .009-.003.018-.007.026-.004.009-.01.016-.017.022l-3.74 2.13c-1.666.947-3.793.383-4.756-1.258zm-.975-7.97a3.7 3.7 0 0 1 1.812-1.504v4.217c-.001.106.027.21.08.3.054.092.13.168.223.22l4.516 2.572-1.563.892a.03.03 0 0 1-.03 0l-3.74-2.132c-1.663-.95-2.233-3.048-1.275-4.691zm12.847 2.95-4.516-2.573 1.563-.89a.03.03 0 0 1 .03.005l3.74 2.13c1.666.95 2.237 3.052 1.275 4.694a3.77 3.77 0 0 1-1.811 1.506v-4.343a.7.7 0 0 0-.08-.301.7.7 0 0 0-.222-.219v.001zm1.556-2.31a4 4 0 0 0-.11-.065l-3.7-2.108a.61.61 0 0 0-.608 0L7.988 7.887V6.105a.05.05 0 0 1 .023-.047l3.74-2.13c1.666-.947 3.795-.383 4.755 1.261.406.694.554 1.508.416 2.298zM7.138 10.662l-1.564-.89a.03.03 0 0 1-.017-.041V5.467a3.5 3.5 0 0 1 4.96-3.196 3.7 3.7 0 0 1 .71.595l-.11.06-3.7 2.109a.65.65 0 0 0-.222.219.62.62 0 0 0-.08.301zm.85-1.807 2.012-1.146 2.012 1.146v2.292L10 12.292l-2.012-1.146V8.855z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function OpenCodeIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M180 240H60V120h120v120z" fill="#7C7C7C" />
+      <path d="M180 60H60v180h120V60zM240 300H0V0h240v300z" fill="currentColor" />
+    </svg>
+  );
+}

package/components/json-ld.tsx

@@ -0,0 +1,8 @@
+export function JsonLd({ data }: { data: Record<string, unknown> }) {
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}

package/components/providers.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useState } from "react";
+import { TooltipProvider } from "#/components/ui/tooltip";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 5 * 60_000,
+        refetchOnWindowFocus: false,
+        retry: 1,
+      },
+    },
+  }));
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider delay={150}>
+        {children}
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+}

package/components/ui/badge.tsx

@@ -0,0 +1,52 @@
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "#/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  })
+}
+
+export { Badge, badgeVariants }

package/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "#/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/components/ui/card.tsx

@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "#/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}