@povio/ui 5.0.0-rc.13 → 5.0.0-rc.15

package/dist/styles/configurator.css

@@ -94,11 +94,11 @@
   background: #fff;
   overflow: hidden;
 }
-/* With the components shown by the host (the App Canvas), the window is only the editor: narrow and one column. */
-.studio-modal[data-components-hosted] {
+/* An editor-only window (the App Canvas, or a host that asks for it) is narrow and one column. */
+.studio-modal[data-editor-only] {
   width: min(360px, calc(100vw - 48px));
 }
-.studio-modal[data-components-hosted] .studio-dialog {
+.studio-modal[data-editor-only] .studio-dialog {
   grid-template-columns: minmax(0, 1fr);
 }
 /*
@@ -1567,9 +1567,9 @@
   overflow-wrap: anywhere;
 }
 
-/* Shades generator for base palette groups; its group gets top padding so the panel clears the header row. */
+/* Shades generator for base palette groups: rows of the same table, above the palette's own token rows. */
 .studio-token-group > div:has(> .studio-shades) {
-  padding-top: 10px;
+  padding-top: 0;
 }
 .studio-palette-actions {
   display: flex;
@@ -1595,63 +1595,279 @@
   font-weight: 550;
   text-transform: none;
 }
+/* Shades generator: table rows divided by the same hairlines as the tokens, in the 10px / 24px control language. */
 .studio-shades {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin: 0 10px 10px;
-  padding: 8px;
-  border: 1px solid #e3e3e3;
-  border-radius: 8px;
-  background: #fbfbfb;
+  display: grid;
+}
+.studio-shades > * {
+  border-bottom: 1px solid var(--studio-cell-line);
 }
-.studio-shades-input {
+.studio-shades-row {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
+  min-height: 32px;
+  padding: 4px var(--studio-editor-pad);
+  box-sizing: border-box;
+}
+.studio-shades > .studio-error {
+  margin: 0;
+  padding: 4px var(--studio-editor-pad);
 }
-.studio-shades-input label {
+.studio-shades-label {
+  flex-shrink: 0;
+  color: #464646;
   font-size: 10px;
   font-weight: 550;
   white-space: nowrap;
 }
-.studio-shades-input .studio-token-input {
+.studio-shades-field {
+  display: flex;
+  flex: 1;
   align-items: center;
   gap: 4px;
-  max-width: 140px;
-  padding-left: 8px;
+  min-width: 0;
+  height: 24px;
+  padding: 0 6px 0 4px;
   border: 1px solid #e5e5e5;
   border-radius: 5px;
   background: #fff;
   color: #939393;
+  font-size: 10px;
 }
-.studio-shades-input .studio-token-input input {
-  width: 100%;
+.studio-shades-field:focus-within {
+  border-color: #8e8e8e;
+}
+.studio-shades-field input[type="color"] {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  cursor: pointer;
+}
+.studio-shades-field input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+.studio-shades-field input[type="color"]::-webkit-color-swatch {
+  border: 1px solid #0002;
+  border-radius: 3px;
+}
+.studio-shades-field input[type="color"]::-moz-color-swatch {
+  border: 1px solid #0002;
+  border-radius: 3px;
+}
+.studio-shades-field input:not([type="color"]) {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
   border: 0;
-  padding: 6px 6px 6px 0;
   outline: none;
+  background: transparent;
+  color: #393939;
   font-family: ui-monospace, monospace;
+  font-size: 10px;
   text-transform: uppercase;
 }
-/* Compact actions share the base color row to save vertical space. */
-.studio-shades-actions {
+.studio-shades .studio-shades-apply {
+  flex-shrink: 0;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 5px;
+  font-size: 10px;
+}
+.studio-shades .studio-shades-apply:disabled {
+  opacity: 0.4;
+}
+.studio-shades-bar {
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 28px;
+  padding: 0 calc(var(--studio-editor-pad) - 4px) 0 var(--studio-editor-pad);
+}
+.studio-shades-advanced-toggle,
+.studio-shades-reset {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 20px;
+  padding: 0 4px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #707070;
+  font-size: 10px;
+  cursor: pointer;
+}
+.studio-shades-advanced-toggle {
+  margin-left: -4px;
+}
+.studio-shades-advanced-toggle:hover,
+.studio-shades-reset:hover {
+  background: #efefef;
+  color: #393939;
+}
+.studio-shades-advanced-toggle > svg {
+  transition: rotate 120ms;
+}
+.studio-shades-advanced-toggle[aria-expanded="true"] > svg {
+  rotate: 90deg;
+}
+.studio-shades-advanced {
+  display: grid;
   gap: 6px;
-  margin-left: auto;
+  padding: 8px var(--studio-editor-pad) 10px;
 }
-.studio-shades-actions button {
-  padding: 4px 8px;
+/* Palette curve editor: a vector-style curve with draggable ends and handles, and shades that pin on click. */
+.studio-curve-editor {
+  display: block;
+  width: 100%;
+  height: auto;
+  border: 1px solid #ececec;
+  border-radius: 5px;
+  background: #f7f7f7;
+  touch-action: none;
+  user-select: none;
+}
+.studio-curve-editor.is-dragging {
+  cursor: grabbing;
+}
+.studio-curve-range {
+  fill: #fff;
+  stroke: #e6e6e6;
+}
+.studio-curve-grid,
+.studio-curve-step {
+  stroke: #efefef;
+}
+.studio-curve-step {
+  stroke-dasharray: 1 3;
+}
+.studio-curve-base-mark {
+  stroke: #9a9a9a;
+  stroke-dasharray: 2 2;
+}
+.studio-curve-path {
+  fill: none;
+  stroke: #393939;
+  stroke-width: 1.5;
+}
+.studio-curve-handle-line {
+  stroke: #7655d7;
+  stroke-width: 1;
+}
+.studio-curve-handle,
+.studio-curve-end {
+  fill: #fff;
+  stroke: #7655d7;
+  stroke-width: 1.5;
+  cursor: grab;
+  outline: none;
+}
+.studio-curve-end {
+  cursor: ns-resize;
+}
+.studio-curve-shade {
+  stroke: #393939;
+  stroke-width: 0.75;
+  cursor: pointer;
+  outline: none;
+}
+.studio-curve-shade.is-base {
+  stroke-width: 1.25;
+}
+.studio-curve-shade.is-pinned {
+  stroke: #7655d7;
+  stroke-width: 2;
+}
+.studio-curve-editor :is(.studio-curve-handle, .studio-curve-end, .studio-curve-shade):focus-visible {
+  stroke: #393939;
+  stroke-width: 2.5;
+}
+.studio-curve-label {
+  fill: #707070;
+  font-size: 10px;
+  pointer-events: none;
+}
+.studio-shades-hint {
+  margin: 0;
+  color: #9a9a9a;
+  font-size: 10px;
+}
+.studio-shades-heading {
+  display: block;
+  margin: 2px 0 4px;
+  color: #9a9a9a;
+  font-size: 10px;
+}
+.studio-slider-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+}
+/* Slider field: the whole 24px field is the slider, filled from its origin to the value. */
+.studio-slider-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  height: 24px;
+  padding: 0 8px;
+  overflow: hidden;
   border-radius: 5px;
+  background: #f0f0f0;
   font-size: 10px;
-  line-height: 1.3;
+  cursor: ew-resize;
 }
-.studio-shades-actions button:not(.studio-primary) {
-  border: 1px solid #e7e7e7;
-  background: #fff;
-  color: #717171;
+.studio-slider-field::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--from);
+  width: calc(var(--to) - var(--from));
+  background: #dcdcdc;
+  pointer-events: none;
 }
-.studio-shades-actions .studio-primary:disabled {
-  opacity: 0.5;
+.studio-slider-field:hover {
+  background: #e9e9e9;
+}
+.studio-slider-field:has(input:focus-visible) {
+  outline: 1px solid #393939;
+  outline-offset: -1px;
+}
+.studio-slider-field:has(input:disabled) {
+  opacity: 0.45;
+  cursor: default;
+}
+.studio-slider-field > span,
+.studio-slider-field > output {
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  pointer-events: none;
+}
+.studio-slider-field > span {
+  color: #555;
+}
+.studio-slider-field > output {
+  flex-shrink: 0;
+  color: #393939;
+  font-variant-numeric: tabular-nums;
+}
+.studio-slider-field > input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
 }
 /* Global rounding stepper at the top of the Radius section. */
 .studio-rounding {
@@ -3692,3 +3908,297 @@
   outline: 2px solid #555;
   outline-offset: 1px;
 }
+
+/* Inspector pieces shared by the App Canvas and the live-page inspector. */
+.povio-canvas-inspect-hint {
+  margin: 8px 12px;
+  color: #77717e;
+  font-size: 10px;
+  line-height: 16px;
+}
+.povio-canvas-auto-spacing .studio-measure-label {
+  display: none;
+}
+.povio-canvas-spacing-value {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  border-radius: 3px;
+  background: #24202de6;
+  color: white;
+  padding: 1px 4px;
+  white-space: nowrap;
+  font:
+    10px/1.3 "Inter Variable",
+    Inter,
+    sans-serif;
+  pointer-events: none;
+}
+
+/*
+ * The live-page inspector: a sidebar on the window's right edge. The page gives up that width while inspecting, so the
+ * sidebar sits beside it, like the App Canvas inspector, rather than covering it.
+ */
+.studio-inspector-panel.studio-page-inspector {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  width: 272px;
+  height: auto;
+  border: 0;
+  border-left: 1px solid #e8e8eb;
+  border-radius: 0;
+  box-shadow: none;
+}
+html.studio-page-inspecting body {
+  margin-right: 272px !important;
+}
+.studio-page-inspection {
+  position: fixed;
+  inset: 0;
+  z-index: 998;
+  overflow: visible;
+  pointer-events: none;
+}
+/* Crosshair over the page while inspecting; the inspector, configurator and host tools keep their own cursors. */
+.studio-page-inspecting body,
+.studio-page-inspecting
+  body
+  *:not([data-povio-inspector-ignore], [data-povio-inspector-ignore] *, .studio-overlay, .studio-overlay *) {
+  cursor: crosshair !important;
+}
+/* Cursor inherits, so each tool resets it at its root; its own controls then keep their usual cursors. */
+.studio-page-inspecting :is([data-povio-inspector-ignore], .studio-overlay) {
+  cursor: default;
+}
+
+/* Fontsource browsing stays compact even when the preview theme changes. */
+.studio-fontsource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-top: 8px;
+}
+.studio-fontsource-notice {
+  color: #777;
+  font-size: 10px;
+}
+.studio-fontsource-popover {
+  width: min(340px, calc(100vw - 24px));
+  max-height: min(680px, calc(100dvh - 24px));
+  overflow: auto;
+  padding: 12px;
+  border: 1px solid #e5e5e5;
+  border-radius: 10px;
+  background: #fff;
+  color: #303036;
+  box-shadow: 0 8px 32px #24202d26;
+  font:
+    11px/1.4 Inter,
+    system-ui,
+    sans-serif;
+  z-index: 10020;
+}
+.studio-fontsource-popover * {
+  box-sizing: border-box;
+}
+.studio-fontsource-popover [role="dialog"] {
+  outline: none;
+}
+.studio-fontsource-popover header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+.studio-fontsource-popover h2 {
+  margin: 0;
+  font-size: 12px;
+  font-weight: 600;
+}
+.studio-fontsource-popover button,
+.studio-fontsource-popover input,
+.studio-fontsource-popover select {
+  font: inherit;
+  color: inherit;
+}
+.studio-fontsource-popover button {
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 4px 7px;
+  background: #fff;
+  cursor: pointer;
+}
+.studio-fontsource-popover button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.studio-fontsource-popover header button {
+  display: grid;
+  place-items: center;
+  padding: 3px;
+  border: 0;
+}
+.studio-fontsource-popover input:not([type="checkbox"]),
+.studio-fontsource-popover select {
+  min-width: 0;
+  width: 100%;
+  border: 1px solid #e5e5e5;
+  border-radius: 5px;
+  padding: 6px 7px;
+  background: #fafafa;
+}
+.studio-fontsource-popover :focus-visible {
+  outline: 2px solid #7655d7;
+  outline-offset: 1px;
+}
+.studio-fontsource-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.studio-fontsource-search svg {
+  position: absolute;
+  left: 8px;
+  color: #888;
+}
+.studio-fontsource-popover .studio-fontsource-search input {
+  padding-left: 27px;
+}
+.studio-fontsource-filters {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-filters select {
+  flex: 1;
+}
+.studio-fontsource-filters label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap;
+}
+.studio-fontsource-filters input {
+  margin: 0;
+  accent-color: #7655d7;
+}
+.studio-fontsource-count {
+  display: block;
+  margin: 8px 0 3px;
+  font-size: 10px;
+  color: #888;
+}
+.studio-fontsource-list {
+  display: grid;
+  gap: 2px;
+  max-height: 180px;
+  overflow: auto;
+  padding: 3px;
+  margin-inline: -3px;
+}
+.studio-fontsource-list button {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  text-align: left;
+  border-color: transparent;
+  padding: 5px 7px;
+}
+.studio-fontsource-list small {
+  grid-column: 1;
+  color: #888;
+  font-size: 9px;
+}
+.studio-fontsource-list svg {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+}
+.studio-fontsource-list button:hover {
+  background: #f6f4fa;
+}
+.studio-fontsource-list button[aria-pressed="true"] {
+  color: #6540c2;
+  background: #eee8ff;
+}
+.studio-fontsource-preview {
+  border-top: 1px solid #eee;
+  margin-top: 10px;
+  padding-top: 10px;
+}
+.studio-fontsource-preview > strong {
+  display: block;
+  margin-bottom: 6px;
+}
+.studio-fontsource-sample {
+  margin: 10px 0;
+  font-size: 26px;
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+}
+.studio-fontsource-preview > [role="status"] {
+  color: #888;
+  font-size: 10px;
+}
+.studio-fontsource-role {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 8px 0;
+}
+.studio-fontsource-role select {
+  flex: 1;
+}
+.studio-fontsource-popover .studio-primary {
+  width: 100%;
+  background: #7655d7;
+  border-color: #7655d7;
+  color: white;
+}
+.studio-fontsource-help {
+  margin: 10px 0 0;
+  color: #888;
+  font-size: 10px;
+  line-height: 1.5;
+}
+.studio-fontsource-popover [role="alert"] {
+  color: #ad2937;
+}
+.studio-fontsource-popover [role="alert"] button {
+  margin-left: 8px;
+}
+.studio-fontsource-popover .studio-fontsource-more {
+  width: 100%;
+  margin-top: 5px;
+  font-size: 10px;
+}
+
+/* The Semantic palette's light / dark toggle: the App Canvas dock's single sun / moon button, in the sub-tab row. */
+.studio-subtabs-bar .studio-theme-toggle {
+  display: grid;
+  flex-shrink: 0;
+  place-items: center;
+  /* No taller than the tab labels, so the row (and the active tab's underline) keeps its height. */
+  width: 22px;
+  height: 18px;
+  margin: 0 0 2px auto;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #45454d;
+  cursor: pointer;
+}
+.studio-subtabs-bar .studio-theme-toggle:hover {
+  background: #f1f1f4;
+}
+.studio-subtabs-bar .studio-theme-toggle:focus-visible {
+  outline: 2px solid #7655d7;
+  outline-offset: -2px;
+}
+.studio-subtabs-bar .studio-theme-toggle + .studio-toggle-all {
+  margin-left: 4px;
+}

package/dist/tanstack/date-picker.js

@@ -1,2 +1,2 @@
-import { t as DatePicker } from "../DatePicker-xDEqzNJv.js";
+import { t as DatePicker } from "../DatePicker-CAzuZRmd.js";
 export { DatePicker };

package/dist/tanstack/date-range-picker.js

@@ -1,2 +1,2 @@
-import { t as DateRangePicker } from "../DateRangePicker-DxuVhRaf.js";
+import { t as DateRangePicker } from "../DateRangePicker-X3mBhfmL.js";
 export { DateRangePicker };

package/dist/tanstack/date-time-picker.js

@@ -1,2 +1,2 @@
-import { t as DateTimePicker } from "../DateTimePicker-4N1Pka07.js";
+import { t as DateTimePicker } from "../DateTimePicker-EtmGtoRe.js";
 export { DateTimePicker };

package/dist/tanstack/form.js

@@ -1,3 +1,3 @@
 import { i as useFormValue, n as useForm, r as useFormState } from "../form.binding-CG1RPv6o.js";
-import { r as Form, t as useFormAutosave } from "../useFormAutosave-pmh35PXp.js";
+import { r as Form, t as useFormAutosave } from "../useFormAutosave-CxqZAJAB.js";
 export { Form, useForm, useFormAutosave, useFormState, useFormValue };

package/dist/tanstack/inputs.js

@@ -1,3 +1,3 @@
 import { t as dynamicInputs } from "../dynamicInputs-CRMWIpHA.js";
-import { t as Inputs } from "../Inputs-D1aE_J9f.js";
+import { t as Inputs } from "../Inputs-Bd2nRNqk.js";
 export { Inputs, dynamicInputs };

package/dist/tanstack/number-range-input.js

@@ -1,2 +1,2 @@
-import { t as NumberRangeInput } from "../NumberRangeInput-Bzfe-RlV.js";
+import { t as NumberRangeInput } from "../NumberRangeInput-TkPXiWV3.js";
 export { NumberRangeInput };

package/dist/tanstack/rich-text-editor.js

@@ -1,2 +1,2 @@
-import { t as RichTextEditor } from "../RichTextEditor-Bd7F5D8f.js";
+import { t as RichTextEditor } from "../RichTextEditor-DiaPcBUM.js";
 export { RichTextEditor };

package/dist/tanstack/select.js

@@ -1,2 +1,2 @@
-import { t as Select } from "../Select-CgIhoWgk.js";
+import { t as Select } from "../Select-tNlFSbAC.js";
 export { Select };

package/dist/tanstack/table.js

@@ -1,3 +1,3 @@
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-piX1SWvN.js";
-import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-CNJ_ZvIN.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "../Table-CgG02oHQ.js";
+import { a as PaginatedTable, i as dynamicColumns, n as useSorting, o as InfiniteTable, r as usePagination, s as ColumnConfigModal, t as useTableColumnConfig } from "../useTableColumnConfig-BnbKElno.js";
 export { CellText, ColumnConfigModal, HeaderText, InfiniteTable, PaginatedTable, Table, dynamicColumns, usePagination, useSorting, useTableColumnConfig, useTableNav };

package/dist/tanstack/text-area.js

@@ -1,2 +1,2 @@
-import { t as TextArea } from "../TextArea-uPffb457.js";
+import { t as TextArea } from "../TextArea-DuvFUjts.js";
 export { TextArea };

package/dist/tanstack/time-picker.js

@@ -1,2 +1,2 @@
-import { t as TimePicker } from "../TimePicker-DN-i98z5.js";
+import { t as TimePicker } from "../TimePicker-CBkiE-Yq.js";
 export { TimePicker };