@aussieljk/forkbook 0.0.1-8 → 0.0.1-9

package/dist/core-server/presets/common-manager.js

@@ -10,7 +10,7 @@ import {
 } from "../../_browser-chunks/chunk-MLBOOZL4.js";
 import {
   ArgsTable
-} from "../../_browser-chunks/chunk-MZVQEZOB.js";
+} from "../../_browser-chunks/chunk-6QEYM2YW.js";
 import "../../_browser-chunks/chunk-PJSMZ27A.js";
 import "../../_browser-chunks/chunk-OZZPSYQR.js";
 import "../../_browser-chunks/chunk-6ELMKWKX.js";
@@ -20,6 +20,25 @@ import {
 import {
   announce
 } from "../../_browser-chunks/chunk-KBK7GKBN.js";
+import {
+  useToolbarRootContext
+} from "../../_browser-chunks/chunk-NPNIBOPF.js";
+import {
+  CompositeRoot,
+  useCompositeItem,
+  useControlled
+} from "../../_browser-chunks/chunk-OOETBSA7.js";
+import {
+  EMPTY_ARRAY,
+  EMPTY_OBJECT,
+  createChangeEventDetails,
+  error,
+  reason_parts_exports,
+  useBaseUiId,
+  useButton,
+  useRenderElement,
+  useStableCallback
+} from "../../_browser-chunks/chunk-XTQCLWVH.js";
 import "../../_browser-chunks/chunk-CNED6RYH.js";
 import {
   registerService
@@ -195,7 +214,7 @@ var ADDON_ID8 = "core/review", manager_default2 = addons2.register(ADDON_ID8, ()
 // src/controls/manager.tsx
 import { AddonPanel } from "@aussieljk/forkbook/internal/components";
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from "@aussieljk/forkbook/internal/core-events";
-import { CheckCircleIcon, XCircleIcon } from "@phosphor-icons/react";
+import { CircleCheckIcon, CircleXIcon } from "lucide-react";
 import {
   addons as addons3,
   experimental_requestResponse,
@@ -224,7 +243,7 @@ var ADDON_ID9 = "addon-controls", PARAM_KEY6 = "controls";
 // src/controls/components/SaveStory.tsx
 import React from "react";
 import { Bar, Button, Form, Modal } from "@aussieljk/forkbook/internal/components";
-import { ArrowCounterClockwiseIcon, CheckIcon, PlusIcon } from "@phosphor-icons/react";
+import { RotateCcwIcon, CheckIcon, PlusIcon } from "lucide-react";
 
 // storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/controls/components/SaveStory.module.css
 var id = "core/src/controls/components/SaveStory.module.css";
@@ -232,7 +251,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id}"]
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id), style.textContent = ".fb-zEgyLq-container{z-index:1;width:100%;height:41px;position:absolute;bottom:0;overflow:hidden;container-type:size}.fb-zEgyLq-bar{--highlight-bg-color:#e0f0ff;background:var(--fb-background-bar);border-top:1px solid var(--fb-app-border-color);font-size:var(--fb-size-s2);padding-inline:4px;animation:.3s fb-zEgyLq-slideIn,2s fb-zEgyLq-highlight;@container (width<=799px){flex-direction:row;justify-content:flex-end}}:where([data-fb-theme=dark]) .fb-zEgyLq-bar{--highlight-bg-color:#153b5b}.fb-zEgyLq-info{flex:99 0 auto;align-items:center;gap:6px;margin-inline:7px 10px;display:flex}.fb-zEgyLq-actions{color:var(--fb-text-muted-color);font-size:var(--fb-size-s2);flex:1 0 0;align-items:center;gap:2px;display:flex}.fb-zEgyLq-label{@container (width<=799px){text-indent:-9999px;line-height:0;&:after{content:attr(data-short-label);line-height:initial;text-indent:0;display:block}}}.fb-zEgyLq-modalInput{&::placeholder{color:var(--fb-color-mediumdark)}&:invalid:not(:placeholder-shown){box-shadow:var(--fb-color-negative) 0 0 0 1px inset}}@keyframes fb-zEgyLq-slideIn{0%{transform:translateY(40px)}to{transform:translateY(0)}}@keyframes fb-zEgyLq-highlight{0%{background:var(--highlight-bg-color)}}", document.head.appendChild(style);
 }
-var SaveStory_default = { actions: "fb-zEgyLq-actions", modalInput: "fb-zEgyLq-modalInput", highlight: "fb-zEgyLq-highlight", bar: "fb-zEgyLq-bar", slideIn: "fb-zEgyLq-slideIn", info: "fb-zEgyLq-info", label: "fb-zEgyLq-label", container: "fb-zEgyLq-container" };
+var SaveStory_default = { container: "fb-zEgyLq-container", label: "fb-zEgyLq-label", modalInput: "fb-zEgyLq-modalInput", highlight: "fb-zEgyLq-highlight", info: "fb-zEgyLq-info", bar: "fb-zEgyLq-bar", slideIn: "fb-zEgyLq-slideIn", actions: "fb-zEgyLq-actions" };
 
 // src/controls/components/SaveStory.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -273,7 +292,7 @@ var SaveStory = ({ saveStory, createStory, resetArgs }) => {
             jsx("div", { className: SaveStory_default.label, "data-short-label": "New", children: "Create new story" })
           ] }),
           jsxs(Button, { ariaLabel: "Reset changes", onClick: () => resetArgs(), children: [
-            jsx(ArrowCounterClockwiseIcon, {}),
+            jsx(RotateCcwIcon, {}),
             jsx("span", { children: "Reset" })
           ] })
         ] }),
@@ -379,10 +398,10 @@ function LegacyControlsPanel(props) {
 }
 function DocgenQuery({
   docgenService,
-  id: id13,
+  id: id14,
   onChange
 }) {
-  let { data, isInitialLoading } = useServiceQuery(docgenService.queries.docgen, { id: id13 });
+  let { data, isInitialLoading } = useServiceQuery(docgenService.queries.docgen, { id: id14 });
   return useEffect(() => {
     onChange({ payload: data, isInitialLoading });
   }, [data, isInitialLoading, onChange]), null;
@@ -402,10 +421,10 @@ function ServiceControlsPanel({
   docgenService,
   ...props
 }) {
-  let storyData = useStorybookApi().getCurrentStoryData(), [, , , initialArgs] = useArgs(), customArgTypes = useArgTypes(), id13 = storyData.id.split("--")[0], isStory = storyData.type === "story", isStoryPrepared = !(global.CONFIG_TYPE === "DEVELOPMENT") || (isStory ? storyData.prepared : !0), gateReady = useStoryDocgenGateReady(storyData.id), queryReady = !isStory || gateReady, [docgen, setDocgen] = useState(), onDocgenChange = useCallback(
-    (state) => setDocgen({ id: id13, ...state }),
-    [id13]
-  ), current = queryReady && docgen?.id === id13 ? docgen : void 0, docgenPayload = current?.payload, docgenResolved = !!current && !current.isInitialLoading, rows = useMemo(
+  let storyData = useStorybookApi().getCurrentStoryData(), [, , , initialArgs] = useArgs(), customArgTypes = useArgTypes(), id14 = storyData.id.split("--")[0], isStory = storyData.type === "story", isStoryPrepared = !(global.CONFIG_TYPE === "DEVELOPMENT") || (isStory ? storyData.prepared : !0), gateReady = useStoryDocgenGateReady(storyData.id), queryReady = !isStory || gateReady, [docgen, setDocgen] = useState(), onDocgenChange = useCallback(
+    (state) => setDocgen({ id: id14, ...state }),
+    [id14]
+  ), current = queryReady && docgen?.id === id14 ? docgen : void 0, docgenPayload = current?.payload, docgenResolved = !!current && !current.isInitialLoading, rows = useMemo(
     () => docgenResolved ? mergeServiceArgTypes({
       payload: docgenPayload,
       storyId: storyData.id,
@@ -416,7 +435,7 @@ function ServiceControlsPanel({
     [docgenResolved, docgenPayload, initialArgs, storyData.id, storyData.parameters, customArgTypes]
   ), isDocgenLoading = !docgenResolved;
   return jsxs2(Fragment, { children: [
-    queryReady && jsx2(DocgenQuery, { docgenService, id: id13, onChange: onDocgenChange }),
+    queryReady && jsx2(DocgenQuery, { docgenService, id: id14, onChange: onDocgenChange }),
     jsx2(
       ControlsPanelTable,
       {
@@ -476,7 +495,7 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
         });
         api.addNotification({
           id: "save-story-success",
-          icon: jsx4(CheckCircleIcon, { color: color.positive }),
+          icon: jsx4(CircleCheckIcon, { color: color.positive }),
           content: {
             headline: "Story saved",
             subHeadline: jsxs4(Fragment2, { children: [
@@ -487,16 +506,16 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
           },
           duration: 8e3
         });
-      } catch (error) {
+      } catch (error2) {
         throw api.addNotification({
           id: "save-story-error",
-          icon: jsx4(XCircleIcon, { color: color.negative }),
+          icon: jsx4(CircleXIcon, { color: color.negative }),
           content: {
             headline: "Failed to save story",
-            subHeadline: error?.message || "Check the Forkbook process on the command line for more details."
+            subHeadline: error2?.message || "Check the Forkbook process on the command line for more details."
           },
           duration: 8e3
-        }), error;
+        }), error2;
       }
     }, createStory = async (name) => {
       let data = api.getCurrentStoryData();
@@ -510,7 +529,7 @@ var manager_default3 = addons3.register(ADDON_ID9, (api) => {
       });
       api.addNotification({
         id: "save-story-success",
-        icon: jsx4(CheckCircleIcon, { color: color.positive }),
+        icon: jsx4(CircleCheckIcon, { color: color.positive }),
         content: {
           headline: "Story created",
           subHeadline: jsxs4(Fragment2, { children: [
@@ -1566,7 +1585,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id3}"
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id3), style.textContent = ".fb-IaeYrG-wrapper{margin:0;padding:10px 5px 20px}.fb-IaeYrG-action{white-space:pre;border-bottom:1px solid #0000;border-left:5px solid #0000;align-items:flex-start;padding:0;transition:all .1s;display:flex}.fb-IaeYrG-counter{background-color:rgb(from var(--fb-app-border-color) r g b / calc(alpha + .5));color:var(--fb-color-inverse-text);font-size:var(--fb-size-s1);font-weight:var(--fb-weight-bold);border-radius:20px;margin:2px 0;padding:1px 5px;line-height:1}.fb-IaeYrG-inspectorContainer{flex:1;padding:0 0 0 5px}", document.head.appendChild(style);
 }
-var ActionLogger_default = { wrapper: "fb-IaeYrG-wrapper", action: "fb-IaeYrG-action", inspectorContainer: "fb-IaeYrG-inspectorContainer", counter: "fb-IaeYrG-counter" };
+var ActionLogger_default = { action: "fb-IaeYrG-action", inspectorContainer: "fb-IaeYrG-inspectorContainer", wrapper: "fb-IaeYrG-wrapper", counter: "fb-IaeYrG-counter" };
 
 // src/actions/components/ActionLogger/index.tsx
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -1696,14 +1715,14 @@ function stripAnsi(string2) {
 function isInteractionsDisabled(parameters) {
   return !!parameters?.[PARAM_KEY5]?.disable;
 }
-function isTestAssertionError(error) {
-  return isChaiError(error) || isJestError(error);
+function isTestAssertionError(error2) {
+  return isChaiError(error2) || isJestError(error2);
 }
-function isChaiError(error) {
-  return error && typeof error == "object" && "name" in error && typeof error.name == "string" && error.name === "AssertionError";
+function isChaiError(error2) {
+  return error2 && typeof error2 == "object" && "name" in error2 && typeof error2.name == "string" && error2.name === "AssertionError";
 }
-function isJestError(error) {
-  return error && typeof error == "object" && "message" in error && typeof error.message == "string" && stripAnsi(error.message).startsWith("expect(");
+function isJestError(error2) {
+  return error2 && typeof error2 == "object" && "message" in error2 && typeof error2.message == "string" && stripAnsi(error2.message).startsWith("expect(");
 }
 function createAnsiToHtmlFilter(theme3) {
   return new import_ansi_to_html.default({
@@ -1748,7 +1767,7 @@ var DetachedDebuggerMessage = ({ storyUrl }) => jsxs7("div", { className: Detach
 // src/component-testing/components/EmptyState.tsx
 import { useEffect as useEffect4, useState as useState5 } from "react";
 import { EmptyTabContent, Link as Link2 } from "@aussieljk/forkbook/internal/components";
-import { FileTextIcon } from "@phosphor-icons/react";
+import { FileTextIcon } from "lucide-react";
 import { useStorybookApi as useStorybookApi4 } from "@aussieljk/forkbook/manager-api";
 
 // storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/component-testing/components/EmptyState.module.css
@@ -1788,7 +1807,7 @@ var Empty = () => {
 // src/component-testing/components/Interaction.tsx
 import * as React21 from "react";
 import { Button as Button2 } from "@aussieljk/forkbook/internal/components";
-import { CaretDownIcon, CaretUpIcon } from "@phosphor-icons/react";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 
 // src/component-testing/components/MethodCall.tsx
 import React20, { Fragment as Fragment5 } from "react";
@@ -1996,7 +2015,7 @@ var colorsLight = {
 }, ElementNode = ({
   prefix,
   localName,
-  id: id13,
+  id: id14,
   classNames = [],
   innerText
 }) => {
@@ -2004,9 +2023,9 @@ var colorsLight = {
   return jsxs9("span", { style: { wordBreak: "keep-all" }, children: [
     jsx11("span", { style: { color: colors.muted }, children: "<" }, `${name}_lt`),
     jsx11("span", { style: { color: colors.tag.name }, children: name }, `${name}_tag`),
-    jsx11("span", { style: { color: colors.tag.suffix }, children: id13 ? `#${id13}` : classNames.reduce((acc, className) => `${acc}.${className}`, "") }, `${name}_suffix`),
+    jsx11("span", { style: { color: colors.tag.suffix }, children: id14 ? `#${id14}` : classNames.reduce((acc, className) => `${acc}.${className}`, "") }, `${name}_suffix`),
     jsx11("span", { style: { color: colors.muted }, children: ">" }, `${name}_gt`),
-    !id13 && classNames.length === 0 && innerText && jsxs9(Fragment6, { children: [
+    !id14 && classNames.length === 0 && innerText && jsxs9(Fragment6, { children: [
       jsx11("span", { children: innerText }, `${name}_text`),
       jsx11("span", { style: { color: colors.muted }, children: "<" }, `${name}_close_lt`),
       jsxs9("span", { style: { color: colors.tag.name }, children: [
@@ -2202,7 +2221,7 @@ var getParams = (line, fromIndex = 0) => {
 };
 
 // src/component-testing/components/StatusIcon.tsx
-import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, StopCircleIcon } from "@phosphor-icons/react";
+import { CheckIcon as CheckIcon2, CircleIcon, PlayIcon, CircleStopIcon } from "lucide-react";
 import { useTheme as useTheme4 } from "@aussieljk/forkbook/theming";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var StatusIcon = ({ status }) => {
@@ -2211,7 +2230,7 @@ var StatusIcon = ({ status }) => {
     case "done" /* DONE */:
       return jsx13(CheckIcon2, { color: theme3.color.positive, "data-testid": "icon-done" });
     case "error" /* ERROR */:
-      return jsx13(StopCircleIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
+      return jsx13(CircleStopIcon, { color: theme3.color.negative, "data-testid": "icon-error" });
     case "active" /* ACTIVE */:
       return jsx13(PlayIcon, { color: theme3.color.secondary, "data-testid": "icon-active" });
     case "waiting" /* WAITING */:
@@ -2240,7 +2259,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id7}"
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id7), style.textContent = '.fb-PYwdvq-methodCall{font-family:var(--fb-font-mono);font-size:var(--fb-size-s1);overflow-wrap:break-word;inline-size:calc(100% - 40px)}.fb-PYwdvq-row{border-bottom:1px solid var(--fb-app-border-color);font-family:var(--fb-font-base);flex-direction:column;font-size:13px;list-style:none;display:flex;position:relative;&[data-status=error]{background-color:var(--fb-background-warning)}&[data-paused]:before{content:"";z-index:1;border-top:4.5px solid #0000;border-left:7px solid var(--fb-color-warning);border-bottom:4.5px solid #0000;position:absolute;top:-5px}&[data-paused]:after{content:"";z-index:1;border-top:1.5px solid var(--fb-color-warning);width:100%;position:absolute;top:-1px}}:where([data-fb-theme=dark]) .fb-PYwdvq-row[data-status=error]{background-color:rgb(from var(--fb-color-negative) r g b / calc(alpha - .93))}.fb-PYwdvq-rowHeader{display:flex;&:not([data-navigation-disabled]):hover{background:var(--fb-background-hoverable)}}.fb-PYwdvq-rowLabel{text-align:start;cursor:pointer;background:0 0;border:0;flex:1;grid-template-columns:15px 1fr;align-items:center;min-height:40px;margin:0;padding:8px 15px;display:grid;&:disabled,&[data-status=error]{cursor:default}&:focus-visible{box-shadow:inset 3px 0 0 0 var(--fb-color-secondary);background:var(--fb-background-hoverable);outline:0}&[data-status=error]:focus-visible{box-shadow:inset 3px 0 0 0 var(--fb-color-warning);background:0 0}&[data-status=waiting]>div{opacity:.5}}.fb-PYwdvq-rowActions{align-items:center;padding:6px;display:flex}.fb-PYwdvq-button{color:var(--fb-text-muted-color);margin:0 3px}.fb-PYwdvq-rowMessage{font-size:var(--fb-size-s1);color:var(--fb-color-default-text);padding:8px 10px 8px 36px;& pre{margin:0;padding:0}}.fb-PYwdvq-errorName{color:#0271b6}.fb-PYwdvq-errorMessage{color:#444}.fb-PYwdvq-errorExplainer{color:var(--fb-color-negative-text);font-size:var(--fb-size-s2);text-wrap:balance;max-width:500px}:where([data-fb-theme=dark]){& .fb-PYwdvq-errorName{color:#5ec1ff}& .fb-PYwdvq-errorMessage{color:#eee}& .fb-PYwdvq-errorExplainer{color:var(--fb-color-negative)}}', document.head.appendChild(style);
 }
-var Interaction_default = { rowMessage: "fb-PYwdvq-rowMessage", errorExplainer: "fb-PYwdvq-errorExplainer", button: "fb-PYwdvq-button", methodCall: "fb-PYwdvq-methodCall", rowHeader: "fb-PYwdvq-rowHeader", row: "fb-PYwdvq-row", rowActions: "fb-PYwdvq-rowActions", errorName: "fb-PYwdvq-errorName", errorMessage: "fb-PYwdvq-errorMessage", rowLabel: "fb-PYwdvq-rowLabel" };
+var Interaction_default = { rowActions: "fb-PYwdvq-rowActions", rowHeader: "fb-PYwdvq-rowHeader", errorExplainer: "fb-PYwdvq-errorExplainer", row: "fb-PYwdvq-row", methodCall: "fb-PYwdvq-methodCall", rowLabel: "fb-PYwdvq-rowLabel", rowMessage: "fb-PYwdvq-rowMessage", button: "fb-PYwdvq-button", errorName: "fb-PYwdvq-errorName", errorMessage: "fb-PYwdvq-errorMessage" };
 
 // src/component-testing/components/Interaction.tsx
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -2357,7 +2376,7 @@ ${exception.diff}` : ""}`,
                   onClick: toggleCollapsed,
                   ariaLabel: getExpandButtonAriaLabel({ isCollapsed, stepName }),
                   "aria-expanded": !isCollapsed,
-                  children: isCollapsed ? jsx14(CaretUpIcon, {}) : jsx14(CaretDownIcon, {})
+                  children: isCollapsed ? jsx14(ChevronUpIcon, {}) : jsx14(ChevronDownIcon, {})
                 }
               ) })
             ]
@@ -2408,12 +2427,12 @@ import {
   Toolbar as SharedToolbar
 } from "@aussieljk/forkbook/internal/components";
 import {
-  ArrowsClockwiseIcon,
+  RefreshCwIcon,
   FastForwardIcon,
   RewindIcon,
   SkipBackIcon,
   SkipForwardIcon
-} from "@phosphor-icons/react";
+} from "lucide-react";
 import { useTheme as useTheme5 } from "@aussieljk/forkbook/theming";
 
 // src/component-testing/components/StatusBadge.tsx
@@ -2475,7 +2494,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id10}
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id10), style.textContent = ".fb-W9rv1G-wrapper{box-shadow:var(--fb-app-border-color) 0 -1px 0 0 inset;background:var(--fb-background-app);z-index:1;position:sticky;top:0}.fb-W9rv1G-controlsGroup{flex:1;align-items:center;gap:6px;display:flex}.fb-W9rv1G-iconButton{color:var(--fb-text-muted-color)}.fb-W9rv1G-rewindButton{margin-inline-start:3px;}.fb-W9rv1G-jumpToEndButton{color:var(--fb-text-muted-color);border-radius:4px;margin-inline:3px;padding:6px;line-height:12px;&:not(:disabled):hover,&:not(:disabled):focus-visible{color:var(--fb-color-secondary)}}.fb-W9rv1G-openInEditorButton{color:var(--fb-color-secondary);font-weight:var(--fb-weight-bold);text-align:right;white-space:nowrap;justify-content:flex-end;font-size:13px;line-height:24px}.fb-W9rv1G-location{color:var(--fb-text-muted-color);cursor:default;font-weight:var(--fb-weight-regular);text-align:right;white-space:nowrap;justify-content:flex-end;margin:0;font-size:13px}", document.head.appendChild(style);
 }
-var Toolbar_default = { rewindButton: "fb-W9rv1G-rewindButton fb-W9rv1G-iconButton", openInEditorButton: "fb-W9rv1G-openInEditorButton", jumpToEndButton: "fb-W9rv1G-jumpToEndButton", controlsGroup: "fb-W9rv1G-controlsGroup", location: "fb-W9rv1G-location", wrapper: "fb-W9rv1G-wrapper", iconButton: "fb-W9rv1G-iconButton" };
+var Toolbar_default = { openInEditorButton: "fb-W9rv1G-openInEditorButton", rewindButton: "fb-W9rv1G-rewindButton fb-W9rv1G-iconButton", iconButton: "fb-W9rv1G-iconButton", location: "fb-W9rv1G-location", wrapper: "fb-W9rv1G-wrapper", controlsGroup: "fb-W9rv1G-controlsGroup", jumpToEndButton: "fb-W9rv1G-jumpToEndButton" };
 
 // src/component-testing/components/Toolbar.tsx
 import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -2572,7 +2591,7 @@ var Toolbar = ({
               ariaLabel: "Rerun",
               onClick: controls.rerun,
               onPointerDown: preventFocusLoss,
-              children: jsx17(ArrowsClockwiseIcon, {})
+              children: jsx17(RefreshCwIcon, {})
             }
           )
         ] }),
@@ -2603,7 +2622,7 @@ if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id11}
   let style = document.createElement("style");
   style.setAttribute("data-fb-css", id11), style.textContent = ".fb-RpIDLa-container{background:var(--fb-background-content);height:100%}.fb-RpIDLa-section{position:relative}.fb-RpIDLa-heading{white-space:nowrap;clip:rect(0, 0, 0, 0);clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.fb-RpIDLa-list{margin:0;padding:0}.fb-RpIDLa-caughtException{border-bottom:1px solid var(--fb-app-border-color);background-color:var(--fb-background-warning);font-size:calc(var(--fb-size-s2) - 1px);padding:15px;line-height:19px}:where([data-fb-theme=dark]) .fb-RpIDLa-caughtException{background-color:rgb(from var(--fb-color-negative) r g b / calc(alpha - .93))}.fb-RpIDLa-caughtExceptionCode{font-size:calc(var(--fb-size-s1) - 1px);vertical-align:top;border:1px solid var(--fb-app-border-color);background:#0000000d;border-radius:3px;margin:0 1px;padding:3px;line-height:1}.fb-RpIDLa-caughtExceptionTitle{padding-bottom:4px;font-weight:700}.fb-RpIDLa-caughtExceptionDescription{margin:0;padding:0 0 20px}.fb-RpIDLa-caughtExceptionStack{font-size:calc(var(--fb-size-s1) - 1px);margin:0;padding:0;&:not(:last-child){padding-bottom:16px}}", document.head.appendChild(style);
 }
-var InteractionsPanel_default = { caughtException: "fb-RpIDLa-caughtException", container: "fb-RpIDLa-container", caughtExceptionDescription: "fb-RpIDLa-caughtExceptionDescription", caughtExceptionCode: "fb-RpIDLa-caughtExceptionCode", list: "fb-RpIDLa-list", caughtExceptionStack: "fb-RpIDLa-caughtExceptionStack", caughtExceptionTitle: "fb-RpIDLa-caughtExceptionTitle", section: "fb-RpIDLa-section", heading: "fb-RpIDLa-heading" };
+var InteractionsPanel_default = { section: "fb-RpIDLa-section", heading: "fb-RpIDLa-heading", container: "fb-RpIDLa-container", caughtExceptionTitle: "fb-RpIDLa-caughtExceptionTitle", list: "fb-RpIDLa-list", caughtExceptionCode: "fb-RpIDLa-caughtExceptionCode", caughtExceptionDescription: "fb-RpIDLa-caughtExceptionDescription", caughtException: "fb-RpIDLa-caughtException", caughtExceptionStack: "fb-RpIDLa-caughtExceptionStack" };
 
 // src/component-testing/components/InteractionsPanel.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -2703,15 +2722,15 @@ var StatusAnnouncementMapping = {
           jsx18("code", { className: InteractionsPanel_default.caughtExceptionCode, children: "true" }),
           "."
         ] }),
-        unhandledErrors.map((error, i) => jsx18("pre", { className: InteractionsPanel_default.caughtExceptionStack, "data-chromatic": "ignore", children: printSerializedError(error) }, i))
+        unhandledErrors.map((error2, i) => jsx18("pre", { className: InteractionsPanel_default.caughtExceptionStack, "data-chromatic": "ignore", children: printSerializedError(error2) }, i))
       ] }),
       jsx18("div", { ref: endRef }),
       status === "completed" && !caughtException && !hasRealInteractions && jsx18(Empty, {})
     ] });
   }
 );
-function printSerializedError(error) {
-  return error.stack || `${error.name}: ${error.message}`;
+function printSerializedError(error2) {
+  return error2.stack || `${error2.name}: ${error2.message}`;
 }
 
 // src/component-testing/components/Panel.tsx
@@ -2990,7 +3009,7 @@ import { addons as addons6, types as types4 } from "@aussieljk/forkbook/manager-
 // src/backgrounds/components/Tool.tsx
 import { Fragment as Fragment9, memo as memo5, useCallback as useCallback5 } from "react";
 import { Select, ToggleButton } from "@aussieljk/forkbook/internal/components";
-import { CircleIcon as CircleIcon2, GridFourIcon, ImageIcon } from "@phosphor-icons/react";
+import { CircleIcon as CircleIcon2, Grid2x2Icon, ImageIcon } from "lucide-react";
 import { useGlobals as useGlobals2, useParameter as useParameter4 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var BackgroundTool = memo5(function() {
@@ -3041,7 +3060,7 @@ var BackgroundTool = memo5(function() {
         ariaLabel: isLocked ? "Grid set by story parameters" : "Grid visibility",
         tooltip: isLocked ? "Grid set by story parameters" : "Toggle grid visibility",
         onClick: () => update({ value: backgroundName, grid: !isGrid }),
-        children: jsx22(GridFourIcon, {})
+        children: jsx22(Grid2x2Icon, {})
       },
       "grid"
     ),
@@ -3080,7 +3099,7 @@ import { addons as addons7, types as types5 } from "@aussieljk/forkbook/manager-
 // src/measure/Tool.tsx
 import { useCallback as useCallback6, useEffect as useEffect7 } from "react";
 import { ToggleButton as ToggleButton2 } from "@aussieljk/forkbook/internal/components";
-import { RulerIcon } from "@phosphor-icons/react";
+import { RulerIcon } from "lucide-react";
 import { useGlobals as useGlobals3, useParameter as useParameter5, useStorybookApi as useStorybookApi8 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Tool = () => {
@@ -3131,7 +3150,7 @@ import { addons as addons8, types as types6 } from "@aussieljk/forkbook/manager-
 // src/outline/OutlineSelector.tsx
 import { memo as memo6, useCallback as useCallback7, useEffect as useEffect8 } from "react";
 import { ToggleButton as ToggleButton3 } from "@aussieljk/forkbook/internal/components";
-import { SelectionIcon } from "@phosphor-icons/react";
+import { SquareDashedIcon } from "lucide-react";
 import { useGlobals as useGlobals4, useParameter as useParameter6, useStorybookApi as useStorybookApi9 } from "@aussieljk/forkbook/manager-api";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var OutlineSelector = memo6(function() {
@@ -3159,7 +3178,7 @@ var OutlineSelector = memo6(function() {
       ariaDescription: "When enabled, this tool displays the outline of every element in the preview area, which helps understand their layout.",
       tooltip: "Toggle outline",
       onClick: toggleOutline,
-      children: jsx26(SelectionIcon, {})
+      children: jsx26(SquareDashedIcon, {})
     },
     "outline"
   );
@@ -3179,11 +3198,6 @@ var manager_default8 = addons8.register(ADDON_ID5, () => {
 // src/viewport/manager.tsx
 import { addons as addons9, types as types7 } from "@aussieljk/forkbook/manager-api";
 
-// src/viewport/components/Tool.tsx
-import { useMemo as useMemo6 } from "react";
-import { Select as Select2 } from "@aussieljk/forkbook/internal/components";
-import { ArrowsOutIcon } from "@phosphor-icons/react";
-
 // src/viewport/useViewport.ts
 import { useCallback as useCallback8, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef3 } from "react";
 import { useGlobals as useGlobals5, useParameter as useParameter7, useStorybookApi as useStorybookApi10 } from "@aussieljk/forkbook/manager-api";
@@ -3265,91 +3279,451 @@ var cycle = (viewports, current, direction = 1) => {
   );
 };
 
+// src/viewport/components/FrameSize.tsx
+import { useEffect as useEffect10, useState as useState8 } from "react";
+
+// storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/viewport/components/FrameSize.module.css
+var id12 = "core/src/viewport/components/FrameSize.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id12}"]`)) {
+  let style = document.createElement("style");
+  style.setAttribute("data-fb-css", id12), style.textContent = ".fb-bVlzdq-wrapper{height:28px;font-family:var(--fb-font-mono);font-size:calc(var(--fb-size-s1) - 1px);font-variant-numeric:tabular-nums;color:var(--fb-text-muted-color);white-space:nowrap;align-items:center;gap:1px;padding-inline:4px;display:inline-flex}.fb-bVlzdq-times{opacity:.7}.fb-bVlzdq-value,.fb-bVlzdq-input{height:22px;font:inherit;color:inherit;border-radius:4px;padding-inline:3px}.fb-bVlzdq-value{cursor:text;background:0 0;border:none;&:hover:not(:disabled),&:focus-visible{background:var(--fb-input-background)}&:disabled{cursor:default}}.fb-bVlzdq-input{min-width:0;color:var(--fb-input-color);text-align:center;background:var(--fb-input-background);box-shadow:var(--fb-input-border) 0 0 0 1px inset;appearance:textfield;border:none;&::-webkit-inner-spin-button,&::-webkit-outer-spin-button{appearance:none;margin:0}}", document.head.appendChild(style);
+}
+var FrameSize_default = { input: "fb-bVlzdq-input", wrapper: "fb-bVlzdq-wrapper", times: "fb-bVlzdq-times", value: "fb-bVlzdq-value" };
+
+// src/viewport/components/FrameSize.tsx
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
+var PREVIEW_IFRAME_ID = "storybook-preview-iframe", usePreviewFrameSize = (id14 = PREVIEW_IFRAME_ID) => {
+  let [size, setSize] = useState8();
+  return useEffect10(() => {
+    let observed = null, resizeObserver = new ResizeObserver(() => {
+      observed && setSize({ width: observed.clientWidth, height: observed.clientHeight });
+    }), attach = () => {
+      let el = document.getElementById(id14);
+      el !== observed && (observed && resizeObserver.unobserve(observed), observed = el, el && resizeObserver.observe(el));
+    };
+    attach();
+    let mutationObserver = new MutationObserver(attach);
+    return mutationObserver.observe(document.body, { childList: !0, subtree: !0 }), () => {
+      mutationObserver.disconnect(), resizeObserver.disconnect();
+    };
+  }, [id14]), size;
+}, Dimension = ({
+  label,
+  value,
+  disabled,
+  onApply
+}) => {
+  let [draft, setDraft] = useState8();
+  if (draft === void 0)
+    return jsx28(
+      "button",
+      {
+        type: "button",
+        className: FrameSize_default.value,
+        "aria-label": `${label}: ${value}px. Click to edit.`,
+        disabled,
+        onClick: () => setDraft(String(value)),
+        children: value
+      }
+    );
+  let apply = () => {
+    let next = Math.round(Number(draft));
+    setDraft(void 0), draft.trim() !== "" && Number.isFinite(next) && next > 0 && next !== value && onApply(next);
+  }, onKeyDown = (e) => {
+    e.key === "Enter" ? (e.preventDefault(), apply()) : e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), setDraft(void 0));
+  };
+  return jsx28(
+    "input",
+    {
+      className: FrameSize_default.input,
+      "aria-label": label,
+      type: "number",
+      min: 1,
+      autoFocus: !0,
+      value: draft,
+      style: { width: `${Math.max(draft.length, 2) + 2}ch` },
+      onChange: (e) => setDraft(e.target.value),
+      onFocus: (e) => e.target.select(),
+      onBlur: apply,
+      onKeyDown
+    }
+  );
+}, FrameSize = ({
+  size,
+  disabled,
+  onApply
+}) => size ? jsxs16("span", { className: FrameSize_default.wrapper, "data-testid": "frame-size", children: [
+  jsx28(
+    Dimension,
+    {
+      label: "Frame width",
+      value: size.width,
+      disabled,
+      onApply: (width) => onApply({ ...size, width })
+    }
+  ),
+  jsx28("span", { "aria-hidden": !0, className: FrameSize_default.times, children: "\xD7" }),
+  jsx28(
+    Dimension,
+    {
+      label: "Frame height",
+      value: size.height,
+      disabled,
+      onApply: (height) => onApply({ ...size, height })
+    }
+  )
+] }) : null;
+
+// src/viewport/components/ViewportSegments.tsx
+import { useMemo as useMemo8 } from "react";
+import { Button as Button4, Select as Select2 } from "@aussieljk/forkbook/internal/components";
+
+// ../../node_modules/@base-ui/react/toggle/Toggle.mjs
+import * as React30 from "react";
+
+// ../../node_modules/@base-ui/react/toggle-group/ToggleGroupContext.mjs
+import * as React29 from "react";
+var ToggleGroupContext = React29.createContext(void 0);
+process.env.NODE_ENV !== "production" && (ToggleGroupContext.displayName = "ToggleGroupContext");
+function useToggleGroupContext() {
+  return React29.useContext(ToggleGroupContext);
+}
+
+// ../../node_modules/@base-ui/react/internals/composite/item/CompositeItem.mjs
+function CompositeItem(componentProps) {
+  let {
+    render,
+    className,
+    style,
+    state = EMPTY_OBJECT,
+    props = EMPTY_ARRAY,
+    refs = EMPTY_ARRAY,
+    metadata,
+    stateAttributesMapping,
+    tag = "div",
+    ...elementProps
+  } = componentProps, {
+    compositeProps,
+    compositeRef
+  } = useCompositeItem({
+    metadata
+  });
+  return useRenderElement(tag, componentProps, {
+    state,
+    // The composite ref attaches first so an outer item wins when nested items share a DOM node.
+    ref: [compositeRef, ...refs],
+    props: [compositeProps, ...props, elementProps],
+    stateAttributesMapping
+  });
+}
+
+// ../../node_modules/@base-ui/react/toggle/Toggle.mjs
+import { jsx as _jsx } from "react/jsx-runtime";
+var Toggle = React30.forwardRef(function(componentProps, forwardedRef) {
+  let {
+    className,
+    defaultPressed = !1,
+    disabled: disabledProp = !1,
+    form,
+    // never participates in form validation
+    onPressedChange,
+    pressed: pressedProp,
+    render,
+    type,
+    // cannot change button type
+    value: valueProp,
+    nativeButton = !0,
+    style,
+    ...elementProps
+  } = componentProps, value = useBaseUiId(valueProp || void 0), groupContext = useToggleGroupContext(), groupValue = groupContext?.value ?? [], disabled = (disabledProp || groupContext?.disabled) ?? !1;
+  process.env.NODE_ENV !== "production" && React30.useEffect(() => {
+    groupContext && valueProp === void 0 && groupContext.isValueInitialized && error("A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.", "This will cause issues between the Toggle Group and Toggle values.", "Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.");
+  }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  let [pressed, setPressedState] = useControlled({
+    controlled: groupContext ? value !== void 0 && groupValue.indexOf(value) > -1 : pressedProp,
+    default: defaultPressed,
+    name: "Toggle",
+    state: "pressed"
+  }), {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  }), state = {
+    disabled,
+    pressed
+  }, refs = [buttonRef, forwardedRef], props = [{
+    "aria-pressed": pressed,
+    onClick(event) {
+      let nextPressed = !pressed, details = createChangeEventDetails(reason_parts_exports.none, event.nativeEvent);
+      onPressedChange?.(nextPressed, details), !details.isCanceled && (value && groupContext?.setGroupValue?.(value, nextPressed, details), !details.isCanceled && setPressedState(nextPressed));
+    }
+  }, elementProps, getButtonProps], element = useRenderElement("button", componentProps, {
+    enabled: !groupContext,
+    state,
+    ref: refs,
+    props
+  }), itemMetadata = React30.useMemo(() => ({
+    disabled,
+    focusableWhenDisabled: !1
+  }), [disabled]);
+  return groupContext ? _jsx(CompositeItem, {
+    tag: "button",
+    render,
+    className,
+    style,
+    metadata: itemMetadata,
+    state,
+    refs,
+    props
+  }) : element;
+});
+process.env.NODE_ENV !== "production" && (Toggle.displayName = "Toggle");
+
+// ../../node_modules/@base-ui/react/toggle-group/ToggleGroup.mjs
+import * as React32 from "react";
+
+// ../../node_modules/@base-ui/react/toolbar/group/ToolbarGroupContext.mjs
+import * as React31 from "react";
+var ToolbarGroupContext = React31.createContext(void 0);
+process.env.NODE_ENV !== "production" && (ToolbarGroupContext.displayName = "ToolbarGroupContext");
+function useToolbarGroupContext() {
+  return React31.useContext(ToolbarGroupContext);
+}
+
+// ../../node_modules/@base-ui/react/toggle-group/ToggleGroup.mjs
+import { jsx as _jsx2 } from "react/jsx-runtime";
+var ToggleGroup = React32.forwardRef(function(componentProps, forwardedRef) {
+  let {
+    defaultValue: defaultValueProp,
+    disabled: disabledProp = !1,
+    loopFocus = !0,
+    onValueChange,
+    orientation = "horizontal",
+    multiple = !1,
+    value: valueProp,
+    className,
+    render,
+    style,
+    ...elementProps
+  } = componentProps, toolbarContext = useToolbarRootContext(!0), toolbarGroupContext = useToolbarGroupContext(), defaultValue = defaultValueProp ?? EMPTY_ARRAY, isValueInitialized = valueProp !== void 0 || defaultValueProp !== void 0, disabled = (toolbarContext?.disabled ?? !1) || (toolbarGroupContext?.disabled ?? !1) || disabledProp, [groupValue, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "ToggleGroup",
+    state: "value"
+  }), setGroupValue = useStableCallback((newValue, nextPressed, eventDetails) => {
+    let newGroupValue;
+    multiple ? (newGroupValue = groupValue.slice(), nextPressed ? newGroupValue.push(newValue) : newGroupValue.splice(groupValue.indexOf(newValue), 1)) : newGroupValue = nextPressed ? [newValue] : [], onValueChange?.(newGroupValue, eventDetails), !eventDetails.isCanceled && setValueState(newGroupValue);
+  }), state = {
+    disabled,
+    multiple,
+    orientation
+  }, contextValue = React32.useMemo(() => ({
+    disabled,
+    setGroupValue,
+    value: groupValue,
+    isValueInitialized
+  }), [disabled, setGroupValue, groupValue, isValueInitialized]), defaultProps = {
+    role: "group"
+  }, element = useRenderElement("div", componentProps, {
+    enabled: !!toolbarContext,
+    state,
+    ref: forwardedRef,
+    props: [defaultProps, elementProps]
+  });
+  return _jsx2(ToggleGroupContext.Provider, {
+    value: contextValue,
+    children: toolbarContext ? element : _jsx2(CompositeRoot, {
+      render,
+      className,
+      style,
+      state,
+      refs: [forwardedRef],
+      props: [defaultProps, elementProps],
+      loopFocus,
+      enableHomeAndEndKeys: !0,
+      orientation
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (ToggleGroup.displayName = "ToggleGroup");
+
+// src/viewport/components/ViewportSegments.tsx
+import { EllipsisIcon, Maximize2Icon, MonitorIcon, SmartphoneIcon as SmartphoneIcon2, TabletIcon as TabletIcon2 } from "lucide-react";
+
 // src/viewport/viewportIcons.tsx
-import {
-  BrowserIcon,
-  DeviceMobileIcon,
-  DeviceTabletIcon,
-  DiamondIcon,
-  WatchIcon
-} from "@phosphor-icons/react";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { AppWindowIcon, SmartphoneIcon, TabletIcon, DiamondIcon, WatchIcon } from "lucide-react";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var iconsMap = {
-  desktop: jsx28(BrowserIcon, {}),
-  mobile: jsx28(DeviceMobileIcon, {}),
-  tablet: jsx28(DeviceTabletIcon, {}),
-  watch: jsx28(WatchIcon, {}),
-  other: jsx28(DiamondIcon, {})
+  desktop: jsx29(AppWindowIcon, {}),
+  mobile: jsx29(SmartphoneIcon, {}),
+  tablet: jsx29(TabletIcon, {}),
+  watch: jsx29(WatchIcon, {}),
+  other: jsx29(DiamondIcon, {})
+};
+
+// src/viewport/components/segments.ts
+var SEGMENT_KINDS = ["mobile", "tablet", "desktop"], NAME_PATTERNS = {
+  mobile: /mobile|phone/i,
+  tablet: /tablet|ipad/i,
+  desktop: /desktop|laptop/i
+}, mapSegments = (viewports) => {
+  let keys = Object.keys(viewports), used = /* @__PURE__ */ new Set(), segments = {}, pick = (kind, test) => {
+    if (segments[kind])
+      return;
+    let key = keys.find((k) => !used.has(k) && test(k));
+    key && (segments[kind] = key, used.add(key));
+  };
+  for (let kind of SEGMENT_KINDS)
+    pick(kind, (k) => viewports[k].type === kind);
+  for (let kind of SEGMENT_KINDS)
+    pick(kind, (k) => NAME_PATTERNS[kind].test(`${k} ${viewports[k].name}`));
+  return { segments, overflow: keys.filter((k) => !used.has(k)) };
 };
 
 // storybook-css:/home/runner/work/forkbook/forkbook/code/core/src/viewport/components/Tool.module.css
-var id12 = "core/src/viewport/components/Tool.module.css";
-if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id12}"]`)) {
+var id13 = "core/src/viewport/components/Tool.module.css";
+if (typeof document < "u" && !document.querySelector(`style[data-fb-css="${id13}"]`)) {
   let style = document.createElement("style");
-  style.setAttribute("data-fb-css", id12), style.textContent = ".fb-vBOFLW-dimensions{font-family:var(--fb-font-mono);font-size:calc(var(--fb-size-s1) - 1px);font-weight:var(--fb-weight-regular);color:var(--fb-text-muted-color);gap:2px;margin-left:20px;display:flex}", document.head.appendChild(style);
+  style.setAttribute("data-fb-css", id13), style.textContent = ".fb-vBOFLW-dimensions{font-family:var(--fb-font-mono);font-size:calc(var(--fb-size-s1) - 1px);font-weight:var(--fb-weight-regular);color:var(--fb-text-muted-color);gap:2px;margin-left:20px;display:flex}.fb-vBOFLW-segments{box-shadow:var(--fb-app-border-color) 0 0 0 1px inset;border-radius:4px;align-items:center;gap:1px;padding:1px;display:inline-flex}.fb-vBOFLW-segment:where([data-pressed]){background:rgb(from var(--fb-bar-selected-color) r g b / calc(alpha - .93));color:var(--fb-bar-selected-color)}", document.head.appendChild(style);
 }
-var Tool_default = { dimensions: "fb-vBOFLW-dimensions" };
+var Tool_default = { segment: "fb-vBOFLW-segment", dimensions: "fb-vBOFLW-dimensions", segments: "fb-vBOFLW-segments" };
+
+// src/viewport/components/ViewportSegments.tsx
+import { Fragment as Fragment10, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+var FULL = "full", SEGMENT_ICONS = {
+  mobile: jsx30(SmartphoneIcon2, {}),
+  tablet: jsx30(TabletIcon2, {}),
+  desktop: jsx30(MonitorIcon, {})
+}, SEGMENT_LABELS = {
+  mobile: "Mobile",
+  tablet: "Tablet",
+  desktop: "Desktop"
+}, ViewportSegments = ({
+  viewports,
+  value,
+  isDefault,
+  isLocked = !1,
+  onSelect,
+  onReset
+}) => {
+  let { segments, overflow } = useMemo8(() => mapSegments(viewports), [viewports]), pressed = isDefault ? FULL : SEGMENT_KINDS.find((kind) => segments[kind] === value), overflowOptions = useMemo8(
+    () => overflow.map((key) => ({
+      value: key,
+      title: viewports[key].name,
+      icon: iconsMap[viewports[key].type ?? "other"],
+      right: jsxs17("div", { className: Tool_default.dimensions, children: [
+        jsx30("span", { children: viewports[key].styles.width.replace("px", "") }),
+        jsx30("span", { children: "\xD7" }),
+        jsx30("span", { children: viewports[key].styles.height.replace("px", "") })
+      ] })
+    })),
+    [overflow, viewports]
+  ), lockedNote = isLocked ? " (set by story parameters)" : "";
+  return jsxs17(Fragment10, { children: [
+    jsxs17(
+      ToggleGroup,
+      {
+        className: Tool_default.segments,
+        "aria-label": `Viewport size${lockedNote}`,
+        value: pressed ? [pressed] : [],
+        disabled: isLocked,
+        onValueChange: (next) => {
+          let [picked] = next;
+          picked === FULL ? onReset() : picked && segments[picked] && onSelect(segments[picked]);
+        },
+        children: [
+          SEGMENT_KINDS.filter((kind) => segments[kind]).map((kind) => jsx30(
+            Toggle,
+            {
+              value: kind,
+              className: Tool_default.segment,
+              render: jsx30(
+                Button4,
+                {
+                  variant: "ghost",
+                  padding: "small",
+                  size: "small",
+                  ariaLabel: `${SEGMENT_LABELS[kind]}: ${viewports[segments[kind]].name}${lockedNote}`
+                }
+              ),
+              children: SEGMENT_ICONS[kind]
+            },
+            kind
+          )),
+          jsx30(
+            Toggle,
+            {
+              value: FULL,
+              className: Tool_default.segment,
+              render: jsx30(
+                Button4,
+                {
+                  variant: "ghost",
+                  padding: "small",
+                  size: "small",
+                  ariaLabel: `Full size (reset viewport)${lockedNote}`
+                }
+              ),
+              children: jsx30(Maximize2Icon, {})
+            }
+          )
+        ]
+      }
+    ),
+    overflowOptions.length > 0 && jsx30(
+      Select2,
+      {
+        padding: "small",
+        disabled: isLocked,
+        ariaLabel: `More viewports${lockedNote}`,
+        tooltip: "More viewports",
+        defaultOptions: value && overflow.includes(value) ? value : void 0,
+        options: overflowOptions,
+        onSelect: (selected) => onSelect(selected),
+        icon: jsx30(EllipsisIcon, {})
+      },
+      "viewport-more"
+    )
+  ] });
+};
 
 // src/viewport/components/Tool.tsx
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 var ViewportTool = () => {
-  let {
-    name,
-    value,
-    isDefault,
-    isCustom,
-    isLocked,
-    options: viewportMap,
-    reset,
-    select
-  } = useViewport(), options = useMemo6(() => {
-    let presetOptions = Object.entries(viewportMap).map(([k, value2]) => ({
-      value: k,
-      title: value2.name,
-      icon: iconsMap[value2.type],
-      right: jsxs16("div", { className: Tool_default.dimensions, children: [
-        jsx29("span", { children: value2.styles.width.replace("px", "") }),
-        jsx29("span", { children: "\xD7" }),
-        jsx29("span", { children: value2.styles.height.replace("px", "") })
-      ] })
-    }));
-    return isCustom && value ? [
-      ...presetOptions,
+  let { option, isDefault, isLocked, options, reset, resize, select } = useViewport(), frameSize = usePreviewFrameSize();
+  return jsxs18(Fragment11, { children: [
+    jsx31(
+      ViewportSegments,
       {
-        value,
-        title: name,
-        icon: iconsMap.other,
-        right: null
+        viewports: options,
+        value: option,
+        isDefault,
+        isLocked,
+        onSelect: select,
+        onReset: reset
       }
-    ] : presetOptions;
-  }, [viewportMap, isCustom, value, name]);
-  return jsx29(
-    Select2,
-    {
-      resetLabel: "Reset viewport",
-      onReset: reset,
-      disabled: isLocked,
-      ariaLabel: isLocked ? "Viewport size set by story parameters" : "Viewport size",
-      ariaDescription: "Select a viewport among predefined options for the preview area, or reset to the default viewport.",
-      tooltip: isLocked ? "Viewport set by story parameters" : "Change viewport",
-      defaultOptions: value,
-      options,
-      onSelect: (selected) => select(selected),
-      icon: jsx29(ArrowsOutIcon, {}),
-      children: isDefault ? null : name
-    },
-    "viewport"
-  );
+    ),
+    jsx31(
+      FrameSize,
+      {
+        size: frameSize,
+        disabled: isLocked,
+        onApply: ({ width, height }) => resize(`${width}px`, `${height}px`)
+      }
+    )
+  ] });
 };
 
 // src/viewport/manager.tsx
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var manager_default9 = addons9.register(ADDON_ID, () => {
   globalThis?.FEATURES?.viewport && addons9.add(TOOL_ID, {
     title: "viewport / media-queries",
     type: types7.TOOL,
     match: ({ viewMode }) => viewMode === "story",
-    render: () => jsx30(ViewportTool, {})
+    render: () => jsx32(ViewportTool, {})
   });
 });