@nurix/ui-component-library 1.1.4-stage.121 → 1.1.4-stage.122

package/dist/index.d.mts

@@ -1110,11 +1110,12 @@ declare const SurfaceFooter: React$1.ForwardRefExoticComponent<SurfaceFooterProp
  * Figma 6249:35100 — Side Panel.
  *   - sm: 420px wide
  *   - md: 620px wide
+ *   - lg: 900px wide (Figma 6553:165)
  */
-type SidePanelSize = "sm" | "md";
+type SidePanelSize = "sm" | "md" | "lg";
 interface SidePanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Width preset. `sm` = 420px, `md` = 620px.
+     * Width preset. `sm` = 420px, `md` = 620px, `lg` = 900px.
      * @default "sm"
      */
     size?: SidePanelSize;
@@ -1139,8 +1140,9 @@ interface SidePanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
  *
  * The panel is a plain shell — the consumer is responsible for positioning
  * (e.g., `fixed right-0 top-0`), slide-in animation, and the overlay. This
- * matches the Figma spec at 6249:35100, which shows just the geometry: a
- * 420px / 620px wide white surface with 16px radius on its inner edge.
+ * matches the Figma spec at 6249:35100 / 6553:165, which shows just the
+ * geometry: a 420px / 620px / 900px wide white surface with 16px radius on
+ * its inner edge.
  */
 declare const SidePanel: React$1.ForwardRefExoticComponent<SidePanelProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -1110,11 +1110,12 @@ declare const SurfaceFooter: React$1.ForwardRefExoticComponent<SurfaceFooterProp
  * Figma 6249:35100 — Side Panel.
  *   - sm: 420px wide
  *   - md: 620px wide
+ *   - lg: 900px wide (Figma 6553:165)
  */
-type SidePanelSize = "sm" | "md";
+type SidePanelSize = "sm" | "md" | "lg";
 interface SidePanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /**
-     * Width preset. `sm` = 420px, `md` = 620px.
+     * Width preset. `sm` = 420px, `md` = 620px, `lg` = 900px.
      * @default "sm"
      */
     size?: SidePanelSize;
@@ -1139,8 +1140,9 @@ interface SidePanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
  *
  * The panel is a plain shell — the consumer is responsible for positioning
  * (e.g., `fixed right-0 top-0`), slide-in animation, and the overlay. This
- * matches the Figma spec at 6249:35100, which shows just the geometry: a
- * 420px / 620px wide white surface with 16px radius on its inner edge.
+ * matches the Figma spec at 6249:35100 / 6553:165, which shows just the
+ * geometry: a 420px / 620px / 900px wide white surface with 16px radius on
+ * its inner edge.
  */
 declare const SidePanel: React$1.ForwardRefExoticComponent<SidePanelProps & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -10701,7 +10701,8 @@ var SIDE_PANEL_TOKENS = {
   base: "bg-token-white h-full overflow-hidden flex flex-col",
   size: {
     sm: "w-[420px]",
-    md: "w-[620px]"
+    md: "w-[620px]",
+    lg: "w-[900px]"
   },
   side: {
     // Panel anchored to the RIGHT edge of the viewport — its LEFT edge is
@@ -16052,50 +16053,34 @@ function JsonEditor({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        size: "wide",
         title: label,
         showCancel: false,
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
-        className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
             /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                ToolbarButton,
-                {
-                  onClick: formatExpandedJson,
-                  title: "Format JSON",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" })
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ToolbarButton, { onClick: formatExpandedJson, title: "Format JSON", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.WandSparkles, { className: "size-3" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Divider, {}),
               /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.Check, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react19.Copy, { className: "size-3" }) })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
-            DialogBody,
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            Ft,
             {
-              scrollable: true,
-              className: "flex-1 min-h-0 p-0 overflow-hidden",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-                  Ft,
-                  {
-                    height: "100%",
-                    language,
-                    value,
-                    onChange: handleChange,
-                    onMount: handleExpandedMount,
-                    options: MONACO_OPTIONS_DIALOG,
-                    theme: "vs"
-                  }
-                ) }),
-                hasErrors && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ErrorBar, { errors })
-              ]
+              height: "500px",
+              language,
+              value,
+              onChange: handleChange,
+              onMount: handleExpandedMount,
+              options: MONACO_OPTIONS_DIALOG,
+              theme: "vs"
             }
-          )
-        ] }) })
+          ),
+          hasErrors && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ErrorBar, { errors })
+        ] })
       }
     )
   ] });

package/dist/index.mjs

@@ -10595,7 +10595,8 @@ var SIDE_PANEL_TOKENS = {
   base: "bg-token-white h-full overflow-hidden flex flex-col",
   size: {
     sm: "w-[420px]",
-    md: "w-[620px]"
+    md: "w-[620px]",
+    lg: "w-[900px]"
   },
   side: {
     // Panel anchored to the RIGHT edge of the viewport — its LEFT edge is
@@ -15962,50 +15963,34 @@ function JsonEditor({
       {
         open: isOpen,
         onOpenChange: setIsOpen,
+        size: "wide",
         title: label,
         showCancel: false,
         confirmLabel: "Close",
         onConfirm: () => setIsOpen(false),
-        className: "w-[85vw] max-w-[85vw] h-[85vh]",
-        children: /* @__PURE__ */ jsx37("div", { className: "flex flex-col overflow-hidden h-full", children: /* @__PURE__ */ jsxs27("div", { className: "flex-1 min-h-0 flex flex-col rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
-          /* @__PURE__ */ jsxs27("div", { className: "flex-none flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
-            /* @__PURE__ */ jsx37("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none" }),
+        children: /* @__PURE__ */ jsxs27("div", { className: "rounded-[16px] border border-token-xlight overflow-hidden bg-token-white", children: [
+          /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between px-3 py-1.5 bg-token-light-grey rounded-t-xl", children: [
+            /* @__PURE__ */ jsx37("span", { className: "text-xs font-semibold leading-4 text-fg-grey-secondary uppercase select-none", children: label }),
             /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-0.5", children: [
-              /* @__PURE__ */ jsx37(
-                ToolbarButton,
-                {
-                  onClick: formatExpandedJson,
-                  title: "Format JSON",
-                  children: /* @__PURE__ */ jsx37(WandSparkles, { className: "size-3" })
-                }
-              ),
+              /* @__PURE__ */ jsx37(ToolbarButton, { onClick: formatExpandedJson, title: "Format JSON", children: /* @__PURE__ */ jsx37(WandSparkles, { className: "size-3" }) }),
               /* @__PURE__ */ jsx37(Divider, {}),
               /* @__PURE__ */ jsx37(ToolbarButton, { onClick: copyToClipboard, title: "Copy JSON", children: copied ? /* @__PURE__ */ jsx37(Check8, { className: "size-3 text-fg-success" }) : /* @__PURE__ */ jsx37(Copy, { className: "size-3" }) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs27(
-            DialogBody,
+          /* @__PURE__ */ jsx37(
+            Ft,
             {
-              scrollable: true,
-              className: "flex-1 min-h-0 p-0 overflow-hidden",
-              children: [
-                /* @__PURE__ */ jsx37("div", { className: "h-full min-h-[50vh] overflow-hidden", children: /* @__PURE__ */ jsx37(
-                  Ft,
-                  {
-                    height: "100%",
-                    language,
-                    value,
-                    onChange: handleChange,
-                    onMount: handleExpandedMount,
-                    options: MONACO_OPTIONS_DIALOG,
-                    theme: "vs"
-                  }
-                ) }),
-                hasErrors && /* @__PURE__ */ jsx37(ErrorBar, { errors })
-              ]
+              height: "500px",
+              language,
+              value,
+              onChange: handleChange,
+              onMount: handleExpandedMount,
+              options: MONACO_OPTIONS_DIALOG,
+              theme: "vs"
             }
-          )
-        ] }) })
+          ),
+          hasErrors && /* @__PURE__ */ jsx37(ErrorBar, { errors })
+        ] })
       }
     )
   ] });

package/dist/styles.css

@@ -569,9 +569,6 @@
   .lego-land .h-\[50px\] {
     height: 50px;
   }
-  .lego-land .h-\[85vh\] {
-    height: 85vh;
-  }
   .lego-land .h-\[172px\] {
     height: 172px;
   }
@@ -629,9 +626,6 @@
   .lego-land .min-h-\[32px\] {
     min-height: 32px;
   }
-  .lego-land .min-h-\[50vh\] {
-    min-height: 50vh;
-  }
   .lego-land .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -716,9 +710,6 @@
   .lego-land .w-\[76px\] {
     width: 76px;
   }
-  .lego-land .w-\[85vw\] {
-    width: 85vw;
-  }
   .lego-land .w-\[88px\] {
     width: 88px;
   }
@@ -767,6 +758,9 @@
   .lego-land .w-\[620px\] {
     width: 620px;
   }
+  .lego-land .w-\[900px\] {
+    width: 900px;
+  }
   .lego-land .w-\[960px\] {
     width: 960px;
   }
@@ -800,9 +794,6 @@
   .lego-land .max-w-\[80\%\] {
     max-width: 80%;
   }
-  .lego-land .max-w-\[85vw\] {
-    max-width: 85vw;
-  }
   .lego-land .max-w-\[125px\] {
     max-width: 125px;
   }
@@ -878,9 +869,6 @@
   .lego-land .flex-1 {
     flex: 1;
   }
-  .lego-land .flex-none {
-    flex: none;
-  }
   .lego-land .shrink-0 {
     flex-shrink: 0;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nurix/ui-component-library",
-  "version": "1.1.4-stage.121",
+  "version": "1.1.4-stage.122",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",