@povio/ui 5.0.0-rc.10 → 5.0.0-rc.11

package/dist/config/app-canvas-tanstack.d.ts

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-BIFYeEeS.js";
+import { n as AppCanvasPage, r as AppCanvasPageProps, t as APP_CANVAS_PATH } from "../AppCanvasPage-BTmt8poT.js";
 import { AnyRoute } from "@tanstack/react-router";
 //#region src/app-canvas/tanstack.d.ts
 interface AppCanvasRouteOptions {

package/dist/config/app-canvas-tanstack.js

@@ -1,4 +1,4 @@
-import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BEER5hHp.js";
+import { n as AppCanvasPage, r as AppCanvasFrameBridge, t as APP_CANVAS_PATH } from "../AppCanvasPage-BsQrZ8q7.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { createRoute, notFound, useRouter, useRouterState } from "@tanstack/react-router";

package/dist/config/app-canvas.d.ts

@@ -1,5 +1,5 @@
-import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-BIFYeEeS.js";
-import "../configuration.context-DP4p1cIe.js";
+import { a as AppCanvasProps, c as CanvasPage, d as CanvasRouter, f as discoverCanvasPages, i as AppCanvas, l as CanvasPosition, n as AppCanvasPage, o as CanvasBreakpoint, p as layoutCanvasPages, r as AppCanvasPageProps, s as defaultCanvasBreakpoints, t as APP_CANVAS_PATH, u as CanvasRouteExample } from "../AppCanvasPage-BTmt8poT.js";
+import "../configuration.context-qdjDwQJj.js";
 //#region src/app-canvas/AppCanvasFrameBridge.d.ts
 /** Mount once inside the application's existing UIConfigurationProvider. No separate app copy or theme fork. */
 declare function AppCanvasFrameBridge({ href }: {

package/dist/config/app-canvas.js

@@ -1,2 +1,2 @@
-import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-BEER5hHp.js";
+import { a as defaultCanvasBreakpoints, c as layoutCanvasPages, i as AppCanvas, n as AppCanvasPage, o as isAppCanvasFrame, r as AppCanvasFrameBridge, s as discoverCanvasPages, t as APP_CANVAS_PATH } from "../AppCanvasPage-BsQrZ8q7.js";
 export { APP_CANVAS_PATH, AppCanvas, AppCanvasFrameBridge, AppCanvasPage, defaultCanvasBreakpoints, discoverCanvasPages, isAppCanvasFrame, layoutCanvasPages };

package/dist/config/ui-configurator-theme.js

@@ -1,2 +1,2 @@
-import { _ as parseThemeCss, i as exportCss } from "../theme-model-DtYPxNvH.js";
+import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
 export { exportCss, parseThemeCss };

package/dist/config/ui-configurator.d.ts

@@ -1,4 +1,4 @@
-import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-DP4p1cIe.js";
+import { a as CvaDefinition, i as useUIConfiguration, n as UIConfigurationProvider, o as CvaEdits, r as UIConfigurationProviderProps, t as UIConfiguration } from "../configuration.context-qdjDwQJj.js";
 import { a as parseThemeCss, i as exportCss, n as ThemeEdits, r as Tokens, t as Mode } from "../theme-model-T1zIdBg8.js";
 //#region src/configurator/UIConfigurator.d.ts
 declare function UIConfigurationModal(): import("react").JSX.Element | null;

package/dist/config/ui-configurator.js

@@ -1,3 +1,3 @@
-import { c as UIConfigurationProvider, l as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal } from "../UIConfigurator-CTlq-hrG.js";
-import { _ as parseThemeCss, i as exportCss } from "../theme-model-DtYPxNvH.js";
+import { c as UIConfigurationProvider, l as useUIConfiguration, n as ColorModeSwitch, t as UIConfigurationModal } from "../UIConfigurator-C_2kgJtm.js";
+import { i as exportCss, v as parseThemeCss } from "../theme-model-DtTsIxou.js";
 export { ColorModeSwitch, UIConfigurationModal, UIConfigurationProvider, exportCss, parseThemeCss, useUIConfiguration };

package/dist/{configuration.context-DP4p1cIe.d.ts → configuration.context-qdjDwQJj.d.ts}

@@ -911,6 +911,18 @@ interface ConfigurationContextValue {
   cancel: () => void;
   apply: () => void;
   revision: number;
+  /** Opens the configurator (floating, if closed) on a token's row, e.g. from an inspector outside the modal. */
+  revealToken: (name: string) => void;
+  /** The pending reveal; the open editor focuses it and then calls `clearTokenRequest`. */
+  tokenRequest: {
+    name: string;
+    id: number;
+  } | null;
+  clearTokenRequest: () => void;
+  /** True while a host such as the App Canvas shows the components, so the configurator omits its own preview. */
+  componentsHosted: boolean;
+  /** Registers such a host; call the returned function when it unmounts. */
+  hostComponents: () => () => void;
 }
 interface UIConfigurationProviderProps extends PropsWithChildren {
   /** The application's base theme. Use parseThemeCss with your Tailwind theme source. */

package/dist/groups-oQmSeqXn.js

@@ -0,0 +1,18 @@
+//#region src/configurator/gallery/groups.ts
+/** Gallery sections, kept apart from the demos so a host can list them without loading every component. */
+const galleryGroups = [
+	"Buttons",
+	"Inputs",
+	"Selection",
+	"Files",
+	"Feedback",
+	"Text",
+	"Navigation",
+	"Overlays",
+	"Data"
+];
+/** One App Canvas artboard per section, after the composed layouts. */
+const layoutsArtboard = "Layouts";
+const componentArtboards = [layoutsArtboard, ...galleryGroups];
+//#endregion
+export { galleryGroups as n, layoutsArtboard as r, componentArtboards as t };

package/dist/styles/app-canvas.css

@@ -10,7 +10,7 @@
   background: #ececee;
   color: #242428;
   font:
-    12px/1.45 Inter,
+    10px/16px Inter,
     system-ui,
     sans-serif;
   isolation: isolate;
@@ -28,8 +28,8 @@
   background: #fff;
   color: #45454d;
   border: 1px solid transparent;
-  border-radius: 6px;
-  padding: 7px 9px;
+  border-radius: 5px;
+  padding: 4px 6px;
 }
 .povio-app-canvas button:hover {
   background: #f1f1f4;
@@ -51,8 +51,8 @@
 .povio-app-canvas input,
 .povio-app-canvas select {
   border: 1px solid var(--canvas-border);
-  border-radius: 6px;
-  padding: 7px;
+  border-radius: 5px;
+  padding: 4px 6px;
   min-width: 0;
   background: #f7f7f8;
   color: #333;
@@ -62,11 +62,11 @@
   align-items: center;
   gap: 6px;
   background: #fff;
-  padding: 10px 16px;
+  padding: 6px 12px;
   border-bottom: 1px solid var(--canvas-border);
   flex-shrink: 0;
   z-index: 5;
-  min-height: 64px;
+  min-height: 40px;
 }
 .povio-canvas-brand {
   display: flex;
@@ -77,14 +77,14 @@
 }
 .povio-canvas-brand strong {
   display: block;
-  font-size: 13px;
-  font-weight: 650;
+  font-size: 10px;
+  font-weight: 600;
 }
 .povio-canvas-brand small {
   display: block;
   color: #73737c;
   font-size: 10px;
-  margin-top: 2px;
+  margin-top: 0;
 }
 .povio-canvas-brand small span {
   padding: 0 5px;
@@ -93,11 +93,11 @@
 .povio-canvas-logo {
   display: grid;
   place-items: center;
-  width: 32px;
-  height: 32px;
+  width: 24px;
+  height: 24px;
   background: #252329;
   color: #fff;
-  border-radius: 9px;
+  border-radius: 6px;
 }
 .povio-canvas-breakpoint {
   display: flex;
@@ -114,13 +114,13 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 7px;
-  min-height: 34px;
+  gap: 4px;
+  min-height: 24px;
 }
 .povio-canvas-toolbar .povio-canvas-configure {
   background: var(--canvas-accent);
   color: white;
-  padding-inline: 13px;
+  padding-inline: 8px;
 }
 .povio-canvas-toolbar .povio-canvas-configure:hover {
   background: #6545c4;
@@ -131,7 +131,7 @@
   gap: 6px;
   color: #77717e;
   font-size: 10px;
-  padding-left: 10px;
+  padding-left: 8px;
   white-space: nowrap;
 }
 .povio-canvas-ready i,
@@ -149,8 +149,8 @@
   min-height: 0;
 }
 .povio-canvas-catalog {
-  width: 232px;
-  flex: 0 0 232px;
+  width: 240px;
+  flex: 0 0 240px;
   background: #fff;
   display: flex;
   flex-direction: column;
@@ -165,9 +165,9 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 17px 16px;
+  padding: 8px 12px;
   border-bottom: 1px solid var(--canvas-border);
-  min-height: 52px;
+  min-height: 40px;
 }
 .povio-canvas-panel-heading > span {
   font-size: 10px;
@@ -179,33 +179,33 @@
 .povio-canvas-search {
   display: flex;
   align-items: center;
-  gap: 7px;
-  margin: 14px 12px;
+  gap: 6px;
+  margin: 0 8px 8px;
   padding: 0 8px;
   background: #f6f6f8;
   color: #88838e;
-  border-radius: 6px;
+  border-radius: 5px;
 }
 .povio-canvas-search input {
   width: 100%;
   background: transparent;
   border: 0;
-  padding: 8px 0;
-  font-size: 11px;
+  padding: 4px 0;
+  font-size: 10px;
 }
 .povio-canvas-page-list {
   flex: 1;
   overflow-y: auto;
-  padding: 0 8px 12px;
+  padding: 0 8px 8px;
 }
 .povio-canvas-page-list > button {
   display: flex;
   align-items: flex-start;
-  gap: 9px;
+  gap: 6px;
   width: 100%;
   text-align: left;
-  margin-bottom: 3px;
-  padding: 10px 8px;
+  margin-bottom: 1px;
+  padding: 4px 8px;
 }
 .povio-canvas-page-list > button > svg {
   flex-shrink: 0;
@@ -216,10 +216,10 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
-  gap: 2px;
+  gap: 0;
 }
 .povio-canvas-page-label strong {
-  font-weight: 550;
+  font-weight: 500;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -231,13 +231,13 @@
 }
 .povio-canvas-page-label small:last-child {
   color: #76727f;
-  font-size: 9px;
+  font-size: 10px;
 }
 .povio-canvas-catalog-footer {
   border-top: 1px solid var(--canvas-border);
-  padding: 14px 16px;
+  padding: 8px 12px;
   color: #5a5963;
-  font-size: 11px;
+  font-size: 10px;
 }
 .povio-canvas-catalog-footer .povio-canvas-live-dot {
   margin-right: 6px;
@@ -246,25 +246,25 @@
   display: block;
   color: #76727f;
   font-size: 10px;
-  padding-left: 13px;
-  margin-top: 3px;
+  padding-left: 12px;
+  margin-top: 0;
 }
 
 .povio-canvas-connections {
   display: grid;
-  gap: 8px;
-  padding: 18px 16px;
+  gap: 6px;
+  padding: 12px;
 }
 .povio-canvas-connections label {
   display: grid;
-  gap: 12px;
-  font-size: 11px;
+  gap: 6px;
+  font-size: 10px;
   font-weight: 600;
 }
 .povio-canvas-connections button {
   text-align: left;
   background: #f6f6f8;
-  font-size: 11px;
+  font-size: 10px;
   overflow-wrap: anywhere;
 }
 .povio-canvas-connections select {
@@ -292,29 +292,51 @@
 }
 .povio-canvas-node {
   position: absolute;
-  box-shadow: 0 2px 8px #24202d16;
+}
+.povio-canvas-node > :is(.povio-canvas-frame, .povio-canvas-unresolved) {
+  box-shadow: 0 1px 4px #24202d16;
   background: #fff;
 }
-.povio-canvas-node.is-selected {
-  outline: 3px solid var(--canvas-accent);
-  outline-offset: 2px;
+.povio-canvas-node.is-selected > :is(.povio-canvas-frame, .povio-canvas-unresolved) {
+  outline: calc(2px / var(--canvas-zoom, 1)) solid var(--canvas-accent);
+  outline-offset: 0;
 }
+/* The header keeps its 48px slot in world space; its label divides by the zoom to stay 10px on screen. */
 .povio-canvas-node-header {
   position: relative;
   display: flex;
-  align-items: center;
-  gap: 16px;
+  align-items: flex-end;
+  gap: calc(8px / var(--canvas-zoom, 1));
   height: 48px;
-  padding: 6px 12px;
-  background: #fafafa;
-  border-bottom: 1px solid #eee;
+  padding: 0 0 calc(4px / var(--canvas-zoom, 1));
+  color: #77717e;
   cursor: move;
-  font-size: 16px;
+  font-size: calc(10px / var(--canvas-zoom, 1));
+  line-height: 1.2;
+  white-space: nowrap;
+}
+.povio-canvas-node-header > strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
+.povio-canvas-node.is-selected .povio-canvas-node-header > strong {
+  color: var(--canvas-accent);
 }
 .povio-canvas-node-header > span {
-  color: #76727f;
+  color: #9a96a3;
   margin-left: auto;
 }
+.povio-app-canvas .povio-canvas-node-header > button {
+  padding: 0 calc(2px / var(--canvas-zoom, 1));
+  border-radius: calc(3px / var(--canvas-zoom, 1));
+  background: transparent;
+  color: inherit;
+  line-height: inherit;
+}
+.povio-app-canvas .povio-canvas-node-header > button:hover {
+  background: #e3e1e8;
+}
 .povio-canvas-frame {
   display: block;
   border: 0;
@@ -352,61 +374,63 @@
 .povio-canvas-camera,
 .povio-canvas-tool-dock {
   position: absolute;
-  bottom: 16px;
+  bottom: 12px;
   display: flex;
   align-items: center;
-  gap: 3px;
-  padding: 5px;
+  gap: 2px;
+  padding: 4px;
   background: #fff;
   border: 1px solid #e3e1e8;
-  border-radius: 10px;
+  border-radius: 8px;
   cursor: default;
   box-shadow: 0 4px 16px #24202d12;
   z-index: 2;
 }
 .povio-canvas-camera {
-  right: 16px;
+  right: 12px;
 }
 .povio-canvas-tool-dock {
-  left: 16px;
+  left: 12px;
 }
+.povio-canvas-camera button,
 .povio-canvas-tool-dock button {
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-size: 11px;
+  gap: 4px;
+  min-height: 24px;
+  font-size: 10px;
 }
 .povio-canvas-dock-divider {
   width: 1px;
-  height: 20px;
+  height: 16px;
   background: var(--canvas-border);
-  margin: 0 3px;
+  margin: 0 2px;
 }
 .povio-canvas-camera output {
-  min-width: 44px;
+  min-width: 36px;
   text-align: center;
-  font-size: 11px;
+  font-size: 10px;
   font-variant-numeric: tabular-nums;
 }
 .povio-canvas-unresolved {
-  padding: 24px;
+  padding: 12px;
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 8px;
 }
 .povio-canvas-unresolved label {
   display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 .povio-canvas-page-note {
   background: #fff4d6;
   color: #6b501a;
-  padding: 10px;
-  font-size: 14px;
+  padding: 4px 8px;
+  font-size: 10px;
 }
 .povio-canvas-notice {
-  padding: 8px 12px;
+  padding: 4px 12px;
   display: flex;
   justify-content: space-between;
   background: #fff4d6;
@@ -523,7 +547,7 @@
   .povio-canvas-camera .povio-canvas-breakpoint select {
     width: 135px;
     padding-inline: 3px;
-    font-size: 11px;
+    font-size: 10px;
   }
   .povio-canvas-camera .povio-canvas-breakpoint > svg {
     display: none;
@@ -534,18 +558,18 @@
 }
 
 .povio-app-canvas .povio-canvas-inspector {
-  flex: 0 0 320px;
-  width: 320px;
+  flex: 0 0 272px;
+  width: 272px;
   border-radius: 0;
   border: 0;
   border-left: 1px solid var(--canvas-border);
   z-index: 4;
 }
 .povio-canvas-inspect-hint {
-  margin: 12px;
+  margin: 8px 12px;
   color: #77717e;
-  font-size: 11px;
-  line-height: 1.6;
+  font-size: 10px;
+  line-height: 16px;
 }
 .povio-canvas-inspection-overlay {
   position: absolute;
@@ -569,7 +593,7 @@
     top: 0;
     bottom: 76px;
     height: auto;
-    width: min(320px, 80%);
+    width: min(272px, 80%);
     box-shadow: -6px 0 24px #24202d16;
   }
 }
@@ -578,7 +602,7 @@
     top: auto;
     bottom: 124px;
     max-height: 48%;
-    width: min(300px, 78%);
+    width: min(272px, 78%);
     border: 1px solid var(--canvas-border);
     border-radius: 8px;
   }
@@ -587,26 +611,28 @@
 .povio-canvas-catalog > .povio-canvas-brand {
   min-width: 0;
   margin: 0;
-  padding: 17px 16px 4px;
-  gap: 8px;
+  padding: 12px 12px 4px;
+  gap: 6px;
 }
 .povio-canvas-page-count {
   color: #76727f;
-  font-size: 11px;
+  font-size: 10px;
+  line-height: 14px;
   background: #f1f1f4;
-  padding: 1px 6px;
+  padding: 0 4px;
   border-radius: 4px;
 }
 .povio-canvas-sidebar-actions {
   display: flex;
   align-items: center;
-  padding: 10px 8px;
+  padding: 4px 8px;
+  min-height: 40px;
   gap: 2px;
   border-top: 1px solid var(--canvas-border);
 }
 .povio-canvas-sidebar-actions button {
   display: inline-flex;
-  padding: 7px;
+  padding: 5px;
 }
 .povio-canvas-sidebar-actions .povio-canvas-ready {
   display: flex;
@@ -625,15 +651,17 @@
 }
 .povio-canvas-layers {
   border-top: 1px solid var(--canvas-border);
-  margin-top: 12px;
-  padding-top: 8px;
+  margin-top: 8px;
+  padding-top: 4px;
 }
 .povio-canvas-layers > header {
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 6px 8px 12px;
-  font-size: 11px;
+  gap: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  font-size: 10px;
+  font-weight: 600;
 }
 .povio-canvas-layers > header > span {
   color: #77717e;
@@ -647,7 +675,7 @@
   display: flex;
   align-items: center;
   min-width: 0;
-  min-height: 28px;
+  min-height: 24px;
   border-radius: 4px;
 }
 [role="treeitem"][aria-selected="true"] > .povio-canvas-layer-row {
@@ -655,15 +683,15 @@
   color: #6540c2;
 }
 .povio-canvas-layer-row .povio-canvas-layer-toggle {
-  flex: 0 0 18px;
-  width: 18px;
-  padding: 3px;
+  flex: 0 0 16px;
+  width: 16px;
+  padding: 2px;
   display: grid;
   place-items: center;
   background: transparent;
 }
 .povio-canvas-layer-spacer {
-  flex: 0 0 18px;
+  flex: 0 0 16px;
 }
 .povio-canvas-layer-row .povio-canvas-layer-select {
   display: flex;
@@ -672,7 +700,7 @@
   flex: 1;
   min-width: 0;
   text-align: left;
-  padding: 5px 3px;
+  padding: 4px 2px;
   background: transparent;
   font-size: 10px;
 }
@@ -687,13 +715,13 @@
   white-space: nowrap;
 }
 .povio-canvas-layers > p {
-  padding: 8px;
+  padding: 4px 8px;
   color: #77717e;
-  font-size: 11px;
+  font-size: 10px;
 }
 .povio-canvas-more-layers {
-  margin: 8px;
-  font-size: 11px;
+  margin: 4px 8px;
+  font-size: 10px;
 }
 @media (max-width: 900px) {
   .povio-canvas-viewport > .povio-canvas-mobile-tools {
@@ -738,3 +766,67 @@
   height: 100dvh;
   background: #eeeef0;
 }
+
+/* Chrome icons follow the 10px type: 12px beside a label, 14px in icon-only controls. */
+.povio-app-canvas svg.lucide:not(.povio-canvas-world *, .studio-inspector-canvas *) {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+.povio-app-canvas
+  :is(
+    .povio-canvas-file-action,
+    .povio-canvas-theme-toggle,
+    .povio-canvas-configure,
+    .povio-canvas-mode-switch > button,
+    .povio-canvas-tool-dock > button,
+    .povio-canvas-panel-close,
+    .povio-canvas-mobile-tools > button
+  )
+  > svg.lucide {
+  width: 14px;
+  height: 14px;
+}
+
+/* Pages | Components: what the canvas shows, as underlined tabs like the configurator's sub-tabs. */
+.povio-canvas-catalog > .povio-canvas-content-switch {
+  gap: 12px;
+  margin: 0 12px 8px;
+  padding: 8px 0 0;
+  border-bottom: 1px solid var(--canvas-border);
+}
+.povio-app-canvas .povio-canvas-content-switch > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: -1px;
+  padding: 4px 0 6px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: #77717e;
+  font-weight: 500;
+}
+.povio-app-canvas .povio-canvas-content-switch > button:hover {
+  background: transparent;
+  color: #242428;
+}
+.povio-app-canvas .povio-canvas-content-switch > button[aria-pressed="true"] {
+  border-bottom-color: #242428;
+  background: transparent;
+  color: #242428;
+  font-weight: 600;
+}
+.povio-canvas-content-switch .povio-canvas-page-count {
+  font-weight: 500;
+}
+/* A Components artboard's own document: one gallery section on the page background. */
+.povio-canvas-components-frame.studio-sample {
+  padding: 32px;
+  border-radius: 0;
+}
+/* The footer stays at the sidebar's bottom when the list is short. */
+.povio-canvas-catalog > .povio-canvas-sidebar-actions {
+  margin-top: auto;
+}