Tweaks for figure uploading

src/lib/Figure.svelte

@@ -13,6 +13,7 @@
 
   export let fill = false
   export let narrow = false
+  export let bleed = false
   export let label = 'Figure'
 
   /** @type {string?} */
@@ -25,7 +26,7 @@
   const index = ofType.indexOf(item)
 </script>
 
-<figure class="figure" class:fill class:narrow id={anchor(id)}>
+<figure class="figure" class:fill class:narrow class:bleed id={anchor(id)}>
   <div class="main">
     <div class:contain={fill}>
       <slot />
@@ -76,14 +77,19 @@
   }
 
   .main {
-    background: #f2f3f8;
     padding: var(--page-gutter);
     user-select: none;
   }
 
   .figure:not(.fill) .main {
     border-radius: 0.5rem;
-    padding: 1.5rem;
+    padding: 1rem;
+    border: 1px solid #d7d9dd;
+  }
+
+  .figure.bleed .main {
+    border: 0;
+    padding: 0;
   }
 
   @media (width > 70rem) {
@@ -95,7 +101,7 @@
 
     .figure:not(.fill):not(.narrow) .main {
       max-width: var(--text-width);
-      flex: 0 0 auto;
+      flex: 0 0 100%;
     }
 
     .figure:not(.fill):not(.narrow) .caption {
@@ -107,6 +113,7 @@
   .figure :global(img) {
     display: block;
     width: 100%;
+    border-radius: 0.5rem;
   }
 
   .caption {

src/lib/Menu.svelte

@@ -147,6 +147,18 @@
     --menu-color: var(--theme-text-color);
   }
 
+  .menu:is(:not(.open, :target, .color)) .fade-1 {
+    opacity: 0.7;
+  }
+
+  .menu:is(:not(.open, :target, .color)) .fade-2 {
+    opacity: 0.5;
+  }
+
+  .menu:is(:not(.open, :target, .color)) .fade-3 {
+    opacity: 0.2;
+  }
+
   @media (width <= 80rem) {
     .menu:is(.open, :target) {
       position: fixed;

src/lib/Modules.svelte

@@ -154,12 +154,13 @@
         {/if}
       </div>
     {:else if module._type === 'figure'}
-      <div class={module.fill ? 'unwrap' : ''} id="module-{module._key}">
+      <div class:unwrap={module.fill} id="module-{module._key}">
         <Figure
           fill={module.fill}
+          bleed={module.bleed}
           {narrow}
           id={module._key}
-          label={module.group}>
+          label={module.label}>
           {#if module.image}
             <img alt={module.image.alt || ''} src={module.image.asset.url} />
           {:else if module.embed?.content}

src/routes/(sanity)/studio/[...rest]/types/figure.jsx

@@ -63,6 +63,13 @@ export default defineType({
       initialValue: false,
       description: 'Grow the figure to cover as much space as possible'
     },
+    {
+      name: 'bleed',
+      type: 'boolean',
+      title: 'No padding',
+      initialValue: false,
+      description: 'Hide the gray outline, good for photos and pictures'
+    },
     {
       name: 'description',
       type: 'array',