chore(release): prepare 0.8.6

Bumps all 47 packages, the root manifest and the VS Code extension to 0.8.6,
and rebuilds the editor compiler, language server and extension bundles that
embed the version.

The release carries the output delivery fix: camelCase outputs now reach
parent bindings, and 18 components emit through output.* instead of
hand-built CustomEvents. See the 0.8.6 migration entry for what changes for
consumers.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.publish/ui/components/Image.wrn

@@ -1,3 +1,13 @@
+// Image -- a framed image with a reserved aspect ratio.
+//
+//   <Image src="/hero.jpg" alt="Dashboard" size="video" rounded={true} />
+//
+// The frame keeps its ratio whether or not the image has loaded, so the page
+// does not jump when it arrives. Without a src it renders a labelled
+// placeholder of the same shape rather than collapsing.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Image {
   props {
     size: string = "default"
@@ -7,41 +17,111 @@ component Image {
     width: string = ""
     height: string = ""
     loading: string = "lazy"
+    fit: string = "cover"
     rounded: boolean = false
     class: string = ""
   }
 
   view {
     <figure
+      {...attrs}
       data-ui-component="Image"
-      class='relative m-0 overflow-hidden bg-[var(--wire-color-surface-soft)] {class}'
-      class:rounded-2xl='rounded'
+      class='wire-image {class}'
+      data-size='{size}'
+      data-color='{color}'
+      data-fit='{fit}'
+      data-rounded='{rounded}'
     >
-      {#if src}
-        <img
-          src='{src}'
-          alt='{alt}'
-          width='{width}'
-          height='{height}'
-          loading='{loading}'
-          decoding="async"
-          class="block h-auto w-full object-cover transition duration-300"
-          class:aspect-square='size === "square"'
-          class:aspect-video='size === "video"'
-          class:aspect-[4/3]='size === "landscape"'
-          class:aspect-[3/4]='size === "portrait"'
-        />
-      {:else}
-        <div
-          class="flex min-h-48 w-full items-center justify-center text-[var(--wire-color-text-muted)]"
-          role="img"
-          aria-label='{alt || "Image placeholder"}'
-        >
-          <span class="icon-[lucide--image] size-8" aria-hidden="true"></span>
-        </div>
-      {/if}
+      <img
+        class="wire-image__img"
+        data-show="src"
+        src='{src}'
+        alt='{alt}'
+        width='{width}'
+        height='{height}'
+        loading='{loading}'
+        decoding="async"
+      />
+
+      <div
+        class="wire-image__placeholder"
+        data-show="!src"
+        role="img"
+        aria-label='{alt || "Image placeholder"}'
+      >
+        <span class="icon-[lucide--image] wire-image__placeholder-icon" aria-hidden="true"></span>
+      </div>
 
       <slot></slot>
     </figure>
   }
+
+  style {
+    .wire-image {
+      position: relative;
+      margin: 0;
+      overflow: hidden;
+      width: 100%;
+      min-width: 0;
+      background: var(--wire-color-surface-soft);
+    }
+
+    .wire-image[data-rounded="true"] {
+      border-radius: var(--wire-radius-lg);
+    }
+
+    /*
+     * The ratio sits on the frame rather than the image, so the space is
+     * reserved before the file arrives and the page does not jump.
+     */
+    .wire-image[data-size="square"] {
+      aspect-ratio: 1 / 1;
+    }
+
+    .wire-image[data-size="video"] {
+      aspect-ratio: 16 / 9;
+    }
+
+    .wire-image[data-size="landscape"] {
+      aspect-ratio: 4 / 3;
+    }
+
+    .wire-image[data-size="portrait"] {
+      aspect-ratio: 3 / 4;
+    }
+
+    .wire-image__img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .wire-image[data-fit="contain"] .wire-image__img {
+      object-fit: contain;
+    }
+
+    .wire-image[data-fit="fill"] .wire-image__img {
+      object-fit: fill;
+    }
+
+    .wire-image[data-size="default"] .wire-image__img {
+      height: auto;
+    }
+
+    .wire-image__placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      min-height: 12rem;
+      height: 100%;
+      color: var(--wire-color-text-muted);
+    }
+
+    .wire-image__placeholder-icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
 }