@kerfjs/ui 5.0.0-beta.18 → 5.0.0-beta.22

package/docs/design/templates/toolbar-control-group-dark.svg

@@ -5,7 +5,7 @@
   <text x="16" y="164" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Borderless single control</text>
   <svg x="16" y="172" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v1-cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(34 34)" color="rgb(174, 174, 178)"><svg data-lucide="plus" 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="16" height="16"><path d="M5 12h14" 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="M12 5v14" 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></svg>
   <text x="16" y="298" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Label text beside a control</text>
-  <svg x="16" y="306" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v2-cp0"><rect x="22" y="22" width="82.8" height="40"/></clipPath><clipPath id="v2-ct1"><rect x="22" y="22" width="82.8" height="40"/></clipPath><clipPath id="v2-cp2"><rect x="116.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="126" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="30" y="46" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Workspace</text></g></g><rect x="105.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp2)"><g transform="translate(116.8 34)" color="rgb(174, 174, 178)"><svg data-lucide="bell" 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="16" height="16"><path d="M10.3 21a2 2 0 0 0 3.4 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="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" 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></svg>
+  <svg x="16" y="306" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v2-cp0"><rect x="22" y="22" width="80.8" height="40"/></clipPath><clipPath id="v2-ov1"><rect x="22" y="22" width="80.8" height="40" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="v2-ct3"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="v2-cp4"><rect x="114.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="124" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="30" y="45" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Workspace</text></g></g></g></g><rect x="103.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp4)"><g transform="translate(114.8 34)" color="rgb(174, 174, 178)"><svg data-lucide="bell" 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="16" height="16"><path d="M10.3 21a2 2 0 0 0 3.4 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="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" 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></svg>
   <text x="16" y="432" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Push-appearance buttons</text>
   <svg x="16" y="440" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v3-cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="v3-cp1"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g transform="translate(34 34)" color="rgb(174, 174, 178)"><svg data-lucide="list" 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="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp1)"><g transform="translate(74 34)" color="rgb(174, 174, 178)"><svg data-lucide="columns-3" 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="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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></svg>
 </svg>

package/docs/design/templates/toolbar-control-group.svg

@@ -5,7 +5,7 @@
   <text x="16" y="164" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Borderless single control</text>
   <svg x="16" y="172" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v1-cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(34 34)" color="rgb(110, 110, 115)"><svg data-lucide="plus" 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="16" height="16"><path d="M5 12h14" 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="M12 5v14" 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></svg>
   <text x="16" y="298" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Label text beside a control</text>
-  <svg x="16" y="306" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v2-cp0"><rect x="22" y="22" width="82.8" height="40"/></clipPath><clipPath id="v2-ct1"><rect x="22" y="22" width="82.8" height="40"/></clipPath><clipPath id="v2-cp2"><rect x="116.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="126" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="30" y="46" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Workspace</text></g></g><rect x="105.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp2)"><g transform="translate(116.8 34)" color="rgb(110, 110, 115)"><svg data-lucide="bell" 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="16" height="16"><path d="M10.3 21a2 2 0 0 0 3.4 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="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" 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></svg>
+  <svg x="16" y="306" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v2-cp0"><rect x="22" y="22" width="80.8" height="40"/></clipPath><clipPath id="v2-ov1"><rect x="22" y="22" width="80.8" height="40" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="v2-ct3"><rect x="30" y="36" width="64.8" height="12"/></clipPath><clipPath id="v2-cp4"><rect x="114.8" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="124" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="30" y="45" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Workspace</text></g></g></g></g><rect x="103.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp4)"><g transform="translate(114.8 34)" color="rgb(110, 110, 115)"><svg data-lucide="bell" 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="16" height="16"><path d="M10.3 21a2 2 0 0 0 3.4 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="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" 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></svg>
   <text x="16" y="432" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Push-appearance buttons</text>
   <svg x="16" y="440" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 96" width="520" height="96"><defs><clipPath id="v3-cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="v3-cp1"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp0)"><g transform="translate(34 34)" color="rgb(110, 110, 115)"><svg data-lucide="list" 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="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v3-cp1)"><g transform="translate(74 34)" color="rgb(110, 110, 115)"><svg data-lucide="columns-3" 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="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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></svg>
 </svg>

package/docs/design/templates/toolbar-dark.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="672" height="158" viewBox="0 0 672 158">
   <rect width="672" height="158" fill="#1c1c1e"/>
   <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Title with a trailing group</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 104" width="640" height="104"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-ct3"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-cp4"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp5"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp6"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="38" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar</text></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp4)"><g transform="translate(502 42)" color="rgb(174, 174, 178)"><svg data-lucide="list" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp5)"><g transform="translate(542 42)" color="rgb(174, 174, 178)"><svg data-lucide="columns-3" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp6)"><g transform="translate(582 42)" color="rgb(174, 174, 178)"><svg data-lucide="settings" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" 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"/><circle cx="12" cy="12" r="3" 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></svg>
+  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 104" width="640" height="104"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="v0-cp4"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="v0-ct5"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="v0-cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp7"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp8"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ov3)"><g clip-path="url(#v0-cp4)"><g clip-path="url(#v0-ct5)"><text x="38" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(58,58,60)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(72,72,74)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp6)"><g transform="translate(502 42)" color="rgb(174, 174, 178)"><svg data-lucide="list" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp7)"><g transform="translate(542 42)" color="rgb(174, 174, 178)"><svg data-lucide="columns-3" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp8)"><g transform="translate(582 42)" color="rgb(174, 174, 178)"><svg data-lucide="settings" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" 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"/><circle cx="12" cy="12" r="3" 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></svg>
 </svg>

package/docs/design/templates/toolbar-text/default-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="151.2" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text/default.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="151.2" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text/large-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="163" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text/large.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="163" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text/small-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="67.9" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="67.9" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="44" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text/small.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="67.9" height="40"/></clipPath><clipPath id="ct1"><rect x="20" y="20" width="67.9" height="40"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="28" y="44" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#cp0)"><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></svg>

package/docs/design/templates/toolbar-text-dark.svg

@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="392" height="358" viewBox="0 0 392 358">
   <rect width="392" height="358" fill="#1c1c1e"/>
   <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Large (title)</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="v0-cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="v0-ct1"><rect x="20" y="20" width="163" height="40"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ct1)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></svg>
+  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="v0-cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="v0-ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="v0-ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(174,174,178)">Northstar migration</text></g></g></g></g></svg>
   <text x="16" y="148" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Default</text>
-  <svg x="16" y="156" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="v1-cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="v1-ct1"><rect x="20" y="20" width="151.2" height="40"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ct1)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></svg>
+  <svg x="16" y="156" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="v1-cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="v1-ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="v1-cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="v1-ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ov1)"><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(174,174,178)">Workspace settings</text></g></g></g></g></svg>
   <text x="16" y="262" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Small (label)</text>
-  <svg x="16" y="270" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="v2-cp0"><rect x="20" y="20" width="67.9" height="40"/></clipPath><clipPath id="v2-ct1"><rect x="20" y="20" width="67.9" height="40"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="28" y="44" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></svg>
+  <svg x="16" y="270" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="v2-cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="v2-ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="v2-ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(174,174,178)">Filters</text></g></g></g></g></svg>
 </svg>

package/docs/design/templates/toolbar-text.svg

@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="392" height="358" viewBox="0 0 392 358">
   <rect width="392" height="358" fill="#ffffff"/>
   <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Large (title)</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="v0-cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="v0-ct1"><rect x="20" y="20" width="163" height="40"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ct1)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></svg>
+  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 80" width="360" height="80"><defs><clipPath id="v0-cp0"><rect x="20" y="20" width="163" height="40"/></clipPath><clipPath id="v0-ov1"><rect x="20" y="20" width="163" height="40" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="28" y="32" width="147" height="16"/></clipPath><clipPath id="v0-ct3"><rect x="28" y="32" width="147" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="28" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar migration</text></g></g></g></g></svg>
   <text x="16" y="148" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Default</text>
-  <svg x="16" y="156" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="v1-cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="v1-ct1"><rect x="20" y="20" width="151.2" height="40"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ct1)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></svg>
+  <svg x="16" y="156" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 76" width="360" height="76"><defs><clipPath id="v1-cp0"><rect x="20" y="20" width="151.2" height="40"/></clipPath><clipPath id="v1-ov1"><rect x="20" y="20" width="151.2" height="40" rx="0"/></clipPath><clipPath id="v1-cp2"><rect x="28" y="33" width="135.2" height="14"/></clipPath><clipPath id="v1-ct3"><rect x="28" y="33" width="135.2" height="14"/></clipPath></defs><g clip-path="url(#v1-cp0)"><g clip-path="url(#v1-ov1)"><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="28" y="45" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="650" fill="rgb(110,110,115)">Workspace settings</text></g></g></g></g></svg>
   <text x="16" y="262" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Small (label)</text>
-  <svg x="16" y="270" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="v2-cp0"><rect x="20" y="20" width="67.9" height="40"/></clipPath><clipPath id="v2-ct1"><rect x="20" y="20" width="67.9" height="40"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ct1)"><text x="28" y="44" font-family="&quot;ui-monospace&quot;, &quot;SFMono-Regular&quot;, &quot;Menlo&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></svg>
+  <svg x="16" y="270" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 72" width="360" height="72"><defs><clipPath id="v2-cp0"><rect x="20" y="20" width="66.4" height="40"/></clipPath><clipPath id="v2-ov1"><rect x="20" y="20" width="66.4" height="40" rx="0"/></clipPath><clipPath id="v2-cp2"><rect x="28" y="34" width="50.4" height="12"/></clipPath><clipPath id="v2-ct3"><rect x="28" y="34" width="50.4" height="12"/></clipPath></defs><g clip-path="url(#v2-cp0)"><g clip-path="url(#v2-ov1)"><g clip-path="url(#v2-cp2)"><g clip-path="url(#v2-ct3)"><text x="28" y="43" font-family="&quot;Courier New&quot;, monospace" font-size="12" font-weight="650" fill="rgb(110,110,115)">Filters</text></g></g></g></g></svg>
 </svg>

package/docs/design/templates/toolbar.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="672" height="158" viewBox="0 0 672 158">
   <rect width="672" height="158" fill="#ffffff"/>
   <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Title with a trailing group</text>
-  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 104" width="640" height="104"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-ct3"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-cp4"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp5"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp6"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="38" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar</text></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp4)"><g transform="translate(502 42)" color="rgb(110, 110, 115)"><svg data-lucide="list" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp5)"><g transform="translate(542 42)" color="rgb(110, 110, 115)"><svg data-lucide="columns-3" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp6)"><g transform="translate(582 42)" color="rgb(110, 110, 115)"><svg data-lucide="settings" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" 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"/><circle cx="12" cy="12" r="3" 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></svg>
+  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 104" width="640" height="104"><defs><clipPath id="v0-cp0"><rect x="28" y="28" width="452" height="44"/></clipPath><clipPath id="v0-ov1"><rect x="28" y="28" width="452" height="44" rx="0"/></clipPath><clipPath id="v0-cp2"><rect x="30" y="30" width="88.1" height="40"/></clipPath><clipPath id="v0-ov3"><rect x="30" y="30" width="88.1" height="40" rx="0"/></clipPath><clipPath id="v0-cp4"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="v0-ct5"><rect x="38" y="42" width="72.1" height="16"/></clipPath><clipPath id="v0-cp6"><rect x="502" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp7"><rect x="542" y="42" width="16" height="16"/></clipPath><clipPath id="v0-cp8"><rect x="582" y="42" width="16" height="16"/></clipPath></defs><g clip-path="url(#v0-cp0)"><g clip-path="url(#v0-ov1)"><rect x="28.5" y="28.5" width="91" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ov3)"><g clip-path="url(#v0-cp4)"><g clip-path="url(#v0-ct5)"><text x="38" y="56" font-family="&quot;ui-sans-serif&quot;, &quot;-apple-system&quot;, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(110,110,115)">Northstar</text></g></g></g></g></g></g><rect x="488" y="28" width="124" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="488.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgb(209,209,214)" stroke-width="1"/><rect x="490.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp6)"><g transform="translate(502 42)" color="rgb(110, 110, 115)"><svg data-lucide="list" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M3 5z" 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="M3 12z" 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="M3 19z" 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="M8 5h13" 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="M8 12h13" 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="M8 19h13" 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><rect x="530.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp7)"><g transform="translate(542 42)" color="rgb(110, 110, 115)"><svg data-lucide="columns-3" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><rect width="18" height="18" x="3" y="3" rx="2" 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 3v18" 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="M15 3v18" 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><rect x="570.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp8)"><g transform="translate(582 42)" color="rgb(110, 110, 115)"><svg data-lucide="settings" 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="ui-sans-serif, -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" 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"/><circle cx="12" cy="12" r="3" 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></svg>
 </svg>

package/docs/design/templates.md

@@ -84,12 +84,17 @@ re-render (that needs domotion + a browser), so it catches a manifest entry whos
 templates were never generated or a half-regenerated set.
 
 Deeper **visual drift** — a component changed but its template was not regenerated —
-is caught by `npm run check:design-templates:drift`, a CI-only gate (it runs in the
-browser-capable `ui` job, **not** in the offline `npm run check`). It regenerates
-every template into a throwaway directory and fails if any regenerated SVG differs
-from the committed one, after normalizing the bits that legitimately vary between
-runs (XML comments and the auto-minted element ids / font names). If it fails, run
-`npm run design-templates:build` and commit the updated SVGs.
+is caught by `npm run check:design-templates:drift`, a CI-only gate (it runs in a
+dedicated macOS browser job, **not** in the offline `npm run check`). The committed
+templates use system-font text, whose layout metrics differ by operating system, so
+macOS is the canonical exact-render environment for both generation and comparison.
+The capture fixture also pins its monospace token to `Courier New`; otherwise
+`ui-monospace` resolves to different fonts on developer and hosted macOS machines.
+The gate regenerates every template into a throwaway directory and fails if any
+regenerated SVG differs from the committed one, after normalizing the bits that
+legitimately vary between runs (XML comments and the auto-minted element ids / font
+names). If it fails, run `npm run design-templates:build` on macOS and commit the
+updated SVGs.
 
 ## Templating your own components
 

package/docs/design-philosophy.md

@@ -50,16 +50,14 @@ toolbar groups use 8px. Rows and actions keep 44px targets.
 Use the package composition so the geometry has one owner:
 
 ```tsx
-<aside class="kui-pane">
-  <nav class="kui-pane__content kui-content">
+<Pane element="aside" contentElement="nav" label="Workspace" contentLabel="Workspace pages">
     <section>
       <ListHeader label="Workspace" />
       <ListItem action="open" label="Inbox" icon={inboxIcon} />
       <ListItem action="open" label="Drafts" />
     </section>
     <div class="kui-content-item">Panel contents</div>
-  </nav>
-</aside>
+</Pane>
 ```
 
 Do not pad the pane and then pad every wrapper. That duplicates the geometry

package/docs/examples/application-ui-profile.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "../../ai/application-ui-profile.schema.json",
+  "schemaVersion": 1,
+  "scope": "workspace",
+  "catalogs": [
+    {
+      "package": "@kerfjs/ui",
+      "selection": {
+        "path": "../../ai/component-catalog.json",
+        "schemaVersion": 1
+      },
+      "composition": {
+        "path": "../../ai/component-catalog-v2.json",
+        "schemaVersion": 2
+      }
+    },
+    {
+      "package": "@acme/ui",
+      "composition": {
+        "path": "./component-catalog-extension-v2.json",
+        "schemaVersion": 2
+      }
+    }
+  ],
+  "preferences": {
+    "application-shell": {
+      "preferred": "@kerfjs/ui:recipe-app-shell",
+      "rationale": "The workspace uses the standard resizable three-region shell."
+    },
+    "record-inspector": {
+      "preferred": "@acme/ui:inspector",
+      "rationale": "The application-owned inspector maps record policy onto Kerf panel primitives."
+    }
+  },
+  "theme": {
+    "colorScheme": "light",
+    "allowedColorSchemes": ["light", "dark"],
+    "density": "standard",
+    "allowedDensities": ["standard"]
+  },
+  "tokens": {
+    "--kui-color-brand-fill-normal": "oklch(0.62 0.16 255)"
+  },
+  "layout": {
+    "shell": "@kerfjs/ui:recipe-app-shell",
+    "pane": "@kerfjs/ui:pane",
+    "responsiveStrategy": "device-class",
+    "compactNavigation": "nav-stack",
+    "scrollOwnership": "one-per-pane",
+    "spacingScale": "kerf-five-step"
+  },
+  "exceptions": [
+    {
+      "id": "legacy-report-grid",
+      "rules": ["KUI-C101"],
+      "target": "src/features/legacy-report/report-grid.tsx",
+      "rationale": "The embedded report engine owns this isolated toolbar-compatible control row."
+    }
+  ]
+}

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

@@ -0,0 +1,81 @@
+{
+  "$schema": "../../ai/component-catalog-extension-v2.schema.json",
+  "schemaVersion": 2,
+  "package": "@acme/ui",
+  "compatibility": {
+    "v1Catalog": "./component-catalog-extension.json",
+    "identity": "package:id"
+  },
+  "entries": [
+    {
+      "key": "@acme/ui:inspector",
+      "package": "@acme/ui",
+      "id": "inspector",
+      "name": "Inspector",
+      "kind": "composition",
+      "source": "application",
+      "parents": { "mode": "listed", "entries": ["@kerfjs/ui:layout"] },
+      "contexts": ["record-detail"],
+      "zones": [
+        {
+          "id": "header",
+          "accepts": ["@kerfjs/ui:panel-header"],
+          "cardinality": { "min": 1, "max": 1 },
+          "exclusiveWith": []
+        },
+        {
+          "id": "facts",
+          "accepts": ["@kerfjs/ui:value-table"],
+          "cardinality": { "min": 1, "max": 1 },
+          "exclusiveWith": []
+        }
+      ],
+      "children": {
+        "mode": "listed",
+        "concepts": ["@kerfjs/ui:panel-header", "@kerfjs/ui:value-table"],
+        "requiredConcepts": [
+          "@kerfjs/ui:panel-header",
+          "@kerfjs/ui:value-table"
+        ]
+      },
+      "state": [
+        { "id": "selected-record", "owner": "application", "required": true }
+      ],
+      "wiring": { "required": false, "helpers": [], "obligations": [] },
+      "responsive": {
+        "owner": "application",
+        "behaviors": [
+          "May move between inline-end pane and dialog at the application breakpoint."
+        ]
+      },
+      "layout": {
+        "roles": ["inspector"],
+        "geometry": {
+          "margin": "parent",
+          "border": "child",
+          "padding": "child"
+        }
+      },
+      "accessibility": {
+        "obligations": ["The header names the inspector region."]
+      },
+      "boundaries": {
+        "rootClass": "acme-inspector",
+        "publicClasses": ["acme-inspector"],
+        "publicTokens": []
+      },
+      "diagnostics": [
+        {
+          "id": "KUI-C901",
+          "severity": "error",
+          "when": "the header or facts zone is absent",
+          "message": "Inspector requires exactly one header and one facts region."
+        }
+      ],
+      "provenance": {
+        "selection": "docs/inspector.md",
+        "composition": "docs/inspector.md#composition-contract"
+      }
+    }
+  ]
+}

package/docs/layout.md

@@ -1,26 +1,39 @@
 # Pane and content layout
 
-Import `@kerfjs/ui/layout.css` for the shared geometry used by sidebars, main
-areas, inspectors, and dialogs. The vocabulary deliberately describes structure
-rather than location: the same pane can be placed anywhere.
+Import `Pane` from `@kerfjs/ui/pane`. Browser-aware bundlers receive its CSS
+automatically; other consumers can import `@kerfjs/ui/pane.css`. Import
+`@kerfjs/ui/layout.css` as well when using the related content-item and control
+layout classes. The vocabulary deliberately describes structure rather than
+location: the same pane can be placed anywhere.
 
 ## Anatomy
 
 ```tsx
-<aside class="kui-pane">
-  <div class="kui-pane__toolbar"><Toolbar label="Workspace" ... /></div>
-  <div class="kui-pane__content kui-content">
+<Pane
+  element="aside"
+  label="Workspace"
+  contentElement="nav"
+  contentLabel="Workspace pages"
+  separators={["inline-end"]}
+  header={<Toolbar label="Workspace" ... />}
+  footer={<Toolbar label="Actions" ... />}
+>
     <section>...</section>
     <section>...</section>
-  </div>
-  <footer class="kui-pane__footer"><Toolbar label="Actions" ... /></footer>
-</aside>
+</Pane>
 ```
 
-`.kui-pane` has no padding. It reserves rows for an optional toolbar, one
-scrolling content area, and an optional footer. A main area or dialog often
-omits the footer; a navigation pane commonly uses all three. Fixed chrome stays
-outside `.kui-pane__content`, which is the pane's scroll owner.
+`Pane` has no padding. It reserves rows for an optional vertical header, one
+scrolling vertical content area, and an optional footer. A header may contain a
+top toolbar followed by secondary toolbar or status rows. A main area or dialog
+often omits the footer; a navigation pane commonly uses all three. Fixed chrome
+stays outside `.kui-pane__content`, which is the pane's only scroll owner.
+
+Pass any combination of logical sides to `separators`: `block-start`,
+`block-end`, `inline-start`, and `inline-end`. Every line is off by default and
+each enabled side uses `--kui-pane-separator-width` (1px) and
+`--kui-pane-separator-color` (`--kui-color-border`). Logical sides keep pane
+boundaries correct in both left-to-right and right-to-left layouts.
 
 `.kui-content` is a vertical stack with a 24px gap between major children.
 Sections may contain adjacent `ListItem` rows without adding another major gap.
@@ -37,6 +50,11 @@ Use `.kui-content-item--pill` for the 22px pill radius expressed as
 changing its geometry by setting `--kui-content-item-border` and
 `--kui-content-item-background`.
 
+Nested rounded edges stay concentric by subtracting their full inset from the
+outer radius. For example, `SegmentedControl` places each item behind a 1px
+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
 its task hierarchy, and places field and action control edges on the shared 8px
@@ -46,16 +64,17 @@ semantic status.
 
 ## Public roles and tokens
 
-| Need                                      | Class                     | Token / default                       |
-| ----------------------------------------- | ------------------------- | ------------------------------------- |
-| Unpadded toolbar/content/footer structure | `.kui-pane`               | —                                     |
-| Scrolling pane content                    | `.kui-pane__content`      | —                                     |
-| Major vertical rhythm                     | `.kui-content`            | `--kui-layout-content-gap: 24px`      |
-| Self-contained child geometry             | `.kui-content-item`       | 8px margin + 1px border + 8px padding |
-| Pill child                                | `.kui-content-item--pill` | `--kui-layout-pill-radius: 22px`      |
-| Related controls                          | `.kui-control-cluster`    | `--kui-layout-control-gap: 8px`       |
-| Inline metadata                           | `.kui-inline-metadata`    | `--kui-layout-metadata-gap: 4px`      |
-| Explicit scroll owner outside a pane      | `.kui-scroll-owner`       | `overflow: auto`                      |
+| Need                                     | Class                     | Token / default                       |
+| ---------------------------------------- | ------------------------- | ------------------------------------- |
+| Unpadded header/content/footer structure | `Pane`, `.kui-pane`       | —                                     |
+| Scrolling pane content                   | `.kui-pane__content`      | —                                     |
+| Optional logical-edge separators         | `Pane.separators`         | `--kui-pane-separator-width: 1px`     |
+| Major vertical rhythm                    | `.kui-content`            | `--kui-layout-content-gap: 24px`      |
+| Self-contained child geometry            | `.kui-content-item`       | 8px margin + 1px border + 8px padding |
+| Pill child                               | `.kui-content-item--pill` | `--kui-layout-pill-radius: 22px`      |
+| Related controls                         | `.kui-control-cluster`    | `--kui-layout-control-gap: 8px`       |
+| Inline metadata                          | `.kui-inline-metadata`    | `--kui-layout-metadata-gap: 4px`      |
+| 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`,