@veluai/velu 0.2.25 → 0.2.28

package/runtime/velu-ui/lib/brand-icons.jsx

@@ -1,103 +1,103 @@
-import React from 'react';
-
-/**
- * Brand glyphs for the contextual menu's "Open in <tool>" / "Connect to <IDE>"
- * actions. Sourced from svgl.app and inlined (the project inlines icons as JSX,
- * like lucide — no SVG loader). Each takes a `size` prop, mirroring lucide's
- * icon API so they're drop-in in the menu.
- *
- * ALL marks use `currentColor` so the icon column reads as one uniform set:
- * muted/grey at rest, accent on hover (matching the lucide icons beside them).
- * The brand glyphs keep their distinctive shapes; only the fill follows the
- * menu's text/hover color across light + dark.
- */
-
-export function MarkdownIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 208 128" fill="none" aria-hidden="true" {...rest}>
-      <path
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="10"
-        d="M15 5h178a10 10 0 0 1 10 10v98a10 10 0 0 1-10 10H15a10 10 0 0 1-10-10V15A10 10 0 0 1 15 5z"
-      />
-      <path
-        fill="currentColor"
-        d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39H30zm125 0-30-33h20V30h20v35h20l-30 33z"
-      />
-    </svg>
-  );
-}
-
-export function OpenAIIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 256 260" fill="currentColor" aria-hidden="true" {...rest}>
-      <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
-    </svg>
-  );
-}
-
-export function ClaudeIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 256 257" aria-hidden="true" {...rest}>
-      <path fill="currentColor" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z" />
-    </svg>
-  );
-}
-
-export function PerplexityIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true" {...rest}>
-      <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
-        <path d="M24 4.5v39M13.73 16.573v-9.99L24 16.573m0 14.5L13.73 41.417V27.01L24 16.573m0 0l10.27-9.99v9.99" />
-        <path d="M13.73 31.396H9.44V16.573h29.12v14.823h-4.29" />
-        <path d="M24 16.573L34.27 27.01v14.407L24 31.073" />
-      </g>
-    </svg>
-  );
-}
-
-export function CursorIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 466.73 532.09" fill="currentColor" aria-hidden="true" {...rest}>
-      <path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" />
-    </svg>
-  );
-}
-
-export function VscodeIcon({ size = '1em', ...rest }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden="true" {...rest}>
-      <mask
-        id="velu-vsc-mask"
-        width="100"
-        height="100"
-        x="0"
-        y="0"
-        maskUnits="userSpaceOnUse"
-        style={{ maskType: 'alpha' }}
-      >
-        <path
-          fill="#fff"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M70.912 99.317a6.223 6.223 0 0 0 4.96-.19l20.589-9.907A6.25 6.25 0 0 0 100 83.587V16.413a6.25 6.25 0 0 0-3.54-5.632L75.874.874a6.226 6.226 0 0 0-7.104 1.21L29.355 38.04 12.187 25.01a4.162 4.162 0 0 0-5.318.236l-5.506 5.009a4.168 4.168 0 0 0-.004 6.162L16.247 50 1.36 63.583a4.168 4.168 0 0 0 .004 6.162l5.506 5.01a4.162 4.162 0 0 0 5.318.236l17.168-13.032L68.77 97.917a6.217 6.217 0 0 0 2.143 1.4ZM75.015 27.3 45.11 50l29.906 22.701V27.3Z"
-        />
-      </mask>
-      <g mask="url(#velu-vsc-mask)">
-        <path
-          fill="currentColor"
-          d="M96.461 10.796 75.857.876a6.23 6.23 0 0 0-7.107 1.207l-67.451 61.5a4.167 4.167 0 0 0 .004 6.162l5.51 5.009a4.167 4.167 0 0 0 5.32.236l81.228-61.62c2.725-2.067 6.639-.124 6.639 3.297v-.24a6.25 6.25 0 0 0-3.539-5.63Z"
-        />
-        <path
-          fill="currentColor"
-          d="m96.461 89.204-20.604 9.92a6.229 6.229 0 0 1-7.107-1.207l-67.451-61.5a4.167 4.167 0 0 1 .004-6.162l5.51-5.009a4.167 4.167 0 0 1 5.32-.236l81.228 61.62c2.725 2.067 6.639.124 6.639-3.297v.24a6.25 6.25 0 0 1-3.539 5.63Z"
-        />
-        <path
-          fill="currentColor"
-          d="M75.858 99.126a6.232 6.232 0 0 1-7.108-1.21c2.306 2.307 6.25.674 6.25-2.588V4.672c0-3.262-3.944-4.895-6.25-2.589a6.232 6.232 0 0 1 7.108-1.21l20.6 9.908A6.25 6.25 0 0 1 100 16.413v67.174a6.25 6.25 0 0 1-3.541 5.633l-20.601 9.906Z"
-        />
-      </g>
-    </svg>
-  );
-}
+import React from 'react';
+
+/**
+ * Brand glyphs for the contextual menu's "Open in <tool>" / "Connect to <IDE>"
+ * actions. Sourced from svgl.app and inlined (the project inlines icons as JSX,
+ * like lucide — no SVG loader). Each takes a `size` prop, mirroring lucide's
+ * icon API so they're drop-in in the menu.
+ *
+ * ALL marks use `currentColor` so the icon column reads as one uniform set:
+ * muted/grey at rest, accent on hover (matching the lucide icons beside them).
+ * The brand glyphs keep their distinctive shapes; only the fill follows the
+ * menu's text/hover color across light + dark.
+ */
+
+export function MarkdownIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 208 128" fill="none" aria-hidden="true" {...rest}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="10"
+        d="M15 5h178a10 10 0 0 1 10 10v98a10 10 0 0 1-10 10H15a10 10 0 0 1-10-10V15A10 10 0 0 1 15 5z"
+      />
+      <path
+        fill="currentColor"
+        d="M30 98V30h20l20 25 20-25h20v68H90V59L70 84 50 59v39H30zm125 0-30-33h20V30h20v35h20l-30 33z"
+      />
+    </svg>
+  );
+}
+
+export function OpenAIIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 256 260" fill="currentColor" aria-hidden="true" {...rest}>
+      <path d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z" />
+    </svg>
+  );
+}
+
+export function ClaudeIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 256 257" aria-hidden="true" {...rest}>
+      <path fill="currentColor" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z" />
+    </svg>
+  );
+}
+
+export function PerplexityIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true" {...rest}>
+      <g stroke="currentColor" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M24 4.5v39M13.73 16.573v-9.99L24 16.573m0 14.5L13.73 41.417V27.01L24 16.573m0 0l10.27-9.99v9.99" />
+        <path d="M13.73 31.396H9.44V16.573h29.12v14.823h-4.29" />
+        <path d="M24 16.573L34.27 27.01v14.407L24 31.073" />
+      </g>
+    </svg>
+  );
+}
+
+export function CursorIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 466.73 532.09" fill="currentColor" aria-hidden="true" {...rest}>
+      <path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z" />
+    </svg>
+  );
+}
+
+export function VscodeIcon({ size = '1em', ...rest }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" aria-hidden="true" {...rest}>
+      <mask
+        id="velu-vsc-mask"
+        width="100"
+        height="100"
+        x="0"
+        y="0"
+        maskUnits="userSpaceOnUse"
+        style={{ maskType: 'alpha' }}
+      >
+        <path
+          fill="#fff"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.912 99.317a6.223 6.223 0 0 0 4.96-.19l20.589-9.907A6.25 6.25 0 0 0 100 83.587V16.413a6.25 6.25 0 0 0-3.54-5.632L75.874.874a6.226 6.226 0 0 0-7.104 1.21L29.355 38.04 12.187 25.01a4.162 4.162 0 0 0-5.318.236l-5.506 5.009a4.168 4.168 0 0 0-.004 6.162L16.247 50 1.36 63.583a4.168 4.168 0 0 0 .004 6.162l5.506 5.01a4.162 4.162 0 0 0 5.318.236l17.168-13.032L68.77 97.917a6.217 6.217 0 0 0 2.143 1.4ZM75.015 27.3 45.11 50l29.906 22.701V27.3Z"
+        />
+      </mask>
+      <g mask="url(#velu-vsc-mask)">
+        <path
+          fill="currentColor"
+          d="M96.461 10.796 75.857.876a6.23 6.23 0 0 0-7.107 1.207l-67.451 61.5a4.167 4.167 0 0 0 .004 6.162l5.51 5.009a4.167 4.167 0 0 0 5.32.236l81.228-61.62c2.725-2.067 6.639-.124 6.639 3.297v-.24a6.25 6.25 0 0 0-3.539-5.63Z"
+        />
+        <path
+          fill="currentColor"
+          d="m96.461 89.204-20.604 9.92a6.229 6.229 0 0 1-7.107-1.207l-67.451-61.5a4.167 4.167 0 0 1 .004-6.162l5.51-5.009a4.167 4.167 0 0 1 5.32-.236l81.228 61.62c2.725 2.067 6.639.124 6.639-3.297v.24a6.25 6.25 0 0 1-3.539 5.63Z"
+        />
+        <path
+          fill="currentColor"
+          d="M75.858 99.126a6.232 6.232 0 0 1-7.108-1.21c2.306 2.307 6.25.674 6.25-2.588V4.672c0-3.262-3.944-4.895-6.25-2.589a6.232 6.232 0 0 1 7.108-1.21l20.6 9.908A6.25 6.25 0 0 1 100 16.413v67.174a6.25 6.25 0 0 1-3.541 5.633l-20.601 9.906Z"
+        />
+      </g>
+    </svg>
+  );
+}

package/runtime/velu-ui/lib/component-schemas.js

@@ -1,100 +1,100 @@
-// Per-component option schemas — the props whose wrong value would otherwise
-// render incorrectly *silently*. Deliberately small and high-signal; extend a
-// component's entry here when it gains a new constrained option.
-//
-// Pure data + a pure validator (no React, no other imports) so BOTH sides can
-// use it: the live MDX registry (velu-ui/mdx-components.jsx) validates at
-// render time, and `velu validate` (velu-cli) imports this same module to
-// statically check literal attributes — one source of truth, no drift.
-
-// Canonical accepted values (must match the components):
-//   Callout  — VARIANTS keys; the component is CASE-SENSITIVE (VARIANTS[type]).
-//   MethodBadge — METHODS; the component lower-cases the input first.
-export const CALLOUT_TYPES = ['note', 'warning', 'info', 'tip', 'check', 'danger', 'callout'];
-export const METHOD_NAMES = ['get', 'post', 'put', 'patch', 'delete'];
-
-// schema: { enums: { prop: { values, caseSensitive } }, required: [prop, …] }
-const SCHEMAS = {
-  Callout: { enums: { type: { values: CALLOUT_TYPES, caseSensitive: true } } },
-  MethodBadge: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
-  ApiPath: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
-  Image: { required: ['src'] },
-};
-
-// Smallest edit distance match within a set (for "did you mean"). Tiny inputs.
-function closest(value, values) {
-  const v = String(value).toLowerCase();
-  let best = null;
-  let bestD = Infinity;
-  for (const cand of values) {
-    const a = v;
-    const b = cand.toLowerCase();
-    // inline Levenshtein
-    const m = a.length;
-    const n = b.length;
-    const d = Array.from({ length: n + 1 }, (_, i) => i);
-    for (let i = 1; i <= m; i++) {
-      let prev = d[0];
-      d[0] = i;
-      for (let j = 1; j <= n; j++) {
-        const tmp = d[j];
-        d[j] = Math.min(d[j] + 1, d[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
-        prev = tmp;
-      }
-    }
-    if (d[n] < bestD) {
-      bestD = d[n];
-      best = cand;
-    }
-  }
-  return bestD <= 3 ? best : null;
-}
-
-/**
- * Validate a component's props against its schema.
- * @param {string} name   component tag name
- * @param {object} props   props passed to it
- * @param {{ checkRequired?: boolean }} [opts]  static callers pass
- *        checkRequired:false because a prop supplied via a {expression}
- *        isn't a literal they can see, so "missing required" would be a
- *        false positive.
- * @returns an issue-shaped object (category 'invalid-props') or null if valid.
- *   { category, title, detail, hint, suggestion }
- */
-export function validateProps(name, props = {}, opts = {}) {
-  const { checkRequired = true } = opts;
-  const schema = SCHEMAS[name];
-  if (!schema) return null;
-
-  for (const req of checkRequired ? schema.required || [] : []) {
-    const v = props[req];
-    if (v == null || v === '') {
-      return {
-        category: 'invalid-props',
-        title: `<${name}> is missing the required "${req}" prop`,
-        hint: `Add ${req}="…" to the component.`,
-      };
-    }
-  }
-
-  for (const [prop, rule] of Object.entries(schema.enums || {})) {
-    if (!(prop in props) || props[prop] == null) continue;
-    const raw = props[prop];
-    const ok = rule.caseSensitive
-      ? rule.values.includes(raw)
-      : rule.values.map((s) => s.toLowerCase()).includes(String(raw).toLowerCase());
-    if (!ok) {
-      const guess = closest(raw, rule.values);
-      return {
-        category: 'invalid-props',
-        title: `Invalid "${prop}" on <${name}>: "${raw}"`,
-        detail: `Expected one of: ${rule.values.join(', ')}.`,
-        hint: guess ? `Did you mean "${guess}"?` : '',
-      };
-    }
-  }
-
-  return null;
-}
-
-export default validateProps;
+// Per-component option schemas — the props whose wrong value would otherwise
+// render incorrectly *silently*. Deliberately small and high-signal; extend a
+// component's entry here when it gains a new constrained option.
+//
+// Pure data + a pure validator (no React, no other imports) so BOTH sides can
+// use it: the live MDX registry (velu-ui/mdx-components.jsx) validates at
+// render time, and `velu validate` (velu-cli) imports this same module to
+// statically check literal attributes — one source of truth, no drift.
+
+// Canonical accepted values (must match the components):
+//   Callout  — VARIANTS keys; the component is CASE-SENSITIVE (VARIANTS[type]).
+//   MethodBadge — METHODS; the component lower-cases the input first.
+export const CALLOUT_TYPES = ['note', 'warning', 'info', 'tip', 'check', 'danger', 'callout'];
+export const METHOD_NAMES = ['get', 'post', 'put', 'patch', 'delete'];
+
+// schema: { enums: { prop: { values, caseSensitive } }, required: [prop, …] }
+const SCHEMAS = {
+  Callout: { enums: { type: { values: CALLOUT_TYPES, caseSensitive: true } } },
+  MethodBadge: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
+  ApiPath: { enums: { method: { values: METHOD_NAMES, caseSensitive: false } } },
+  Image: { required: ['src'] },
+};
+
+// Smallest edit distance match within a set (for "did you mean"). Tiny inputs.
+function closest(value, values) {
+  const v = String(value).toLowerCase();
+  let best = null;
+  let bestD = Infinity;
+  for (const cand of values) {
+    const a = v;
+    const b = cand.toLowerCase();
+    // inline Levenshtein
+    const m = a.length;
+    const n = b.length;
+    const d = Array.from({ length: n + 1 }, (_, i) => i);
+    for (let i = 1; i <= m; i++) {
+      let prev = d[0];
+      d[0] = i;
+      for (let j = 1; j <= n; j++) {
+        const tmp = d[j];
+        d[j] = Math.min(d[j] + 1, d[j - 1] + 1, prev + (a[i - 1] === b[j - 1] ? 0 : 1));
+        prev = tmp;
+      }
+    }
+    if (d[n] < bestD) {
+      bestD = d[n];
+      best = cand;
+    }
+  }
+  return bestD <= 3 ? best : null;
+}
+
+/**
+ * Validate a component's props against its schema.
+ * @param {string} name   component tag name
+ * @param {object} props   props passed to it
+ * @param {{ checkRequired?: boolean }} [opts]  static callers pass
+ *        checkRequired:false because a prop supplied via a {expression}
+ *        isn't a literal they can see, so "missing required" would be a
+ *        false positive.
+ * @returns an issue-shaped object (category 'invalid-props') or null if valid.
+ *   { category, title, detail, hint, suggestion }
+ */
+export function validateProps(name, props = {}, opts = {}) {
+  const { checkRequired = true } = opts;
+  const schema = SCHEMAS[name];
+  if (!schema) return null;
+
+  for (const req of checkRequired ? schema.required || [] : []) {
+    const v = props[req];
+    if (v == null || v === '') {
+      return {
+        category: 'invalid-props',
+        title: `<${name}> is missing the required "${req}" prop`,
+        hint: `Add ${req}="…" to the component.`,
+      };
+    }
+  }
+
+  for (const [prop, rule] of Object.entries(schema.enums || {})) {
+    if (!(prop in props) || props[prop] == null) continue;
+    const raw = props[prop];
+    const ok = rule.caseSensitive
+      ? rule.values.includes(raw)
+      : rule.values.map((s) => s.toLowerCase()).includes(String(raw).toLowerCase());
+    if (!ok) {
+      const guess = closest(raw, rule.values);
+      return {
+        category: 'invalid-props',
+        title: `Invalid "${prop}" on <${name}>: "${raw}"`,
+        detail: `Expected one of: ${rule.values.join(', ')}.`,
+        hint: guess ? `Did you mean "${guess}"?` : '',
+      };
+    }
+  }
+
+  return null;
+}
+
+export default validateProps;

package/runtime/velu-ui/lib/copyText.js

@@ -1,64 +1,64 @@
-/**
- * copyText — copy a string to the clipboard, working in BOTH secure and
- * insecure contexts.
- *
- * `navigator.clipboard` only exists in a secure context (HTTPS or
- * localhost). On a plain-HTTP origin — e.g. previewing the dev server
- * over the LAN at http://<ip>:8358 on a phone — it's `undefined`, so a
- * `if (!navigator.clipboard) return` guard makes copy buttons silently
- * no-op. This util falls back to the legacy `execCommand('copy')` via a
- * hidden textarea so copy still works on those origins.
- *
- * Must be called from a user gesture (click) — both paths require it.
- * Returns a Promise: resolves on success, rejects on failure.
- */
-export default function copyText(text) {
-  const str = String(text ?? '');
-
-  // Preferred path — async Clipboard API (secure contexts only).
-  if (
-    typeof navigator !== 'undefined' &&
-    navigator.clipboard &&
-    typeof window !== 'undefined' &&
-    window.isSecureContext
-  ) {
-    return navigator.clipboard.writeText(str);
-  }
-
-  // Fallback — hidden <textarea> + execCommand, for insecure origins.
-  return new Promise((resolve, reject) => {
-    if (typeof document === 'undefined') {
-      reject(new Error('copyText: no document'));
-      return;
-    }
-    const ta = document.createElement('textarea');
-    ta.value = str;
-    ta.setAttribute('readonly', '');
-    // Keep it out of view and inert, but still selectable.
-    ta.style.position = 'fixed';
-    ta.style.top = '0';
-    ta.style.left = '0';
-    ta.style.inlineSize = '1px';
-    ta.style.blockSize = '1px';
-    ta.style.padding = '0';
-    ta.style.border = 'none';
-    ta.style.opacity = '0';
-    document.body.appendChild(ta);
-    ta.focus();
-    ta.select();
-    try {
-      ta.setSelectionRange(0, str.length);
-    } catch {
-      /* some browsers reject setSelectionRange on a readonly field */
-    }
-    let ok = false;
-    try {
-      ok = document.execCommand('copy');
-    } catch {
-      ok = false;
-    }
-    document.body.removeChild(ta);
-    if (ok) resolve();
-    else reject(new Error('copyText: execCommand copy failed'));
-  });
-}
+/**
+ * copyText — copy a string to the clipboard, working in BOTH secure and
+ * insecure contexts.
+ *
+ * `navigator.clipboard` only exists in a secure context (HTTPS or
+ * localhost). On a plain-HTTP origin — e.g. previewing the dev server
+ * over the LAN at http://<ip>:8358 on a phone — it's `undefined`, so a
+ * `if (!navigator.clipboard) return` guard makes copy buttons silently
+ * no-op. This util falls back to the legacy `execCommand('copy')` via a
+ * hidden textarea so copy still works on those origins.
+ *
+ * Must be called from a user gesture (click) — both paths require it.
+ * Returns a Promise: resolves on success, rejects on failure.
+ */
+export default function copyText(text) {
+  const str = String(text ?? '');
+
+  // Preferred path — async Clipboard API (secure contexts only).
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    typeof window !== 'undefined' &&
+    window.isSecureContext
+  ) {
+    return navigator.clipboard.writeText(str);
+  }
+
+  // Fallback — hidden <textarea> + execCommand, for insecure origins.
+  return new Promise((resolve, reject) => {
+    if (typeof document === 'undefined') {
+      reject(new Error('copyText: no document'));
+      return;
+    }
+    const ta = document.createElement('textarea');
+    ta.value = str;
+    ta.setAttribute('readonly', '');
+    // Keep it out of view and inert, but still selectable.
+    ta.style.position = 'fixed';
+    ta.style.top = '0';
+    ta.style.left = '0';
+    ta.style.inlineSize = '1px';
+    ta.style.blockSize = '1px';
+    ta.style.padding = '0';
+    ta.style.border = 'none';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.focus();
+    ta.select();
+    try {
+      ta.setSelectionRange(0, str.length);
+    } catch {
+      /* some browsers reject setSelectionRange on a readonly field */
+    }
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    document.body.removeChild(ta);
+    if (ok) resolve();
+    else reject(new Error('copyText: execCommand copy failed'));
+  });
+}