@veluai/velu 0.2.13 → 0.2.15

package/runtime/velu-ui/components/PageNav.jsx

@@ -1,77 +1,77 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-import Switcher from '../primitives/Switcher.jsx';
-
-/**
- * PageNav — previous / next page navigation for the foot of a docs
- * page. Two cards: the previous page (content flush to the inline
- * start, a "‹ Previous" label) and the next page (flush to the inline
- * end, "Next ›").
- *
- *   <PageNav
- *     linkComponent={RouterLink}
- *     prev={{ label: 'docs.json schema reference', href: '/schema' }}
- *     next={{ label: 'Pages', href: '/pages' }}
- *   />
- *
- * Either side may be omitted (first / last page) — the present card
- * keeps its half-width slot. Cards sit side by side and stack on narrow
- * widths via <Switcher>. Router-agnostic through `linkComponent`.
- *
- * @typedef {Object} PageRef
- * @property {string} label   page title shown on the card
- * @property {string} [href]
- *
- * @param {{ prev?: PageRef, next?: PageRef,
- *           linkComponent?: React.ElementType, className?: string }} props
- */
-
-function NavCard({ page, dir, Link }) {
-  const isPrev = dir === 'prev';
-  return (
-    <Link
-      className={`velu-pagenav__card velu-pagenav__card--${dir}`}
-      href={page.href ?? '#'}
-    >
-      <span className="velu-pagenav__title">{page.label}</span>
-      <Cluster
-        space="var(--s-4)"
-        align="center"
-        className="velu-pagenav__dir"
-      >
-        {isPrev && resolveIcon('chevron-left', { size: '1em' })}
-        <span>{isPrev ? 'Previous' : 'Next'}</span>
-        {!isPrev && resolveIcon('chevron-right', { size: '1em' })}
-      </Cluster>
-    </Link>
-  );
-}
-
-export default function PageNav({
-  prev,
-  next,
-  linkComponent = 'a',
-  className = '',
-  ...rest
-}) {
-  return (
-    <Switcher
-      space="var(--s0)"
-      min="16ch"
-      className={`velu-pagenav ${className}`.trim()}
-      {...rest}
-    >
-      {prev ? (
-        <NavCard page={prev} dir="prev" Link={linkComponent} />
-      ) : (
-        <div aria-hidden="true" />
-      )}
-      {next ? (
-        <NavCard page={next} dir="next" Link={linkComponent} />
-      ) : (
-        <div aria-hidden="true" />
-      )}
-    </Switcher>
-  );
-}
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+import Switcher from '../primitives/Switcher.jsx';
+
+/**
+ * PageNav — previous / next page navigation for the foot of a docs
+ * page. Two cards: the previous page (content flush to the inline
+ * start, a "‹ Previous" label) and the next page (flush to the inline
+ * end, "Next ›").
+ *
+ *   <PageNav
+ *     linkComponent={RouterLink}
+ *     prev={{ label: 'docs.json schema reference', href: '/schema' }}
+ *     next={{ label: 'Pages', href: '/pages' }}
+ *   />
+ *
+ * Either side may be omitted (first / last page) — the present card
+ * keeps its half-width slot. Cards sit side by side and stack on narrow
+ * widths via <Switcher>. Router-agnostic through `linkComponent`.
+ *
+ * @typedef {Object} PageRef
+ * @property {string} label   page title shown on the card
+ * @property {string} [href]
+ *
+ * @param {{ prev?: PageRef, next?: PageRef,
+ *           linkComponent?: React.ElementType, className?: string }} props
+ */
+
+function NavCard({ page, dir, Link }) {
+  const isPrev = dir === 'prev';
+  return (
+    <Link
+      className={`velu-pagenav__card velu-pagenav__card--${dir}`}
+      href={page.href ?? '#'}
+    >
+      <span className="velu-pagenav__title">{page.label}</span>
+      <Cluster
+        space="var(--s-4)"
+        align="center"
+        className="velu-pagenav__dir"
+      >
+        {isPrev && resolveIcon('chevron-left', { size: '1em' })}
+        <span>{isPrev ? 'Previous' : 'Next'}</span>
+        {!isPrev && resolveIcon('chevron-right', { size: '1em' })}
+      </Cluster>
+    </Link>
+  );
+}
+
+export default function PageNav({
+  prev,
+  next,
+  linkComponent = 'a',
+  className = '',
+  ...rest
+}) {
+  return (
+    <Switcher
+      space="var(--s0)"
+      min="16ch"
+      className={`velu-pagenav ${className}`.trim()}
+      {...rest}
+    >
+      {prev ? (
+        <NavCard page={prev} dir="prev" Link={linkComponent} />
+      ) : (
+        <div aria-hidden="true" />
+      )}
+      {next ? (
+        <NavCard page={next} dir="next" Link={linkComponent} />
+      ) : (
+        <div aria-hidden="true" />
+      )}
+    </Switcher>
+  );
+}

package/runtime/velu-ui/components/PoweredBy.jsx

@@ -1,51 +1,51 @@
-import React from 'react';
-
-/**
- * PoweredBy — "Powered by Velu" badge. Right-aligned, sits above the
- * site footer (or anywhere the consumer drops it). All values are
- * tokens; light/dark via [data-theme] is automatic.
- *
- * @param {{ href?: string, className?: string }} props
- */
-
-/* Velu brand mark — same path as PageHeader's mark, sized for the
-   badge via .velu-powered-by__mark CSS. */
-function VeluMark() {
-  return (
-    <svg
-      className="velu-powered-by__mark"
-      viewBox="0 0 32 24"
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70537 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
-      />
-    </svg>
-  );
-}
-
-export default function PoweredBy({
-  href = 'https://veludocs.com',
-  className = '',
-  ...rest
-}) {
-  return (
-    <div className={`velu-powered-by ${className}`.trim()} {...rest}>
-      <a
-        className="velu-powered-by__link"
-        href={href}
-        target="_blank"
-        rel="noreferrer"
-      >
-        <span className="velu-powered-by__label">Powered by</span>
-        <span className="velu-powered-by__brand">
-          <VeluMark />
-          <span className="velu-powered-by__wordmark">Velu</span>
-        </span>
-      </a>
-    </div>
-  );
-}
+import React from 'react';
+
+/**
+ * PoweredBy — "Powered by Velu" badge. Right-aligned, sits above the
+ * site footer (or anywhere the consumer drops it). All values are
+ * tokens; light/dark via [data-theme] is automatic.
+ *
+ * @param {{ href?: string, className?: string }} props
+ */
+
+/* Velu brand mark — same path as PageHeader's mark, sized for the
+   badge via .velu-powered-by__mark CSS. */
+function VeluMark() {
+  return (
+    <svg
+      className="velu-powered-by__mark"
+      viewBox="0 0 32 24"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M29.6564 14.1534C29.5739 14.5616 29.3507 14.9288 29.0248 15.1926C28.699 15.4565 28.2907 15.6007 27.8694 15.6006H21.3702C20.5341 15.6006 19.8051 16.1627 19.6031 16.9638L18.1671 22.6368C18.0685 23.0263 17.8409 23.372 17.5205 23.619C17.2002 23.866 16.8054 24.0001 16.399 24H10.4378C10.1609 24.0001 9.88759 23.9378 9.63868 23.8179C9.38976 23.6979 9.1718 23.5235 9.00135 23.3079C8.8309 23.0923 8.71245 22.8412 8.65499 22.5736C8.59754 22.306 8.6026 22.029 8.66978 21.7636L10.1888 15.7636C10.2874 15.3743 10.5148 15.0287 10.835 14.7817C11.1551 14.5347 11.5496 14.4005 11.9559 14.4004H18.3931C19.2621 14.4004 20.0101 13.7949 20.1801 12.9532L22.3882 2.04774C22.4705 1.63945 22.6936 1.27198 23.0195 1.00793C23.3453 0.74388 23.7538 0.599578 24.1752 0.599605H30.1774C30.4471 0.599529 30.7134 0.658587 30.9572 0.772515C31.201 0.886444 31.4161 1.0524 31.5871 1.25842C31.758 1.46443 31.8806 1.70537 31.9458 1.96383C32.0111 2.2223 32.0175 2.49185 31.9645 2.75305L29.6564 14.1534ZM9.61081 13.5538C9.52825 13.962 9.30507 14.3292 8.97924 14.593C8.65341 14.857 8.24508 15.0011 7.82375 15.001H1.82257C1.55289 15.0011 1.28656 14.942 1.04279 14.8281C0.79902 14.7141 0.583892 14.5482 0.412928 14.3422C0.241965 14.1362 0.11943 13.8952 0.0541639 13.6368C-0.0111017 13.3783 -0.0174699 13.1087 0.0355186 12.8475L2.34359 1.44715C2.42614 1.03904 2.64933 0.671798 2.97516 0.407944C3.30099 0.144089 3.70932 -7.24082e-05 4.13064 7.25899e-08H10.1318C10.4015 -7.55792e-05 10.6678 0.0589818 10.9116 0.172911C11.1554 0.286839 11.3705 0.453799 11.5415 0.659813C11.7124 0.864828 11.835 1.10576 11.9002 1.36423C11.9655 1.62269 11.9719 1.89225 11.9189 2.15344L9.61081 13.5538Z"
+      />
+    </svg>
+  );
+}
+
+export default function PoweredBy({
+  href = 'https://veludocs.com',
+  className = '',
+  ...rest
+}) {
+  return (
+    <div className={`velu-powered-by ${className}`.trim()} {...rest}>
+      <a
+        className="velu-powered-by__link"
+        href={href}
+        target="_blank"
+        rel="noreferrer"
+      >
+        <span className="velu-powered-by__label">Powered by</span>
+        <span className="velu-powered-by__brand">
+          <VeluMark />
+          <span className="velu-powered-by__wordmark">Velu</span>
+        </span>
+      </a>
+    </div>
+  );
+}

package/runtime/velu-ui/components/Prompt.jsx

@@ -1,115 +1,115 @@
-import React, { useState } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-import copyText from '../lib/copyText.js';
-
-// Cursor brand glyph (https://cursor.com). Inline SVG so it scales with
-// font-size via currentColor — no extra dependency.
-function CursorIcon({ size = '1em' }) {
-  return (
-    <svg
-      viewBox="0 0 466.73 532.09"
-      width={size}
-      height={size}
-      fill="currentColor"
-      aria-hidden="true"
-    >
-      <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>
-  );
-}
-
-/**
- * Prompt — display an AI prompt with a title + a truncated preview of
- * the body, plus a "Copy Prompt" button that writes the FULL prompt
- * (not the truncated preview) to the clipboard.
- *
- *   <Prompt title="Generate clear, concise documentation.">
- *     {`You are a **technical writing assistant**. Write documentation
- * that is clear, accurate, and concise.
- * - Use second-person voice
- * - Avoid jargon
- * - …more lines that get truncated by line-clamp`}
- *   </Prompt>
- *
- *  - `title`    short headline above the prompt body
- *  - `lines`    number of body lines to show before the ellipsis
- *               (default 3) — driven by CSS `-webkit-line-clamp`
- *  - `children` full prompt text (string, multi-line OK)
- *
- * The truncated preview keeps the monospace style of the source code
- * (so multi-line prompts read like the file you'd paste them from);
- * line clamping adds the trailing "…" automatically.
- */
-
-export default function Prompt({
-  title,
-  lines = 3,
-  openInCursor = false,
-  children,
-  className = '',
-  ...rest
-}) {
-  const [copied, setCopied] = useState(false);
-  const promptText = typeof children === 'string' ? children : '';
-  const cursorUrl = `https://cursor.com/link/prompt?text=${encodeURIComponent(
-    promptText,
-  )}`;
-
-  function copy() {
-    copyText(promptText).then(
-      () => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 1500);
-      },
-      () => {
-        /* user denied / no focus / no clipboard — silent no-op */
-      },
-    );
-  }
-
-  return (
-    <div className={`velu-prompt ${className}`.trim()} {...rest}>
-      {title != null && (
-        <div className="velu-prompt__title">{title}</div>
-      )}
-      <div
-        className="velu-prompt__body"
-        style={{ WebkitLineClamp: lines }}
-      >
-        {children}
-      </div>
-      <Cluster
-        space="var(--s-1)"
-        justify="flex-end"
-        className="velu-prompt__actions"
-      >
-        {openInCursor && (
-          <a
-            href={cursorUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="velu-prompt__open-cursor"
-            aria-label="Open prompt in Cursor"
-          >
-            <span className="velu-prompt__copy-icon" aria-hidden="true">
-              <CursorIcon />
-            </span>
-            Open in Cursor
-          </a>
-        )}
-        <button
-          type="button"
-          onClick={copy}
-          className="velu-prompt__copy"
-          aria-label={copied ? 'Copied' : 'Copy prompt'}
-        >
-          <span className="velu-prompt__copy-icon" aria-hidden="true">
-            {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
-          </span>
-          {copied ? 'Copied' : 'Copy Prompt'}
-        </button>
-      </Cluster>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+import copyText from '../lib/copyText.js';
+
+// Cursor brand glyph (https://cursor.com). Inline SVG so it scales with
+// font-size via currentColor — no extra dependency.
+function CursorIcon({ size = '1em' }) {
+  return (
+    <svg
+      viewBox="0 0 466.73 532.09"
+      width={size}
+      height={size}
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <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>
+  );
+}
+
+/**
+ * Prompt — display an AI prompt with a title + a truncated preview of
+ * the body, plus a "Copy Prompt" button that writes the FULL prompt
+ * (not the truncated preview) to the clipboard.
+ *
+ *   <Prompt title="Generate clear, concise documentation.">
+ *     {`You are a **technical writing assistant**. Write documentation
+ * that is clear, accurate, and concise.
+ * - Use second-person voice
+ * - Avoid jargon
+ * - …more lines that get truncated by line-clamp`}
+ *   </Prompt>
+ *
+ *  - `title`    short headline above the prompt body
+ *  - `lines`    number of body lines to show before the ellipsis
+ *               (default 3) — driven by CSS `-webkit-line-clamp`
+ *  - `children` full prompt text (string, multi-line OK)
+ *
+ * The truncated preview keeps the monospace style of the source code
+ * (so multi-line prompts read like the file you'd paste them from);
+ * line clamping adds the trailing "…" automatically.
+ */
+
+export default function Prompt({
+  title,
+  lines = 3,
+  openInCursor = false,
+  children,
+  className = '',
+  ...rest
+}) {
+  const [copied, setCopied] = useState(false);
+  const promptText = typeof children === 'string' ? children : '';
+  const cursorUrl = `https://cursor.com/link/prompt?text=${encodeURIComponent(
+    promptText,
+  )}`;
+
+  function copy() {
+    copyText(promptText).then(
+      () => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      },
+      () => {
+        /* user denied / no focus / no clipboard — silent no-op */
+      },
+    );
+  }
+
+  return (
+    <div className={`velu-prompt ${className}`.trim()} {...rest}>
+      {title != null && (
+        <div className="velu-prompt__title">{title}</div>
+      )}
+      <div
+        className="velu-prompt__body"
+        style={{ WebkitLineClamp: lines }}
+      >
+        {children}
+      </div>
+      <Cluster
+        space="var(--s-1)"
+        justify="flex-end"
+        className="velu-prompt__actions"
+      >
+        {openInCursor && (
+          <a
+            href={cursorUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="velu-prompt__open-cursor"
+            aria-label="Open prompt in Cursor"
+          >
+            <span className="velu-prompt__copy-icon" aria-hidden="true">
+              <CursorIcon />
+            </span>
+            Open in Cursor
+          </a>
+        )}
+        <button
+          type="button"
+          onClick={copy}
+          className="velu-prompt__copy"
+          aria-label={copied ? 'Copied' : 'Copy prompt'}
+        >
+          <span className="velu-prompt__copy-icon" aria-hidden="true">
+            {resolveIcon(copied ? 'check' : 'copy', { size: '1em' })}
+          </span>
+          {copied ? 'Copied' : 'Copy Prompt'}
+        </button>
+      </Cluster>
+    </div>
+  );
+}