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

package/dist/index.js

@@ -2,7 +2,7 @@ import { t as logger } from "./logger-CqZjM-sn.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -93,9 +93,9 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
 import { t as Toast } from "./Toast-DtG3pA61.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
 import { useToast } from "./components/use-toast.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.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-6zn3zKl3.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 { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/rhf/inputs.d.ts

@@ -1,4 +1,4 @@
 import { n as InputVariantProps } from "../input.cva-CQPV5gW7.js";
 import { s as OmitDiscriminatedUnion } from "../common-UBFya8WY.js";
-import { Ft as InputsProps, Nt as InputDef, Pt as Inputs, a as DynamicInputsObjectSchema, n as dynamicInputs, t as DynamicInputsOptions } from "../dynamicInputs-DdcsSoYu.js";
+import { Ft as InputsProps, Nt as InputDef, Pt as Inputs, a as DynamicInputsObjectSchema, n as dynamicInputs, t as DynamicInputsOptions } from "../dynamicInputs-R5i7AT_C.js";
 export { type DynamicInputsObjectSchema, type DynamicInputsOptions, type InputDef, type InputVariantProps, Inputs, type InputsProps, type OmitDiscriminatedUnion, dynamicInputs };

package/dist/rhf.d.ts

@@ -54,7 +54,7 @@ import { n as ToastParams, r as useToast, t as ToastOptions } from "./useToast-y
 import { n as BadgeProps, t as Badge } from "./Badge-CBNpj823.js";
 import { i as tagDefinition, n as TagProps, r as TagVariantProps, t as Tag } from "./Tag-AHfV_XSf.js";
 import { i as AccordionProps, n as AccordionItem, r as AccordionItemProps, t as Accordion } from "./Accordion-Cup5eRZz.js";
-import { t as UIConfig } from "./uiConfig.context-BqKWd_MO.js";
+import { t as UIConfig } from "./uiConfig.context-BksnNQyw.js";
 import { t as Confirmation } from "./confirmation.context-BOeEVczb.js";
 import { r as DatePickerProps } from "./DatePicker-1LJ2LqST.js";
 import { r as DateRangePickerProps } from "./DateRangePicker-Dfptit_Z.js";
@@ -93,7 +93,7 @@ import { n as Input, t as ControlledInputProps } from "./input-CqNMORk8.js";
 import { r as TimePickerProps } from "./TimePicker-Dex9aU7D.js";
 import { n as TimePicker, t as ControlledTimePickerProps } from "./time-picker-DhnDKh97.js";
 import { n as Switch, t as ControlledSwitchProps } from "./switch-C--iWnY8.js";
-import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-DdcsSoYu.js";
+import { $ as LabelConfig, A as createKeyInteractionsHandler, At as breadcrumbSegmentDefinition, B as useDeepCompareLayoutEffect, C as useLongPressRepeat, Ct as BreadcrumbIconVariantProps, D as KeyInteractionGroup, Dt as breadcrumbChevronDefinition, E as KeyInteractionCallback, Et as BreadcrumbsVariantProps, F as useFormAutosave, Ft as InputsProps, G as useAutosave, H as useDebounceCallback, I as UseFormProps, J as popoverDefinition, K as statusIconDefinition, L as UseFormResolverProps, M as useKeyInteractions, Mt as Form, N as useIntersectionObserver, Nt as InputDef, O as KeyInteractions, Ot as breadcrumbIconDefinition, P as UseFormAutosaveProps, Pt as Inputs, Q as LabelBaseProps, R as useForm, S as useScrollableListBox, St as BreadcrumbChevronVariantProps, T as KeyInteractionAction, Tt as BreadcrumbSegmentVariantProps, U as useBreakpoint, V as useDeepCompareMemo, W as UseAutosaveProps, X as selectInputTagsContentWrapperDefinition, Y as selectListBoxItemDefinition, Z as selectPopoverDefinition, _ as ObjectUtils, _t as accordionTriggerDefinition, a as DynamicInputsObjectSchema, at as fileUploadDropZoneDefinition, b as ArrayUtils, bt as TooltipWrapperTriggerVariantProps, ct as accordionChevronDefinition, dt as accordionHeadingSubtitleDefinition, et as labelDefinition, ft as accordionHeadingTitleDefinition, g as QueriesUtils, gt as accordionPanelDefinition, h as RoutingUtils, ht as accordionPanelContentDefinition, it as formFieldHeaderDefinition, j as getKeyInteractionAction, jt as breadcrumbsDefinition, k as UseKeyInteractionsResult, kt as breadcrumbItemDefinition, lt as accordionDefinition, m as ZodUtils, mt as accordionItemDefinition, n as dynamicInputs, nt as formFieldHelperDefinition, ot as datePickerInputContentRowDefinition, p as CloseIcon, pt as accordionIconDefinition, q as statusSeparatorDefinition, rt as formFieldErrorDefinition, st as AccordionVariantProps, t as DynamicInputsOptions, tt as textAreaWrapperDefinition, ut as accordionHeadingDefinition, v as isEqual, vt as MenuPopover, w as KeyInteraction, wt as BreadcrumbItemVariantProps, x as useStateAndRef, xt as tooltipWrapperTriggerDefinition, y as DomUtils, yt as MenuPopoverProps, z as useDeepCompareEffect } from "./dynamicInputs-R5i7AT_C.js";
 import { a as stepperDefinition, c as stepperNumberDefinition, d as stepperTitleDefinition, i as StepperVariantProps, l as stepperSeparatorDefinition, n as StepItem, o as stepperIconDefinition, r as StepperProps, s as stepperItemDefinition, t as Stepper, u as stepperSubtextDefinition } from "./Stepper-TATlHZhQ.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-1H_IxvyH.js";
 import { C as HeaderText, D as CellText, E as ColumnConfigModalProps, O as CellTextProps, S as tableRowDefinition, T as ColumnConfigModal, _ as tableCellTextDefinition, a as DynamicColumnsOptions, b as tableHeadRowDefinition, c as PaginatedTableProps, d as InfiniteTableProps, f as InfiniteTableWrapperProps, g as TableRowVariantProps, h as TableWrapperProps, i as usePagination, l as PaginatedTableWrapperProps, m as TableProps, n as useTableColumnConfig, o as dynamicColumns, p as Table, r as useSorting, s as PaginatedTable, t as useTableNav, u as InfiniteTable, v as tableDataDefinition, w as HeaderTextProps, x as tableHeaderTextDefinition, y as tableHeadDataDefinition } from "./useTableNav-Ckj5PBRk.js";

package/dist/rhf.js

@@ -2,7 +2,7 @@ import { t as logger } from "./logger-CqZjM-sn.js";
 import { t as DropdownMenu } from "./DropdownMenu-5jmtgLXd.js";
 import { n as MenuPopover, r as MenuItem } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { a as isEqual, i as useDeepCompareMemo, n as useDeepCompareEffect, o as ObjectUtils, r as useDeepCompareLayoutEffect, t as UIConfig } from "./uiConfig.context-BS3r_kTS.js";
-import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-D5oQ-QvA.js";
+import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-piX1SWvN.js";
 import { a as checkboxDefinition, i as checkboxContentWrapperDefinition, o as checkboxGroupLabelDefinition, r as checkboxContentRowDefinition, s as checkboxIconDefinition } from "./CheckboxCheckmark-FwKjPVbV.js";
 import { n as selectListBoxItemDefinition, r as selectInputTagsContentWrapperDefinition, t as selectPopoverDefinition } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as X } from "./x-B6vfz8Ps.js";
@@ -93,9 +93,9 @@ import { a as toastDefinition, n as statusIconDefinition$1, r as statusSeparator
 import { t as Toast } from "./Toast-DtG3pA61.js";
 import { n as ToastProvider, t as ToastContainer } from "./ToastContainer-qgpzMFD4.js";
 import { useToast } from "./components/use-toast.js";
-import { i as CellText, n as useTableNav, r as HeaderText, t as Table } from "./Table-BN2_J_Ne.js";
+import { a as tableHeaderTextDefinition, i as tableHeadRowDefinition, n as tableDataDefinition, o as tableRowDefinition, r as tableHeadDataDefinition, t as tableCellTextDefinition } from "./table.cva-DlMT-zLD.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.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-6zn3zKl3.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 { t as linkDefinition } from "./link.cva-DMTHZiJG.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";

package/dist/styles/app-canvas.css

@@ -10,7 +10,8 @@
   background: #ececee;
   color: #242428;
   font:
-    10px/16px Inter,
+    10px/16px "Inter Variable",
+    Inter,
     system-ui,
     sans-serif;
   isolation: isolate;
@@ -18,12 +19,12 @@
 .povio-app-canvas * {
   box-sizing: border-box;
 }
-.povio-app-canvas button,
-.povio-app-canvas select,
-.povio-app-canvas input {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)) {
   font: inherit;
 }
-.povio-app-canvas button {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)) {
   cursor: pointer;
   background: #fff;
   color: #45454d;
@@ -31,25 +32,25 @@
   border-radius: 5px;
   padding: 4px 6px;
 }
-.povio-app-canvas button:hover {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):hover {
   background: #f1f1f4;
 }
-.povio-app-canvas button:disabled {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):disabled {
   opacity: 0.45;
   cursor: default;
 }
-.povio-app-canvas button:focus-visible,
-.povio-app-canvas input:focus-visible,
-.povio-app-canvas select:focus-visible {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *)):focus-visible,
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)):focus-visible,
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)):focus-visible {
   outline: 2px solid var(--canvas-accent);
   outline-offset: 2px;
 }
-.povio-app-canvas button[aria-pressed="true"] {
+.povio-app-canvas button:not(:where(.povio-canvas-workspace-select *))[aria-pressed="true"] {
   background: #eee8ff;
   color: #6540c2;
 }
-.povio-app-canvas input,
-.povio-app-canvas select {
+.povio-app-canvas input:not(:where(.povio-canvas-workspace-select *)),
+.povio-app-canvas select:not(:where(.povio-canvas-workspace-select *)) {
   border: 1px solid var(--canvas-border);
   border-radius: 5px;
   padding: 4px 6px;
@@ -180,7 +181,8 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  margin: 0 8px 8px;
+  /* The page list adds 4px above its first row, so this keeps an 8px gap. */
+  margin: 8px 8px 4px;
   padding: 0 8px;
   background: #f6f6f8;
   color: #88838e;
@@ -198,7 +200,7 @@
   overflow-y: auto;
   padding: 0 8px 8px;
 }
-.povio-canvas-page-list > button {
+.povio-canvas-page-entry > button {
   display: flex;
   align-items: flex-start;
   gap: 6px;
@@ -207,7 +209,7 @@
   margin-bottom: 1px;
   padding: 4px 8px;
 }
-.povio-canvas-page-list > button > svg {
+.povio-canvas-page-entry > button > svg {
   flex-shrink: 0;
   margin-top: 2px;
   color: #8d859b;
@@ -303,6 +305,8 @@
 }
 /* The header keeps its 48px slot in world space; its label divides by the zoom to stay 10px on screen. */
 .povio-canvas-node-header {
+  user-select: none;
+  -webkit-user-select: none;
   position: relative;
   display: flex;
   align-items: flex-end;
@@ -751,7 +755,8 @@
   padding: 1px 4px;
   white-space: nowrap;
   font:
-    10px/1.3 Inter,
+    10px/1.3 "Inter Variable",
+    Inter,
     sans-serif;
   pointer-events: none;
 }
@@ -791,7 +796,7 @@
 /* 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;
+  margin: 0 8px;
   padding: 8px 0 0;
   border-bottom: 1px solid var(--canvas-border);
 }
@@ -830,3 +835,382 @@
 .povio-canvas-catalog > .povio-canvas-sidebar-actions {
   margin-top: auto;
 }
+
+.povio-canvas-workspaces {
+  margin: 0;
+  border: 0;
+  padding: 12px 10px;
+  border-bottom: 1px solid var(--canvas-border);
+  min-width: 0;
+}
+.povio-canvas-workspace-picker {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.povio-canvas-workspace-select {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+}
+.povio-canvas-workspace-picker > button {
+  display: grid;
+  place-items: center;
+  padding: 6px;
+}
+.povio-canvas-storage-status {
+  padding: 0 12px 12px;
+  font-size: 10px;
+  color: #77717e;
+  overflow-wrap: anywhere;
+}
+.povio-canvas-storage-status p {
+  color: #9a461b;
+  margin: 6px 0;
+}
+.povio-canvas-storage-status button {
+  font-size: 10px;
+  border-color: var(--canvas-border);
+}
+.povio-canvas-inline-layers {
+  position: relative;
+  margin: 4px 0 12px 12px;
+  border-left: 1px solid var(--canvas-border);
+}
+.povio-canvas-inline-layers .povio-canvas-layers {
+  margin: 0;
+  border: 0;
+  padding-top: 0;
+}
+.povio-canvas-inline-layers .povio-canvas-layers > header {
+  padding-right: 28px;
+}
+.povio-canvas-inline-layers .povio-canvas-layers-close {
+  position: absolute;
+  top: 3px;
+  right: 0;
+  padding: 3px;
+  display: grid;
+  place-items: center;
+}
+.povio-canvas-empty {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  transform: translate(-50%, -50%);
+  max-width: 320px;
+  color: #77717e;
+  text-align: center;
+  font-size: 13px;
+}
+
+.povio-canvas-save-theme {
+  margin-top: 6px;
+}
+.povio-canvas-save-theme > button {
+  width: 100%;
+}
+.povio-canvas-save-theme > p {
+  margin: 6px 0 0;
+  overflow-wrap: anywhere;
+}
+
+/* Keep the workspace input aligned with the compact canvas controls. */
+.povio-canvas-workspace-select .povio-canvas-workspace-input {
+  border: 1px solid var(--canvas-border);
+  border-radius: 6px;
+  min-height: 30px;
+  height: 30px;
+  font:
+    500 11px/1.4 "Inter Variable",
+    Inter,
+    system-ui,
+    sans-serif;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > div {
+  padding: 0 8px;
+  font: inherit;
+  min-width: 0;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input button {
+  color: inherit;
+  font: inherit;
+  background: transparent;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input[data-focused] {
+  border-color: var(--canvas-accent);
+}
+
+.povio-canvas-camera .povio-canvas-breakpoint {
+  flex: 0 1 155px;
+  width: 155px;
+  min-width: 120px;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > div {
+  gap: 6px;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > button {
+  flex: 0 0 24px;
+  width: 24px;
+  padding: 0 4px;
+  justify-content: center;
+}
+.povio-canvas-workspace-select .povio-canvas-workspace-input > button > span {
+  width: 16px;
+  height: 16px;
+}
+.povio-canvas-breakpoint .povio-canvas-workspace-input > div > div {
+  margin-left: 0;
+}
+.povio-canvas-camera .povio-canvas-breakpoint {
+  flex-shrink: 0;
+  width: 160px;
+}
+
+.povio-canvas-workspaces {
+  padding: 8px;
+}
+.povio-canvas-workspace-picker .povio-canvas-workspace-input {
+  height: 24px;
+  min-height: 24px;
+  font-size: 10px;
+}
+.povio-canvas-workspace-picker > button {
+  padding: 4px;
+}
+/* Even 8px around the picker; also leaves room for the 2px focus outline plus its 2px offset. */
+.povio-canvas-workspaces {
+  padding: 8px;
+}
+.povio-canvas-workspace-picker > button {
+  padding: 4px;
+}
+
+.povio-canvas-workspace-picker .povio-canvas-workspace-input {
+  height: 22px;
+  min-height: 22px;
+}
+
+.povio-canvas-workspace-popover {
+  width: 240px;
+  max-width: calc(100vw - 16px);
+  padding: 10px;
+  background: #fff;
+  color: #45454d;
+  border: 1px solid #e8e8eb;
+  border-radius: 8px;
+  box-shadow: 0 6px 24px #24202d20;
+  font:
+    11px/1.4 "Inter Variable",
+    Inter,
+    system-ui,
+    sans-serif;
+  z-index: 10000;
+}
+.povio-canvas-workspace-popover [role="dialog"],
+.povio-canvas-workspace-popover [role="alertdialog"] {
+  outline: none;
+}
+.povio-canvas-workspace-popover label {
+  display: grid;
+  gap: 5px;
+}
+.povio-canvas-workspace-popover input {
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 5px 7px;
+  border: 1px solid #e8e8eb;
+  border-radius: 5px;
+  background: #fafafa;
+  color: inherit;
+  font: inherit;
+}
+.povio-canvas-workspace-popover-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 8px;
+}
+.povio-canvas-workspace-popover button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid #e8e8eb;
+  border-radius: 5px;
+  padding: 4px 7px;
+  background: #fff;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+.povio-canvas-workspace-popover button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.povio-canvas-workspace-popover .povio-canvas-workspace-delete {
+  margin-right: auto;
+  padding-left: 0;
+  border: 0;
+  color: #b52c39;
+}
+.povio-canvas-workspace-popover .is-primary {
+  background: #7650cc;
+  color: white;
+  border-color: #7650cc;
+}
+.povio-canvas-workspace-popover .is-danger {
+  background: #b52c39;
+  color: white;
+  border-color: #b52c39;
+}
+.povio-canvas-workspace-popover :focus-visible {
+  outline: 2px solid #7650cc;
+  outline-offset: 1px;
+}
+.povio-canvas-workspace-picker {
+  gap: 6px;
+}
+.povio-canvas-workspace-popover {
+  width: 260px;
+  max-height: calc(100dvh - 24px);
+  overflow: auto;
+}
+.povio-canvas-workspace-popover-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+.povio-canvas-workspace-popover-heading h2 {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+}
+.povio-canvas-workspace-popover-heading button {
+  padding: 2px;
+  border: 0;
+}
+.povio-canvas-popover-pages {
+  margin-top: 8px;
+}
+.povio-canvas-popover-page-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+.povio-canvas-popover-page-tools > span {
+  margin-right: auto;
+  color: #77717e;
+}
+.povio-canvas-popover-page-tools button {
+  border: 0;
+  padding: 2px;
+  font-size: 10px;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-search {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.povio-canvas-popover-search svg {
+  position: absolute;
+  left: 7px;
+  color: #77717e;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-search input {
+  padding-left: 24px;
+}
+.povio-canvas-popover-page-list {
+  max-height: max(160px, min(560px, calc(100dvh - 300px)));
+  overflow: auto;
+  padding: 4px 3px;
+  margin: 3px -3px 0;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-page-list label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 2px;
+}
+.povio-canvas-workspace-popover .povio-canvas-popover-page-list input {
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  margin: 0;
+  flex-shrink: 0;
+  accent-color: #7650cc;
+}
+.povio-canvas-popover-page-list label span {
+  overflow-wrap: anywhere;
+}
+
+.povio-canvas-page-entry > button {
+  margin-bottom: 6px;
+}
+.povio-canvas-page-list {
+  padding: 4px 8px 8px;
+}
+.povio-canvas-search:has(input:focus-visible) {
+  outline: 2px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-app-canvas .povio-canvas-search input:focus-visible {
+  outline: none;
+}
+.povio-canvas-layer-row {
+  margin: 4px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline: 2px solid var(--canvas-accent);
+  outline-offset: 2px;
+}
+.povio-app-canvas .povio-canvas-layer-row > button:focus-visible {
+  outline: none;
+}
+.povio-canvas-page-list {
+  scroll-padding-block: 4px;
+}
+.povio-canvas-page-entry > button,
+.povio-canvas-layer-row > button {
+  scroll-margin-block: 4px;
+}
+.povio-canvas-layer-row {
+  min-height: 20px;
+  margin: 1px 4px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline-offset: -1px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  height: 20px;
+  min-height: 0;
+  padding: 1px 2px;
+  line-height: 16px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-toggle {
+  height: 18px;
+  min-height: 0;
+  padding: 1px;
+}
+.povio-canvas-layer-row {
+  height: 22px;
+  min-height: 22px;
+  margin: 0 4px;
+  font-size: 10px;
+}
+.povio-canvas-layer-row:has(> button:focus-visible) {
+  outline-offset: -2px;
+}
+.povio-canvas-layer-row .povio-canvas-layer-select {
+  height: 22px;
+  font-size: 10px;
+}
+.povio-canvas-layer-highlight {
+  z-index: 4;
+}
+.povio-canvas-layer-highlight .studio-hover-outline {
+  background: #7655d71a;
+}