@veluai/velu 0.2.13 → 0.2.15

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

@@ -1,63 +1,63 @@
-import React from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-
-/**
- * NotFound — the 404 page ("Direction 1 · Classic" from the design):
- * a big accent-colored numeral, a short message, and a three-action row
- * (Back to Home / Search the docs / Ask AI). Centered; the host layout
- * supplies the header + footer. Pure tokens, so light/dark follow
- * [data-theme] automatically.
- *
- * @param {{
- *   homeHref?: string,
- *   linkComponent?: React.ElementType,
- *   onSearch?: () => void,
- *   onAskAI?: () => void,
- *   eyebrow?: string, title?: string, body?: string,
- * }} props
- */
-export default function NotFound({
-  homeHref = '/',
-  linkComponent = 'a',
-  onSearch,
-  onAskAI,
-  eyebrow = 'Error 404',
-  title = 'This page wandered off',
-  body = 'The page you’re looking for doesn’t exist or may have moved. Pick up the trail below.',
-}) {
-  const Link = linkComponent;
-  return (
-    <section className="velu-404">
-      <p className="velu-404__eyebrow">{eyebrow}</p>
-      <div className="velu-404__num" aria-hidden="true">
-        404
-      </div>
-      <h1 className="velu-404__title">{title}</h1>
-      <p className="velu-404__body">{body}</p>
-      <div className="velu-404__actions">
-        <Link className="velu-404__btn velu-404__btn--primary" href={homeHref}>
-          <span className="velu-404__btn-ic" aria-hidden="true">
-            {resolveIcon('house', { size: '1em' })}
-          </span>
-          Back to Home
-        </Link>
-        {onSearch && (
-          <button type="button" className="velu-404__btn" onClick={onSearch}>
-            <span className="velu-404__btn-ic" aria-hidden="true">
-              {resolveIcon('search', { size: '1em' })}
-            </span>
-            Search the docs
-          </button>
-        )}
-        {onAskAI && (
-          <button type="button" className="velu-404__btn" onClick={onAskAI}>
-            <span className="velu-404__btn-ic" aria-hidden="true">
-              {resolveIcon('sparkles', { size: '1em' })}
-            </span>
-            Ask AI
-          </button>
-        )}
-      </div>
-    </section>
-  );
-}
+import React from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+
+/**
+ * NotFound — the 404 page ("Direction 1 · Classic" from the design):
+ * a big accent-colored numeral, a short message, and a three-action row
+ * (Back to Home / Search the docs / Ask AI). Centered; the host layout
+ * supplies the header + footer. Pure tokens, so light/dark follow
+ * [data-theme] automatically.
+ *
+ * @param {{
+ *   homeHref?: string,
+ *   linkComponent?: React.ElementType,
+ *   onSearch?: () => void,
+ *   onAskAI?: () => void,
+ *   eyebrow?: string, title?: string, body?: string,
+ * }} props
+ */
+export default function NotFound({
+  homeHref = '/',
+  linkComponent = 'a',
+  onSearch,
+  onAskAI,
+  eyebrow = 'Error 404',
+  title = 'This page wandered off',
+  body = 'The page you’re looking for doesn’t exist or may have moved. Pick up the trail below.',
+}) {
+  const Link = linkComponent;
+  return (
+    <section className="velu-404">
+      <p className="velu-404__eyebrow">{eyebrow}</p>
+      <div className="velu-404__num" aria-hidden="true">
+        404
+      </div>
+      <h1 className="velu-404__title">{title}</h1>
+      <p className="velu-404__body">{body}</p>
+      <div className="velu-404__actions">
+        <Link className="velu-404__btn velu-404__btn--primary" href={homeHref}>
+          <span className="velu-404__btn-ic" aria-hidden="true">
+            {resolveIcon('house', { size: '1em' })}
+          </span>
+          Back to Home
+        </Link>
+        {onSearch && (
+          <button type="button" className="velu-404__btn" onClick={onSearch}>
+            <span className="velu-404__btn-ic" aria-hidden="true">
+              {resolveIcon('search', { size: '1em' })}
+            </span>
+            Search the docs
+          </button>
+        )}
+        {onAskAI && (
+          <button type="button" className="velu-404__btn" onClick={onAskAI}>
+            <span className="velu-404__btn-ic" aria-hidden="true">
+              {resolveIcon('sparkles', { size: '1em' })}
+            </span>
+            Ask AI
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}

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

@@ -1,219 +1,219 @@
-import React, { useState, useMemo, useId } from 'react';
-import resolveIcon from '../lib/resolveIcon.jsx';
-import Stack from '../primitives/Stack.jsx';
-import Cluster from '../primitives/Cluster.jsx';
-
-/* Improvement reasons shown in the "No" follow-up form. */
-const REASONS = [
-  'Help me get started faster',
-  "Make it easier to find what I'm looking for",
-  'Make it easy to understand the product and features',
-  'Update this documentation',
-  'Something else',
-];
-
-/* HeartBurst — a one-shot celebratory burst of hearts. Renders a fan of
-   small hearts that pop up-and-out from their anchor point, tilt, and
-   fade. Mounted only after a click (never during SSR), so the per-heart
-   Math.random() can't cause a hydration mismatch. Re-key it to replay. */
-const HEART_COUNT = 14;
-const HEART_SPREAD = 3.4; // em — horizontal half-width of the fan
-const HEART_PATH =
-  'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';
-
-function HeartBurst() {
-  const hearts = useMemo(
-    () =>
-      Array.from({ length: HEART_COUNT }, () => ({
-        tx: `${((Math.random() * 2 - 1) * HEART_SPREAD).toFixed(2)}em`,
-        ty: `${(-(0.4 + Math.random() * 0.9) * HEART_SPREAD).toFixed(2)}em`,
-        rot: `${Math.round(Math.random() * 120 - 60)}deg`, // gentle tilt
-        delay: `${(Math.random() * 0.08).toFixed(3)}s`,
-        shade: Math.floor(Math.random() * 4),
-      })),
-    [],
-  );
-  return (
-    <span className="velu-feedback__hearts" aria-hidden="true">
-      {hearts.map((h, i) => (
-        <svg
-          key={i}
-          className={`velu-feedback__heart velu-feedback__heart--${h.shade}`}
-          viewBox="0 0 24 24"
-          style={{
-            '--hb-tx': h.tx,
-            '--hb-ty': h.ty,
-            '--hb-rot': h.rot,
-            animationDelay: h.delay,
-          }}
-        >
-          <path d={HEART_PATH} />
-        </svg>
-      ))}
-    </span>
-  );
-}
-
-/**
- * PageFeedback — the "Was this page helpful?" row at the foot of a docs
- * page. A question label + Yes / No buttons (thumbs-up / thumbs-down).
- *
- *   <PageFeedback onVote={(v) => …} />   // v is 'yes' | 'no'
- *
- * The chosen button takes an accent state. Choosing "Yes" fires a
- * small burst of hearts; choosing "No" expands an improvement form
- * (reason radio group + optional detail + Submit / Cancel). Once the
- * form is submitted — or "Yes" is chosen — a thank-you line shows.
- *
- *  - `question`     the prompt (default "Was this page helpful?")
- *  - `onVote(vote)` fired on every Yes/No change
- *  - `onSubmit({ vote, reason, detail })` fired when the "No" form's
- *    Submit button is pressed
- */
-
-export default function PageFeedback({
-  question = 'Was this page helpful?',
-  onVote,
-  onSubmit,
-  className = '',
-  ...rest
-}) {
-  const [vote, setVote] = useState(null);
-  // Increments each time "Yes" is (re-)chosen — keys <HeartBurst> so
-  // the burst replays.
-  const [burst, setBurst] = useState(0);
-  const [reason, setReason] = useState('');
-  const [detail, setDetail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-  const radioName = useId();
-
-  function choose(v) {
-    if (v === vote) return; // already selected — no-op
-    setVote(v);
-    setSubmitted(false);
-    onVote?.(v);
-    if (v === 'yes') setBurst((b) => b + 1);
-  }
-
-  function cancel() {
-    setVote(null);
-    setReason('');
-    setDetail('');
-  }
-
-  function submit() {
-    setSubmitted(true);
-    onSubmit?.({ vote: 'no', reason, detail });
-  }
-
-  const showForm = vote === 'no' && !submitted;
-
-  return (
-    <Stack
-      space="var(--s0)"
-      className={`velu-feedback ${className}`.trim()}
-      {...rest}
-    >
-      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
-        <span className="velu-feedback__question">{question}</span>
-
-        <Cluster space="var(--s-2)" align="center">
-          <button
-            type="button"
-            className={`velu-feedback__btn${
-              vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
-            }`}
-            onClick={() => choose('yes')}
-            aria-pressed={vote === 'yes'}
-          >
-            <span>Yes</span>
-            {resolveIcon('thumbs-up', { size: '1em' })}
-            {burst > 0 && <HeartBurst key={burst} />}
-          </button>
-          <button
-            type="button"
-            className={`velu-feedback__btn${
-              vote === 'no' ? ' velu-feedback__btn--chosen' : ''
-            }`}
-            onClick={() => choose('no')}
-            aria-pressed={vote === 'no'}
-          >
-            <span>No</span>
-            {resolveIcon('thumbs-down', { size: '1em' })}
-          </button>
-        </Cluster>
-
-        {vote === 'yes' && (
-          <span className="velu-feedback__thanks" role="status">
-            Thanks for your feedback
-          </span>
-        )}
-      </Cluster>
-
-      {showForm && (
-        <Stack space="var(--s1)" className="velu-feedback__form">
-          <h3 className="velu-feedback__form-title">
-            How can we improve our product?
-          </h3>
-
-          <Stack as="div" space="var(--s-2)">
-            {REASONS.map((r) => (
-              <label key={r} className="velu-feedback__radio">
-                <input
-                  type="radio"
-                  name={radioName}
-                  value={r}
-                  checked={reason === r}
-                  onChange={() => setReason(r)}
-                />
-                <span
-                  className="velu-feedback__radio-mark"
-                  aria-hidden="true"
-                />
-                <span className="velu-feedback__radio-label">{r}</span>
-              </label>
-            ))}
-          </Stack>
-
-          <textarea
-            className="velu-feedback__detail"
-            placeholder="(optional) Could you share more about your experience?"
-            value={detail}
-            onChange={(e) => setDetail(e.target.value)}
-            rows={3}
-          />
-
-          <Cluster space="var(--s-1)">
-            <button
-              type="button"
-              className="velu-feedback__action velu-feedback__action--cancel"
-              onClick={cancel}
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              className="velu-feedback__action velu-feedback__action--submit"
-              onClick={submit}
-            >
-              Submit Feedback
-            </button>
-          </Cluster>
-        </Stack>
-      )}
-
-      {submitted && (
-        <Stack
-          space="var(--s-5)"
-          className="velu-feedback__sent"
-          role="status"
-        >
-          <span className="velu-feedback__sent-title">Feedback sent</span>
-          <span className="velu-feedback__sent-note">
-            Thanks for feedback
-          </span>
-        </Stack>
-      )}
-    </Stack>
-  );
-}
+import React, { useState, useMemo, useId } from 'react';
+import resolveIcon from '../lib/resolveIcon.jsx';
+import Stack from '../primitives/Stack.jsx';
+import Cluster from '../primitives/Cluster.jsx';
+
+/* Improvement reasons shown in the "No" follow-up form. */
+const REASONS = [
+  'Help me get started faster',
+  "Make it easier to find what I'm looking for",
+  'Make it easy to understand the product and features',
+  'Update this documentation',
+  'Something else',
+];
+
+/* HeartBurst — a one-shot celebratory burst of hearts. Renders a fan of
+   small hearts that pop up-and-out from their anchor point, tilt, and
+   fade. Mounted only after a click (never during SSR), so the per-heart
+   Math.random() can't cause a hydration mismatch. Re-key it to replay. */
+const HEART_COUNT = 14;
+const HEART_SPREAD = 3.4; // em — horizontal half-width of the fan
+const HEART_PATH =
+  'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z';
+
+function HeartBurst() {
+  const hearts = useMemo(
+    () =>
+      Array.from({ length: HEART_COUNT }, () => ({
+        tx: `${((Math.random() * 2 - 1) * HEART_SPREAD).toFixed(2)}em`,
+        ty: `${(-(0.4 + Math.random() * 0.9) * HEART_SPREAD).toFixed(2)}em`,
+        rot: `${Math.round(Math.random() * 120 - 60)}deg`, // gentle tilt
+        delay: `${(Math.random() * 0.08).toFixed(3)}s`,
+        shade: Math.floor(Math.random() * 4),
+      })),
+    [],
+  );
+  return (
+    <span className="velu-feedback__hearts" aria-hidden="true">
+      {hearts.map((h, i) => (
+        <svg
+          key={i}
+          className={`velu-feedback__heart velu-feedback__heart--${h.shade}`}
+          viewBox="0 0 24 24"
+          style={{
+            '--hb-tx': h.tx,
+            '--hb-ty': h.ty,
+            '--hb-rot': h.rot,
+            animationDelay: h.delay,
+          }}
+        >
+          <path d={HEART_PATH} />
+        </svg>
+      ))}
+    </span>
+  );
+}
+
+/**
+ * PageFeedback — the "Was this page helpful?" row at the foot of a docs
+ * page. A question label + Yes / No buttons (thumbs-up / thumbs-down).
+ *
+ *   <PageFeedback onVote={(v) => …} />   // v is 'yes' | 'no'
+ *
+ * The chosen button takes an accent state. Choosing "Yes" fires a
+ * small burst of hearts; choosing "No" expands an improvement form
+ * (reason radio group + optional detail + Submit / Cancel). Once the
+ * form is submitted — or "Yes" is chosen — a thank-you line shows.
+ *
+ *  - `question`     the prompt (default "Was this page helpful?")
+ *  - `onVote(vote)` fired on every Yes/No change
+ *  - `onSubmit({ vote, reason, detail })` fired when the "No" form's
+ *    Submit button is pressed
+ */
+
+export default function PageFeedback({
+  question = 'Was this page helpful?',
+  onVote,
+  onSubmit,
+  className = '',
+  ...rest
+}) {
+  const [vote, setVote] = useState(null);
+  // Increments each time "Yes" is (re-)chosen — keys <HeartBurst> so
+  // the burst replays.
+  const [burst, setBurst] = useState(0);
+  const [reason, setReason] = useState('');
+  const [detail, setDetail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const radioName = useId();
+
+  function choose(v) {
+    if (v === vote) return; // already selected — no-op
+    setVote(v);
+    setSubmitted(false);
+    onVote?.(v);
+    if (v === 'yes') setBurst((b) => b + 1);
+  }
+
+  function cancel() {
+    setVote(null);
+    setReason('');
+    setDetail('');
+  }
+
+  function submit() {
+    setSubmitted(true);
+    onSubmit?.({ vote: 'no', reason, detail });
+  }
+
+  const showForm = vote === 'no' && !submitted;
+
+  return (
+    <Stack
+      space="var(--s0)"
+      className={`velu-feedback ${className}`.trim()}
+      {...rest}
+    >
+      <Cluster space="var(--s0)" align="center" className="velu-feedback__bar">
+        <span className="velu-feedback__question">{question}</span>
+
+        <Cluster space="var(--s-2)" align="center">
+          <button
+            type="button"
+            className={`velu-feedback__btn${
+              vote === 'yes' ? ' velu-feedback__btn--chosen' : ''
+            }`}
+            onClick={() => choose('yes')}
+            aria-pressed={vote === 'yes'}
+          >
+            <span>Yes</span>
+            {resolveIcon('thumbs-up', { size: '1em' })}
+            {burst > 0 && <HeartBurst key={burst} />}
+          </button>
+          <button
+            type="button"
+            className={`velu-feedback__btn${
+              vote === 'no' ? ' velu-feedback__btn--chosen' : ''
+            }`}
+            onClick={() => choose('no')}
+            aria-pressed={vote === 'no'}
+          >
+            <span>No</span>
+            {resolveIcon('thumbs-down', { size: '1em' })}
+          </button>
+        </Cluster>
+
+        {vote === 'yes' && (
+          <span className="velu-feedback__thanks" role="status">
+            Thanks for your feedback
+          </span>
+        )}
+      </Cluster>
+
+      {showForm && (
+        <Stack space="var(--s1)" className="velu-feedback__form">
+          <h3 className="velu-feedback__form-title">
+            How can we improve our product?
+          </h3>
+
+          <Stack as="div" space="var(--s-2)">
+            {REASONS.map((r) => (
+              <label key={r} className="velu-feedback__radio">
+                <input
+                  type="radio"
+                  name={radioName}
+                  value={r}
+                  checked={reason === r}
+                  onChange={() => setReason(r)}
+                />
+                <span
+                  className="velu-feedback__radio-mark"
+                  aria-hidden="true"
+                />
+                <span className="velu-feedback__radio-label">{r}</span>
+              </label>
+            ))}
+          </Stack>
+
+          <textarea
+            className="velu-feedback__detail"
+            placeholder="(optional) Could you share more about your experience?"
+            value={detail}
+            onChange={(e) => setDetail(e.target.value)}
+            rows={3}
+          />
+
+          <Cluster space="var(--s-1)">
+            <button
+              type="button"
+              className="velu-feedback__action velu-feedback__action--cancel"
+              onClick={cancel}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="velu-feedback__action velu-feedback__action--submit"
+              onClick={submit}
+            >
+              Submit Feedback
+            </button>
+          </Cluster>
+        </Stack>
+      )}
+
+      {submitted && (
+        <Stack
+          space="var(--s-5)"
+          className="velu-feedback__sent"
+          role="status"
+        >
+          <span className="velu-feedback__sent-title">Feedback sent</span>
+          <span className="velu-feedback__sent-note">
+            Thanks for feedback
+          </span>
+        </Stack>
+      )}
+    </Stack>
+  );
+}