@symbo.ls/default-config 3.14.0 → 3.14.1

package/README.md

@@ -1,5 +1,5 @@
 # Default Config
 
-Default design system configuration for Symbols v4. Provides baseline color, typography, spacing, media query, and theme definitions used when no custom config is supplied. The atomic CSS engine (`@symbo.ls/css`) and `@symbo.ls/scratch` consume this config to generate design tokens.
+Default design system configuration for Symbols v3.14. Provides baseline color, typography, spacing, media query, and theme definitions used when no custom config is supplied. The atomic CSS engine (`@symbo.ls/css`) and `@symbo.ls/scratch` consume this config to generate design tokens.
 
 Check out the [docs page](http://symbols.app/developersintro#configuration) to learn more.

package/__tests__/assetMedia.test.js

@@ -0,0 +1,242 @@
+/**
+ * Asset-aware media components: Img, Video, Audio, AssetPicture. The
+ * components themselves are plain DOMQL config objects — DOMQL evaluates
+ * functions against an element at runtime. These tests bypass DOMQL and
+ * call the functions directly with a mock `el` shape, asserting the
+ * src/srcset/children outputs computed from `el.context.assets`.
+ */
+
+import { describe, it, expect } from '@jest/globals'
+import { Img } from '../components/Atoms/Img.js'
+import { Video } from '../components/Atoms/Video.js'
+import { Audio } from '../components/Atoms/Audio.js'
+import { AssetPicture } from '../components/Atoms/AssetPicture.js'
+
+const HERO_ASSET = {
+  src: '/assets/hero.jpg',
+  type: 'image/jpeg',
+  category: 'image',
+  variants: [
+    { src: '/assets/hero.jpg', format: 'image/jpeg', scale: 1 },
+    { src: '/assets/hero@2x.jpg', format: 'image/jpeg', scale: 2 },
+    { src: '/assets/hero.webp', format: 'image/webp', scale: 1 },
+    { src: '/assets/hero@2x.webp', format: 'image/webp', scale: 2 },
+    { src: '/assets/hero.avif', format: 'image/avif', scale: 1 }
+  ]
+}
+
+const HERO_WIDTHS_ASSET = {
+  src: '/assets/cover.jpg',
+  type: 'image/jpeg',
+  category: 'image',
+  variants: [
+    { src: '/assets/cover.jpg', format: 'image/jpeg', scale: 1 },
+    { src: '/assets/cover-640w.jpg', format: 'image/jpeg', scale: 1, width: 640 },
+    { src: '/assets/cover-1280w.jpg', format: 'image/jpeg', scale: 1, width: 1280 }
+  ]
+}
+
+const INTRO_VIDEO_ASSET = {
+  src: '/assets/intro.mp4',
+  type: 'video/mp4',
+  category: 'video',
+  variants: [
+    { src: '/assets/intro.mp4', format: 'video/mp4', scale: 1 },
+    { src: '/assets/intro.webm', format: 'video/webm', scale: 1 }
+  ]
+}
+
+const VOICE_AUDIO_ASSET = {
+  src: '/assets/voice.mp3',
+  type: 'audio/mpeg',
+  category: 'audio',
+  variants: [
+    { src: '/assets/voice.mp3', format: 'audio/mpeg', scale: 1 },
+    { src: '/assets/voice.ogg', format: 'audio/ogg', scale: 1 }
+  ]
+}
+
+const ctxWith = (assets) => ({ context: { assets } })
+
+const elFor = (overrides = {}) => ({
+  ...overrides,
+  context: { assets: { 'hero.jpg': HERO_ASSET } }
+})
+
+describe('Img — asset-manifest awareness via src prop', () => {
+  it('falls through to literal src when no manifest exists', () => {
+    const el = { src: '/manual.jpg', alt: 'a' }
+    expect(Img.attr.src(el)).toBe('/manual.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('uses asset.src when src matches a manifest key', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    expect(Img.attr.src(el)).toBe('/assets/hero.jpg')
+  })
+
+  it('emits scale-based srcset for same-format variants only', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const srcset = Img.attr.srcset(el)
+    // Same-format only — webp/avif must not appear in srcset (those need <picture>).
+    expect(srcset).toBe('/assets/hero@2x.jpg 2x')
+    expect(srcset).not.toMatch(/webp|avif/)
+  })
+
+  it('emits width-based srcset when variants carry .width', () => {
+    const el = { src: 'cover.jpg', ...ctxWith({ 'cover.jpg': HERO_WIDTHS_ASSET }) }
+    expect(Img.attr.srcset(el)).toBe('/assets/cover-640w.jpg 640w, /assets/cover-1280w.jpg 1280w')
+  })
+
+  it('treats src as a literal URL when not in the manifest', () => {
+    const el = { src: '/manual.jpg', alt: 'a', ...ctxWith({}) }
+    expect(Img.attr.src(el)).toBe('/manual.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('preserves the title-from-alt fallback', () => {
+    expect(Img.attr.title({ title: 't' })).toBe('t')
+    expect(Img.attr.title({ alt: 'a' })).toBe('a')
+  })
+})
+
+describe('Video — asset-manifest awareness', () => {
+  it('emits a <source> child per format variant', () => {
+    const el = { src: 'intro.mp4', ...ctxWith({ 'intro.mp4': INTRO_VIDEO_ASSET }) }
+    const children = Video.children(el)
+    expect(children).toEqual([
+      { tag: 'source', attr: { src: '/assets/intro.mp4', type: 'video/mp4' } },
+      { tag: 'source', attr: { src: '/assets/intro.webm', type: 'video/webm' } }
+    ])
+  })
+
+  it('sets src to the primary variant URL', () => {
+    const el = { src: 'intro.mp4', ...ctxWith({ 'intro.mp4': INTRO_VIDEO_ASSET }) }
+    expect(Video.attr.src(el)).toBe('/assets/intro.mp4')
+  })
+
+  it('returns undefined when no asset resolves (lets DOMQL fall through)', () => {
+    expect(Video.children({ src: '/manual.mp4' })).toBeUndefined()
+  })
+})
+
+describe('Audio — asset-manifest awareness', () => {
+  it('emits a <source> child per format variant', () => {
+    const el = { src: 'voice.mp3', ...ctxWith({ 'voice.mp3': VOICE_AUDIO_ASSET }) }
+    expect(Audio.children(el)).toEqual([
+      { tag: 'source', attr: { src: '/assets/voice.mp3', type: 'audio/mpeg' } },
+      { tag: 'source', attr: { src: '/assets/voice.ogg', type: 'audio/ogg' } }
+    ])
+  })
+
+  it('sets src to the primary variant URL', () => {
+    const el = { src: 'voice.mp3', ...ctxWith({ 'voice.mp3': VOICE_AUDIO_ASSET }) }
+    expect(Audio.attr.src(el)).toBe('/assets/voice.mp3')
+  })
+})
+
+describe('Smart resolution: cloud strings + context.files fallback', () => {
+  // Cloud / legacy entries arrive as bare URL strings, not manifest
+  // objects. Components must use the URL verbatim and skip variant
+  // emission entirely (no <source> chain, no srcset).
+
+  it('Img: cloud-string URL in context.assets resolves to plain src, no srcset', () => {
+    const el = { src: 'logo', ...ctxWith({ logo: 'https://cdn.example.com/logo.svg' }) }
+    expect(Img.attr.src(el)).toBe('https://cdn.example.com/logo.svg')
+    expect(Img.attr.srcset(el)).toBeUndefined()
+  })
+
+  it('Img: falls back to context.files when key missing in context.assets', () => {
+    const el = {
+      src: 'doc.pdf-thumb.jpg',
+      context: { files: { 'doc.pdf-thumb.jpg': '/cdn/doc-thumb.jpg' } }
+    }
+    expect(Img.attr.src(el)).toBe('/cdn/doc-thumb.jpg')
+  })
+
+  it('Video: cloud-string URL skips <source> children', () => {
+    const el = { src: 'reel', ...ctxWith({ reel: 'https://cdn.example.com/reel.mp4' }) }
+    expect(Video.attr.src(el)).toBe('https://cdn.example.com/reel.mp4')
+    // Video.children falls through to el.children; with none defined that's undefined.
+    expect(Video.children(el)).toBeUndefined()
+  })
+
+  it('Audio: cloud-string URL skips <source> children', () => {
+    const el = { src: 'theme', ...ctxWith({ theme: 'https://cdn.example.com/theme.mp3' }) }
+    expect(Audio.attr.src(el)).toBe('https://cdn.example.com/theme.mp3')
+    expect(Audio.children(el)).toBeUndefined()
+  })
+
+  it('AssetPicture: cloud-string URL emits a single <img> (no <source> chain)', () => {
+    const el = { src: 'banner', alt: 'Banner', ...ctxWith({ banner: 'https://cdn.example.com/banner.jpg' }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: 'https://cdn.example.com/banner.jpg', alt: 'Banner' } }
+    ])
+  })
+
+  it('Img: variant manifest still wins when both shapes present in different stores', () => {
+    // Same key in both context.assets (cloud string) and context.files (manifest).
+    // assets is checked first per resolveAsset's lookup order.
+    const el = {
+      src: 'hero.jpg',
+      context: {
+        assets: { 'hero.jpg': '/cloud/hero.jpg' },
+        files: { 'hero.jpg': HERO_ASSET }
+      }
+    }
+    expect(Img.attr.src(el)).toBe('/cloud/hero.jpg')
+    expect(Img.attr.srcset(el)).toBeUndefined() // cloud string → no variants
+  })
+
+  it('AssetPicture: object-shape entry without variants array emits just <img>', () => {
+    // Real-world cloud shape — provider returns { src, type } but no variant chain.
+    const minimalManifest = { src: 'https://cdn.example.com/hero.jpg', type: 'image/jpeg' }
+    const el = { src: 'hero.jpg', alt: 'Hero', ...ctxWith({ 'hero.jpg': minimalManifest }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: 'https://cdn.example.com/hero.jpg', alt: 'Hero' } }
+    ])
+  })
+})
+
+describe('AssetPicture — format-negotiated <picture>', () => {
+  it('emits <source type=…> for each non-primary format + trailing <img>', () => {
+    const el = { src: 'hero.jpg', alt: 'Hero', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const children = AssetPicture.children(el)
+
+    // Non-primary formats become <source>: webp and avif (jpg is the primary).
+    const sources = children.filter((c) => c.tag === 'source')
+    const types = sources.map((c) => c.attr.type).sort()
+    expect(types).toEqual(['image/avif', 'image/webp'])
+
+    // Trailing <img> uses the primary fallback URL + same-format srcset.
+    const img = children.find((c) => c.tag === 'img')
+    expect(img.attr.src).toBe('/assets/hero.jpg')
+    expect(img.attr.alt).toBe('Hero')
+    expect(img.attr.srcset).toBe('/assets/hero@2x.jpg 2x')
+  })
+
+  it('webp <source> includes scale variants in its srcset', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const children = AssetPicture.children(el)
+    const webp = children.find((c) => c.tag === 'source' && c.attr.type === 'image/webp')
+    expect(webp.attr.srcset).toBe('/assets/hero.webp, /assets/hero@2x.webp 2x')
+  })
+
+  it('avif <source> with single variant emits no scale descriptor', () => {
+    const el = { src: 'hero.jpg', ...ctxWith({ 'hero.jpg': HERO_ASSET }) }
+    const avif = AssetPicture.children(el).find((c) => c.tag === 'source' && c.attr.type === 'image/avif')
+    expect(avif.attr.srcset).toBe('/assets/hero.avif')
+  })
+
+  it('returns undefined when no asset resolves (lets DOMQL fall through)', () => {
+    expect(AssetPicture.children({ src: '/manual.jpg' })).toBeUndefined()
+  })
+
+  it('emits just <img> when asset has no variants array', () => {
+    const minimalAsset = { src: '/assets/x.jpg', type: 'image/jpeg' }
+    const el = { src: 'x.jpg', alt: 'X', ...ctxWith({ 'x.jpg': minimalAsset }) }
+    expect(AssetPicture.children(el)).toEqual([
+      { tag: 'img', attr: { src: '/assets/x.jpg', alt: 'X' } }
+    ])
+  })
+})

package/__tests__/componentsManifest.test.js

@@ -0,0 +1,41 @@
+/**
+ * FT-FRAMEWORK-1: the explicit COMPONENTS manifest must surface every
+ * uppercase-keyed component published by the default-config atoms /
+ * input / component modules. Parcel under smbls's `sideEffects: false`
+ * was pruning entries off the namespace import that prepare.js used to
+ * iterate, and consumer projects ended up missing atoms from
+ * `context.components`. This test pins the manifest contract so a future
+ * build-time prune can't silently strip entries again.
+ */
+
+import { describe, it, expect } from '@jest/globals'
+import { COMPONENTS } from '../components/index.js'
+
+const REQUIRED = [
+  // Atoms
+  'Block', 'Box', 'Flex', 'Grid', 'Img', 'Form', 'Iframe',
+  'Picture', 'Svg', 'Audio', 'Video', 'Hgroup',
+  // Text atoms (from Atoms/Text.js)
+  'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
+  'P', 'Span', 'Strong',
+  // Input
+  'Input', 'NumberInput', 'Checkbox', 'Radio', 'Toggle', 'Textarea',
+  // Components
+  'Icon', 'Link', 'Select', 'Button', 'Dialog', 'Tooltip',
+  'Avatar', 'Range', 'Dropdown', 'Notification'
+]
+
+describe('default-config COMPONENTS manifest', () => {
+  it('exposes every required atom + component as a uppercase-keyed entry', () => {
+    const missing = REQUIRED.filter(name => !COMPONENTS[name])
+    expect(missing).toEqual([])
+  })
+
+  it('every entry is an object (not a function or primitive)', () => {
+    for (const name of REQUIRED) {
+      const entry = COMPONENTS[name]
+      expect(entry).toBeTruthy()
+      expect(typeof entry).toBe('object')
+    }
+  })
+})

package/components/Atoms/AssetPicture.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { resolveAsset, buildSourcesAndImg } from '@symbo.ls/utils'
+
+/**
+ * Format-negotiated `<picture>`: emits one `<source type="…" srcset="…">`
+ * per non-primary format from the asset variant manifest, ending in a
+ * fallback `<img src="…">` for the primary (legacy-compatible) format.
+ *
+ *   { extends: 'AssetPicture', src: 'hero.jpg', alt: 'Hero photo' }
+ *
+ * Asset resolution and source-emission are shared with `Img`/`Video`/
+ * `Audio` (see `@symbo.ls/utils#resolveAsset` and `buildSourcesAndImg`):
+ * cloud-string URLs, runner-discovered manifests, and literal URLs are
+ * all handled transparently. Asset entries without a variants array
+ * collapse to a single `<img>` instead of an empty `<source>` chain.
+ *
+ * Distinct from the existing `Picture` component, which uses
+ * `<source media="…">` for theme-based switching. Pick `AssetPicture`
+ * when you want format negotiation; pick `Picture` when you want
+ * theme/media-query switching.
+ */
+export const AssetPicture = {
+  tag: 'picture',
+
+  // Returning `el.children` inside a `children: (el) => …` function would
+  // recursively re-enter it. Return undefined so DOMQL falls through to
+  // user-provided children (or none) when no asset resolves.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset) return undefined
+    return buildSourcesAndImg(asset, el.alt)
+  }
+}

package/components/Atoms/Audio.js

@@ -0,0 +1,38 @@
+'use strict'
+
+import { resolveAsset } from '@symbo.ls/utils'
+
+/**
+ * `<audio>` mirroring `Video`'s shape — same `src`-prop convention,
+ * same smart resolution. See `resolveAsset` in `@symbo.ls/utils`.
+ */
+export const Audio = {
+  tag: 'audio',
+
+  controls: true,
+
+  attr: {
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    }
+  },
+
+  // Reading `el.children` inside a `children: (el) => …` function would
+  // recursively re-enter it. Return undefined to let DOMQL's extends
+  // chain pick up user-provided children or fall to childExtends.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset || !Array.isArray(asset.variants) || !asset.variants.length) {
+      return undefined
+    }
+    return asset.variants.map((v) => ({
+      tag: 'source',
+      attr: { src: v.src, type: v.format }
+    }))
+  },
+
+  childExtends: {
+    tag: 'source'
+  }
+}

package/components/Atoms/Hgroup.js

@@ -1,5 +1,21 @@
 'use strict'
 
+// FRAMEWORK-4: Hgroup's `H` and `P` slots used to render unconditionally,
+// so consumers who wrote `Hgroup: { Name, Submeta }` got phantom empty
+// `<h3></h3><p></p>` rows above their actual content. The `if:` predicate
+// suppresses each slot when the consumer hasn't supplied text, html, or
+// any uppercase-keyed child for it. Self-contained (no closures) so the
+// predicate survives JSON round-trip via deepStringifyFunctions.
+const hasSlotContent = (el) => {
+  if (el.text != null) return true
+  if (el.html != null) return true
+  for (const k in el) {
+    const c = k.charCodeAt(0)
+    if (c >= 65 && c <= 90) return true
+  }
+  return false
+}
+
 export const Hgroup = {
   display: 'flex',
   tag: 'hgroup',
@@ -8,12 +24,14 @@ export const Hgroup = {
   gap: 'Y2',
 
   H: {
+    if: hasSlotContent,
     color: 'title',
     tag: 'h3',
     lineHeight: '1em',
     margin: '0'
   },
   P: {
+    if: hasSlotContent,
     margin: '0',
     color: 'paragraph'
   }

package/components/Atoms/Img.js

@@ -1,9 +1,33 @@
 'use strict'
 
+import { resolveAsset, buildImgSrcset } from '@symbo.ls/utils'
+
+/**
+ * `<img>` with smart asset resolution.
+ *
+ * `src` is the only prop you set. Resolution order (transparent — see
+ * `resolveAsset` in `@symbo.ls/utils`):
+ *   1. Cloud-uploaded entry in `ctx.assets`/`ctx.files` → use that URL.
+ *   2. Runner-discovered manifest in `ctx.assets`/`ctx.files` → use the
+ *      primary URL + auto-emit `srcset` from same-format variants.
+ *   3. Not found → treat `src` as a literal URL (drop-in `<img>`).
+ *
+ * Format-negotiated variants (webp/avif fallback chain) need `<picture>`
+ * markup — use `AssetPicture` for that.
+ */
 export const Img = {
   tag: 'img',
 
   attr: {
-    title: (el) => el.title || el.alt
+    title: (el) => el.title || el.alt,
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    },
+    srcset: (el) => {
+      const asset = resolveAsset(el)
+      const fromAsset = asset ? buildImgSrcset(asset) : ''
+      return fromAsset || el.srcset
+    }
   }
 }

package/components/Atoms/Svg.js

@@ -30,15 +30,48 @@ export const Svg = {
     let SVGKey = SVG[symbolId]
     if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
 
-    SVGKey = SVG[symbolId] = Math.random()
-    if (src) {
-      utils.init({
-        svg: { [SVGKey]: src }
-      }, {
-        document: context.document,
-        emotion: context.emotion
-      })
+    // FA-L3: when `el.src` is a sprite symbol NAME (string) but the symbol
+    // isn't registered in the merged sprite, the previous code allocated
+    // `Math.random()` as the href, producing `<use href="#0.7878391…">`
+    // which never resolves and silently renders nothing. That made every
+    // missing icon a needle-in-haystack visual bug.
+    //
+    // New behavior:
+    //   - If `src` is missing entirely: emit an empty `<use>` (no href).
+    //   - If `src` is a string (sprite-symbol lookup) but unknown: warn
+    //     in dev and render no `<use>`. The console-warn surfaces the
+    //     bad icon name to the consumer.
+    //   - If `src` is an actual SVG body string (registered raw via
+    //     `utils.init({svg:{…}})` — the original Math.random path): keep
+    //     a stable hash-derived key instead of Math.random so the same
+    //     SVG body always resolves to the same symbol id (and so SSR /
+    //     hydration produce identical output).
+    if (!src) return useSVGSymbol('')
+
+    if (typeof src === 'string' && !src.includes('<')) {
+      // Bare symbol name — not in sprite. Warn loudly in dev so the
+      // consumer fixes the icon name; render nothing rather than a
+      // broken random href.
+      if (typeof console !== 'undefined' && console.warn) {
+        console.warn(`[Svg] Unknown sprite symbol "${src}" — not registered in design-system sprite. Set the icon name to one that exists in designSystem.icons / context.svg, or register the SVG body via utils.init({ svg: { '${src}': '<svg>...</svg>' } }).`)
+      }
+      return useSVGSymbol('')
+    }
+
+    // Inline SVG body — derive a stable sha-like key from the content so
+    // identical bodies share a sprite symbol across renders. Avoids
+    // Math.random churn in SSR diffs.
+    let hash = 0
+    for (let i = 0; i < src.length; i++) {
+      hash = ((hash << 5) - hash + src.charCodeAt(i)) | 0
     }
+    SVGKey = SVG[symbolId] = `svg-${(hash >>> 0).toString(36)}`
+    utils.init({
+      svg: { [SVGKey]: src }
+    }, {
+      document: context.document,
+      emotion: context.emotion
+    })
 
     return useSVGSymbol(SVGKey)
   }

package/components/Atoms/Text.js

@@ -2,6 +2,8 @@
 
 export const Text = {}
 
+export const Span = { tag: 'span' }
+
 export const H1 = { tag: 'h1' }
 export const H2 = { tag: 'h2' }
 export const H3 = { tag: 'h3' }

package/components/Atoms/Video.js

@@ -1,10 +1,44 @@
 'use strict'
 
+import { resolveAsset } from '@symbo.ls/utils'
+
+/**
+ * `<video>` with smart asset resolution. Set `src` to either a manifest
+ * key (local-discovered or cloud-uploaded) or a literal URL — the
+ * component figures out which one and emits `<source>` children only
+ * when the manifest carries multiple variants.
+ *
+ * Same `src`-prop convention as `<img>` and `<audio>`. See
+ * `resolveAsset` in `@symbo.ls/utils` for the normalization rules.
+ */
 export const Video = {
   tag: 'video',
 
   controls: true,
 
+  attr: {
+    src: (el) => {
+      const asset = resolveAsset(el)
+      return (asset && asset.src) || el.src
+    }
+  },
+
+  // Auto-populate <source> children only when the resolved asset carries
+  // a variants array. Returns undefined otherwise so DOMQL's extends
+  // chain falls through to user-provided `children: [...]` when present
+  // (override semantics) or to the empty list. Reading `el.children`
+  // inside this function would recursively re-enter it — never do that.
+  children: (el) => {
+    const asset = resolveAsset(el)
+    if (!asset || !Array.isArray(asset.variants) || !asset.variants.length) {
+      return undefined
+    }
+    return asset.variants.map((v) => ({
+      tag: 'source',
+      attr: { src: v.src, type: v.format }
+    }))
+  },
+
   childExtends: {
     tag: 'source'
   }

package/components/Tooltip/index.js

@@ -20,11 +20,16 @@ export const Tooltip = {
   attr: { tooltip: true },
 
   Title: {
-    if: ({ parent }) => isDefined(parent.title) || parent.title,
+    // FA106: canonical signature is `(el, s)` — destructure-from-object is
+    // banned because frank's audit flags it and it's inconsistent with
+    // every other reactive prop in the codebase. The `({ parent }) =>`
+    // shape happens to work at runtime (the destructure pulls `parent`
+    // out of `el`) but breaks on any project that runs frank-audit.
+    if: (el) => isDefined(el.parent.title) || el.parent.title,
     width: 'fit-content',
     fontWeight: 500,
     color: 'gray12',
-    text: ({ parent }) => parent.title
+    text: (el) => el.parent.title
   },
 
   P: {

package/components/index.js

@@ -1,21 +1,60 @@
 'use strict'
 
 // Atoms
+import * as _Block from './Atoms/Block.js'
+import * as _Img from './Atoms/Img.js'
+import * as _Form from './Atoms/Form.js'
+import * as _Iframe from './Atoms/Iframe.js'
+import * as _InteractiveComponent from './Atoms/InteractiveComponent.js'
+import * as _Picture from './Atoms/Picture.js'
+import * as _AssetPicture from './Atoms/AssetPicture.js'
+import * as _Svg from './Atoms/Svg.js'
+import * as _Shape from './Atoms/Shape.js'
+import * as _Video from './Atoms/Video.js'
+import * as _Audio from './Atoms/Audio.js'
+import * as _Theme from './Atoms/Theme.js'
+import * as _Text from './Atoms/Text.js'
+import * as _Box from './Atoms/Box.js'
+import * as _Hgroup from './Atoms/Hgroup.js'
+
+// Input
+import * as _Input from './Input/Input.js'
+import * as _NumberInput from './Input/NumberInput.js'
+import * as _Checkbox from './Input/Checkbox.js'
+import * as _Radio from './Input/Radio.js'
+import * as _Toggle from './Input/Toggle.js'
+import * as _Textarea from './Input/Textarea.js'
+
+// Components
+import * as _Icon from './Icon/index.js'
+import * as _Link from './Link.js'
+import * as _Select from './Select.js'
+import * as _Button from './Button.js'
+import * as _Dialog from './Dialog.js'
+import * as _Tooltip from './Tooltip/index.js'
+import * as _Avatar from './Avatar.js'
+import * as _Range from './Range.js'
+import * as _Dropdown from './Dropdown.js'
+import * as _Notification from './Notification.js'
+
+// Re-export named exports for direct consumers (e.g.
+// `import { Box } from '@symbo.ls/default-config/components'`).
 export * from './Atoms/Block.js'
 export * from './Atoms/Img.js'
 export * from './Atoms/Form.js'
 export * from './Atoms/Iframe.js'
 export * from './Atoms/InteractiveComponent.js'
 export * from './Atoms/Picture.js'
+export * from './Atoms/AssetPicture.js'
 export * from './Atoms/Svg.js'
 export * from './Atoms/Shape.js'
 export * from './Atoms/Video.js'
+export * from './Atoms/Audio.js'
 export * from './Atoms/Theme.js'
 export * from './Atoms/Text.js'
 export * from './Atoms/Box.js'
 export * from './Atoms/Hgroup.js'
 
-// Input
 export * from './Input/Input.js'
 export * from './Input/NumberInput.js'
 export * from './Input/Checkbox.js'
@@ -23,7 +62,6 @@ export * from './Input/Radio.js'
 export * from './Input/Toggle.js'
 export * from './Input/Textarea.js'
 
-// Components
 export * from './Icon/index.js'
 export * from './Link.js'
 export * from './Select.js'
@@ -34,3 +72,20 @@ export * from './Avatar.js'
 export * from './Range.js'
 export * from './Dropdown.js'
 export * from './Notification.js'
+
+// FT-FRAMEWORK-1: explicit components manifest. Built by spreading every
+// atom/component module's named exports into one plain object. Parcel
+// (under smbls's `sideEffects: false`) sometimes pruned exports off the
+// `import * as uikit from '...'` namespace that prepare.js iterated, so
+// consumer projects saw atoms missing from `context.components`. This
+// dict is bundler-agnostic — it's a regular object literal whose
+// references are statically locked into the module by `Object.assign`.
+export const COMPONENTS = Object.assign(
+  {},
+  _Block, _Img, _Form, _Iframe, _InteractiveComponent,
+  _Picture, _AssetPicture, _Svg, _Shape, _Video, _Audio,
+  _Theme, _Text, _Box, _Hgroup,
+  _Input, _NumberInput, _Checkbox, _Radio, _Toggle, _Textarea,
+  _Icon, _Link, _Select, _Button, _Dialog, _Tooltip,
+  _Avatar, _Range, _Dropdown, _Notification
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symbo.ls/default-config",
-  "version": "3.14.0",
+  "version": "3.14.1",
   "source": "./blank/index.js",
   "main": "./blank/index.js",
   "type": "module",