datocms-plugin-media-layouts 0.1.0

package/README.md

@@ -0,0 +1,288 @@
+# Media Layouts
+
+A DatoCMS plugin that extends JSON fields to allow editors to select assets with precise layout configuration including aspect ratios and output widths. Ideal for content that requires specific rendering dimensions across responsive breakpoints.
+
+![DatoCMS Plugin](https://img.shields.io/badge/DatoCMS-Plugin-ff7751)
+
+## Features
+
+- **Self-contained data**: Stores URL, filename, and all metadata directly in JSON—no additional API calls needed
+- **Three operational modes**: Single asset, multiple assets (gallery), or predefined layout slots
+- **Aspect ratio control**: 9 presets plus custom ratios for precise cropping
+- **Width presets**: Original (max) plus 320px mobile to 4K resolution
+- **Focal point support**: Preserves focal point data from DatoCMS media library
+- **Metadata editing**: Edit alt text, title, and focal point directly from the field
+- **Layout mode**: Define grid-based slot configurations with required fields
+- **Automatic height calculation**: Heights computed from width and aspect ratio for easy imgix integration
+
+## Installation
+
+1. Go to **Settings > Plugins** in your DatoCMS project
+2. Click **Add new plugin**
+3. Search for "Media Layouts" or install from URL:
+   ```
+   https://github.com/datocms/plugins/media-layouts
+   ```
+
+## Configuration
+
+### Global Settings
+
+Configure default values that apply to all fields using this plugin:
+
+| Setting | Description | Default |
+|---------|-------------|---------|
+| Default Aspect Ratio | Applied to new assets when no field override exists | 16:9 |
+| Default Width | Applied to new assets when no field override exists | 1920px |
+
+### Field Configuration
+
+When adding the plugin to a JSON field, you must select a mode:
+
+#### Single Asset Mode
+
+Select one image with layout controls. Stores a single `MediaLayoutItem` object.
+
+#### Multiple Assets Mode (Gallery)
+
+Select multiple images, each with independent layout settings. Stores an array of `MediaLayoutItem` objects.
+
+#### Layout Mode (Predefined Slots)
+
+Define a grid with named slots that editors fill with assets. Each slot has:
+- **Label**: Descriptive name (e.g., "Hero Image", "Sidebar Thumbnail")
+- **Aspect Ratio**: Fixed ratio for this slot
+- **Width**: Fixed output width for this slot (including Original)
+- **Required**: Whether the slot must be filled
+
+Grid supports 1-4 columns and 1-6 rows.
+
+### Field Overrides
+
+For single/multiple modes, you can optionally override global defaults:
+- Toggle "Override default aspect ratio" to set a field-specific ratio
+- Toggle "Override default width" to set a field-specific width
+
+## Aspect Ratio Options
+
+| Value | Label | Use Case |
+|-------|-------|----------|
+| `original` | Original (no crop) | Preserve native dimensions |
+| `16:9` | Widescreen | Video players, hero banners |
+| `4:3` | Standard | Traditional TV format |
+| `1:1` | Square | Social media, avatars |
+| `3:2` | Photo | Standard photography |
+| `2:3` | Portrait Photo | Vertical photography |
+| `21:9` | Ultrawide | Cinematic banners |
+| `9:16` | Portrait/Mobile | Stories, vertical video |
+| `3:4` | Portrait Standard | Vertical content |
+| `custom` | Custom... | Enter any ratio (e.g., `2.35:1`) |
+
+## Width Presets
+
+| Width | Label | Typical Use |
+|-------|-------|-------------|
+| `original` | Original (max) | Use native resolution |
+| 320px | Mobile small | Feature phones |
+| 640px | Mobile | Standard mobile |
+| 768px | Tablet | Portrait tablets |
+| 1024px | Tablet landscape | Landscape tablets |
+| 1280px | Desktop small | Small laptops |
+| 1920px | Full HD | Standard desktop |
+| 2560px | 2K | High-resolution displays |
+| 3840px | 4K | Ultra HD displays |
+
+## Data Model
+
+The plugin stores all asset data directly in the JSON field, including the URL. No additional API calls are needed to render images.
+
+### Single Mode
+
+```json
+{
+  "uploadId": "abc123",
+  "url": "https://www.datocms-assets.com/12345/image.jpg",
+  "filename": "image.jpg",
+  "format": "jpg",
+  "size": 245000,
+  "alt": "A beautiful sunset",
+  "title": "Sunset at the beach",
+  "focalPoint": { "x": 0.5, "y": 0.3 },
+  "aspectRatio": "16:9",
+  "width": 1920,
+  "height": 1080,
+  "originalWidth": 4000,
+  "originalHeight": 3000
+}
+```
+
+### Multiple Mode
+
+```json
+[
+  {
+    "uploadId": "abc123",
+    "url": "https://www.datocms-assets.com/12345/photo1.jpg",
+    "filename": "photo1.jpg",
+    "format": "jpg",
+    "size": 180000,
+    "alt": "First image",
+    "title": null,
+    "focalPoint": null,
+    "aspectRatio": "1:1",
+    "width": 640,
+    "height": 640,
+    "originalWidth": 2000,
+    "originalHeight": 2000
+  },
+  {
+    "uploadId": "def456",
+    "url": "https://www.datocms-assets.com/12345/photo2.png",
+    "filename": "photo2.png",
+    "format": "png",
+    "size": 320000,
+    "alt": "Second image",
+    "title": null,
+    "focalPoint": { "x": 0.3, "y": 0.5 },
+    "aspectRatio": "4:3",
+    "width": 1024,
+    "height": 768,
+    "originalWidth": 3000,
+    "originalHeight": 2000
+  }
+]
+```
+
+### Layout Mode
+
+```json
+[
+  {
+    "slotId": "hero",
+    "uploadId": "abc123",
+    "url": "https://www.datocms-assets.com/12345/hero.jpg",
+    "filename": "hero.jpg",
+    "format": "jpg",
+    "size": 450000,
+    "alt": "Hero banner",
+    "title": null,
+    "focalPoint": { "x": 0.5, "y": 0.5 },
+    "aspectRatio": "21:9",
+    "width": 1920,
+    "height": 823,
+    "originalWidth": 4000,
+    "originalHeight": 2000
+  },
+  {
+    "slotId": "sidebar",
+    "uploadId": "def456",
+    "url": "https://www.datocms-assets.com/12345/sidebar.jpg",
+    "filename": "sidebar.jpg",
+    "format": "jpg",
+    "size": 85000,
+    "alt": "Sidebar image",
+    "title": null,
+    "focalPoint": null,
+    "aspectRatio": "1:1",
+    "width": 320,
+    "height": 320,
+    "originalWidth": 800,
+    "originalHeight": 800
+  }
+]
+```
+
+### TypeScript Types
+
+```typescript
+type MediaLayoutItem = {
+  uploadId: string;
+  url: string;
+  filename: string;
+  format: string | null;
+  size: number;
+  alt: string | null;
+  title: string | null;
+  focalPoint: { x: number; y: number } | null;
+  aspectRatio: string;
+  customAspectRatio?: string; // When aspectRatio is "custom"
+  width: number | 'original';
+  height: number;
+  originalWidth: number | null;
+  originalHeight: number | null;
+};
+
+// Single mode value
+type SingleFieldValue = MediaLayoutItem | null;
+
+// Multiple mode value
+type MultipleFieldValue = MediaLayoutItem[];
+
+// Layout mode value
+type SlotAssignment = MediaLayoutItem & { slotId: string };
+type LayoutFieldValue = SlotAssignment[];
+```
+
+## Usage with imgix
+
+The stored URL, width, height, and focal point data integrates directly with DatoCMS imgix:
+
+```javascript
+const { url, width, height, focalPoint, aspectRatio, originalWidth } = mediaLayoutItem;
+
+// Build imgix parameters
+const resolvedWidth = width === 'original' ? originalWidth : width;
+const params = new URLSearchParams({
+  fit: aspectRatio === 'original' ? 'max' : 'crop',
+});
+
+if (resolvedWidth) {
+  params.set('w', resolvedWidth.toString());
+}
+if (height && resolvedWidth) {
+  params.set('h', height.toString());
+}
+
+// Add focal point if available
+if (focalPoint && aspectRatio !== 'original') {
+  params.set('crop', 'focalpoint');
+  params.set('fp-x', focalPoint.x.toString());
+  params.set('fp-y', focalPoint.y.toString());
+}
+
+const finalUrl = `${url}?${params.toString()}`;
+```
+
+## Fetching Data
+
+JSON fields return the complete JSON blob in GraphQL queries. Since the URL is stored directly, no additional API calls are needed:
+
+```graphql
+query {
+  blogPost {
+    heroImage # Returns the full MediaLayoutItem or array with URL included
+  }
+}
+```
+
+The response contains everything needed to render images, including the base URL which you can combine with imgix parameters.
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Type check
+npx tsc -b
+```
+
+## License
+
+MIT

package/dist/assets/index-BrvH3ARS.css

@@ -0,0 +1 @@
+@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:700;src:url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:700;src:url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:500;src:url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff2"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("woff"),url(https://use.typekit.net/af/522c51/00000000000000003b9acde6/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:500;src:url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff2"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("woff"),url(https://use.typekit.net/af/4e71b3/00000000000000003b9acde7/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i5&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:normal;font-weight:400;src:url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff2"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("woff"),url(https://use.typekit.net/af/bac079/00000000000000003b9acde4/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=n4&v=3) format("opentype")}@font-face{font-display:auto;font-family:colfax-web;font-style:italic;font-weight:400;src:url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/l?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff2"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/d?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("woff"),url(https://use.typekit.net/af/c1cc04/00000000000000003b9acde5/27/a?primer=f592e0a4b9356877842506ce344308576437e4f677d7c9b78ca2162e6cad991a&fvd=i4&v=3) format("opentype")}html{font-size:16px;height:auto}body,html{margin:0;padding:0}._button_474wk_1{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-radius:4px;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-weight:var(--font-weight-bold);line-height:inherit;opacity:1;text-decoration:none;transition:all .3s var(--material-ease);vertical-align:middle;white-space:nowrap}._button_474wk_1:focus,._button_474wk_1:hover{opacity:.8}._button_474wk_1:active{opacity:.7}._disabled_474wk_30{cursor:not-allowed}._buttonType-muted_474wk_34{background-color:var(--light-color);color:var(--accent-color)}._buttonType-muted_474wk_34._disabled_474wk_30{background-color:var(--light-bg-color);color:#0003}._buttonType-muted_474wk_34._disabled_474wk_30:active,._buttonType-muted_474wk_34._disabled_474wk_30:focus,._buttonType-muted_474wk_34._disabled_474wk_30:hover{color:#0003}._buttonType-primary_474wk_50{background-color:var(--accent-color);color:#fff}._buttonType-primary_474wk_50:active,._buttonType-primary_474wk_50:focus,._buttonType-primary_474wk_50:hover{color:#fff}._buttonType-primary_474wk_50._disabled_474wk_30{background-color:var(--disabled-bg-color);color:#0003}._buttonType-primary_474wk_50._disabled_474wk_30:active,._buttonType-primary_474wk_50._disabled_474wk_30:focus,._buttonType-primary_474wk_50._disabled_474wk_30:hover{color:#0003}._buttonType-negative_474wk_71,._buttonType-negative_474wk_71:active,._buttonType-negative_474wk_71:focus,._buttonType-negative_474wk_71:hover{background-color:var(--alert-color);color:#fff}._buttonType-negative_474wk_71._disabled_474wk_30{background-color:var(--disabled-bg-color);color:#0003}._buttonSize-xxs_474wk_88{font-size:1em;padding:.5em .8em}._buttonSize-xs_474wk_93{font-size:1em;padding:.6em .8em}._buttonSize-s_474wk_98{font-size:1em;padding:.7em 1em}._buttonSize-m_474wk_103{font-size:1.1em;padding:.7em 1em}._buttonSize-l_474wk_108{font-size:1.2em;padding:.7em 1em}._buttonSize-xl_474wk_113{font-size:1.2em;padding:1em}._fullWidth_474wk_118{display:block;text-align:center;width:100%}._button__leftIcon_474wk_124,._button__rightIcon_474wk_125{display:inline-block;line-height:.6;vertical-align:middle}._button__leftIcon_474wk_124 svg,._button__rightIcon_474wk_125 svg{fill:var(--accent-color)}._button__leftIcon_474wk_124{margin-right:.5em}._button__leftIcon_474wk_124:last-child{margin-right:0}._button__rightIcon_474wk_125{margin-left:.5em}._button__rightIcon_474wk_125:first-child{margin-left:0}._Button_1h1w1_1{justify-column:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;border:0;border-right:1px solid var(--border-color);border:1px solid var(--border-color);border-left-width:0;box-sizing:border-box;color:var(--base-body-color);color:rgba(var(--base-body-color-rgb-components,.6));cursor:pointer;display:flex;font-family:inherit;font-size:inherit;line-height:inherit;padding:7px 13px}._Button_1h1w1_1:hover{background-color:var(--light-bg-color)}._Button_1h1w1_1 svg{fill:var(--light-body-color)}._Button--s_1h1w1_32{padding:3px 10px}._Button--disabled_1h1w1_36{color:var(--light-body-color);cursor:not-allowed}._Button--disabled_1h1w1_36:hover{background:#fff}._Button--selected_1h1w1_45{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}._Button--selected_1h1w1_45 svg{fill:#fff}._Button--selected_1h1w1_45:hover{background-color:var(--accent-color)}._Button--selected_1h1w1_45._Button--disabled_1h1w1_36,._Button--selected_1h1w1_45:hover{background-color:rgba(var(--accent-color-rgb-components),.8);border-color:rgba(var(--accent-color-rgb-components),.8)}._Button_1h1w1_1:first-child{border-left-width:1px;border-radius:4px 0 0 4px}._Button_1h1w1_1:last-child{border-radius:0 4px 4px 0}._Group_10mj4_1{align-items:stretch;background-color:#fff;display:flex;overflow:hidden}._themeVariables_ovgoa_1{--base-body-color:#34363a;--base-body-color-rgb-components:52,54,58;--light-body-color:#848484;--light-body-color-rgb-components:132,132,132;--placeholder-body-color:#c6c6c6;--placeholder-body-color-rgb-components:198,198,198;--light-bg-color:#f5f5f5;--light-bg-color-rgb-components:245,245,245;--lighter-bg-color:#f8f8f8;--lighter-bg-color-rgb-components:248,248,248;--disabled-bg-color:#ededed;--disabled-bg-color-rgb-components:237,237,237;--border-color:#f0f0f0;--border-color-rgb-components:240,240,240;--darker-border-color:#d7d7d7;--darker-border-color-rgb-components:215,215,215;--alert-color:#ff5e49;--alert-color-rgb-components:255,94,73;--warning-color:gold;--warning-color-rgb-components:255,215,0;--notice-color:#46d700;--notice-color-rgb-components:70,215,0;--warning-bg-color:#ffffe5;--warning-bg-color-rgb-components:255,255,229;--add-color:#4cb06d;--add-color-rgb-components:76,176,109;--remove-color:#eb576a;--remove-color-rgb-components:235,87,106;--base-font-family:"colfax-web","Roboto","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;--monospaced-font-family:"Roboto Mono","Menlo","Bitstream Vera Sans Mono",Consolas,Courier,monospace;--font-weight-bold:500;--spacing-s:.375rem;--spacing-m:.75rem;--spacing-l:1.5rem;--spacing-xl:2.25rem;--spacing-xxl:3.75rem;--spacing-xxxl:6rem;--negative-spacing-s:-.375rem;--negative-spacing-m:-.75rem;--negative-spacing-l:-1.5rem;--negative-spacing-xl:-2.25rem;--negative-spacing-xxl:-3.75rem;--negative-spacing-xxxl:-6rem;--font-size-xxs:.6875rem;--font-size-xs:.75rem;--font-size-s:.875rem;--font-size-m:.9375rem;--font-size-l:1.0625rem;--font-size-xl:1.1875rem;--font-size-xxl:1.5625rem;--font-size-xxxl:1.875rem;--material-ease:cubic-bezier(.55,0,.1,1);--inertial-ease:cubic-bezier(.19,1,.22,1)}._canvas_ovgoa_68{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;color:var(--base-body-color);font-family:var(--base-font-family);font-size:var(--font-size-m);line-height:1.5}._inspector_u6041_1{margin:var(--spacing-l) 0}._panel_u6041_5{border-bottom:1px solid var(--border-color)}._panelHandle_u6041_9{all:inherit;background:var(--light-bg-color);border:0;box-sizing:border-box;cursor:pointer;display:block;font-weight:var(--font-weight-bold);padding:5px 10px;width:100%}._panelHandle_u6041_9:hover{background:var(--lighter-bg-color)}._panelBody_u6041_25{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);padding:20px}._groupDescription_u6041_31{font-size:var(--font-size-s);line-height:1.2;margin-bottom:20px}._propertyGroup_u6041_37{border:1px solid var(--border-color);border-radius:5px}._propertyOrMethod_u6041_42{border-bottom:1px solid var(--border-color);line-height:1.2}._propertyOrMethod_u6041_42 p{margin:0}._propertyOrMethodBody_u6041_51{padding:15px}._propertyOrMethodExample_u6041_55{position:relative}._propertyOrMethodExample_u6041_55 pre{background:var(--light-bg-color);font-size:.8em;margin:0;max-height:240px;overflow:auto;padding:15px}._propertyOrMethodName_u6041_68{color:var(--light-body-color);display:block;font-family:var(--monospaced-font-family);font-size:.9em;font-weight:700;margin-bottom:5px;text-decoration:none}._propertyOrMethodName_u6041_68:hover{text-decoration:underline}._propertyOrMethodExampleActions_u6041_82{background:#fff;display:flex;padding:15px}._propertyOrMethodExampleActions_u6041_82>*{margin-right:10px}._fieldError_qi0xk_1{color:var(--alert-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._FieldGroup_uz9ju_1{display:block}._FieldGroup__item_uz9ju_5{display:block;margin-bottom:var(--spacing-l)}._FieldGroup__item_uz9ju_5:last-child{margin-bottom:0}._fieldHint_1avon_1{color:var(--light-body-color);font-size:var(--font-size-xs);line-height:1.2;margin-top:var(--spacing-s)}._fieldHint_1avon_1 a{color:inherit}._fieldHint_1avon_1 a:hover{text-decoration:none}._Form_5qspp_1,._Form__item_5qspp_5{display:block}._Form__item_5qspp_5:last-child{margin-bottom:0}._Form__item--default_5qspp_13{margin-bottom:var(--spacing-l)}._Form__item--condensed_5qspp_17{margin-bottom:var(--spacing-m)}._formLabel_tcjrv_1{align-items:center;color:var(--light-body-color);display:flex;margin-bottom:var(--spacing-s)}._formLabel_tcjrv_1:hover ._formLabel__code_tcjrv_8{opacity:1}._formLabel--error_tcjrv_14{color:var(--alert-color)}._formLabel__label_tcjrv_18{flex:1}._formLabel__code_tcjrv_8{font-family:var(--monospaced-font-family);font-size:.95em;opacity:0;position:absolute;transition:opacity .2s var(--material-ease)}._hotKey_1eko8_1{align-items:center;display:inline-flex;gap:15px}._label_1eko8_7{align-items:center;display:flex}._keys_1eko8_12{align-items:center;display:inline-flex;gap:4px}._hotKeyKey_1eko8_18{background:var(--light-color);border-radius:3px;padding:5px 8px}._Section_zh95u_1{position:relative}._Section--highlighted_zh95u_5:before{animation:_pageContentSectionHighligh_zh95u_1 4s ease-in-out .25s forwards;border-radius:4px;bottom:-20px;box-shadow:0 0 0 4px var(--accent-color);content:"";left:-30px;pointer-events:none;position:absolute;right:-30px;top:-20px;z-index:10}._Section__header_zh95u_19{margin-bottom:var(--spacing-l);margin-left:var(--negative-spacing-l);margin-right:var(--negative-spacing-l);position:relative}._Section__header_zh95u_19:before{background-color:var(--border-color);content:"";display:block;height:1px;left:0;position:absolute;right:0;top:50%;z-index:1}._Section__title_zh95u_38{align-items:center;background-color:#fff;display:inline-flex;font-size:var(--font-size-l);font-weight:var(--font-weight-bold);margin-left:var(--spacing-m);margin-right:var(--spacing-l);padding-left:var(--spacing-m);padding-right:var(--spacing-m);position:relative;z-index:2}._Section__arrow_zh95u_55{all:initial;align-self:stretch;cursor:pointer;margin-right:.3em;width:15px}._Section__arrow_zh95u_55:before{border-bottom:6px solid transparent;border-left:6px solid var(--base-body-color);border-top:6px solid transparent;content:"";height:0;left:14px;margin-top:-6px;position:absolute;top:50%;transform-origin:50% 50%;transition:transform .2s ease-out;width:0}._Section__arrow_zh95u_55:hover:before{opacity:.7}._Section__arrow--is-open_zh95u_82:before{transform:rotate(90deg)}@keyframes _pageContentSectionHighligh_zh95u_1{0%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 4px rgba(var(--accent-color-rgb-components),.7)}15%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}75%{box-shadow:0 0 0 4px var(--accent-color),0 0 0 80px transparent}to{box-shadow:0 0 0 4px transparent,0 0 0 80px transparent}}._SidebarPanel_4uwco_1{border-bottom:1px solid var(--border-color)}._SidebarPanel__header_4uwco_5{align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:#fff;background-color:var(--light-bg-color);border:0;box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:flex;font-family:inherit;font-size:inherit;line-height:inherit;padding:0;text-align:left;-webkit-user-select:none;user-select:none;width:100%}._SidebarPanel__header_4uwco_5:focus,._SidebarPanel__header_4uwco_5:hover{background-color:var(--lighter-bg-color)}._SidebarPanel__header__title_4uwco_30{flex:1;font-weight:500;padding:0 20px}._SidebarPanel__header__chevron_4uwco_36{align-items:center;display:flex;padding:13px 15px}._SidebarPanel__content_4uwco_42{background-color:#fff;padding:20px}._SidebarPanel__content--no-padding_4uwco_47{padding:0}._Spinner--inline_oumod_1{display:inline-block;position:relative;vertical-align:middle}._Spinner--centered_oumod_7{left:50%;position:absolute;top:50%}._Spinner__bar_oumod_13{animation:_Spinner__spin_oumod_1 1.2s linear infinite;background-color:var(--light-body-color);height:14%;left:-20%;position:absolute;top:0;width:40%}@keyframes _Spinner__spin_oumod_1{0%{opacity:1}to{opacity:.15}}._switchField__flex_16z4j_1{align-items:center;display:flex}._switchField__switchInput_16z4j_6{width:55px}._switchField__label_16z4j_10{color:var(--base-body-color);flex:1;line-height:1.1;line-height:20px;margin-bottom:0;pointer-events:none;-moz-user-select:text;-ms-user-select:text;-webkit-user-select:text;user-select:text}._switchField__below_16z4j_22{margin-left:55px;margin-top:var(--spacing-s)}._switchInput__inner_1knbg_1{color:#fff;font-size:12px;left:24px;position:absolute}._switchInput_1knbg_1{background-color:#ccc;border:1px solid #ccc;border-radius:20px;box-sizing:border-box;cursor:pointer;display:inline-block;height:22px;line-height:20px;position:relative;transition:all .3s cubic-bezier(.35,0,.25,1);vertical-align:middle;width:44px}._switchInput_1knbg_1:after{animation-duration:.3s;animation-name:_switchInput__off_1knbg_1;animation-timing-function:cubic-bezier(.35,0,.25,1);background-color:#fff;border-radius:50%;box-shadow:0 2px 5px #00000042;content:" ";cursor:pointer;height:18px;left:2px;position:absolute;top:1px;transform:scale(1);transition:left .3s cubic-bezier(.35,0,.25,1);width:18px}._switchInput_1knbg_1:focus:after,._switchInput_1knbg_1:hover{animation-name:_switchInput__on_1knbg_1;transform:scale(1.1)}._switchInput__checked_1knbg_47{background-color:var(--accent-color);border:1px solid var(--accent-color)}._switchInput__checked_1knbg_47 ._switchInput__inner_1knbg_1{left:6px}._switchInput__checked_1knbg_47:after{left:22px}._switchInput__disabled_1knbg_60{background:#ccc;border-color:#ccc;cursor:no-drop}._switchInput__disabled_1knbg_60:after{animation-name:_none_1knbg_1;background:#9e9e9e;cursor:no-drop}._switchInput__disabled_1knbg_60:focus:after,._switchInput__disabled_1knbg_60:hover{animation-name:_none_1knbg_1;transform:scale(1)}@keyframes _switchInput__on_1knbg_1{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1.1)}}@keyframes _switchInput__off_1knbg_1{0%{transform:scale(1.1)}to{transform:scale(1)}}._TextInput_x2oj2_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextInput_x2oj2_1::placeholder{color:var(--placeholder-body-color)}._TextInput_x2oj2_1:hover{border-color:var(--darker-border-color)}._TextInput_x2oj2_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextInput--monospaced_x2oj2_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextInput--disabled_x2oj2_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextInput--error_x2oj2_41,._TextInput--error_x2oj2_41:focus,._TextInput--error_x2oj2_41:hover{border-color:var(--alert-color)}._TextInput--error_x2oj2_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-color-rgb-components),.2)}._TextareaInput_1wnu9_1{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:0;box-sizing:border-box;display:block;font-family:inherit;font-size:var(--font-size-m);padding:10px;resize:none;transition:border .2s var(--material-ease);width:100%}._TextareaInput_1wnu9_1::placeholder{color:var(--placeholder-body-color)}._TextareaInput_1wnu9_1:hover{border-color:var(--darker-border-color)}._TextareaInput_1wnu9_1:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._TextareaInput--monospaced_1wnu9_30{font-family:var(--monospaced-font-family);font-size:var(--font-size-s)}._TextareaInput--disabled_1wnu9_35{background:var(--lighter-bg-color);border-color:var(--border-color);color:var(--light-body-color)}._TextareaInput--error_1wnu9_41,._TextareaInput--error_1wnu9_41:focus,._TextareaInput--error_1wnu9_41:hover{border-color:var(--alert-color)}._TextareaInput--error_1wnu9_41:focus{box-shadow:0 0 0 3px rgba(var(--alert-color-rgb-components),.2)}._Button_fy6g6_1{align-items:center;-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;border-left:1px solid var(--border-color);border-right:1px solid var(--border-color);box-sizing:border-box;color:var(--base-body-color);cursor:pointer;display:flex;font-family:inherit;justify-content:center;line-height:inherit;min-height:49px;padding:0;width:49px}._Button_fy6g6_1:focus,._Button_fy6g6_1:hover{background-color:var(--light-bg-color)}._Button_fy6g6_1:first-child{border-left:0}._Button_fy6g6_1:last-child{border-right:0}@media screen and (min-width:380px){._Button_fy6g6_1{min-height:59px;width:59px}._Button_fy6g6_1 svg{font-size:20px}}._Stack_1nnzo_1{align-items:center;display:flex;flex:1;flex-direction:row;justify-content:center;padding:10px 15px}._Stack--s_1nnzo_10{padding-bottom:var(--spacing-s);padding-top:var(--spacing-s)}._Stack--l_1nnzo_15{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}._Title_1dx5n_1{font-size:var(--font-size-l);font-weight:500;line-height:1.1;margin-right:15px}@media screen and (min-width:380px){._Title_1dx5n_1{font-size:var(--font-size-xl)}}._Toolbar_1cwb8_1{align-items:stretch;border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);display:flex;position:relative}._Toolbar_1cwb8_1:first-child{border-top-width:0}._Toolbar_1cwb8_1:last-child{border-bottom-width:0}._tooltip_3z5rn_1{word-wrap:break-word;background:#fff;border-radius:4px;box-shadow:0 1px 9px #0003;-webkit-hyphens:auto;hyphens:auto;max-width:400px;overflow-wrap:break-word;padding:10px 15px}._Dropdown_nie0g_1{position:relative}._Dropdown__spacer_nie0g_5{top:0;right:0;bottom:0;left:0;pointer-events:none;position:absolute}._Dropdown__menu__search_nie0g_11{border-bottom:1px solid var(--border-color);padding:7px}._Dropdown__menu__search__input_nie0g_16{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none;border:1px solid var(--border-color);border-radius:3px;box-sizing:border-box;display:block;font-family:inherit;font-size:.9em;padding:8px;resize:none;transition:border .2s var(--material-ease);width:100%}._Dropdown__menu__search__input_nie0g_16::placeholder{color:var(--placeholder-body-color)}._Dropdown__menu__search__input_nie0g_16:hover{border-color:var(--darker-border-color)}._Dropdown__menu__search__input_nie0g_16:focus{border-color:var(--accent-color);box-shadow:0 0 0 3px var(--semi-transparent-accent-color);outline:0}._Dropdown__menu-container_nie0g_45{position:fixed;visibility:hidden}._Dropdown__menu_nie0g_11{background-color:#fff;border-radius:4px;box-shadow:0 3px 10px #0003;margin-bottom:var(--spacing-xl);margin-top:10px;min-width:200px;padding:1px 0;text-align:initial}._Dropdown__menu__inner_nie0g_61{margin:7px 0}._Dropdown__menu__group__title_nie0g_65{background-color:var(--light-bg-color);color:var(--light-body-color);font-size:var(--font-size-xs);padding:5px 15px 3px;text-transform:uppercase}._Dropdown__menu__group__content_nie0g_73{margin:8px 0}._Dropdown__menu__text_nie0g_77{color:var(--light-body-color);display:block;line-height:1.2;padding:4px 15px;position:relative;text-align:left}._Dropdown__menu__option_nie0g_86{align-items:center;color:var(--base-body-color);display:flex;padding:4px 15px;position:relative;text-align:left;text-decoration:none;white-space:nowrap}._Dropdown__menu__option_nie0g_86:focus,._Dropdown__menu__option_nie0g_86:hover{background-color:var(--light-bg-color)}._Dropdown__menu__option_nie0g_86>a{color:inherit;display:block;text-decoration:none}._Dropdown__menu__option--is-selected_nie0g_108{background-color:var(--light-bg-color)}._Dropdown__menu__option--is-disabled_nie0g_112{opacity:.5}._Dropdown__menu__option--is-disabled_nie0g_112 ._Dropdown__menu__option__content_nie0g_115{cursor:not-allowed}._Dropdown__menu__option--is-dangerous_nie0g_120{color:var(--alert-color)}._Dropdown__menu__option--is-dangerous_nie0g_120 svg{fill:var(--alert-color)}._Dropdown__menu__option--is-dangerous_nie0g_120:focus,._Dropdown__menu__option--is-dangerous_nie0g_120:hover{background-color:var(--alert-color);color:#fff}._Dropdown__menu__option--is-dangerous_nie0g_120:focus svg,._Dropdown__menu__option--is-dangerous_nie0g_120:hover svg{fill:#fff}._Dropdown__menu__option--is-active_nie0g_138{font-weight:500}._Dropdown__menu__option--is-active_nie0g_138:focus,._Dropdown__menu__option--is-active_nie0g_138:hover{background-color:none}._Dropdown__menu__option--is-invalid_nie0g_151,._Dropdown__menu__option--is-valid_nie0g_147{padding-left:35px}._Dropdown__menu__option--is-invalid_nie0g_151:before{background-color:var(--alert-color);border-radius:4px;content:"";font-size:12px;height:8px;left:15px;position:absolute;top:50%;transform:translateY(-50%);width:8px}._Dropdown__menu__option__content_nie0g_115{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:inherit;cursor:pointer;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0;text-align:left}._Dropdown__menu__option__content_nie0g_115>svg{fill:var(--light-body-color);color:var(--light-body-color);display:inline-block;font-size:13px;padding-right:8px;vertical-align:middle}._Dropdown__menu__option__icons_nie0g_194{align-items:center;display:flex;padding-left:15px}._Dropdown__menu__option__icon_nie0g_194{-webkit-appearance:none;-moz-appearance:none;background-color:transparent;border:0;box-sizing:border-box;color:var(--base-body-color);color:var(--light-body-color);cursor:pointer;display:inline-block;font-family:inherit;font-size:inherit;font-size:13px;line-height:inherit;line-height:10px;opacity:0;padding:3px;position:relative;top:-1px;transition:transform .1s ease-in-out;width:100%;width:auto}._Dropdown__menu__option_nie0g_86:focus ._Dropdown__menu__option__icon_nie0g_194,._Dropdown__menu__option_nie0g_86:hover ._Dropdown__menu__option__icon_nie0g_194{opacity:1}._Dropdown__menu__option__icon_nie0g_194:focus,._Dropdown__menu__option__icon_nie0g_194:hover{transform:scale(1.2)}._Dropdown__menu__option__icon_nie0g_194 svg{fill:var(--light-body-color)}._Dropdown__menu__option__icon--delete_nie0g_241{color:var(--alert-color)}._Dropdown__menu__option__icon--delete_nie0g_241 svg{fill:var(--alert-color)}._Dropdown__menu__separator_nie0g_248{background-color:var(--border-color);height:1px;margin:8px 0}._Dropdown__menu_nie0g_11{overflow-y:auto}._SplitViewPane_1cl1f_1{height:100%;overflow-y:auto;position:absolute;width:100%}._SplitViewSash_tds51_1{align-items:center;background-color:rgba(var(--light-color-components),0);display:flex;height:100%;justify-content:center;position:absolute;top:0;transition:background-color .2s .15s;width:100%;z-index:2}._SplitViewSash--dragging_tds51_15,._SplitViewSash_tds51_1:hover{background-color:var(--light-color)}._SplitViewSash--dragging_tds51_15:has(._SplitViewSash__content_tds51_19:hover),._SplitViewSash_tds51_1:hover:has(._SplitViewSash__content_tds51_19:hover){background-color:transparent}._SplitViewSash--no-resize_tds51_24{pointer-events:none}._SplitViewSash--vertical_tds51_28{cursor:col-resize}._SplitViewSash--horizontal_tds51_32{cursor:row-resize}._SplitViewSash__content_tds51_19{cursor:pointer;left:50%;padding:15px 0;pointer-events:auto;position:absolute;top:50%;transform:translate(-50%,-50%)}._SplitViewSash__content__button_tds51_46{align-items:center;background:#fff;border:1px solid var(--border-color);border-radius:6px;color:var(--light-body-color);display:flex;font-size:10px;height:20px;justify-content:center;width:20px;z-index:2}._SplitViewSash__content__button_tds51_46 svg{fill:currentColor;display:block}._SplitViewSash__content_tds51_19:hover ._SplitViewSash__content__button_tds51_46{background:var(--light-bg-color);color:var(--base-body-color)}._SplitView_1oi17_1{flex:1;height:100%;position:relative;width:100%}._SplitView--dragging_1oi17_8._SplitView--vertical_1oi17_8{cursor:col-resize}._SplitView--dragging_1oi17_8._SplitView--horizontal_1oi17_12{cursor:row-resize}._SplitView--disable-select_1oi17_16{-webkit-user-select:none;user-select:none}._SplitView--disable-select_1oi17_16 ._SplitViewPane_1oi17_20{pointer-events:none}._VerticalSplitPane__expand_80tii_1{background:#fff;bottom:0;cursor:pointer;left:0;position:absolute;right:0;top:0;transition:all .3s cubic-bezier(.55,0,.1,1)}._VerticalSplitPane__expand_80tii_1:hover{animation:_VerticalSplitPane__expand_80tii_1 .6s cubic-bezier(.55,0,.1,1);background:var(--light-bg-color)}._VerticalSplitPane__expand_80tii_1._VerticalSplitPane__expand_80tii_1{border-right:1px solid var(--border-color);transform-origin:left}._VerticalSplitPane__expand_80tii_1._VerticalSplitPane__expand--right_80tii_25{border-left:1px solid var(--border-color);transform-origin:right}@keyframes _VerticalSplitPane__expand_80tii_1{0%{transform:scaleX(1)}50%{transform:scaleX(2)}to{transform:scaleX(1)}}._VerticalSplitPaneOverlay_80tii_42{background:linear-gradient(180deg,#30302f80,#30302f4d);bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:12}._VerticalSplitPaneOverlay__primary_80tii_58{bottom:0;left:0;position:absolute;right:0;top:0;z-index:1}._VerticalSplitPaneOverlay__primary--left_80tii_67{margin-right:20px}._VerticalSplitPaneOverlay__primary--right_80tii_71{margin-left:20px}._VerticalSplitPaneOverlay__secondary_80tii_75{background:#fff;bottom:0;box-shadow:0 0 15px #0006;position:absolute;top:0}._VerticalSplitPaneOverlay__secondary--left_80tii_83{left:0}._VerticalSplitPaneOverlay__secondary--right_80tii_87{right:0}._VerticalSplitPaneOverlay__sash_80tii_91{height:100%;position:absolute;top:0}._VerticalSplitPaneOverlay__secondary--left_80tii_83 ._VerticalSplitPaneOverlay__sash_80tii_91{right:0}._VerticalSplitPaneOverlay__secondary--right_80tii_87 ._VerticalSplitPaneOverlay__sash_80tii_91{left:0}._fieldBlock_1s122_1{margin-bottom:12px}._fieldBlock_1s122_1:last-child{margin-bottom:0}._container_ev7x9_1{display:flex;flex-direction:column;gap:16px}._toolbar_ev7x9_7{display:flex;align-items:center;justify-content:space-between;gap:12px}._gridControls_ev7x9_14{display:flex;align-items:center;gap:16px}._layoutControls_ev7x9_20{display:flex;align-items:center;gap:16px;flex-wrap:wrap}._controlGroupColumn_ev7x9_27{display:flex;flex-direction:column;align-items:flex-start;gap:4px}._controlGroup_ev7x9_27{display:flex;align-items:center;gap:8px}._controlLabel_ev7x9_40{font-size:12px;font-weight:500;color:var(--light-body-color)}._controlSelect_ev7x9_46{padding:6px 10px;font-size:12px;color:var(--base-body-color);background:#fff;border:1px solid var(--border-color);border-radius:4px;cursor:pointer}._controlInput_ev7x9_56{padding:6px 10px;font-size:12px;color:var(--base-body-color);background:#fff;border:1px solid var(--border-color);border-radius:4px}._controlSelect_ev7x9_46:focus{outline:none;border-color:var(--accent-color)}._controlInput_ev7x9_56:focus{outline:none;border-color:var(--accent-color)}._inputError_ev7x9_75{border-color:var(--alert-color)}._errorText_ev7x9_79{font-size:11px;color:var(--alert-color)}._gridInfo_ev7x9_84{font-size:12px;color:var(--light-body-color);padding:6px 12px;background:var(--light-bg-color);border-radius:4px}._layoutMeta_ev7x9_92{font-size:12px;color:var(--light-body-color);padding:4px 0}._toolbarRow_ev7x9_98{display:flex;justify-content:flex-end}._addSlotButton_ev7x9_103{padding:6px 12px;font-size:12px;font-weight:500;color:var(--accent-color);background:#fff;border:1px solid var(--accent-color);border-radius:4px;cursor:pointer;transition:all .15s ease}._addSlotButton_ev7x9_103:hover{background:var(--accent-color);color:#fff}._gridPreview_ev7x9_121{padding:16px;background:linear-gradient(135deg,#f8f9fa,#f0f2f5);border:1px solid var(--border-color);border-radius:8px;max-height:60vh;overflow:auto}._grid_ev7x9_14{display:grid;gap:12px;width:100%}._grid_ev7x9_14[data-layout=masonry]{grid-auto-flow:dense}._grid_ev7x9_14[data-columns="1"]{grid-template-columns:1fr}._grid_ev7x9_14[data-columns="2"]{grid-template-columns:repeat(2,1fr)}._grid_ev7x9_14[data-columns="3"]{grid-template-columns:repeat(3,1fr)}._grid_ev7x9_14[data-columns="4"]{grid-template-columns:repeat(4,1fr)}._slotItem_ev7x9_157{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;cursor:grab;transition:all .2s ease;box-shadow:0 1px 3px #00000014}._slotItem_ev7x9_157:active{cursor:grabbing}._slotItem_ev7x9_157:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}._slotItem_ev7x9_157._isSelected_ev7x9_177{box-shadow:0 0 0 2px var(--accent-color),0 4px 12px #00000026}._slotItem_ev7x9_157._isDragging_ev7x9_181{opacity:.5;transform:scale(.98);box-shadow:0 1px 3px #00000014}._slotItem_ev7x9_157._isDragOver_ev7x9_187{box-shadow:0 0 0 2px var(--accent-color),0 8px 24px #0003;transform:scale(1.02)}._slotItem_ev7x9_157._isRequired_ev7x9_192:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-color);z-index:2}._slotPreview_ev7x9_203{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#fff;color:var(--light-body-color);min-height:60px;height:100%}._previewContent_ev7x9_216{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;z-index:1}._previewContent_ev7x9_216>svg{width:24px;height:24px;opacity:.4}._ratioFrame_ev7x9_231{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0}._ratioShape_ev7x9_241{max-width:100%;max-height:100%;border:1px dashed var(--border-color);border-radius:6px;background:#00000005}._dragHandle_ev7x9_249{position:absolute;top:4px;left:4px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--light-body-color);opacity:0;transition:opacity .15s ease;cursor:grab;z-index:2}._dragHandle_ev7x9_249:active{cursor:grabbing}._dragHandle_ev7x9_249 svg{width:12px;height:12px}._slotItem_ev7x9_157:hover ._dragHandle_ev7x9_249{opacity:.6}._slotItem_ev7x9_157._isDragging_ev7x9_181 ._dragHandle_ev7x9_249{opacity:1}._slotLabel_ev7x9_282{font-size:11px;font-weight:600;color:var(--base-body-color);text-align:center;padding:0 8px}._slotMeta_ev7x9_290{font-size:9px;color:var(--light-body-color);text-align:center}._slotOverlay_ev7x9_297{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#0009;opacity:0;transition:opacity .15s ease;pointer-events:none;z-index:3}._slotItem_ev7x9_157:hover ._slotOverlay_ev7x9_297,._slotItem_ev7x9_157:focus-within ._slotOverlay_ev7x9_297{opacity:1;pointer-events:auto}._overlayButton_ev7x9_317{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fff;border:none;border-radius:4px;cursor:pointer;color:var(--base-body-color);transition:all .15s ease}._overlayButton_ev7x9_317:hover{background:var(--accent-color);color:#fff}._overlayButton_ev7x9_317._danger_ev7x9_336:hover{background:var(--alert-color)}._overlayButton_ev7x9_317 svg{width:14px;height:14px}._editPanel_ev7x9_346{margin-top:12px;padding:16px;background:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px #00000014}._editPanelHeader_ev7x9_355{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-color)}._editPanelTitle_ev7x9_364{font-size:13px;font-weight:600;color:var(--base-body-color)}._closeButton_ev7x9_370{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;border-radius:4px;cursor:pointer;color:var(--light-body-color);transition:all .15s ease}._closeButton_ev7x9_370:hover{background:var(--light-bg-color);color:var(--base-body-color)}._closeButton_ev7x9_370 svg{width:14px;height:14px}._editPanelForm_ev7x9_394{display:flex;flex-direction:column;gap:12px}._formRow_ev7x9_400{display:flex;gap:12px}._formField_ev7x9_405{flex:1;display:flex;flex-direction:column;gap:4px}._formLabel_ev7x9_412{font-size:11px;font-weight:500;color:var(--light-body-color);text-transform:uppercase;letter-spacing:.5px}._formInput_ev7x9_420{padding:8px 10px;font-size:13px;color:var(--base-body-color);background:var(--light-bg-color);border:1px solid var(--border-color);border-radius:4px}._formInput_ev7x9_420:focus{outline:none;border-color:var(--accent-color);background:#fff}._formSelect_ev7x9_435{padding:8px 10px;font-size:13px;color:var(--base-body-color);background:var(--light-bg-color);border:1px solid var(--border-color);border-radius:4px;cursor:pointer}._formSelect_ev7x9_435:focus{outline:none;border-color:var(--accent-color)}._formCheckbox_ev7x9_450{display:flex;align-items:center;gap:8px;padding:8px 0}._formCheckbox_ev7x9_450 input{width:16px;height:16px;cursor:pointer}._formCheckbox_ev7x9_450 span{font-size:13px;color:var(--base-body-color)}._formHint_ev7x9_468{font-size:11px;color:var(--light-body-color)}._emptyGrid_ev7x9_474{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:48px 24px;background:linear-gradient(135deg,#f8f9fa,#f0f2f5);border:2px dashed var(--border-color);border-radius:8px;text-align:center}._emptyIcon_ev7x9_487{color:var(--light-body-color);opacity:.5}._emptyIcon_ev7x9_487 svg{width:48px;height:48px}._emptyText_ev7x9_497{font-size:14px;color:var(--light-body-color)}._emptyHint_ev7x9_502{font-size:12px;color:var(--lighter-body-color)}._emptyCell_ev7x9_508{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:80px;border:2px dashed var(--border-color);border-radius:6px;background:#ffffff80;transition:all .2s ease}._emptyCell_ev7x9_508:hover{border-color:var(--accent-color);background:#fffc}._emptyCell_ev7x9_508._isDragOver_ev7x9_187{border-color:var(--accent-color);background:rgba(var(--accent-color-rgb, 59, 130, 246),.1);transform:scale(1.02)}._addCellButton_ev7x9_532{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;border-radius:50%;background:transparent;color:var(--light-body-color);cursor:pointer;transition:all .15s ease}._addCellButton_ev7x9_532:hover{background:var(--accent-color);color:#fff;transform:scale(1.1)}._addCellButton_ev7x9_532 svg{width:20px;height:20px}._card_lyugj_1{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;background:#fff;transition:box-shadow .2s ease,border-color .2s ease}._card_lyugj_1:hover{border-color:var(--accent-color);box-shadow:0 6px 14px #0000000f}._thumbnail_lyugj_17{flex-shrink:0;width:44px;height:44px;border-radius:6px;overflow:hidden;background:var(--light-bg-color);border:1px solid var(--border-color)}._thumbnail_lyugj_17 img{width:100%;height:100%;object-fit:cover}._filePlaceholder_lyugj_33{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:var(--light-body-color);text-transform:uppercase}._info_lyugj_45{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}._filename_lyugj_53{font-size:13px;font-weight:500;color:var(--base-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._dimensions_lyugj_62{font-size:11px;color:var(--light-body-color)}._controls_lyugj_67{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:4px;border-radius:6px;background:var(--lighter-bg-color);border:1px solid var(--border-color)}._controlButton_lyugj_78{padding:5px 9px;font-size:11px;font-weight:500;color:var(--base-body-color);background:#fff;border:1px solid transparent;border-radius:4px;cursor:pointer;transition:border-color .15s ease,background .15s ease}._controlButton_lyugj_78:hover:not(:disabled){border-color:var(--accent-color);background:var(--light-bg-color)}._controlButton_lyugj_78:disabled{opacity:.5;cursor:not-allowed}._customAspectRatioInput_lyugj_100{width:74px;padding:5px 6px;font-size:11px;color:var(--base-body-color);background:#fff;border:1px solid var(--border-color);border-radius:4px}._customAspectRatioField_lyugj_110{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._inputError_lyugj_117{border-color:var(--alert-color)}._errorText_lyugj_121{font-size:10px;color:var(--alert-color);line-height:1.2}._customAspectRatioInput_lyugj_100:focus{outline:none;border-color:var(--accent-color)}._customAspectRatioInput_lyugj_100:disabled{opacity:.5;cursor:not-allowed}._menuButton_lyugj_137{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:#fff;border:1px solid transparent;border-radius:4px;cursor:pointer;color:var(--light-body-color);transition:all .15s ease}._menuButton_lyugj_137:hover{background:var(--light-bg-color);border-color:var(--accent-color);color:var(--base-body-color)}._menuButton_lyugj_137:disabled{opacity:.5;cursor:not-allowed}._loadingState_lyugj_162{display:flex;align-items:center;justify-content:center;padding:12px;width:100%}._errorState_lyugj_170{display:flex;align-items:center;justify-content:space-between;width:100%;color:var(--alert-color);font-size:12px}._removeButton_lyugj_179{padding:4px 8px;font-size:11px;color:var(--alert-color);background:transparent;border:1px solid var(--alert-color);border-radius:4px;cursor:pointer}._removeButton_lyugj_179:hover{background:var(--alert-color);color:#fff}._singleEditor_zmv18_1{display:flex;flex-direction:column;gap:12px}._header_zmv18_7{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}._headerInfo_zmv18_15{display:flex;align-items:baseline;gap:8px}._headerTitle_zmv18_21{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--base-body-color)}._headerCount_zmv18_29{font-size:11px;color:var(--light-body-color);padding:2px 8px;border-radius:999px;border:1px solid var(--border-color);background:var(--light-bg-color)}._galleryEditor_v0i03_1{display:flex;flex-direction:column;gap:12px}._header_v0i03_7{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}._headerInfo_v0i03_15{display:flex;align-items:baseline;gap:8px}._headerTitle_v0i03_21{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--base-body-color)}._headerCount_v0i03_29{font-size:11px;color:var(--light-body-color);padding:2px 8px;border-radius:999px;border:1px solid var(--border-color);background:var(--light-bg-color)}._assetList_v0i03_38{display:flex;flex-direction:column;gap:8px}._container_z8nk3_1{display:flex;flex-direction:column;gap:12px}._grid_z8nk3_7{display:grid;gap:12px}._grid_z8nk3_7[data-layout=masonry]{grid-auto-flow:dense}._slotCell_z8nk3_16{display:flex;min-width:0;min-height:0}._grid_z8nk3_7[data-columns="1"]{grid-template-columns:1fr}._grid_z8nk3_7[data-columns="2"]{grid-template-columns:repeat(2,1fr)}._grid_z8nk3_7[data-columns="3"]{grid-template-columns:repeat(3,1fr)}._grid_z8nk3_7[data-columns="4"]{grid-template-columns:repeat(4,1fr)}._slotCard_z8nk3_39{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:6px;background:#fff;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease;width:100%;height:100%}._slotCard_z8nk3_39:hover{border-color:var(--accent-color);box-shadow:0 8px 16px #00000014}._slotCard_z8nk3_39._isEmpty_z8nk3_56{border-style:dashed}._slotCard_z8nk3_39._isRequired_z8nk3_60 ._slotHeader_z8nk3_60{background:var(--light-bg-color)}._slotHeader_z8nk3_60{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border-color)}._slotLabel_z8nk3_72{font-size:12px;font-weight:600;color:var(--base-body-color)}._slotMeta_z8nk3_78{font-size:10px;color:var(--light-body-color)}._requiredBadge_z8nk3_83{font-size:9px;font-weight:500;padding:2px 6px;background:var(--accent-color);color:#fff;border-radius:3px;text-transform:uppercase}._slotContent_z8nk3_93{position:relative;flex:1;min-height:0}._emptySlot_z8nk3_100{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 12px;background:var(--lighter-bg-color)}._emptyIcon_z8nk3_110{color:var(--light-body-color)}._emptyIcon_z8nk3_110 svg{width:32px;height:32px}._emptyText_z8nk3_119{font-size:11px;color:var(--light-body-color)}._selectButton_z8nk3_124{padding:6px 12px;font-size:11px;font-weight:500;color:var(--accent-color);background:#fff;border:1px solid var(--accent-color);border-radius:4px;cursor:pointer;transition:all .15s ease}._selectButton_z8nk3_124:hover:not(:disabled){background:var(--accent-color);color:#fff}._selectButton_z8nk3_124:disabled{opacity:.5;cursor:not-allowed}._filledSlot_z8nk3_147{position:relative}._thumbnailContainer_z8nk3_151{position:relative;overflow:hidden;background:var(--light-bg-color)}._thumbnail_z8nk3_151{width:100%;height:100%;object-fit:cover}._filePlaceholder_z8nk3_163{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:80px;font-size:11px;font-weight:600;color:var(--light-body-color);text-transform:uppercase;background:var(--light-bg-color)}._slotOverlay_z8nk3_177{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:8px;background:#00000080;opacity:0;transition:opacity .15s ease;pointer-events:none}._filledSlot_z8nk3_147:hover ._slotOverlay_z8nk3_177,._filledSlot_z8nk3_147:focus-within ._slotOverlay_z8nk3_177{opacity:1;pointer-events:auto}._overlayButton_z8nk3_196{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#fff;border:none;border-radius:4px;cursor:pointer;color:var(--base-body-color);transition:all .15s ease}._overlayButton_z8nk3_196:hover{background:var(--accent-color);color:#fff}._overlayButton_z8nk3_196._danger_z8nk3_215:hover{background:var(--alert-color)}._overlayButton_z8nk3_196 svg{width:16px;height:16px}._assetInfo_z8nk3_224{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--border-color);background:var(--lighter-bg-color)}._filename_z8nk3_233{font-size:11px;color:var(--base-body-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}._dimensions_z8nk3_243{font-size:10px;color:var(--light-body-color);flex-shrink:0;margin-left:8px}._loadingState_z8nk3_251{display:flex;align-items:center;justify-content:center;padding:24px}._errorState_z8nk3_258{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;color:var(--alert-color);font-size:11px}._removeErrorButton_z8nk3_268{padding:4px 8px;font-size:10px;color:var(--alert-color);background:transparent;border:1px solid var(--alert-color);border-radius:4px;cursor:pointer}._removeErrorButton_z8nk3_268:hover{background:var(--alert-color);color:#fff}._emptyGrid_z8nk3_283{padding:32px;border:2px dashed var(--border-color);border-radius:4px;text-align:center;color:var(--light-body-color);font-size:13px}._emptyState_1gmkv_1{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;padding:24px;border:1px dashed var(--border-color);border-radius:6px;background:linear-gradient(135deg,#f8f9fb,#f1f3f6);text-align:center}._icon_1gmkv_14{display:flex;align-items:center;justify-content:center;color:var(--light-body-color)}._icon_1gmkv_14 svg{width:28px;height:28px}._text_1gmkv_26{display:block;margin:0;font-size:13px;color:var(--light-body-color)}._inspector_10ftp_1{margin-top:var(--spacing-l)}._mediaLayoutsField_10ftp_5{width:100%}