@getvitops/emdash 1.0.0-alpha.0 → 2.0.0-alpha.0

package/src/astro/blocks/tone.ts

@@ -0,0 +1,122 @@
+/**
+ * The shared `tone` convention (UPSTREAM finding 21): every block that colours anything
+ * takes one `tone` and, optionally, one `color`.
+ *
+ * - **`tone`** — a role name from the site's `colors.roles` (`brand-primary`, `danger`, a
+ *   consumer-named surface role…), or a semantic name. Role first, then its semantic
+ *   fallbacks, then `neutral`.
+ * - **`color`** — the escape hatch: a palette hue (`amber`) or hue and step (`amber-300`).
+ *   Wins over `tone` when set. Contrast is NOT checked for it — the generator's contrast
+ *   contract covers roles, not arbitrary hue/step pairs — so it is for decoration.
+ *
+ * **Why CSS custom properties, not classes.** A class name built from a field value
+ * (`bg-${tone}`) is invisible to Tailwind's scanner, so it generates nothing in that
+ * format. The resolver instead returns an inline `style` of `--tone-*` properties that
+ * the framework's `.tone` pattern (patterns/tone.css) reads. Each property is a `var()`
+ * chain, so the fallback happens in CSS at render time and this module needs NO copy of
+ * the site's config — a tone the site never defined degrades to `neutral`, not to
+ * nothing.
+ *
+ * The inputs are editor-supplied strings that land inside a `style` attribute, so both are
+ * validated against a closed identifier grammar before use; anything else is dropped.
+ */
+
+/** Semantic names every site is expected to define (`REQUIRED_ROLES`), plus common aliases. */
+export const SEMANTIC_TONES = ['neutral', 'info', 'success', 'warning', 'danger'] as const;
+
+/**
+ * When a role is absent, which others to try before `neutral`. Covers the framework's own
+ * vocabulary (`ui-*`, `brand-*`) so a site that names only some of them still gets the
+ * nearest relative rather than a grey block.
+ */
+const FALLBACKS: Record<string, string[]> = {
+  'brand-primary': ['ui-primary', 'info'],
+  'brand-secondary': ['ui-secondary', 'info'],
+  'ui-primary': ['info'],
+  'ui-secondary': ['info'],
+  'ui-accent': ['warning'],
+  surface: ['neutral'],
+  error: ['danger'],
+  notice: ['warning'],
+  note: ['info'],
+  // Retired vitops.ca vocabulary some stored content still carries.
+  it: ['ui-primary', 'info'],
+  mk: ['ui-accent', 'warning'],
+};
+
+const ROLE = /^[a-z][a-z0-9-]{0,40}$/;
+const HUE = /^([a-z][a-z0-9]*(?:-[a-z][a-z0-9]*)*?)(?:-(\d{2,3}))?$/;
+
+/** The role chain for a tone: itself, its relatives, then `neutral`. Pure and exported for tests. */
+export function toneChain(tone: unknown): string[] {
+  const name = typeof tone === 'string' ? tone.trim().toLowerCase() : '';
+  if (!ROLE.test(name)) return ['neutral'];
+  return [...new Set([name, ...(FALLBACKS[name] ?? []), 'neutral'])];
+}
+
+/** `var(--a, var(--b, …))` over a chain of token names; the last link has no fallback. */
+function chain(tokens: string[]): string {
+  return tokens.reduceRight<string>(
+    (inner, token) => (inner ? `var(${token}, ${inner})` : `var(${token})`),
+    '',
+  );
+}
+
+export interface ResolvedTone {
+  /** Always `tone`; a block adds `tone--solid` itself when it fills rather than tints. */
+  className: string;
+  /** Inline `style` value of `--tone-*` properties (no trailing semicolon). Empty when unset. */
+  style: string;
+}
+
+/**
+ * Resolve a block's `tone` / `color` fields.
+ *
+ * Returns an empty style when neither is set, so an unconfigured block carries no tone at
+ * all (rather than a neutral one) and stays transparent.
+ */
+export function resolveTone(tone?: unknown, color?: unknown): ResolvedTone {
+  const hasTone = typeof tone === 'string' && tone.trim() !== '';
+  const hue = typeof color === 'string' ? HUE.exec(color.trim().toLowerCase()) : null;
+
+  if (hue) {
+    const [, name, step] = hue;
+    const at = (s: string) => `var(--color-${name}-${s})`;
+    return {
+      className: 'tone',
+      style: [
+        `--tone-bg: ${at('100')}`,
+        `--tone-fg: ${at('900')}`,
+        `--tone-border: ${at('300')}`,
+        `--tone-solid: ${at(step ?? '600')}`,
+        `--tone-on-solid: #fff`,
+      ].join('; '),
+    };
+  }
+
+  if (!hasTone) return { className: 'tone', style: '' };
+
+  const roles = toneChain(tone);
+  const of = (prefix: string, suffix = '') =>
+    chain(roles.map((r) => `--color-${prefix}-${r}${suffix}`));
+  return {
+    className: 'tone',
+    style: [
+      `--tone-bg: ${of('bg', '-muted')}`,
+      `--tone-fg: ${of('text')}`,
+      `--tone-border: ${of('border')}`,
+      // A surface role has no `-solid`, only a bare `bg-<role>`; the solid chain ends there.
+      `--tone-solid: ${chain([...roles.map((r) => `--color-bg-${r}-solid`), ...roles.map((r) => `--color-bg-${r}`)])}`,
+      `--tone-on-solid: ${chain(roles.map((r) => `--color-text-on-${r}`))}`,
+    ].join('; '),
+  };
+}
+
+/**
+ * Join a block's own inline style with a resolved tone's, so a renderer can pass one
+ * `style` attribute. Empty parts are skipped.
+ */
+export function joinStyle(...parts: (string | undefined | false)[]): string | undefined {
+  const out = parts.filter(Boolean).join('; ');
+  return out || undefined;
+}

package/src/astro/blocks/value.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { accentRuns, headingTag, lines, linkRuns, pairs, paragraphs, rows, text } from './value.ts';
+
+describe('editor-text helpers', () => {
+  it('headingTag clamps to h2-h6 and falls back', () => {
+    expect(headingTag('3')).toBe('h3');
+    expect(headingTag(1)).toBe('h2');
+    expect(headingTag(9, 4)).toBe('h4');
+    expect(headingTag(undefined)).toBe('h2');
+  });
+
+  it('linkRuns makes links, drops unsafe hrefs and leaves HTML literal', () => {
+    expect(linkRuns('pay [less](/a) for <b>x</b>')).toEqual([
+      { text: 'pay ' },
+      { text: 'less', href: '/a' },
+      { text: ' for <b>x</b>' },
+    ]);
+    expect(linkRuns('[x](javascript:alert)')).toEqual([{ text: 'x' }]);
+  });
+
+  it('accentRuns marks starred runs', () => {
+    expect(accentRuns('Two. *One team.*')).toEqual([
+      { text: 'Two. ', accent: false },
+      { text: 'One team.', accent: true },
+    ]);
+    expect(accentRuns('lone * star')).toEqual([{ text: 'lone * star', accent: false }]);
+  });
+
+  it('pairs and lines split editor fields', () => {
+    expect(pairs('Mon | 9-5\n\nTue|closed\nnote')).toEqual([
+      { term: 'Mon', value: '9-5' },
+      { term: 'Tue', value: 'closed' },
+      { term: 'note', value: '' },
+    ]);
+    expect(lines(' a \n\nb')).toEqual(['a', 'b']);
+  });
+});
+
+describe('repeater helpers', () => {
+  it('rows keeps object rows and drops everything else', () => {
+    expect(rows([{ a: 1 }, null, 'x', [1], { b: 2 }])).toEqual([{ a: 1 }, { b: 2 }]);
+    expect(rows(undefined)).toEqual([]);
+    expect(rows('not an array')).toEqual([]);
+  });
+
+  it('text trims strings and treats other values as empty', () => {
+    expect(text('  hi ')).toBe('hi');
+    expect(text(5)).toBe('');
+    expect(text(undefined)).toBe('');
+  });
+
+  it('paragraphs splits on blank lines only', () => {
+    expect(paragraphs('one\ntwo\n\n three \n\n\n')).toEqual(['one\ntwo', 'three']);
+    expect(paragraphs('')).toEqual([]);
+  });
+});

package/src/astro/blocks/value.ts

@@ -1,7 +1,7 @@
 /**
  * Normalize the props EmDash passes to a Portable Text block component.
  *
- * Verified against emdash 0.31: <PortableText> delegates to astro-portabletext,
+ * Verified against emdash 1.4: <PortableText> still delegates to astro-portabletext,
  * which passes the block object as `props.node` (fields flat on the block next
  * to _type/_key). The `value` and spread branches are kept as tolerance for the
  * shapes shown elsewhere in the EmDash docs, so a host-side change is a
@@ -14,6 +14,10 @@ export function resolveBlockValue<T extends Record<string, unknown>>(
   return candidate as T;
 }
 
+// Shared with the Astro components and `nodesToHtml`; re-exported so blocks import one place.
+import { safeHref } from '@getvitops/utils/url';
+export { safeHref };
+
 /** Split a newline/comma-separated editor field into trimmed non-empty items. */
 export function splitLines(input: unknown): string[] {
   if (typeof input !== 'string') return [];
@@ -22,3 +26,101 @@ export function splitLines(input: unknown): string[] {
     .map((s) => s.trim())
     .filter(Boolean);
 }
+
+/** A repeater field's saved value: an array of row objects. Anything else is no rows. */
+export function rows<T extends Record<string, unknown> = Record<string, unknown>>(
+  input: unknown,
+): T[] {
+  return Array.isArray(input)
+    ? (input.filter((row) => row && typeof row === 'object' && !Array.isArray(row)) as T[])
+    : [];
+}
+
+/** A trimmed string field, or `''` when the value is absent or not a string. */
+export function text(input: unknown): string {
+  return typeof input === 'string' ? input.trim() : '';
+}
+
+/** Split a multiline editor field into paragraphs on blank lines. */
+export function paragraphs(input: unknown): string[] {
+  return text(input)
+    .split(/\n\s*\n/)
+    .map((p) => p.trim())
+    .filter(Boolean);
+}
+
+/** A heading element chosen by an editor's `level` field, clamped to `h2`–`h6`. `h1` is the page's title. */
+export function headingTag(
+  level: unknown,
+  fallback: 2 | 3 | 4 | 5 | 6 = 2,
+): 'h2' | 'h3' | 'h4' | 'h5' | 'h6' {
+  const n = Math.round(Number(level));
+  const clamped = Number.isFinite(n) && n >= 2 && n <= 6 ? n : fallback;
+  return `h${clamped}` as 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+/** One run of inline text, optionally a link. */
+export interface Run {
+  text: string;
+  href?: string;
+}
+
+/**
+ * Plain text with `[label](url)` links, as runs a template renders with no `set:html`.
+ *
+ * Repeater sub-fields are scalar strings, so a card's body cannot hold a link node; this is
+ * the smallest syntax that lets an editor write one. Every `href` goes through
+ * {@link safeHref}, and an unsafe one degrades to its label as plain text. Anything else —
+ * including HTML — stays literal text, which the template escapes.
+ */
+export function linkRuns(input: unknown): Run[] {
+  const source = text(input);
+  const runs: Run[] = [];
+  let last = 0;
+  for (const m of source.matchAll(/\[([^\]]+)\]\(([^)\s]+)\)/g)) {
+    if (m.index > last) runs.push({ text: source.slice(last, m.index) });
+    const href = safeHref(m[2]);
+    runs.push(href ? { text: m[1]!, href } : { text: m[1]! });
+    last = m.index + m[0].length;
+  }
+  if (last < source.length) runs.push({ text: source.slice(last) });
+  return runs;
+}
+
+/**
+ * A heading with accent marks: `Two services. *One team.*` → the starred run is `accent`.
+ * Unbalanced stars stay literal.
+ */
+export function accentRuns(input: unknown): { text: string; accent: boolean }[] {
+  const source = text(input);
+  const runs: { text: string; accent: boolean }[] = [];
+  let last = 0;
+  for (const m of source.matchAll(/\*([^*]+)\*/g)) {
+    if (m.index > last) runs.push({ text: source.slice(last, m.index), accent: false });
+    runs.push({ text: m[1]!, accent: true });
+    last = m.index + m[0].length;
+  }
+  if (last < source.length) runs.push({ text: source.slice(last), accent: false });
+  return runs;
+}
+
+/** Non-empty trimmed lines of a multiline field (a checklist, a feature list). */
+export function lines(input: unknown): string[] {
+  return text(input)
+    .split('\n')
+    .map((l) => l.trim())
+    .filter(Boolean);
+}
+
+/**
+ * `Term | Value` lines → pairs. A line with no `|` is a term with an empty value, so a typo
+ * loses nothing visible.
+ */
+export function pairs(input: unknown): { term: string; value: string }[] {
+  return lines(input).map((line) => {
+    const i = line.indexOf('|');
+    return i < 0
+      ? { term: line, value: '' }
+      : { term: line.slice(0, i).trim(), value: line.slice(i + 1).trim() };
+  });
+}

package/src/astro/index.ts

@@ -2,13 +2,33 @@
  * componentsEntry for the vitops EmDash plugin. EmDash merges this map into
  * <PortableText> automatically — the export name MUST be `blockComponents`
  * and keys MUST match the block `type`s declared in ../blocks.ts.
+ *
+ * `blockTypeComponents` is the OTHER map: renderers for the schema-level block TYPES in
+ * `../block-types.ts` (a `blocks` field entry, keyed by slug), for a site to pass to
+ * `defineBlockComponents` / `<Blocks components={…}>`. EmDash does not merge it.
  */
+import Accordion from './blocks/Accordion.astro';
 import ActionLink from './blocks/ActionLink.astro';
 import Banner from './blocks/Banner.astro';
+import Callout from './blocks/Callout.astro';
+import Cards from './blocks/Cards.astro';
 import Carousel from './blocks/Carousel.astro';
 import CopyButton from './blocks/CopyButton.astro';
 import Details from './blocks/Details.astro';
+import Embed from './blocks/Embed.astro';
+import Entries from './blocks/Entries.astro';
+import Form from './blocks/Form.astro';
+import Gallery from './blocks/Gallery.astro';
+import Hero from './blocks/Hero.astro';
 import ImageCompare from './blocks/ImageCompare.astro';
+import Logos from './blocks/Logos.astro';
+import Marquee from './blocks/Marquee.astro';
+import Nav from './blocks/Nav.astro';
+import Pricing from './blocks/Pricing.astro';
+import Reviews from './blocks/Reviews.astro';
+import Section from './blocks/Section.astro';
+import Stats from './blocks/Stats.astro';
+import Steps from './blocks/Steps.astro';
 
 export const blockComponents = {
   'vitops.actionLink': ActionLink,
@@ -17,4 +37,24 @@ export const blockComponents = {
   'vitops.banner': Banner,
   'vitops.details': Details,
   'vitops.carousel': Carousel,
+  'vitops.gallery': Gallery,
+  'vitops.cards': Cards,
+  'vitops.accordion': Accordion,
+  'vitops.hero': Hero,
+  'vitops.marquee': Marquee,
+  'vitops.logos': Logos,
+  'vitops.steps': Steps,
+  'vitops.stats': Stats,
+  'vitops.callout': Callout,
+  'vitops.entries': Entries,
+  'vitops.pricing': Pricing,
+  'vitops.embed': Embed,
+  'vitops.form': Form,
+  'vitops.reviews': Reviews,
+  'vitops.nav': Nav,
+};
+
+/** Keyed by block-type slug (see `SECTION_SLUG`), not by Portable Text `_type`. */
+export const blockTypeComponents = {
+  vitops_section: Section,
 };

package/src/admin/core-editor.d.ts

@@ -1,7 +0,0 @@
-/**
- * `@getvitops/core/editor` is a side-effect-only browser bundle (registers
- * `<wc-theme-editor>` via `customElements.define`) with no exports and, on
- * purpose, no published `.d.ts` — see that package's `exports` map. This is
- * the ambient shim so `import('@getvitops/core/editor')` type-checks here.
- */
-declare module '@getvitops/core/editor' {}