@kerfjs/ui 5.0.0-beta.23 → 5.0.0-beta.25

package/docs/design/templates/value-table-dark.svg

@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="492" height="274" viewBox="0 0 492 274">
-  <rect width="492" height="274" fill="#1c1c1e"/>
-  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Key/value detail rows</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="v0-cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="v0-ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="v0-ct2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="v0-ct3"><rect x="141" y="32.4" width="282" height="18"/></clipPath><clipPath id="v0-cp4"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="v0-ct5"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="v0-ct6"><rect x="167.6" y="73.2" width="255.4" height="18"/></clipPath><clipPath id="v0-ct7"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="v0-ct8"><rect x="141" y="114" width="282" height="18"/></clipPath><clipPath id="v0-ct9"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="v0-ct10"><rect x="141" y="154.8" width="282" height="18"/></clipPath></defs><g clip-path="url(#v0-cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(17,17,19)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/></g><g clip-path="url(#v0-ov1)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#v0-ov1)"><g clip-path="url(#v0-cp4)"><g transform="translate(37 70.2)" color="rgb(174, 174, 178)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#v0-ov1)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#v0-ov1)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g></svg>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3ct2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="141" y="32.4" width="282" height="18"/></clipPath><clipPath id="svgimg3cp4"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3ct6"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct7"><rect x="167.6" y="73.2" width="255.4" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="141" y="114" width="282" height="18"/></clipPath><clipPath id="svgimg3ct10"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="141" y="154.8" width="282" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(17,17,19)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp4)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic5"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic5)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(72, 72, 74)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/docs/design/templates/value-table.svg

@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="492" height="274" viewBox="0 0 492 274">
-  <rect width="492" height="274" fill="#ffffff"/>
-  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Key/value detail rows</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="v0-cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="v0-ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="v0-ct2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="v0-ct3"><rect x="141" y="32.4" width="282" height="18"/></clipPath><clipPath id="v0-cp4"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="v0-ct5"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="v0-ct6"><rect x="167.6" y="73.2" width="255.4" height="18"/></clipPath><clipPath id="v0-ct7"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="v0-ct8"><rect x="141" y="114" width="282" height="18"/></clipPath><clipPath id="v0-ct9"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="v0-ct10"><rect x="141" y="154.8" width="282" height="18"/></clipPath></defs><g clip-path="url(#v0-cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(242,242,247)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/></g><g clip-path="url(#v0-ov1)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#v0-ov1)"><g clip-path="url(#v0-cp4)"><g transform="translate(37 70.2)" color="rgb(110, 110, 115)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#v0-ov1)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#v0-ov1)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g></svg>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3ct2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="141" y="32.4" width="282" height="18"/></clipPath><clipPath id="svgimg3cp4"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3ct6"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct7"><rect x="167.6" y="73.2" width="255.4" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="141" y="114" width="282" height="18"/></clipPath><clipPath id="svgimg3ct10"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="141" y="154.8" width="282" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgb(242,242,247)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp4)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic5"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic5)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgb(209, 209, 214)" stroke-width="1"/></g></g></g></g></g></g></g></svg>

package/docs/design/templates.md

@@ -9,8 +9,8 @@ component picture without running the app.
 
 ## Coverage
 
-Templated components (each with light + dark variants): `PanelHeader`,
-`ToolbarControlGroup`, `Toolbar`, `ToolbarText`, `ListItem`, `ListHeader`,
+Templated components (each with light + dark variants):
+`ToolbarControlGroup`, `Toolbar`, `ToolbarText`, `List`, `ListItem`, `ListHeader`,
 `ListActionRow`, `ValueTable`, `StateBanner`, `EmptyState`, `Skeleton`,
 `SegmentedControl`, `TabBar`/`AppTab`, and `TokenSearchField`.
 
@@ -27,11 +27,9 @@ catalog and the app-layouts docs cover those.
 
 ```
 docs/design/templates/
-  panel-header.svg              ← library: every variant, inlined (light)
-  panel-header-dark.svg         ← library: dark theme
-  panel-header/
-    icon-summary-actions.svg    ← one self-contained variant (light)
-    icon-summary-actions-dark.svg ← the same variant, dark theme
+  toolbar.svg                   ← library: every variant, composed (light)
+  toolbar-dark.svg              ← library: dark theme
+  toolbar/
     icon-actions.svg
     icon-actions-dark.svg
     …
@@ -50,13 +48,12 @@ docs/design/templates/
   kerf UI design font stack is system-based, so the picture matches; a viewer
   without those fonts falls back to its own.
 - The **library** files (`<component>.svg` light, `<component>-dark.svg` dark) lay
-  the variants out with captions and embed an inline **copy** of each variant as a
-  positioned nested `<svg>`. Each is fully self-contained and renders everywhere —
-  a browser, an `<img>`, GitHub, or a static rasterizer. (External
-  `<use href="…#id">` and `<image href="…">` references render blank in many SVG
-  viewers, so the library inlines copies instead. Each copy's local ids and
-  domotion font-family names are namespaced so the inlined variants don't collide
-  in the one document; the individual variant files stay individually reusable.)
+  the variants out with captions. The generator writes a temporary HTML page whose
+  `<img>` elements reference the individual variant SVGs, then captures that page
+  with domotion and `--flatten-nested-svg`. The final library is self-contained,
+  contains positioned groups rather than nested `<svg>` elements, and remains
+  reliable in design tools such as Sketch. The individual variant files stay
+  independently reusable.
 
 ## Building
 
@@ -67,19 +64,24 @@ npm run design-templates:build
 This renders each component's real `SafeHtml` (with its CSS subpaths + `foundation.css`
 tokens and representative sample data) into a standalone page and captures it with
 [`domotion-svg`](https://github.com/brianwestphal/domotion)'s `domotion capture`.
+The capture command uses `--flatten-nested-svg`, which converts safely flattenable
+inline SVGs (including component icons) to groups so design tools such as Sketch do
+not have to interpret nested `<svg>` elements.
 `domotion` must be reachable: it resolves `DOMOTION_BIN`, then a local
 `node_modules/.bin/domotion`, then a sibling `../domotion` checkout.
 
 **Keep the templates current as components change.** The variants live in the
 `COMPONENTS` manifest in `scripts/build-design-templates.mjs` — when a component
-gains or changes a presentation combination (e.g. a new `PanelHeader` slot), add
+gains or changes a presentation combination (e.g. a new `Toolbar` slot), add
 or adjust its variant there and re-run the build. Cover the common cases: if a
 component can render with or without an icon, include both.
 
 `npm run check:design-templates` (part of `npm run check`) is an offline gate
 that verifies every component + variant in the manifest has its committed output —
 a light and dark SVG per variant plus the two per-component library files — and
-that no stray template files linger for a removed component. It does **not**
+that no stray template files linger for a removed component. It also rejects any
+variant or library capture that still contains nested `<svg>` elements, guarding
+the Sketch compatibility contract. It does **not**
 re-render (that needs domotion + a browser), so it catches a manifest entry whose
 templates were never generated or a half-regenerated set.
 
@@ -109,11 +111,18 @@ starting point and:
    tokens and `layout.css`), and any of your own component CSS.
 3. Enumerate the presentation combinations in the per-component manifest.
 4. Capture each variant with `domotion capture <page.html> --selector <css>
---text-mode system-font -o <variant>.svg`, once per theme with
+--text-mode system-font --flatten-nested-svg -o <variant>.svg`, once per theme with
    `--color-scheme light` / `--color-scheme dark` (if your components theme with
-   `light-dark()`), then write a light and a dark library file that each embed an
-   inline copy of every variant (namespacing each copy's ids/font-family names so
-   they don't collide) rather than referencing them, so they render everywhere.
+   `light-dark()`).
+5. Build a light and dark HTML library page that references the generated variants
+   with `<img src="./component/variant.svg">`, and capture each page with the same
+   domotion options, including `--flatten-nested-svg`. Let domotion own embedding,
+   id isolation, and flattening instead of hand-assembling SVG markup.
 
 Maintaining these next to the components — and reviewing the captured SVGs on
 every component change — keeps the design source of truth honest.
+
+ListItem templates retain the shared 18px leading icon and 44px row target;
+regenerate both themes and library sheets when that geometry changes. The browser
+pane/sidebar geometry checks cover the resulting 43px icon-label offset from the
+section edge (17px content inset + 18px icon + 8px gap).

package/docs/examples/component-catalog-extension-v2.json

@@ -19,7 +19,7 @@
       "zones": [
         {
           "id": "header",
-          "accepts": ["@kerfjs/ui:panel-header"],
+          "accepts": ["@kerfjs/ui:toolbar"],
           "cardinality": { "min": 1, "max": 1 },
           "exclusiveWith": []
         },
@@ -32,11 +32,8 @@
       ],
       "children": {
         "mode": "listed",
-        "concepts": ["@kerfjs/ui:panel-header", "@kerfjs/ui:value-table"],
-        "requiredConcepts": [
-          "@kerfjs/ui:panel-header",
-          "@kerfjs/ui:value-table"
-        ]
+        "concepts": ["@kerfjs/ui:toolbar", "@kerfjs/ui:value-table"],
+        "requiredConcepts": ["@kerfjs/ui:toolbar", "@kerfjs/ui:value-table"]
       },
       "state": [
         { "id": "selected-record", "owner": "application", "required": true }

package/docs/examples/component-catalog-extension.json

@@ -36,7 +36,7 @@
         "border": "child",
         "padding": "child",
         "notes": [
-          "The embedding pane positions the inspector; PanelHeader, ValueTable, and action groups retain their own geometry."
+          "The embedding pane positions the inspector; Toolbar, ValueTable, and action groups retain their own geometry."
         ]
       },
       "documentation": "docs/inspector.md"

package/docs/layout.md

@@ -56,7 +56,7 @@ control border and 1px control padding, so its default rounded-rectangle radius
 is 10px inside the control's 12px radius.
 
 A visible parent surface does not make every child another visible card. The
-composer recipe keeps its form as the single surface, uses `PanelHeader` for
+composer recipe keeps its form as the single surface, uses a heading `Toolbar` for
 its task hierarchy, and places field and action control edges on the shared 8px
 inline gutter instead of nesting them inside another padded content item. A
 conditional `StateBanner` remains visibly distinct because it communicates
@@ -77,7 +77,7 @@ semantic status.
 | Explicit scroll owner outside a pane     | `.kui-scroll-owner`       | `overflow: auto`                      |
 
 The component layer applies the same contract to `Toolbar`, `ListHeader`,
-`ListItem`, `PanelHeader`, `StateBanner`, `ValueTable`,
+`ListItem`, `Toolbar`, `StateBanner`, `ValueTable`,
 `ValueTableRow`, tabs, and form controls. A value-table row separator starts at
 the row's 8px content inset, or at 40px when the row contains its 24px leading
 icon and 8px gap, and always ends 8px from the right edge. Each value-table row
@@ -85,13 +85,11 @@ also keeps 8px of root-scaled block padding independently of its semantic inline
 inset. Most interactive rows and toolbar groups are 44px tall.
 Toolbar groups reserve a real 1px outer border around a 42px inner area, even
 when their border and background are transparent.
-`PanelHeader` is a plain top `Toolbar` used as a panel, dialog, or page heading
-and overrides no Toolbar styles. The leading zone holds the optional icon (a
-normal bordered `ToolbarControlGroup` given a brand fill with a matching border,
-a 22px glyph) and the title as extra-large `ToolbarText`; the app's trailing
-controls go straight into the trailing zone, and the icon group is omitted when
-no icon is passed. The optional subtitle is a separate row below the toolbar, its
-text left-aligned with the title text.
+Panel, dialog, and page headings are plain `Toolbar` compositions. The leading
+zone holds an optional icon `ToolbarControlGroup` and a direct extra-large
+`ToolbarText`; actions belong in a trailing group. Omit empty groups. Supporting
+copy is app-owned content below the toolbar and aligns with the intended content
+edge.
 
 ## Spacing scale
 

package/docs/recipes.md

@@ -56,7 +56,7 @@ no custom `actionIcon` is needed; ordinary navigation rows stay chevron-free.
 
 [Open the recipe](../ux-demo/?component=recipe-workspace-header) · [TSX source](../ux-demo/recipes/workspace-header.tsx)
 
-`PanelHeader` owns the page heading while one control cluster holds secondary,
+The page heading is a direct `Toolbar`/`ToolbarText` composition while one control cluster holds secondary,
 overflow, and primary actions. The app owns authorization and command policy;
 controls relocate without changing focus order.
 
@@ -66,10 +66,10 @@ controls relocate without changing focus order.
 
 The production Web Awesome dialog owns modal focus and Escape; the thin recipe
 adapter restores the invoking control consistently after the hide event.
-`PanelHeader`, `ListHeader`, `ListItem`, and `ValueTable` own their included
+`Toolbar`, `ListHeader`, `ListItem`, and `ValueTable` own their included
 anatomy. The application owns open state, selection, dismissal policy, and
-record actions. `PanelHeader` places the trailing controls the app passes
-directly into its top toolbar's trailing zone.
+record actions. A `ToolbarControlGroup` places the app's trailing controls in
+the top toolbar's trailing zone.
 The header sits on the dialog edge while retaining its internal control inset;
 the selected title receives the full content gutter, the metadata table fills
 the available detail width between the usual outer margins, and the action
@@ -80,8 +80,9 @@ Do not rebuild the dialog or reach into private shadow parts.
 
 [Open the recipe](../ux-demo/?component=recipe-composer-form) · [TSX source](../ux-demo/recipes/composer-form.tsx)
 
-`PanelHeader` supplies the task title and summary, with their ids referenced
-by the form. Production fields own labels, help, and native focus. The field
+A direct `ToolbarText` supplies the task title, with app-owned supporting copy
+below; their ids are referenced by the form. Production fields own labels, help,
+and native focus. The field
 and footer control edges sit directly on the shared 8px inline gutter rather
 than acquiring a second content-item padding inset; major children remain 24px
 apart and related controls use 8px gaps. The app owns
@@ -126,7 +127,7 @@ settles the chrome (reduced motion collapses the slide to instant). A live
 [Open the recipe](../ux-demo/?component=recipe-loading-inspector) · [TSX source](../ux-demo/recipes/loading-inspector.tsx)
 
 A record inspector whose per-record values load asynchronously. Every
-value-bearing component (`PanelHeader`, `ValueTable`/`ValueTableRow`, `Select`,
+value-bearing component (`ToolbarText`, `ValueTable`/`ValueTableRow`, `Select`,
 `SegmentedControl`, `ListItem`, `StateBanner`) takes its `placeholder` from one
 loading flag, so the same real chrome renders a faithful loading state and then
 the populated record — no separate skeleton markup. The composition is the point;

package/docs/sunken-panel.md

@@ -14,6 +14,15 @@ import { SunkenPanel } from '@kerfjs/ui/sunken-panel';
 </SunkenPanel>;
 ```
 
+The default `shape="rounded"` uses the shared rounded-rectangle radius. Choose
+`shape="square"` for a flush or edge-to-edge area that needs `border-radius: 0`:
+
+```tsx
+<SunkenPanel shape="square">
+  <Workspace />
+</SunkenPanel>
+```
+
 ## Ownership
 
 The root owns its lowered background, 8px padding, and 8px vertical gap.
@@ -40,4 +49,5 @@ Override the public properties at the composition boundary:
 - `--kui-sunken-panel-radius`
 
 The public root class is `.kui-sunken-panel`. Prefer the properties above over
-styling descendants.
+styling descendants. The `square` shape deliberately overrides the radius
+property with zero; use `rounded` when customizing the radius token.

package/docs/surface-scaffold.md

@@ -0,0 +1,17 @@
+# Dialog and popup surface scaffolds
+
+`DialogSurface` and `PopupSurface` configure recurring Web Awesome surface
+geometry without application `::part()` overrides. They do not replace Web
+Awesome behavior: the application still owns open state, focus lifecycle,
+dismissal policy, ids, labels, and content.
+
+Wrap one `wa-dialog` with `DialogSurface`. Choose `size` (`small`, `medium`, or
+`large`), `presentation` (`modal`, `side-sheet`, or `fullscreen`), and independent
+`bodyInset` / `footerInset` (`none`, `compact`, or `comfortable`). The defaults
+match Kerf's medium modal, 8px body, and 16px footer rhythm.
+
+Wrap one `wa-dropdown` with `PopupSurface`. `inset="list-zero"` removes menu
+padding for a child that already owns row insets, `compact` uses 4px, and
+`standard` uses the shared 8px surface inset. Keep the dropdown trigger named and
+preserve `data-morph-skip-children` when its upgraded light-DOM items must retain
+identity across Kerf rerenders.

package/docs/type-contracts.md

@@ -19,11 +19,10 @@ public-signature artifact.
 | `KUI-T004` | A literal `SegmentedControl.value` belongs to its literal `choices`.                                                                                                                   |
 | `KUI-T005` | `expanded`, `expandAction`, and `expandLabel` exist only on `TokenSearchField({ collapsible: true })`.                                                                                 |
 | `KUI-T006` | `TokenSearchEditorAttributes` accepts application `data-*` metadata but rejects component-owned identity, morph, count, and placeholder attributes.                                    |
-| `KUI-T007` | `PanelHeader.summaryId` cannot exist without rendered `summary` content.                                                                                                               |
-| `KUI-T008` | `ToolbarText.maxLines` requires `wrap: true`; it is never silently ignored in typed code.                                                                                              |
-| `KUI-T009` | A literal `TabScaffold.active` id belongs to its literal `tabs`.                                                                                                                       |
-| `KUI-T010` | Adjacent-token keyboard removal requires `onRemoveToken`; disabling removal rejects the now-meaningless callback.                                                                      |
-| `KUI-T011` | Finite public variants have named exported union types, including tab activation, banner urgency, and all ToolbarControlGroup presentation axes.                                       |
+| `KUI-T007` | `ToolbarText.maxLines` requires `wrap: true`; it is never silently ignored in typed code.                                                                                              |
+| `KUI-T008` | A literal `TabScaffold.active` id belongs to its literal `tabs`.                                                                                                                       |
+| `KUI-T009` | Adjacent-token keyboard removal requires `onRemoveToken`; disabling removal rejects the now-meaningless callback.                                                                      |
+| `KUI-T010` | Finite public variants have named exported union types, including divider sides, tab activation, banner urgency, and all ToolbarControlGroup presentation axes.                        |
 
 Literal identity inference is intentionally additive for dynamic applications.
 When choices or ids arrive at runtime and the state signal is correctly typed as
@@ -45,10 +44,10 @@ ordinary source/type gates:
 
 - required identity or accessible-name inputs on `AppTab`, `FloatingToolbar`,
   `NavStack`, `SplitView`, `Workbench`, `TabBar`, `ResizableRegion`,
-  `SegmentedControl`, `TokenSearchField`, `PanelHeader`, and `ValueTable`;
+  `SegmentedControl`, `TokenSearchField`, and `ValueTable`;
 - finite variants exported or represented as literal props on `DisclosureArrow`,
   `FloatingToolbar`, `Pane`, `ResizableRegion`, `SegmentedControl`, `StateBanner`,
-  `ToolbarText`, `CollapsiblePanel`, `Catalog`, and the wire helpers;
+  `SunkenPanel`, `ToolbarText`, `CollapsiblePanel`, `Catalog`, and the wire helpers;
 - required controlled-state callbacks on `wireResizableRegions`, `wireTabBars`,
   and `wireTabScaffold`;
 - mutually exclusive count/badge metadata on `ListHeader`; and
@@ -58,7 +57,7 @@ ordinary source/type gates:
 
 The remaining components (`LucideIcon`, `DisclosureArrow`, `Toolbar`,
 `ToolbarControlGroup`, `ListInsetControl`, `ListInsetText`, `LoadingSpinner`,
-`Skeleton`, `SunkenPanel`, `EmptyState`, `StateBanner`, `ValueTableRow`, and the
+`Skeleton`, `EmptyState`, `StateBanner`, `ValueTableRow`, and the
 pure helpers) have independent props with no further conditional invalid state
 that TypeScript can truthfully remove. Optional labels on decorative icons and
 unnamed non-landmark surfaces are intentional variants, not missing contracts.
@@ -92,8 +91,10 @@ move errors into casts without making the integration safer.
   `{ keyboard: { onRemoveToken } }` or
   `{ keyboard: { removeAdjacentToken: false } }` when only caret navigation is
   wanted.
-- Remove orphaned `summaryId`, or render the matching `summary`; add
-  `wrap: true` anywhere `ToolbarText.maxLines` is used.
+- Add `wrap: true` anywhere `ToolbarText.maxLines` is used.
+- Replace `Toolbar({ divider: false })` with `dividerSides: ''`; the default
+  remains a bottom divider, while canonical combinations such as `tr` and
+  `trbl` select more physical edges.
 
 JavaScript runtime behavior remains defensive for previously emitted calls, but
 new TypeScript builds report these invalid or ignored combinations.

package/docs/ui-analyzer.md

@@ -46,6 +46,9 @@ policy, or analysis inputs to the containing application.
 | `KUI-L007` | error  | A declared scroll owner is nested inside another scroll owner.    |
 | `KUI-L008` | review | A dynamic class expression cannot be classified soundly.          |
 | `KUI-L009` | error  | A stylesheet cannot be parsed.                                    |
+| `KUI-L010` | error  | A selector reaches a private Kerf descendant from a public root.  |
+| `KUI-L011` | error  | A `::part()` target is not cataloged as a public extension point. |
+| `KUI-L012` | error  | CSS assigns a Kerf token without a public configuration contract. |
 
 Errors are provable contract violations and make the command exit 1. Review
 findings are deliberately heuristic and do not fail by default; pass
@@ -53,6 +56,20 @@ findings are deliberately heuristic and do not fail by default; pass
 gate CI. Text, versioned JSON, and SARIF carry the same stable rule ids,
 source locations, evidence, and ownership chain.
 
+For staged adoption, pass `--adoption`. Ownership-boundary diagnostics are
+reported as review findings so a team can inventory and migrate its baseline;
+combine it with the exact file-and-rule exceptions below for intentional legacy
+integrations. Remove `--adoption` to make unsupported overrides blocking.
+
+Catalog `boundaries.publicClasses` and `boundaries.publicTokens` are explicit
+CSS extension points. A component catalog may additionally list shadow-part
+names in `boundaries.publicParts`; all other `::part()` targets are private.
+Part names are scoped to that entry's `boundaries.rootClass`, so an extension
+point on one component does not authorize the same-named part on another.
+Parent-owned placement and selectors for application-owned content remain
+allowed because the analyzer only reserves `.kui-*`, `--kui-*`, and cataloged
+shadow boundaries.
+
 The JSON report schema is exported as
 `@kerfjs/ui/analyzer/report.schema.json`.
 
@@ -82,5 +99,6 @@ validator.
 ```
 
 Review findings remain visible until explicitly suppressed. Avoid suppressing
-`KUI-L001`, `KUI-L002`, `KUI-L003`, `KUI-L007`, or `KUI-L009`: those indicate a
+`KUI-L001`, `KUI-L002`, `KUI-L003`, `KUI-L007`, `KUI-L009`, `KUI-L010`,
+`KUI-L011`, or `KUI-L012`: those indicate a
 definite boundary or parsing failure rather than an aesthetic judgment.

package/docs/ui-doctor.md

@@ -15,7 +15,7 @@ The default terminal output is short and repair-oriented. `--format json` emits
 
 The catalog stage discovers the package-default application UI profile and workspace/root-to-leaf directory layers. It validates referenced selection/composition catalogs and, when a workspace declares `package.json#kerfComponentCatalog`, invokes the installed `create-kerf-component` catalog checker to validate metadata, source exports, schema conformance, and generated-output drift. This checker reads source text; it does not import application modules.
 
-TypeScript uses the compiler API with `noEmit`. ESLint loads the installed `eslint-plugin-kerfjs` `recommended-ui` preset (`--eslint strict-ui` opts into advisory rules as errors). This is deliberately an isolated Kerf lint pass rather than the consumer's complete ESLint configuration. Inline directives for consumer-owned plugins, such as `@typescript-eslint`, therefore do not produce false "rule definition not found" diagnostics; the consumer's normal ESLint command remains authoritative for those rules. Unknown `kerfjs/*` directives still fail the doctor pass. Stable KUI identifiers come from the packaged `application-ui-diagnostic-ids-v1.json` registry; the doctor also reads installed ESLint message metadata for semantic conflict detection instead of duplicating rule definitions. The analyzer calls the public `@kerfjs/ui/analyzer` contract. None of these stages executes generated application code.
+TypeScript uses the compiler API with `noEmit`. ESLint loads the installed `eslint-plugin-kerfjs` `recommended-ui` preset (`--eslint strict-ui` opts into advisory rules as errors). This is deliberately an isolated Kerf lint pass rather than the consumer's complete ESLint configuration. For each file, the doctor projects the applicable core ESLint rules and `linterOptions` from the consumer configuration so core-rule suppression directives retain the same used/unused semantics as the application's normal lint command. Consumer plugin rules are not executed, and inline directives for plugins such as `@typescript-eslint` therefore do not produce false "rule definition not found" diagnostics; the consumer's normal ESLint command remains authoritative for those rules. Unknown `kerfjs/*` directives still fail the doctor pass. Stable KUI identifiers come from the packaged `application-ui-diagnostic-ids-v1.json` registry; the doctor also reads installed ESLint message metadata for semantic conflict detection instead of duplicating rule definitions. The analyzer calls the public `@kerfjs/ui/analyzer` contract. None of these stages executes generated application code.
 
 The browser evaluator is different: it runs the application and is disabled by default. It only runs when configuration supplies `browser.url` or the command receives `--browser-url`. Start and authorize the target application separately.
 
@@ -25,10 +25,12 @@ An unavailable or failed stage does not prevent independent stages from reportin
 
 `--full` is the default and analyzes the selected package. `--changed` reads tracked and untracked paths from Git unless one or more `--path` values are supplied. An empty changed set is a configuration error instead of a false-clean success. With `--package`, workspace-relative Git paths are converted to package-relative paths before TypeScript, ESLint, and analyzer selection; paths outside the selected package are ignored.
 
-Full traversal treats nested `.claude/worktrees` checkouts as tool-owned
-repositories rather than application source. Their files are excluded
-consistently from TypeScript, ESLint, analyzer discovery, and cache inputs, even
-when the nested checkout lives below another application directory.
+Full traversal treats generated/tool-owned directories (`dist`, `coverage`,
+`node_modules`, `.git`, `.kerf-cache`, `kerf-ui-evidence`, and nested
+`.claude/worktrees` checkouts) as outside application source. Their files are
+excluded consistently from TypeScript, the isolated ESLint pass, analyzer
+discovery, and cache inputs, even when one lives below another application
+directory.
 
 TypeScript constructs the selected package's program so compiler options retain their real meaning, while its root inputs are narrowed to changed source files. Use `--full` for release gates.
 

package/docs/ux-demo.md

@@ -13,15 +13,18 @@ deterministic state, and semantic layout owners from the [recipe guide](./recipe
 - `ai/component-catalog.json` is the canonical catalog metadata. A deterministic checked-in projection supplies the demo's unique id, category, kind (`component`, `composition`, or `recipe`), source (`kerf` or `webawesome`), name, description, recommendation, direct `uses` dependencies, existing documentation path, and demo-source path; first-party, recipe, and Web Awesome renderer maps are exhaustively typed against its generated id unions. Non-supported Web Awesome recommendations project to a visible `Discouraged` sidebar tag, with Popup as the deliberate conditional exception. Demo paths resolve to the matching `ui/ux-demo/demos/<id>.tsx` or `ui/ux-demo/recipes/*.tsx` file, or to `ui/ux-demo/webawesome-demos.tsx` for Web Awesome entries. `ui/ux-demo/main.tsx` owns only the catalog shell, shared state, routing, and interaction wiring. First-party component entries additionally derive `ui/src/<public-subpath>.tsx` from their canonical `delivery.browserImport` or opt-in `delivery.moduleImport`.
 - Every detail footer groups compact `Demo source` and `Guidance` actions; first-party component details also expose `Component source`. Web Awesome details say `Integration guidance` to distinguish the local integration contract from the upstream component implementation. Each button retains its repository-relative path in the DOM for verification and uses a deploy-safe absolute GitHub blob URL with a contextual new-tab name; the demo does not depend on a local source server or add a package runtime export. At phone widths, the resource group and related-component selector stack as full-width rows, with any resource overflow contained locally so labels cannot overlap the selector or widen the document.
 - The master/detail shell groups first-party routes by category with production `ListHeader` and `ListItem` components. Catalog entries can supply short reusable trailing tags; the Web Awesome projection uses them to label exactly the 15 discouraged choices. The 70 ecosystem components live in a separate `Web Awesome` disclosure with seven subgroups, so they remain discoverable without being presented as first-class `@kerfjs/ui` exports. Direct Web Awesome routes open the disclosure and reveal the selected row at wide sizes; narrow layouts keep the expanded list in document flow rather than introducing a competing nested scroller.
-- The shell itself uses `@kerfjs/ui/layout.css`: sidebars, details, previews, dialogs, and resize specimens share unpadded panes plus self-contained content items. Its sidebar identity uses the Kerf logo beside a vertically centered title, with the subtitle in its own aligned row like `PanelHeader`; the current-view heading is also a toolbar. Collapsing the catalog removes the pane completely and moves its restore action to the main toolbar's leading edge instead of leaving an icon-only rail. The selected view description remains inset below the page toolbar. The checkerboard belongs to the complete scrollable preview region rather than a nested card. A lightly separated footer keeps live status above compact source, guidance, and relationship groups. The focused `ResizableRegion` specimen stretches its surface through the available stage height and reports committed width in that shared status footer; narrow layouts retain local horizontal access when the pane is resized wider than the stage, and the split remains readable at 200% root scaling. Geometry coverage checks wide, intermediate, narrow, and 200% zoom layouts.
-- The composer-form recipe demonstrates one coherent visible form surface with `PanelHeader` title/summary hierarchy, fields and actions on the shared 8px control gutter, and 24px major rhythm. Its conditional error or success `StateBanner` is the only nested semantic surface. Reset synchronizes the upgraded Web Awesome fields' live value properties with their empty controlled attributes and announces `Draft reset`; browser coverage preserves behavior and verifies wide, narrow, dark, validation, success, reset, 200% zoom, and forced-colors states.
+- The shell itself uses `@kerfjs/ui/layout.css`: sidebars, details, previews, dialogs, and resize specimens share unpadded panes plus self-contained content items. Its sidebar identity uses the Kerf logo beside a vertically centered title, with supporting copy in its own aligned row; the current-view heading is also a toolbar. Collapsing the catalog removes the pane completely and moves its restore action to the main toolbar's leading edge instead of leaving an icon-only rail. The selected view description remains inset below the page toolbar. The checkerboard belongs to the complete scrollable preview region rather than a nested card. A lightly separated footer keeps live status above compact source, guidance, and relationship groups. The focused `ResizableRegion` specimen stretches its surface through the available stage height and reports committed width in that shared status footer; narrow layouts retain local horizontal access when the pane is resized wider than the stage, and the split remains readable at 200% root scaling. Geometry coverage checks wide, intermediate, narrow, and 200% zoom layouts.
+- The composer-form recipe demonstrates one coherent visible form surface with toolbar title/supporting-copy hierarchy, fields and actions on the shared 8px control gutter, and 24px major rhythm. Its conditional error or success `StateBanner` is the only nested semantic surface. Reset synchronizes the upgraded Web Awesome fields' live value properties with their empty controlled attributes and announces `Draft reset`; browser coverage preserves behavior and verifies wide, narrow, dark, validation, success, reset, 200% zoom, and forced-colors states.
 - The list-detail dialog recipe places its header directly on the dialog edge while preserving the header's internal inset, gives the selected project title the complete outer-plus-inner content gutter, lets the value table fill the available detail column between the shared outer margins, and keeps record actions on one outer gutter without an extra content-item inset. Browser geometry coverage protects those relationships at wide and narrow widths.
 - Catalog-only brand marks, preview dimensions, checkerboard tiles, and the compound display-settings control retain local geometry because they are specimen chrome or intrinsic control anatomy rather than reusable application spacing roles.
 - The menu composition route demonstrates toolbar/content/footer anatomy, 24px major gaps, 8/1/8 child geometry, the full-width `ListHeader` count-or-badge/action split, logical-end 44px action targets with 18px visuals, and 44px row/header/toolbar targets. Its one chevron is a production 18px `DisclosureArrow` inside a controlled Tools header that actually reveals and hides content; ordinary Projects navigation has no false disclosure affordance. Browser assertions cover stable naming, expanded/content transitions, visual rotation, node identity, reduced motion, RTL alignment and containment, and wide, narrow, dark, and 200% layouts. The focused ListHeader route separately shows the shared neutral count pill for Attachments, Notes (including zero), and Duplicates plus a non-count legacy badge, full-width logical-end actions, and no disclosure without content.
 - The `DisclosureArrow` route renders the production 18px root-scaled default without a catalog-only size override. Its two native buttons independently control the default right-to-down chevron and a recognizable right-facing replacement arrow with left-to-up custom directions; both use shortest-path rotation and their names stay stable while `aria-expanded` communicates state. Browser coverage verifies the custom clockwise path, pointer and native keyboard activation, focus, narrow and 200%-zoom stacking with contained labels, consumer sizing, and the independent `.5` Web Awesome glyph scale retained by Kerf `Select`.
 - A detail with relationships renders one grouped footer selector: `Uses` links to direct dependencies and `Used by` links to reverse dependents. Choosing either navigates to that component's demo. The relationship group is absent when both sets are empty; no duplicate summary is rendered.
 - Demo-only CSS supplies only the catalog shell and stages; component appearance stays in package CSS. Decorative chrome and Web Awesome controls share the same semantic system palette instead of carrying a separate demo identity.
-- Scenarios use deterministic data and cover real variants, long content, disabled state, selection, progress, feedback, overlays, media, helpers, and stateful interactions. The Web Awesome theme route remains the broad system view, while individual action, form, layout, navigation, feedback, media, and helper routes provide focused specimens; ListItem and ListHeader demonstrate typed domain metadata, protected native button/disclosure semantics, and a native popover trigger relationship without product props; PanelHeader demonstrates its plain top-toolbar identity, extra-large title, optional subtitle row, and bordered brand-filled icon group; the Select route verifies that option icons survive unrelated Kerf rerenders and selected slot content follows value changes; the Animation route exposes preset, easing, duration, playback-rate, and transport controls with live lifecycle status; observer routes provide user-driven intersection, mutation, and resize events with live results; ToolbarControlGroup exposes all eight Hot Sheet 2 variants, loads the Web Awesome registrations needed by its popup specimen, and preserves the upgraded dropdown's managed light-DOM children across Kerf rerenders; the Toolbar route composes a collapsible TokenSearchField inside a group, animates between the empty iconic and complete field states, stays open while populated, and focuses the revealed editor; SegmentedControl covers toolbar, rounded-rectangle, pill, equal-width, and disabled presentations; TokenSearchField covers editable ordered chips, pointer and keyboard removal, caret-preserving controlled deletion, editing, clearing, free text, disabled state, and fixed first-line alignment while content wraps; StateBanner exposes every built-in tone plus a scoped override; TabBar demonstrates overflow, edge autoscroll, and controlled pointer/keyboard reordering.
+- Scenarios use deterministic data and cover real variants, long content, disabled state, selection, progress, feedback, overlays, media, helpers, and stateful interactions. The Web Awesome theme route remains the broad system view, while individual action, form, layout, navigation, feedback, media, and helper routes provide focused specimens; ListItem and ListHeader demonstrate typed domain metadata, protected native button/disclosure semantics, and a native popover trigger relationship without product props; the Headers composition demonstrates direct toolbar headings with an extra-large title, optional supporting copy, and grouped icon/actions; the Select route verifies that option icons survive unrelated Kerf rerenders and selected slot content follows value changes; the Animation route exposes preset, easing, duration, playback-rate, and transport controls with live lifecycle status; observer routes provide user-driven intersection, mutation, and resize events with live results; ToolbarControlGroup exposes all eight Hot Sheet 2 variants, loads the Web Awesome registrations needed by its popup specimen, and preserves the upgraded dropdown's managed light-DOM children across Kerf rerenders; the Toolbar route composes a collapsible TokenSearchField inside a group, animates between the empty iconic and complete field states, stays open while populated, and focuses the revealed editor; SegmentedControl covers toolbar, rounded-rectangle, pill, equal-width, and disabled presentations; TokenSearchField covers editable ordered chips, pointer and keyboard removal, caret-preserving controlled deletion, editing, clearing, free text, disabled state, and fixed first-line alignment while content wraps; StateBanner exposes every built-in tone with tone-tinted badges plus a scoped override; TabBar demonstrates overflow, edge autoscroll, and controlled pointer/keyboard reordering.
+- The ToolbarControlGroup route also demonstrates the public compact/tight,
+  mixed-content, filled-selection, nested-dropdown, and avatar/scrim contracts
+  added for consumers that previously restyled group descendants.
 - Recipe ownership notes are hidden by default. A page-toolbar toggle reveals them as floating warning-toned notes with a folded corner, keeping instructional copy visually distinct and removable from the specimen flow.
 - Settings exercise light/dark, increased contrast, and reduced motion without changing component code. The theme action starts from the operating system's effective color scheme, always names the appearance it will switch to, and installs an explicit light or dark override when activated; contrast and reduced motion expose their independent preferences through `aria-pressed`.
 - The footer action log is an `aria-live` region, making interactions visible to both people and browser tests.

package/docs/webawesome-theme.md

@@ -98,7 +98,10 @@ tiers:
   once to the group rather than separating connected items; Card's header,
   body, and footer all receive the full inset.
 - `--kui-wa-container-inset` defaults to the 16px homogeneous-group step. Tab
-  Panel retains this roomier tier for unframed panel content.
+  Panel retains this roomier tier for unframed panel content. Dialog body uses
+  the 8px surface inset, while its footer uses the 16px container inset so
+  content stays compact and the action group has a clearer boundary. These two
+  parts do not inherit the dialog's shared `--spacing` value.
 
 Badge remains intentionally compact at Web Awesome's intrinsic `0.375em` block /
 `0.625em` inline padding (4.5px / 7.5px at its default 12px text size): it is a

package/docs/workbench.md

@@ -47,7 +47,54 @@ const navCollapsed = signal(false);
 Each `WorkbenchPanel` takes `content`, an optional `collapsed`, an optional
 `size` (rail width or drawer height in px, overriding the CSS default —
 `--kui-workbench-rail-width` 280px, `--kui-workbench-drawer-height` 220px), and
-an optional `label`.
+an optional `label`. Common shell behavior is configured rather than restyled:
+
+- `separator: "auto" | "hidden"` controls the owned dock-edge separator;
+- `collapseMotion: "slide" | "fade-slide" | "none"` keeps the track change
+  instant while choosing composited content motion;
+- `contentOverflow: "clip" | "auto" | "visible"` lets a drawer temporarily
+  expose an open popup without a descendant override;
+- `presentation: "inline" | "overlay" | "hidden"` supports compact overlays
+  or a responsive replacement;
+- `restoreControl` places an application-owned restore affordance in a
+  safe-area-aware viewport corner (`restorePosition` chooses the corner).
+
+The same policy props are available on `ResizableRegion` and
+`CollapsiblePanel`, so a resizable application shell does not need to reach
+into `.kui-resizable-region__content`.
+
+## Resizable application-shell migration
+
+An application such as Hot Sheet can replace its shell descendant overrides
+with state-derived props:
+
+```tsx
+<ResizableRegion
+  id="terminal-drawer"
+  label="Terminal drawer"
+  axis="vertical"
+  edge="start"
+  size={drawerSize.value}
+  min={180}
+  max={520}
+  collapsed={!drawerVisible.value}
+  separator={magnified.value ? "hidden" : "auto"}
+  collapseMotion="fade-slide"
+  contentOverflow={createMenuOpen.value ? "visible" : "clip"}
+  presentation={mobile.value ? "overlay" : "inline"}
+  restoreControl={<button data-action="show-drawer">Show terminals</button>}
+>
+  <TerminalDrawer />
+</ResizableRegion>
+```
+
+`wireResizableRegions` marks the active region with `data-resizing` and the
+package CSS suppresses content motion during pointer resize. A collapsed,
+overlay, or hidden region is not resizeable. Together these policies replace
+app CSS for separator suppression, instant-track/composited-content collapse,
+popup overflow, mobile overlay/hidden replacement, resize-transition guards,
+and safe-area restore placement. The app still owns the signals and decides
+when each policy applies.
 
 ## Public styling boundary
 
@@ -57,7 +104,7 @@ Workbench instance. The supported composition classes are `.kui-workbench`,
 `.kui-workbench__rail`, `.kui-workbench__rail--left`,
 `.kui-workbench__rail--right`, `.kui-workbench__center`,
 `.kui-workbench__main`, `.kui-workbench__drawer`, and
-`.kui-workbench__panel-content`; these exact hooks are cataloged for tools that
+`.kui-workbench__panel-content`, and `.kui-workbench__restore`; these exact hooks are cataloged for tools that
 must classify public application selectors. Prefer the component props and two
 size tokens before selecting internal anatomy, and do not target its data
 attributes or descendant tags as styling contracts.

package/doctor/eslint-diagnostics.d.mts

@@ -6,3 +6,19 @@ export interface EslintDiagnosticLike {
 export function isForeignRuleDefinitionDiagnostic(
   item: EslintDiagnosticLike,
 ): boolean;
+
+export interface ConsumerEslintConfigLike {
+  rules?: Record<string, unknown>;
+  linterOptions?: Record<string, unknown>;
+}
+
+export interface ProjectedConsumerCoreConfig {
+  files: string[];
+  rules?: Record<string, unknown>;
+  linterOptions?: Record<string, unknown>;
+}
+
+export function projectConsumerCoreConfig(
+  config: ConsumerEslintConfigLike | undefined,
+  file: string,
+): ProjectedConsumerCoreConfig | undefined;