@uniweb/kit 0.11.2 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -44,9 +44,9 @@
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
     "temml": "^0.13.2",
-    "@uniweb/core": "^0.8.4",
+    "@uniweb/semantic-parser": "^1.2.2",
     "@uniweb/scene": "^0.1.3",
-    "@uniweb/semantic-parser": "^1.2.1"
+    "@uniweb/core": "^0.8.5"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/components/Icon/Icon.jsx

@@ -38,6 +38,28 @@ const BUILT_IN_ICONS = {
  * @param {string} svgContent - Raw SVG string
  * @returns {Object} { viewBox, content, width, height }
  */
+/**
+ * Coerce a size prop into a valid CSS length.
+ *
+ * React appends `px` to a NUMERIC style value but passes a string through
+ * verbatim — and this component's default is the string `'24'`, so it emitted
+ * `style="width:24;height:24"`. Both declarations are invalid CSS and the
+ * browser drops them, leaving the <svg> at its default replaced-element size.
+ *
+ * That stayed invisible for as long as every caller sized the icon with a class
+ * (`h-8 w-8`) or placed it where a stray size did not matter. It became visible
+ * when icons started rendering INLINE inside prose: with no valid width, the
+ * glyph could not share a line and broke the sentence across three lines.
+ *
+ * Only a bare number is touched, so `'2rem'`, `'1.5em'`, `'100%'` and a real
+ * number are all unchanged.
+ */
+function cssLength(value) {
+  return typeof value === 'string' && /^-?\d*\.?\d+$/.test(value.trim())
+    ? `${value.trim()}px`
+    : value
+}
+
 /**
  * Extract an attribute value from an SVG opening tag string
  */
@@ -253,7 +275,7 @@ export function Icon({
       loadingComponent || (
         <span
           className={cn('inline-flex items-center justify-center', className)}
-          style={{ width: size, height: size }}
+          style={{ width: cssLength(size), height: cssLength(size) }}
           role="img"
           aria-hidden="true"
         />
@@ -287,7 +309,7 @@ export function Icon({
       return (
         <span
           className={cn('inline-flex items-center justify-center', className)}
-          style={{ width: size, height: size }}
+          style={{ width: cssLength(size), height: cssLength(size) }}
           role="img"
           aria-hidden="true"
         />
@@ -298,8 +320,8 @@ export function Icon({
 
   // Build style
   const style = {
-    width: size,
-    height: size,
+    width: cssLength(size),
+    height: cssLength(size),
     ...(color && !preserveColors ? { color } : {})
   }
 

package/src/hooks/useFormSubmit.js

@@ -9,19 +9,27 @@ import { useWebsite } from './useWebsite.js'
  *
  * The hook resolves *where* to submit from the site's configuration (`submit:`
  * in site.yml) or from its host, so a component never names an endpoint. When
- * neither supplies one, `canSubmit` is false and `unavailableReason` says why —
- * render the control disabled rather than letting someone fill in a form whose
+ * neither supplies one, `canSubmit` is false — don't render a form whose
  * contents have nowhere to go. See `resolveSubmitTarget` for the precedence.
  *
  * ```jsx
- * const { submit, status, error, canSubmit, unavailableReason } =
+ * const { submit, status, error, canSubmit } =
  *   useFormSubmit({ block, context: { formId: 'contact' } })
  *
- * <button type="submit" disabled={!canSubmit || status === 'submitting'}>
- *   {canSubmit ? 'Send' : unavailableReason}
- * </button>
+ * if (!canSubmit) return null      // or fall back to contact details the
+ *                                  // site already carries in its content
+ *
+ * <button type="submit" disabled={status === 'submitting'}>Send</button>
  * ```
  *
+ * ⛔ **There is no `unavailableReason`, and there was one — it was a mistake.**
+ * It carried a canned English sentence and this very example rendered it as
+ * button copy. A visitor has no stake in which services the operator bought,
+ * the string reads like a breakage when nothing is broken, and it cannot be
+ * translated on a framework whose sites are usually multilingual and often not
+ * English. Text a visitor reads is *site content*. `canSubmit` is the whole
+ * signal.
+ *
  * Pass `block` and the submission carries where it came from — section type,
  * section id, page id and label — without every component assembling that by
  * hand. Anything in `context` wins over what the block supplies.
@@ -39,7 +47,6 @@ import { useWebsite } from './useWebsite.js'
  *   error: Error | null,
  *   response: object | null,
  *   canSubmit: boolean,
- *   unavailableReason: string | null,
  *   submit: (formData: object, overrides?: object) => Promise<object>,
  *   reset: () => void,
  * }}
@@ -50,7 +57,7 @@ export function useFormSubmit(defaults = {}) {
   const [response, setResponse] = useState(null)
 
   const { website } = useWebsite()
-  const { url: target, reason: unavailableReason } = resolveSubmitTarget(website)
+  const { url: target } = resolveSubmitTarget(website)
 
   // `defaults` is a fresh object every render, so listing it as a dependency
   // would rebuild the callback on each one. A ref is what actually makes "the
@@ -103,7 +110,6 @@ export function useFormSubmit(defaults = {}) {
     error,
     response,
     canSubmit: !!target,
-    unavailableReason,
     // Whether attachments can be delivered. True once there is a target: the
     // client sends the manifest, then the bytes, then finalizes.
     //

package/src/hooks/useFormValues.js

@@ -51,7 +51,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
  * It lists the paths of `required` controls that are still empty. It does not
  * block anything: whether an incomplete form disables the button, shows a
  * message, or submits anyway is a design decision. `useFormSubmit` draws the
- * same line with `canSubmit` / `unavailableReason` — the kit works out the
+ * same line with `canSubmit` — the kit works out the
  * fact, the foundation decides what it looks like.
  *
  * Empty means `undefined`, `null`, `''`, or `[]`. A `false` boolean is a VALUE,

package/src/index.js

@@ -130,11 +130,9 @@ export {
   submitForm,
   deriveSummary,
   resolveSubmitTarget,
-  NO_SUBMIT_TARGET_REASON,
   // Site services (search / submit / assistant / anything a host offers)
   resolveService,
-  resolveServiceUrl,
-  NO_SERVICE_REASON
+  resolveServiceUrl
 } from './utils/index.js'
 
 // ============================================================================

package/src/styled/Render/index.jsx

@@ -59,6 +59,22 @@ import { Divider } from '../Section/renderers/Divider.jsx'
 
 const INLINE_INSET_RE = /<uniweb-inset data-ref-id="([^"]+)"><\/uniweb-inset>/g
 
+/**
+ * Inline atoms the parser leaves as markers in a paragraph's HTML, because each
+ * needs a React component rather than markup: an inset resolves to a Block, an
+ * icon to <Icon> (which fetches library+name from the icon CDN).
+ *
+ * One regex for both so a paragraph carrying a mix is split in a single pass and
+ * every fragment keeps its authored position.
+ */
+const INLINE_MARKER_RE =
+  /<uniweb-inset data-ref-id="([^"]+)"><\/uniweb-inset>|<uniweb-icon data-index="(\d+)"><\/uniweb-icon>/g
+
+/** Does this HTML string carry any inline marker needing component substitution? */
+function hasInlineMarkers(html) {
+  return typeof html === 'string' && /<uniweb-(?:inset|icon)\b/.test(html)
+}
+
 /**
  * Element types this engine knows about and deliberately renders NOTHING for.
  *
@@ -130,22 +146,37 @@ function toSequence(content, block) {
  * positions via the framework's child-block renderer — the same path
  * block-level insets take, scoped to one inset.
  */
-function renderParagraphWithInsets(html, block) {
-  if (!block) return <SafeHtml value={html} as="span" />
+function renderParagraphWithInsets(html, block, element) {
+  // An icon needs no Block, so a paragraph carrying only icons still resolves
+  // without one — only insets require `block` for the getInset() lookup.
+  const icons = (element?.children || []).filter((c) => c?.type === 'icon')
+  if (!block && !icons.length) return <SafeHtml value={html} as="span" />
+
   const InsetRenderer = getChildBlockRenderer()
   const parts = []
   let lastIdx = 0
-  INLINE_INSET_RE.lastIndex = 0
+  INLINE_MARKER_RE.lastIndex = 0
   let match
-  while ((match = INLINE_INSET_RE.exec(html)) !== null) {
+  while ((match = INLINE_MARKER_RE.exec(html)) !== null) {
     if (match.index > lastIdx) {
       parts.push(<SafeHtml key={`t${lastIdx}`} value={html.slice(lastIdx, match.index)} as="span" />)
     }
+
     const refId = match[1]
-    const insetBlock = block.getInset?.(refId)
-    if (insetBlock && InsetRenderer) {
-      parts.push(<InsetRenderer key={`i${refId}`} blocks={[insetBlock]} />)
+    const iconIndex = match[2]
+
+    if (refId !== undefined) {
+      const insetBlock = block?.getInset?.(refId)
+      if (insetBlock && InsetRenderer) {
+        parts.push(<InsetRenderer key={`i${refId}`} blocks={[insetBlock]} />)
+      }
+    } else if (iconIndex !== undefined) {
+      // Ordinal into the icons of this element's `children`, in document order
+      // — the contract semantic-parser's getTextContent() emits the marker on.
+      const icon = icons[Number(iconIndex)]
+      if (icon) parts.push(<Icon key={`ic${iconIndex}`} {...icon.attrs} />)
     }
+
     lastIdx = match.index + match[0].length
   }
   if (lastIdx < html.length) {
@@ -187,8 +218,8 @@ function renderCell(cell, block, components) {
 
   if (only?.type === 'paragraph') {
     if (!only.text) return null
-    return /<uniweb-inset/.test(only.text) ? (
-      renderParagraphWithInsets(only.text, block)
+    return hasInlineMarkers(only.text) ? (
+      renderParagraphWithInsets(only.text, block, only)
     ) : (
       <SafeHtml value={only.text} as="span" />
     )
@@ -229,17 +260,23 @@ export function SequenceElement({ element, block, components }) {
       const Tag = `h${level}`
       // The id is the anchor `useHeadings()` and every in-page nav link
       // resolve against, so it is behaviour rather than decoration.
+      // headingId() runs stripTags() first, so a marker in the text does not
+      // change the anchor — an icon in a heading keeps the id the TOC links to.
       return (
         <Tag id={authoredId(element) || headingId(element.text || '')}>
-          <SafeHtml value={element.text} as="span" />
+          {hasInlineMarkers(element.text) ? (
+            renderParagraphWithInsets(element.text, block, element)
+          ) : (
+            <SafeHtml value={element.text} as="span" />
+          )}
         </Tag>
       )
     }
 
     case 'paragraph': {
       if (!element.text) return null
-      if (/<uniweb-inset/.test(element.text)) {
-        return <p>{renderParagraphWithInsets(element.text, block)}</p>
+      if (hasInlineMarkers(element.text)) {
+        return <p>{renderParagraphWithInsets(element.text, block, element)}</p>
       }
       return (
         <p>

package/src/utils/index.js

@@ -248,8 +248,11 @@ export function detectMediaType(url) {
 // ─────────────────────────────────────────────────────────────────
 
 export { submitForm, deriveSummary } from './submitForm.js'
-export { resolveSubmitTarget, NO_SUBMIT_TARGET_REASON } from './submitTarget.js'
-export { resolveService, resolveServiceUrl, NO_SERVICE_REASON } from './services.js'
+export { resolveSubmitTarget } from './submitTarget.js'
+export {
+  resolveService,
+  resolveServiceUrl
+} from './services.js'
 
 /**
  * The text of a ProseMirror node, flattened.

package/src/utils/services.js

@@ -17,8 +17,8 @@ import { applyBasePath } from './href.js'
  *   2. **The host**, served — `config.services.<name>` in the payload. What the
  *      deployment offers, which the site never had to know about.
  *
- * Absent from both means the site has no such service, and the component says so
- * rather than guessing an address. That is the same rule for every service, and
+ * Absent from both means the site has no such service, and the component renders
+ * for that rather than guessing an address. That is the same rule for every service, and
  * it is why this module exists: it was previously implemented three times — the
  * search provider, the submit resolver, and a hand-rolled copy inside a
  * foundation — with three slightly different base-joining rules between them.
@@ -37,11 +37,33 @@ import { applyBasePath } from './href.js'
  *
  * ## What this deliberately does not model
  *
- * **Entitlement.** A host that will not serve a service either omits it or
- * supplies a `reason`, which is relayed to the UI verbatim. The framework never
- * learns why — no plan names, no tiers, no "paid" anywhere. That is not
- * squeamishness: `@uniweb/kit` is public, and a framework that encodes which
- * capabilities cost money ships the business model into open source.
+ * **Entitlement.** A host that will not serve a service omits it, or declares
+ * the name with no address. The framework never learns why — no plan names, no
+ * tiers, no "paid" anywhere. That is not squeamishness: `@uniweb/kit` is
+ * public, and a framework that encodes which capabilities cost money ships the
+ * business model into open source.
+ *
+ * ⛔ **There is deliberately no explanatory string, and there was one — it was
+ * a mistake.** Until 2026-08-13 a declining host could supply a `reason` that
+ * this module relayed "to the UI verbatim", with an English default
+ * (`NO_SERVICE_REASON`) when nothing did. Removed, on two counts:
+ *
+ *   1. **Wrong audience.** A visitor has no stake in which services an operator
+ *      provisioned. "Submissions are not enabled for this site" reports someone's
+ *      billing state to the public and reads like a breakage. It is neither — it
+ *      is a service that was not bought, and **a generic component is supposed to
+ *      be smart about that.**
+ *   2. **Wrong language, unfixably.** Sites here are multilingual, or unilingual
+ *      and not English. A host-supplied sentence bypasses the site's entire
+ *      localization pipeline, and a canned constant in a public package cannot
+ *      be translated at all. Any text a visitor should read is *site content*,
+ *      which is authored and localized — never a string a service layer invents.
+ *
+ * ⇒ **`url` is the whole answer, and absence is a rendering decision rather
+ * than a message.** No submit endpoint → render no form, or degrade to
+ * something that still serves the visitor: a `mailto:` or a number the site
+ * already carries in its content. No assistant → render no Ask-AI affordance.
+ * Nobody is told why, because nobody visiting needs to know.
  *
  * **The site's own base.** `config.base` is where the site *lives*, not a
  * service it consumes — it is load-bearing for routing and asset URLs too. It
@@ -51,9 +73,6 @@ import { applyBasePath } from './href.js'
 /** Anything with a scheme, or protocol-relative — never joined to a base. */
 const ABSOLUTE_URL_RE = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i
 
-/** Shown when nothing supplies a service and the caller gives no wording. */
-export const NO_SERVICE_REASON = 'This site has no such service configured.'
-
 /**
  * Read an endpoint out of either declaration form.
  *
@@ -108,19 +127,19 @@ export function resolveServiceUrl(endpoint, basePath = '') {
  * Resolve where a named service lives for this site.
  *
  * ```js
- * const { url, reason } = resolveService(website, 'submit')
- * if (!url) return renderDisabled(reason)
+ * const { url } = resolveService(website, 'submit')
+ * if (!url) return null          // no endpoint — render no form, or degrade
  * ```
  *
  * @param {object} website - the active Website
  * @param {string} name - service name, e.g. 'submit' · 'search' · 'assistant'
- * @param {object} [options]
- * @param {string} [options.reason] - wording when nothing supplies it
- * @returns {{ url: string|null, reason: string|null, source: 'site'|'host'|null }}
- *   `source` says which declaration answered — useful in diagnostics, and the
- *   thing to check when a host's value appears not to be taking effect.
+ * @returns {{ url: string|null, source: 'site'|'host'|null }}
+ *   `url` is the whole answer for rendering. `source` says which declaration
+ *   answered — a diagnostic, and the thing to check when a host's value appears
+ *   not to be taking effect. `'host'` with a null `url` means the host answered
+ *   and offered no address; `null` means nothing declared the service at all.
  */
-export function resolveService(website, name, options = {}) {
+export function resolveService(website, name) {
   const config = website?.config
   const basePath = website?.basePath
 
@@ -128,21 +147,22 @@ export function resolveService(website, name, options = {}) {
   // means it, including on a host that offers one.
   const authored = readEndpoint(config?.[name])
   if (authored) {
-    return { url: resolveServiceUrl(authored, basePath), reason: null, source: 'site' }
+    return { url: resolveServiceUrl(authored, basePath), source: 'site' }
   }
 
   // 2 — what the host says it offers.
   const hostDeclaration = config?.services?.[name]
   const hostEndpoint = readEndpoint(hostDeclaration)
   if (hostEndpoint) {
-    return { url: resolveServiceUrl(hostEndpoint, basePath), reason: null, source: 'host' }
+    return { url: resolveServiceUrl(hostEndpoint, basePath), source: 'host' }
   }
 
-  // A host that declines may say why, and that reaches the visitor unaltered.
-  const hostReason =
-    typeof hostDeclaration?.reason === 'string' ? hostDeclaration.reason.trim() : ''
-  if (hostReason) return { url: null, reason: hostReason, source: 'host' }
+  // A host may declare the name while offering no address — a decline. It is
+  // still the host answering, which is all a caller can use: any *wording* for
+  // that state would be ours to invent, in one language, for a visitor who has
+  // no stake in it. See the entitlement note above.
+  if (hostDeclaration !== undefined) return { url: null, source: 'host' }
 
   // 3 — nobody supplied one.
-  return { url: null, reason: options.reason || NO_SERVICE_REASON, source: null }
+  return { url: null, source: null }
 }

package/src/utils/submitTarget.js

@@ -31,24 +31,16 @@ import { resolveService, resolveServiceUrl } from './services.js'
  * only have come from its host.
  */
 
-/**
- * Shown when a site declares no endpoint and no host offers one. English, and a
- * foundation is free to ignore it and render its own copy — check `url` for the
- * yes/no and treat this as a default rather than a string to translate.
- */
-export const NO_SUBMIT_TARGET_REASON =
-  'This site has no form submission endpoint configured.'
-
 /**
  * Resolve the submission target for a site.
  *
  * @param {object} website - The active Website instance
- * @returns {{ url: string|null, reason: string|null, source: 'site'|'host'|null }}
- *   `url` is the resolved endpoint, or null when nothing supplies one. `reason`
- *   is set exactly when `url` is null.
+ * @returns {{ url: string|null, source: 'site'|'host'|null }}
+ *   `url` is the resolved endpoint, or null when nothing supplies one — in which
+ *   case render no form, or degrade to contact details the site already carries.
  */
 export function resolveSubmitTarget(website) {
-  return resolveService(website, 'submit', { reason: NO_SUBMIT_TARGET_REASON })
+  return resolveService(website, 'submit')
 }
 
 /**