@veluai/velu 0.2.24 → 0.2.27

package/runtime/velu-ui/components/page-nav.css

@@ -1,50 +1,50 @@
-/* PageNav — previous/next page cards. The two-column / stacked layout
-   is the <Switcher> primitive; this file owns only the card chrome.
-   All values are tokens; light/dark via [data-theme]. */
-
-.velu-pagenav__card {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-3);
-  min-inline-size: 0;
-  padding: var(--s0);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  color: var(--text-color);
-  text-decoration: none;
-  transition: border-color 0.12s ease;
-}
-.velu-pagenav__card:hover {
-  border-color: var(--accent-color);
-}
-
-/* Previous hugs the inline start, Next the inline end. */
-.velu-pagenav__card--prev {
-  align-items: flex-start;
-  text-align: start;
-}
-.velu-pagenav__card--next {
-  align-items: flex-end;
-  text-align: end;
-}
-
-.velu-pagenav__title {
-  font-size: var(--f-h5);
-  line-height: var(--lh-h5);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-
-/* "‹ Previous" / "Next ›" — muted, turns accent on card hover. */
-.velu-pagenav__dir {
-  font-size: var(--f-h6);
-  color: var(--muted-color);
-  transition: color 0.12s ease;
-}
-.velu-pagenav__dir svg {
-  flex: none;
-}
-.velu-pagenav__card:hover .velu-pagenav__dir {
-  color: var(--accent-color);
-}
+/* PageNav — previous/next page cards. The two-column / stacked layout
+   is the <Switcher> primitive; this file owns only the card chrome.
+   All values are tokens; light/dark via [data-theme]. */
+
+.velu-pagenav__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+  min-inline-size: 0;
+  padding: var(--s0);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  text-decoration: none;
+  transition: border-color 0.12s ease;
+}
+.velu-pagenav__card:hover {
+  border-color: var(--accent-color);
+}
+
+/* Previous hugs the inline start, Next the inline end. */
+.velu-pagenav__card--prev {
+  align-items: flex-start;
+  text-align: start;
+}
+.velu-pagenav__card--next {
+  align-items: flex-end;
+  text-align: end;
+}
+
+.velu-pagenav__title {
+  font-size: var(--f-h5);
+  line-height: var(--lh-h5);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+
+/* "‹ Previous" / "Next ›" — muted, turns accent on card hover. */
+.velu-pagenav__dir {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+  transition: color 0.12s ease;
+}
+.velu-pagenav__dir svg {
+  flex: none;
+}
+.velu-pagenav__card:hover .velu-pagenav__dir {
+  color: var(--accent-color);
+}

package/runtime/velu-ui/components/powered-by.css

@@ -1,92 +1,92 @@
-/* PoweredBy — "Powered by Velu" badge, right-aligned. Sits above the
-   site footer. All values are tokens; light/dark via [data-theme]. */
-
-/* Content foot — social icons (left) + the "Powered by" badge (right) in one
-   row. Shown at the base of the article column when the footer has no link
-   columns (so there's no full footer section). The row owns the vertical
-   rhythm; the nested badge drops its own standalone margins. */
-.velu-content-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--s2);
-  margin-block: 2rem;
-  padding-inline: var(--s3);
-}
-.velu-content-foot .velu-powered-by {
-  margin: 0;
-  padding: 0;
-  /* Fill the row so the badge's own `justify-content: flex-end` right-aligns
-     it — with or without the social icons as a sibling. (Avoids a
-     `margin-inline-start: auto` reset, which the production CSS minifier folds
-     away when it follows `margin: 0`, leaving the lone badge stuck at the
-     start in the build but not in dev.) */
-  flex: 1;
-}
-.velu-content-foot .velu-social {
-  color: var(--muted-color);
-}
-
-.velu-powered-by {
-  display: flex;
-  justify-content: flex-end;
-  /* 32px gap above (to the previous element — usually the AskBar) and
-     32px gap below (to the site footer). Margins, not padding, so the
-     gap is OUTSIDE the badge — i.e. it's the actual whitespace the
-     reader sees rather than a tap-target buffer. */
-  margin-block-start: 2rem;
-  margin-block-end: 2rem;
-  padding-block: 0;
-  padding-inline: var(--s3);
-}
-
-.velu-powered-by__link {
-  display: inline-flex;
-  align-items: center;
-  /* Gap here is only between the "Powered by" label and the brand
-     sub-cluster — the mark↔wordmark spacing is set tighter inside
-     .velu-powered-by__brand. */
-  gap: var(--s-3);
-  text-decoration: none;
-  color: var(--text-color);
-  font-size: var(--f-h6);
-  transition: opacity 0.12s ease;
-}
-.velu-powered-by__link:hover {
-  opacity: 0.78;
-}
-
-.velu-powered-by__label {
-  color: var(--muted-color);
-  font-weight: var(--weight-normal);
-}
-
-/* Mark + wordmark form one visual unit ("Velu" the brand) — tighter
-   gap than the label↔brand spacing above. */
-.velu-powered-by__brand {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-5);
-}
-
-/* Mark: same 32×24 ratio as the brand mark, sized one modular step up
-   from body text so it reads at the same scale as the wordmark beside
-   it. Muted (not accent) here so the badge sits quietly as an
-   attribution rather than a brand statement. */
-.velu-powered-by__mark {
-  flex: none;
-  inline-size: calc(var(--icon-size-lg) * (32 / 24));
-  block-size: var(--icon-size-lg);
-  color: var(--muted-color);
-}
-
-.velu-powered-by__wordmark {
-  font-family: var(--font-brand);
-  font-weight: var(--weight-light);
-  font-size: var(--f-h4);
-  line-height: 1;
-  letter-spacing: -0.01em;
-  /* Muted to match the mark — the whole badge is a single tonal
-     attribution. */
-  color: var(--muted-color);
-}
+/* PoweredBy — "Powered by Velu" badge, right-aligned. Sits above the
+   site footer. All values are tokens; light/dark via [data-theme]. */
+
+/* Content foot — social icons (left) + the "Powered by" badge (right) in one
+   row. Shown at the base of the article column when the footer has no link
+   columns (so there's no full footer section). The row owns the vertical
+   rhythm; the nested badge drops its own standalone margins. */
+.velu-content-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--s2);
+  margin-block: 2rem;
+  padding-inline: var(--s3);
+}
+.velu-content-foot .velu-powered-by {
+  margin: 0;
+  padding: 0;
+  /* Fill the row so the badge's own `justify-content: flex-end` right-aligns
+     it — with or without the social icons as a sibling. (Avoids a
+     `margin-inline-start: auto` reset, which the production CSS minifier folds
+     away when it follows `margin: 0`, leaving the lone badge stuck at the
+     start in the build but not in dev.) */
+  flex: 1;
+}
+.velu-content-foot .velu-social {
+  color: var(--muted-color);
+}
+
+.velu-powered-by {
+  display: flex;
+  justify-content: flex-end;
+  /* 32px gap above (to the previous element — usually the AskBar) and
+     32px gap below (to the site footer). Margins, not padding, so the
+     gap is OUTSIDE the badge — i.e. it's the actual whitespace the
+     reader sees rather than a tap-target buffer. */
+  margin-block-start: 2rem;
+  margin-block-end: 2rem;
+  padding-block: 0;
+  padding-inline: var(--s3);
+}
+
+.velu-powered-by__link {
+  display: inline-flex;
+  align-items: center;
+  /* Gap here is only between the "Powered by" label and the brand
+     sub-cluster — the mark↔wordmark spacing is set tighter inside
+     .velu-powered-by__brand. */
+  gap: var(--s-3);
+  text-decoration: none;
+  color: var(--text-color);
+  font-size: var(--f-h6);
+  transition: opacity 0.12s ease;
+}
+.velu-powered-by__link:hover {
+  opacity: 0.78;
+}
+
+.velu-powered-by__label {
+  color: var(--muted-color);
+  font-weight: var(--weight-normal);
+}
+
+/* Mark + wordmark form one visual unit ("Velu" the brand) — tighter
+   gap than the label↔brand spacing above. */
+.velu-powered-by__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-5);
+}
+
+/* Mark: same 32×24 ratio as the brand mark, sized one modular step up
+   from body text so it reads at the same scale as the wordmark beside
+   it. Muted (not accent) here so the badge sits quietly as an
+   attribution rather than a brand statement. */
+.velu-powered-by__mark {
+  flex: none;
+  inline-size: calc(var(--icon-size-lg) * (32 / 24));
+  block-size: var(--icon-size-lg);
+  color: var(--muted-color);
+}
+
+.velu-powered-by__wordmark {
+  font-family: var(--font-brand);
+  font-weight: var(--weight-light);
+  font-size: var(--f-h4);
+  line-height: 1;
+  letter-spacing: -0.01em;
+  /* Muted to match the mark — the whole badge is a single tonal
+     attribution. */
+  color: var(--muted-color);
+}

package/runtime/velu-ui/components/prompt.css

@@ -1,99 +1,99 @@
-/* Prompt — surface card with title, monospace truncated body, and a
-   solid accent "Copy Prompt" button. All values are tokens; light /
-   dark auto via [data-theme] since the surface, text, and accent vars
-   all switch. */
-
-.velu-prompt {
-  background: var(--surface-color);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: var(--s2);
-  color: var(--text-color);
-}
-
-.velu-prompt__title {
-  font-size: var(--f-h4);
-  line-height: var(--lh-h4);
-  font-weight: var(--weight-medium);
-  margin-block-end: var(--s1);
-}
-
-/* Truncated multi-line body. white-space:pre-wrap preserves the
-   newlines / leading whitespace of the source prompt; -webkit-box +
-   -webkit-line-clamp adds the auto ellipsis on the Nth line. The
-   `lines` prop sets -webkit-line-clamp inline via React. */
-.velu-prompt__body {
-  margin: 0;
-  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-/* Layout (flex + gap + justify-end) is provided by <Cluster>; this
-   rule only owns the spacing FROM the body above. */
-.velu-prompt__actions {
-  margin-block-start: var(--s1);
-}
-
-/* Accent-filled copy button — same visual weight as the CTA on Card,
-   sized to read as the row's primary action. Hover dims the accent
-   slightly via color-mix. */
-.velu-prompt__copy {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding-block: var(--s-6);
-  padding-inline: var(--s-3);
-  background: var(--accent-color);
-  border: 0;
-  border-radius: var(--radius-sm);
-  color: #fff;
-  font: inherit;
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  font-weight: var(--weight-medium);
-  cursor: pointer;
-}
-.velu-prompt__copy:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
-}
-.velu-prompt__copy:focus-visible {
-  outline: var(--border-width) solid var(--text-color);
-  outline-offset: 2px;
-}
-
-.velu-prompt__copy-icon {
-  display: inline-flex;
-  align-items: center;
-}
-
-/* Open in Cursor — same shape as copy, inverted neutral palette so it
-   reads as the secondary action sitting next to the accent primary.
-   Inherits the cursor brand glyph color via `currentColor`. */
-.velu-prompt__open-cursor {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-2);
-  padding-block: var(--s-6);
-  padding-inline: var(--s-3);
-  background: var(--text-color);
-  color: var(--page-bg);
-  border-radius: var(--radius-sm);
-  font: inherit;
-  font-size: var(--f-h6);
-  line-height: var(--lh-h6);
-  font-weight: var(--weight-medium);
-  text-decoration: none;
-}
-.velu-prompt__open-cursor:hover {
-  background: color-mix(in srgb, var(--text-color) 88%, var(--accent-color));
-}
-.velu-prompt__open-cursor:focus-visible {
-  outline: var(--border-width) solid var(--accent-color);
-  outline-offset: 2px;
-}
+/* Prompt — surface card with title, monospace truncated body, and a
+   solid accent "Copy Prompt" button. All values are tokens; light /
+   dark auto via [data-theme] since the surface, text, and accent vars
+   all switch. */
+
+.velu-prompt {
+  background: var(--surface-color);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  padding: var(--s2);
+  color: var(--text-color);
+}
+
+.velu-prompt__title {
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: var(--weight-medium);
+  margin-block-end: var(--s1);
+}
+
+/* Truncated multi-line body. white-space:pre-wrap preserves the
+   newlines / leading whitespace of the source prompt; -webkit-box +
+   -webkit-line-clamp adds the auto ellipsis on the Nth line. The
+   `lines` prop sets -webkit-line-clamp inline via React. */
+.velu-prompt__body {
+  margin: 0;
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* Layout (flex + gap + justify-end) is provided by <Cluster>; this
+   rule only owns the spacing FROM the body above. */
+.velu-prompt__actions {
+  margin-block-start: var(--s1);
+}
+
+/* Accent-filled copy button — same visual weight as the CTA on Card,
+   sized to read as the row's primary action. Hover dims the accent
+   slightly via color-mix. */
+.velu-prompt__copy {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-block: var(--s-6);
+  padding-inline: var(--s-3);
+  background: var(--accent-color);
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: #fff;
+  font: inherit;
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+}
+.velu-prompt__copy:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+.velu-prompt__copy:focus-visible {
+  outline: var(--border-width) solid var(--text-color);
+  outline-offset: 2px;
+}
+
+.velu-prompt__copy-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Open in Cursor — same shape as copy, inverted neutral palette so it
+   reads as the secondary action sitting next to the accent primary.
+   Inherits the cursor brand glyph color via `currentColor`. */
+.velu-prompt__open-cursor {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding-block: var(--s-6);
+  padding-inline: var(--s-3);
+  background: var(--text-color);
+  color: var(--page-bg);
+  border-radius: var(--radius-sm);
+  font: inherit;
+  font-size: var(--f-h6);
+  line-height: var(--lh-h6);
+  font-weight: var(--weight-medium);
+  text-decoration: none;
+}
+.velu-prompt__open-cursor:hover {
+  background: color-mix(in srgb, var(--text-color) 88%, var(--accent-color));
+}
+.velu-prompt__open-cursor:focus-visible {
+  outline: var(--border-width) solid var(--accent-color);
+  outline-offset: 2px;
+}