@payloadcms/ui 4.0.0-internal.697830c → 4.0.0-internal.77191e5

package/dist/css/app.css

@@ -0,0 +1,122 @@
+@layer payload-default, payload;
+
+@import '../styles.css';
+
+@layer payload-default {
+  :root {
+    --font-body: var(--font-family-sans), sans-serif;
+    --font-mono: var(--font-family-mono), 'SF Mono', Menlo, Consolas, Monaco, monospace;
+
+    --app-header-height: 0px;
+    --doc-controls-height: 0px;
+    --doc-header-height: 0px;
+    --nav-width: 275px;
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    :root {
+      --nav-width: 100vw;
+    }
+  }
+
+  /* GLOBAL STYLES */
+
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    background: var(--color-bg);
+    -webkit-font-smoothing: antialiased;
+
+    &[data-theme='dark'] {
+      color-scheme: dark;
+    }
+  }
+
+  html,
+  body,
+  #app {
+    height: 100%;
+  }
+
+  body {
+    font-family: var(--font-body);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-letter-spacing);
+    color: var(--color-text);
+    margin: 0;
+    /* this is for the nav to be able to push the document over */
+    overflow-x: hidden;
+  }
+
+  /* Lock background scroll while a drawer is open. Backs up faceless-ui's JS
+     body-scroll-lock, which a sibling modal can clear prematurely. */
+  body:has(.drawer--is-open) {
+    overflow: hidden;
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    padding-left: 1.53846rem;
+    margin: 0;
+  }
+
+  :focus-visible {
+    outline: var(--accessibility-outline);
+    outline-offset: var(--accessibility-outline-offset);
+    border-radius: var(--radius-medium);
+  }
+
+  a {
+    color: currentColor;
+
+    &:focus {
+      &:not(:focus-visible) {
+        opacity: 0.8;
+      }
+    }
+
+    &:active {
+      opacity: 0.7;
+    }
+  }
+
+  svg {
+    vertical-align: middle;
+  }
+
+  dialog {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    color: currentColor;
+  }
+
+  .payload__modal-item {
+    min-height: 100%;
+    background: transparent;
+  }
+
+  .payload__modal-container--enterDone {
+    overflow: auto;
+  }
+
+  .payload__modal-item--enter,
+  .payload__modal-item--enterDone {
+    z-index: var(--z-modal);
+  }
+}

package/dist/css/colors.css

@@ -5,6 +5,7 @@
 
   :root {
     /* Special */
+    --color-icon-favorite: var(--ramp-yellow-500);
     --special-bg-hover-on-light-canvas: var(--ramp-black-300);
     --special-text-highlight: var(--color-blue-300);
 
@@ -255,8 +256,8 @@
        form fields at once
        ————————————————————————————————————————————— */
 
-    --field-color-bg: var(--color-bg);
-    --field-color-border: var(--special-border-translucent);
+    --field-color-bg: var(--color-bg-secondary);
+    --field-color-border: transparent;
     --field-color-text: var(--color-text);
     --field-color-placeholder: var(--color-text-tertiary);
 
@@ -275,14 +276,14 @@
     --field-color-border-error: var(--color-border-danger-strong);
 
     --field-color-label: var(--color-text);
-    --field-color-label-required: var(--color-text-danger);
+    --field-color-label-required: var(--color-text-secondary);
 
     --field-color-description: var(--color-text-secondary);
 
     --field-color-error-bg: var(--color-bg-danger);
     --field-color-error-text: var(--color-text-ondanger);
 
-    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border: var(--color-icon);
     --field-color-toggle-border-hover: var(--color-border-selected-strong);
     --field-color-toggle-bg-checked: var(--color-bg-brand);
     --field-color-toggle-border-checked: var(--color-border-selected);
@@ -445,8 +446,8 @@
        form fields at once
        ——————————————————————————————————————————————— */
 
-    --field-color-bg: var(--color-bg);
-    --field-color-border: var(--special-border-translucent);
+    --field-color-bg: var(--color-bg-secondary);
+    --field-color-border: transparent;
     --field-color-text: var(--color-text);
     --field-color-placeholder: var(--color-text-tertiary);
 
@@ -465,14 +466,14 @@
     --field-color-border-error: var(--color-border-danger-strong);
 
     --field-color-label: var(--color-text);
-    --field-color-label-required: var(--color-text-danger);
+    --field-color-label-required: var(--color-text-secondary);
 
     --field-color-description: var(--color-text-secondary);
 
     --field-color-error-bg: var(--color-bg-danger);
     --field-color-error-text: var(--color-text-ondanger);
 
-    --field-color-toggle-border: var(--color-border-strong);
+    --field-color-toggle-border: var(--color-icon);
     --field-color-toggle-border-hover: var(--color-border-selected-strong);
     --field-color-toggle-bg-checked: var(--color-bg-brand);
     --field-color-toggle-border-checked: var(--color-border-selected);

package/dist/css/forms.css

@@ -10,12 +10,10 @@
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
     padding: 0 var(--field-padding-inline);
     appearance: none;
     -webkit-appearance: none;
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
     outline: none;
 
     &[data-rtl='true'] {
@@ -70,9 +68,6 @@
     border: var(--stroke-width-small) solid var(--field-color-border);
     border-radius: var(--field-border-radius);
     min-height: var(--field-min-height-large);
-    transition-property: box-shadow, background-color;
-    transition-duration: 100ms;
-    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
 
     &:where(:hover:not(:focus-within):not(:has(input:disabled)):not(:has(input:read-only))) {
       border-color: var(--field-color-border-hover);

package/dist/css/preflight.css

@@ -399,6 +399,7 @@ SOFTWARE.
 */
 
   [hidden]:where(:not([hidden='until-found'])) {
+    /* stylelint-disable-next-line plugin/no-important -- TODO: pre-existing; revisit whether specificity can win instead */
     display: none !important;
   }
 }

package/dist/css/spacing.css

@@ -2,6 +2,7 @@
   :root {
     --spacer-0: 0;
     --spacer-1: 0.25rem; /** 4px */
+    --spacer-1-5: 0.375rem; /** 6px */
     --spacer-2: 0.5rem; /** 8px */
     --spacer-2-5: 0.75rem; /** 12px */
     --spacer-3: 1rem; /** 16px */
@@ -10,24 +11,43 @@
     --spacer-6: 2.5rem; /** 40px */
 
     /* Layout spacing */
+    --edit-view-max-width: 800px;
     --gutter-h: var(--spacer-5);
     --spacing-field: var(--spacer-3);
     --spacing-view-bottom: var(--gutter-h);
 
     /* Breakpoints */
-    --breakpoint-m-width: 1024px;
+    --breakpoint-xs-width: 400px;
     --breakpoint-s-width: 768px;
+    --breakpoint-m-width: 1024px;
+    --breakpoint-l-width: 1440px;
   }
 
-  @media (max-width: 1024px) {
+  :root[data-edit-view-width='640'] {
+    --edit-view-max-width: 640px;
+  }
+
+  :root[data-edit-view-width='960'] {
+    --edit-view-max-width: 960px;
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1440px) {
     :root {
       --gutter-h: var(--spacer-4);
     }
   }
 
-  @media (max-width: 768px) {
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 1024px) {
     :root {
       --gutter-h: var(--spacer-3);
+    }
+  }
+
+  /* stylelint-disable-next-line plugin/no-max-width-media-query -- TODO: pre-existing; migrate to a mobile-first min-width query */
+  @media (max-width: 768px) {
+    :root {
       --spacing-field: var(--spacer-2-5);
       --spacing-view-bottom: var(--spacer-6);
     }

package/dist/css/typography.css

@@ -1,67 +1,76 @@
 @layer payload-default {
   :root {
+    --text-size-offset: 1px;
     --font-family-sans: 'Inter';
     --font-family-mono: 'Roboto Mono';
     --text-letter-spacing: 0.005em; /* 0.5% */
 
     /* Body — Small */
     --text-body-small-font-family: var(--font-family-sans);
-    --text-body-small-font-size: 0.5625rem; /* 9px */
+    --text-body-small-font-size: calc(0.5625rem + var(--text-size-offset)); /* 9px base */
     --text-body-small-font-weight: 450;
     --text-body-small-line-height: 0.875rem; /* 14px */
     --text-body-small-letter-spacing: 0.045px; /* 0.5% */
 
     --text-body-small-strong-font-family: var(--font-family-sans);
-    --text-body-small-strong-font-size: 0.5625rem; /* 9px */
+    --text-body-small-strong-font-size: calc(0.5625rem + var(--text-size-offset)); /* 9px base */
     --text-body-small-strong-font-weight: 550;
     --text-body-small-strong-line-height: 0.875rem; /* 14px */
     --text-body-small-strong-letter-spacing: 0.045px; /* 0.5% */
 
     /* Body — Medium */
     --text-body-medium-font-family: var(--font-family-sans);
-    --text-body-medium-font-size: 0.6875rem; /* 11px */
+    --text-body-medium-font-size: calc(0.6875rem + var(--text-size-offset)); /* 11px base */
     --text-body-medium-font-weight: 450;
     --text-body-medium-line-height: 1rem; /* 16px */
     --text-body-medium-letter-spacing: 0.055px;
 
     --text-body-medium-strong-font-family: var(--font-family-sans);
-    --text-body-medium-strong-font-size: 0.6875rem; /* 11px */
+    --text-body-medium-strong-font-size: calc(0.6875rem + var(--text-size-offset)); /* 11px base */
     --text-body-medium-strong-font-weight: 550;
     --text-body-medium-strong-line-height: 1rem; /* 16px */
     --text-body-medium-strong-letter-spacing: 0.055px;
 
     /* Body — Large */
     --text-body-large-font-family: var(--font-family-sans);
-    --text-body-large-font-size: 0.8125rem; /* 13px */
+    --text-body-large-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
     --text-body-large-font-weight: 450;
     --text-body-large-line-height: 1.375rem; /* 22px */
     --text-body-large-letter-spacing: -0.25px;
 
     --text-body-large-strong-font-family: var(--font-family-sans);
-    --text-body-large-strong-font-size: 0.8125rem; /* 13px */
+    --text-body-large-strong-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
     --text-body-large-strong-font-weight: 550;
     --text-body-large-strong-line-height: 1.375rem; /* 22px */
     --text-body-large-strong-letter-spacing: -0.25px;
 
     /* Heading — Small */
     --text-heading-small-font-family: var(--font-family-sans);
-    --text-heading-small-font-size: 0.8125rem; /* 13px */
+    --text-heading-small-font-size: calc(0.8125rem + var(--text-size-offset)); /* 13px base */
     --text-heading-small-font-weight: 550;
     --text-heading-small-line-height: 1.375rem;
     --text-heading-small-letter-spacing: -0.25px;
 
     /* Heading — Medium */
     --text-heading-medium-font-family: var(--font-family-sans);
-    --text-heading-medium-font-size: 0.9375rem; /* 15px */
+    --text-heading-medium-font-size: calc(0.9375rem + var(--text-size-offset)); /* 15px base */
     --text-heading-medium-font-weight: 550;
     --text-heading-medium-line-height: 1.5625rem;
     --text-heading-medium-letter-spacing: -0.075px;
 
     /* Heading — Large */
     --text-heading-large-font-family: var(--font-family-sans);
-    --text-heading-large-font-size: 1.5rem; /* 24px */
+    --text-heading-large-font-size: calc(1.5rem + var(--text-size-offset)); /* 24px base */
     --text-heading-large-font-weight: 550;
     --text-heading-large-line-height: 2rem; /* 32px */
     --text-heading-large-letter-spacing: -0.408px;
   }
+
+  :root[data-type-size='small'] {
+    --text-size-offset: 0px;
+  }
+
+  :root[data-type-size='large'] {
+    --text-size-offset: 2px;
+  }
 }

package/dist/css/z-index.css

@@ -0,0 +1,10 @@
+@layer payload-default {
+  :root {
+    /* --z-popup needs to be higher than --z-modal to ensure the popup is displayed when modal is open */
+    --z-popup: 60;
+    --z-nav: 20;
+    --z-modal: 30;
+    --z-status: 40;
+    --z-portal-element: 9999;
+  }
+}

package/dist/elements/APIKeyInput/index.css

@@ -35,8 +35,8 @@
     outline: none;
     color: var(--color-text);
     font-family: var(--font-family-mono);
-    font-size: var(--text-body-large-font-size);
-    line-height: var(--text-body-large-line-height);
+    font-size: var(--text-body-medium-font-size);
+    line-height: var(--text-body-medium-line-height);
   }
 
   .api-key-input__field:focus,
@@ -47,8 +47,8 @@
 
   .api-key-input__field[type='password'] {
     font-family: var(--font-family-sans);
-    font-size: var(--text-body-large-font-size);
-    font-weight: var(--text-body-large-strong-font-weight);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-strong-font-weight);
     letter-spacing: 0.025rem;
   }
 

package/dist/elements/APIKeyInput/index.d.ts

@@ -4,6 +4,8 @@ export type APIKeyInputProps = {
     readonly 'aria-label'?: string;
     readonly highlighted?: boolean;
     readonly id?: string;
+    readonly masked?: boolean;
+    readonly revealOnMount?: boolean;
     readonly value: null | string | undefined;
 };
 /**

package/dist/elements/APIKeyInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAmClD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/APIKeyInput/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAKvC,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,gBAAgB,GAAG;IAC7B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAA;CAC1C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAuClD,CAAA"}

package/dist/elements/APIKeyInput/index.js

@@ -18,34 +18,31 @@ export const APIKeyInput = t0 => {
     id,
     "aria-label": t1,
     highlighted,
+    masked: t2,
+    revealOnMount: t3,
     value
   } = t0;
   const ariaLabel = t1 === undefined ? "API Key" : t1;
-  const [showKey, setShowKey] = useState(false);
+  const masked = t2 === undefined ? false : t2;
+  const revealOnMount = t3 === undefined ? false : t3;
+  const [showKey, setShowKey] = useState(revealOnMount);
   const keyValue = value ?? "";
-  const t2 = highlighted && "highlight";
-  let t3;
-  if ($[0] !== t2) {
-    t3 = [`${baseClass}__control`, t2].filter(Boolean);
-    $[0] = t2;
-    $[1] = t3;
+  const t4 = highlighted && "highlight";
+  let t5;
+  if ($[0] !== t4) {
+    t5 = [`${baseClass}__control`, t4].filter(Boolean);
+    $[0] = t4;
+    $[1] = t5;
   } else {
-    t3 = $[1];
+    t5 = $[1];
   }
-  const t4 = t3.join(" ");
-  let t5;
-  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== showKey || $[6] !== t4) {
-    let t6;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setShowKey(_temp);
-      $[8] = t6;
-    } else {
-      t6 = $[8];
-    }
-    t5 = _jsxs("div", {
+  const t6 = t5.join(" ");
+  let t7;
+  if ($[2] !== ariaLabel || $[3] !== id || $[4] !== keyValue || $[5] !== masked || $[6] !== showKey || $[7] !== t6) {
+    t7 = _jsxs("div", {
       className: baseClass,
       children: [_jsxs("div", {
-        className: t4,
+        className: t6,
         children: [_jsx(KeyIcon, {
           className: `${baseClass}__icon`
         }), _jsx("input", {
@@ -53,32 +50,33 @@ export const APIKeyInput = t0 => {
           className: `${baseClass}__field`,
           id,
           readOnly: true,
-          type: showKey ? "text" : "password",
+          type: masked || showKey ? "text" : "password",
           value: keyValue
-        }), _jsx("button", {
+        }), !masked && _jsx("button", {
           "aria-label": showKey ? "Hide API key" : "Show API key",
           className: `${baseClass}__toggle`,
-          onClick: t6,
+          onClick: () => setShowKey(_temp),
           type: "button",
           children: _jsx(EyeIcon, {
             active: showKey,
             size: 24
           })
         })]
-      }), _jsx(CopyToClipboard, {
+      }), !masked && _jsx(CopyToClipboard, {
         value: keyValue
       })]
     });
     $[2] = ariaLabel;
     $[3] = id;
     $[4] = keyValue;
-    $[5] = showKey;
-    $[6] = t4;
-    $[7] = t5;
+    $[5] = masked;
+    $[6] = showKey;
+    $[7] = t6;
+    $[8] = t7;
   } else {
-    t5 = $[7];
+    t7 = $[8];
   }
-  return t5;
+  return t7;
 };
 function _temp(prev) {
   return !prev;

package/dist/elements/APIKeyInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t2","t3","filter","Boolean","t4","join","t5","t6","Symbol","for","_temp","_jsxs","className","children","_jsx","readOnly","type","onClick","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(false)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        <button\n          aria-label={showKey ? 'Hide API key' : 'Show API key'}\n          className={`${baseClass}__toggle`}\n          onClick={() => setShowKey((prev) => !prev)}\n          type=\"button\"\n        >\n          <EyeIcon active={showKey} size={24} />\n        </button>\n      </div>\n      <CopyToClipboard value={keyValue} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AASlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC;EAAA,IAAAL,EAKvD;EAHe,MAAAM,SAAA,GAAAH,EAAqB,KAAAI,SAAA,GAAT,SAAS,GAArBJ,EAAqB;EAInC,OAAAK,OAAA,EAAAC,UAAA,IAA8Bf,QAAA,MAAS;EACvC,MAAAgB,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAP,WAAA,IAAe;EAAA,IAAAQ,EAAA;EAAA,IAAAX,CAAA,QAAAU,EAAA;IAAzCC,EAAA,IAAC,GAAAd,SAAA,WAAuB,EAAEa,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAb,CAAA,MAAAU,EAAA;IAAAV,CAAA,MAAAW,EAAA;EAAA;IAAAA,EAAA,GAAAX,CAAA;EAAA;EAA7D,MAAAc,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAhB,CAAA,QAAAK,SAAA,IAAAL,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAS,QAAA,IAAAT,CAAA,QAAAO,OAAA,IAAAP,CAAA,QAAAc,EAAA;IAAA,IAAAG,EAAA;IAAA,IAAAjB,CAAA,QAAAkB,MAAA,CAAAC,GAAA;MAc3EF,EAAA,GAAAA,CAAA,KAAMT,UAAA,CAAAY,KAAsB;MAAApB,CAAA,MAAAiB,EAAA;IAAA;MAAAA,EAAA,GAAAjB,CAAA;IAAA;IAhB3CgB,EAAA,GAAAK,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYR,EAA2E;QAAAS,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACanB,SAAA;UAAAiB,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BnB,OAAA,GAAU,SAAS;UAAAH,KAAA,EAClBK;QAAA,C,GAETe,IAAA,CAAC;UAAA,cACajB,OAAA,GAAU,iBAAiB;UAAAe,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EACxBV,EAA4B;UAAAS,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAkC,MAAA,EAAiBrB,OAAA;YAAAsB,IAAA;UAAA,C;;UAGrBL,IAAA,CAAA5B,eAAA;QAAAQ,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;SAtB1BO,E;CAyBJ;AAnCuD,SAAAI,MAAAU,IAAA;EAAA,QA0BRA,IAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useState","EyeIcon","KeyIcon","CopyToClipboard","baseClass","APIKeyInput","t0","$","id","t1","highlighted","masked","t2","revealOnMount","t3","value","ariaLabel","undefined","showKey","setShowKey","keyValue","t4","t5","filter","Boolean","t6","join","t7","_jsxs","className","children","_jsx","readOnly","type","onClick","_temp","active","size","prev"],"sources":["../../../src/elements/APIKeyInput/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport { EyeIcon } from '../../icons/Eye/index.js'\nimport { KeyIcon } from '../../icons/Key/index.js'\nimport { CopyToClipboard } from '../CopyToClipboard/index.js'\nimport './index.css'\n\nconst baseClass = 'api-key-input'\n\nexport type APIKeyInputProps = {\n  readonly 'aria-label'?: string\n  readonly highlighted?: boolean\n  readonly id?: string\n  readonly masked?: boolean\n  readonly revealOnMount?: boolean\n  readonly value: null | string | undefined\n}\n\n/**\n * Read-only masked API key field: key icon, value, show/hide toggle, and copy\n * control. Shared by the core auth API-key field and the MCP API-keys collection.\n */\nexport const APIKeyInput: React.FC<APIKeyInputProps> = ({\n  id,\n  'aria-label': ariaLabel = 'API Key',\n  highlighted,\n  masked = false,\n  revealOnMount = false,\n  value,\n}) => {\n  const [showKey, setShowKey] = useState(revealOnMount)\n  const keyValue = value ?? ''\n\n  return (\n    <div className={baseClass}>\n      <div\n        className={[`${baseClass}__control`, highlighted && 'highlight'].filter(Boolean).join(' ')}\n      >\n        <KeyIcon className={`${baseClass}__icon`} />\n        <input\n          aria-label={ariaLabel}\n          className={`${baseClass}__field`}\n          id={id}\n          readOnly\n          type={masked || showKey ? 'text' : 'password'}\n          value={keyValue}\n        />\n        {!masked && (\n          <button\n            aria-label={showKey ? 'Hide API key' : 'Show API key'}\n            className={`${baseClass}__toggle`}\n            onClick={() => setShowKey((prev) => !prev)}\n            type=\"button\"\n          >\n            <EyeIcon active={showKey} size={24} />\n          </button>\n        )}\n      </div>\n      {!masked && <CopyToClipboard value={keyValue} />}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAEhC,SAASC,OAAO,QAAQ;AACxB,SAASC,OAAO,QAAQ;AACxB,SAASC,eAAe,QAAQ;AAChC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;;;;AAIA,OAAO,MAAMC,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAAC;IAAAU,EAAA;IAAA,cAAAC,EAAA;IAAAC,WAAA;IAAAC,MAAA,EAAAC,EAAA;IAAAC,aAAA,EAAAC,EAAA;IAAAC;EAAA,IAAAT,EAOvD;EALe,MAAAU,SAAA,GAAAP,EAAqB,KAAAQ,SAAA,GAAT,SAAS,GAArBR,EAAqB;EAEnC,MAAAE,MAAA,GAAAC,EAAc,KAAAK,SAAA,WAAdL,EAAc;EACd,MAAAC,aAAA,GAAAC,EAAqB,KAAAG,SAAA,WAArBH,EAAqB;EAGrB,OAAAI,OAAA,EAAAC,UAAA,IAA8BnB,QAAA,CAASa,aAAA;EACvC,MAAAO,QAAA,GAAiBL,KAAA,IAAS;EAKiB,MAAAM,EAAA,GAAAX,WAAA,IAAe;EAAA,IAAAY,EAAA;EAAA,IAAAf,CAAA,QAAAc,EAAA;IAAzCC,EAAA,IAAC,GAAAlB,SAAA,WAAuB,EAAEiB,EAAe,EAAAE,MAAA,CAAAC,OAAoB;IAAAjB,CAAA,MAAAc,EAAA;IAAAd,CAAA,MAAAe,EAAA;EAAA;IAAAA,EAAA,GAAAf,CAAA;EAAA;EAA7D,MAAAkB,EAAA,GAAAH,EAA6D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAApB,CAAA,QAAAS,SAAA,IAAAT,CAAA,QAAAC,EAAA,IAAAD,CAAA,QAAAa,QAAA,IAAAb,CAAA,QAAAI,MAAA,IAAAJ,CAAA,QAAAW,OAAA,IAAAX,CAAA,QAAAkB,EAAA;IAF1FE,EAAA,GAAAC,KAAA,CAAC;MAAAC,SAAA,EAAAzB,SAAA;MAAA0B,QAAA,GACCF,KAAA,CAAC;QAAAC,SAAA,EACYJ,EAA2E;QAAAK,QAAA,GAEtFC,IAAA,CAAA7B,OAAA;UAAA2B,SAAA,EAAoB,GAAAzB,SAAA;QAAoB,C,GACxC2B,IAAA,CAAC;UAAA,cACaf,SAAA;UAAAa,SAAA,EACD,GAAAzB,SAAA,SAAqB;UAAAI,EAAA;UAAAwB,QAAA;UAAAC,IAAA,EAG1BtB,MAAA,IAAUO,OAAA,GAAU,SAAS;UAAAH,KAAA,EAC5BK;QAAA,C,GAER,CAACT,MAAA,IACAoB,IAAA,CAAC;UAAA,cACab,OAAA,GAAU,iBAAiB;UAAAW,SAAA,EAC5B,GAAAzB,SAAA,UAAsB;UAAA8B,OAAA,EAAAA,CAAA,KAClBf,UAAA,CAAAgB,KAAsB;UAAAF,IAAA,EAChC;UAAAH,QAAA,EAELC,IAAA,CAAA9B,OAAA;YAAAmC,MAAA,EAAiBlB,OAAA;YAAAmB,IAAA;UAAA,C;;UAItB,CAAC1B,MAAA,IAAUoB,IAAA,CAAA5B,eAAA;QAAAY,KAAA,EAAwBK;MAAA,C;;;;;;;;;;;;SAxBtCO,E;CA2BJ;AAvCuD,SAAAQ,MAAAG,IAAA;EAAA,QA6BNA,IAAA;AAAA","ignoreList":[]}

package/dist/elements/AddNewRelation/index.css

@@ -22,7 +22,6 @@
       border-radius: var(--button-radius);
       color: var(--color-icon);
       cursor: pointer;
-      transition: background-color 100ms;
 
       &:hover {
         background: var(--color-bg-secondary-hover);

package/dist/elements/AnimateHeight/usePatchAnimateHeight.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePatchAnimateHeight.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,GAAI,+CAKnC;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;CACd,KAAG;IAAE,+BAA+B,EAAE,OAAO,CAAA;CAoF7C,CAAA"}
+{"version":3,"file":"usePatchAnimateHeight.d.ts","sourceRoot":"","sources":["../../../src/elements/AnimateHeight/usePatchAnimateHeight.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,kDAK/B;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,OAAO,CAAA;CACd,KAAG;IAAE,+BAA+B,EAAE,OAAO,CAAA;CAoF7C,CAAA"}

package/dist/elements/AppHeader/EditViewWidthSettings/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .edit-view-width-settings__alignment {
+    padding: var(--spacer-2);
+  }
+}

package/dist/elements/AppHeader/EditViewWidthSettings/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.css';
+export declare const EditViewWidthSettings: React.FC;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/AppHeader/EditViewWidthSettings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/AppHeader/EditViewWidthSettings/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EA2BzC,CAAA"}

package/dist/elements/AppHeader/EditViewWidthSettings/index.js

@@ -0,0 +1,77 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTheme } from '../../../providers/Theme/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { PopupList } from '../../Popup/index.js';
+import { Switch } from '../../Switch/index.js';
+import './index.css';
+const widths = ['640', '800', '960', 'full'];
+export const EditViewWidthSettings = () => {
+  const $ = _c(12);
+  const {
+    editViewWidth,
+    setEditViewHeaderAlignment,
+    setEditViewWidth,
+    shouldAlignEditViewHeader
+  } = useTheme();
+  const {
+    t
+  } = useTranslation();
+  let t0;
+  if ($[0] !== editViewWidth || $[1] !== setEditViewHeaderAlignment || $[2] !== setEditViewWidth || $[3] !== shouldAlignEditViewHeader || $[4] !== t) {
+    let t1;
+    if ($[6] !== editViewWidth || $[7] !== setEditViewWidth || $[8] !== t) {
+      t1 = width => _jsx(PopupList.RadioGroupItem, {
+        active: editViewWidth === width,
+        onClick: () => setEditViewWidth({
+          editViewWidth: width
+        }),
+        children: width === "full" ? t("general:editViewWidthFull") : `${width}px`
+      }, width);
+      $[6] = editViewWidth;
+      $[7] = setEditViewWidth;
+      $[8] = t;
+      $[9] = t1;
+    } else {
+      t1 = $[9];
+    }
+    let t2;
+    if ($[10] !== setEditViewHeaderAlignment) {
+      t2 = isEnabled => setEditViewHeaderAlignment({
+        isEnabled
+      });
+      $[10] = setEditViewHeaderAlignment;
+      $[11] = t2;
+    } else {
+      t2 = $[11];
+    }
+    t0 = _jsxs("div", {
+      "aria-label": t("general:editViewWidth"),
+      "data-popup-prevent-close": true,
+      role: "group",
+      children: [_jsx(PopupList.GroupLabel, {
+        label: t("general:editViewWidth")
+      }), _jsx(PopupList.RadioGroup, {
+        children: widths.map(t1)
+      }), _jsx(Switch, {
+        checked: shouldAlignEditViewHeader,
+        className: "edit-view-width-settings__alignment",
+        label: t("general:alignHeaderAndControls"),
+        onChange: t2
+      })]
+    });
+    $[0] = editViewWidth;
+    $[1] = setEditViewHeaderAlignment;
+    $[2] = setEditViewWidth;
+    $[3] = shouldAlignEditViewHeader;
+    $[4] = t;
+    $[5] = t0;
+  } else {
+    t0 = $[5];
+  }
+  return t0;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/AppHeader/EditViewWidthSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTheme","useTranslation","PopupList","Switch","widths","EditViewWidthSettings","$","editViewWidth","setEditViewHeaderAlignment","setEditViewWidth","shouldAlignEditViewHeader","t","t0","t1","width","_jsx","RadioGroupItem","active","onClick","children","t2","isEnabled","_jsxs","role","GroupLabel","label","RadioGroup","map","checked","className","onChange"],"sources":["../../../../src/elements/AppHeader/EditViewWidthSettings/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport type { EditViewWidth } from '../../../providers/Theme/shared.js'\n\nimport { useTheme } from '../../../providers/Theme/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { PopupList } from '../../Popup/index.js'\nimport { Switch } from '../../Switch/index.js'\nimport './index.css'\n\nconst widths: EditViewWidth[] = ['640', '800', '960', 'full']\n\nexport const EditViewWidthSettings: React.FC = () => {\n  const { editViewWidth, setEditViewHeaderAlignment, setEditViewWidth, shouldAlignEditViewHeader } =\n    useTheme()\n  const { t } = useTranslation()\n\n  return (\n    <div aria-label={t('general:editViewWidth')} data-popup-prevent-close role=\"group\">\n      <PopupList.GroupLabel label={t('general:editViewWidth')} />\n      <PopupList.RadioGroup>\n        {widths.map((width) => (\n          <PopupList.RadioGroupItem\n            active={editViewWidth === width}\n            key={width}\n            onClick={() => setEditViewWidth({ editViewWidth: width })}\n          >\n            {width === 'full' ? t('general:editViewWidthFull') : `${width}px`}\n          </PopupList.RadioGroupItem>\n        ))}\n      </PopupList.RadioGroup>\n      <Switch\n        checked={shouldAlignEditViewHeader}\n        className=\"edit-view-width-settings__alignment\"\n        label={t('general:alignHeaderAndControls')}\n        onChange={(isEnabled) => setEditViewHeaderAlignment({ isEnabled })}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAIlB,SAASC,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,MAAM,QAAQ;AACvB,OAAO;AAEP,MAAMC,MAAA,GAA0B,CAAC,OAAO,OAAO,OAAO,OAAO;AAE7D,OAAO,MAAMC,qBAAA,GAAkCA,CAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EAC7C;IAAAS,aAAA;IAAAC,0BAAA;IAAAC,gBAAA;IAAAC;EAAA,IACEV,QAAA;EACF;IAAAW;EAAA,IAAcV,cAAA;EAAA,IAAAW,EAAA;EAAA,IAAAN,CAAA,QAAAC,aAAA,IAAAD,CAAA,QAAAE,0BAAA,IAAAF,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAI,yBAAA,IAAAJ,CAAA,QAAAK,CAAA;IAAA,IAAAE,EAAA;IAAA,IAAAP,CAAA,QAAAC,aAAA,IAAAD,CAAA,QAAAG,gBAAA,IAAAH,CAAA,QAAAK,CAAA;MAMIE,EAAA,GAAAC,KAAA,IACVC,IAAA,CAAAb,SAAA,CAAAc,cAAA;QAAAC,MAAA,EACUV,aAAA,KAAkBO,KAAA;QAAAI,OAAA,EAAAA,CAAA,KAEXT,gBAAA;UAAAF,aAAA,EAAkCO;QAAA,CAAM;QAAAK,QAAA,EAEtDL,KAAA,KAAU,SAASH,CAAA,CAAE,+BAA+B,GAAGG,KAAA;MAAS,GAH5DA,KAAA;MAAAR,CAAA,MAAAC,aAAA;MAAAD,CAAA,MAAAG,gBAAA;MAAAH,CAAA,MAAAK,CAAA;MAAAL,CAAA,MAAAO,EAAA;IAAA;MAAAA,EAAA,GAAAP,CAAA;IAAA;IAAA,IAAAc,EAAA;IAAA,IAAAd,CAAA,SAAAE,0BAAA;MAWCY,EAAA,GAAAC,SAAA,IAAeb,0BAAA;QAAAa;MAAA,CAAuC;MAAAf,CAAA,OAAAE,0BAAA;MAAAF,CAAA,OAAAc,EAAA;IAAA;MAAAA,EAAA,GAAAd,CAAA;IAAA;IAjBpEM,EAAA,GAAAU,KAAA,CAAC;MAAA,cAAgBX,CAAA,CAAE;MAAA;MAAAY,IAAA,EAAwD;MAAAJ,QAAA,GACzEJ,IAAA,CAAAb,SAAA,CAAAsB,UAAA;QAAAC,KAAA,EAA6Bd,CAAA,CAAE;MAAA,C,GAC/BI,IAAA,CAAAb,SAAA,CAAAwB,UAAA;QAAAP,QAAA,EACGf,MAAA,CAAAuB,GAAA,CAAWd,EAGH;MAAA,C,GAOXE,IAAA,CAAAZ,MAAA;QAAAyB,OAAA,EACWlB,yBAAA;QAAAmB,SAAA,EACC;QAAAJ,KAAA,EACHd,CAAA,CAAE;QAAAmB,QAAA,EACCV;MAAsD,C;;;;;;;;;;;SAjBpER,E;CAqBJ","ignoreList":[]}

package/dist/elements/AppHeader/SettingsMenu/index.css

@@ -0,0 +1,5 @@
+@layer payload-default {
+  .app-header-settings {
+    flex-shrink: 0;
+  }
+}