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/container.wrn

@@ -1,46 +1,162 @@
+// Container -- a centred, width-limited page wrapper.
+//
+//   <Container maxWidth="lg">...</Container>
+//
+// It also accepts columns and gap, because it always has and applications
+// depend on it. Reach for Grid when a grid is the point; reach for Container
+// when the point is the reading width.
+//
+// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
+// and silently swallows the rule that follows it.
 component Container {
   props {
     size: string = "default"
     color: string = "primary"
+    // Stays 2 to match what shipped. A published default cannot be changed
+    // without silently reflowing every Container already in use.
     columns: number = 2
     gap: string = "md"
     maxWidth: string = "xl"
+    centered: boolean = true
     class: string = ""
   }
 
+  functions {
+    shared function columnCount() {
+      var value = Number(columns)
+      if (!value || value < 1) {
+        return 1
+      }
+      return Math.min(6, value)
+    }
+  }
+
   view {
     <div
+      {...attrs}
       data-ui-component="Container"
+      class='wire-container {class}'
       data-size='{size}'
       data-color='{color}'
-      data-columns='{columns}'
       data-gap='{gap}'
       data-max-width='{maxWidth}'
-      class='mx-auto w-full {class}'
-      class:max-w-3xl='maxWidth === "md"'
-      class:max-w-5xl='maxWidth === "lg"'
-      class:max-w-7xl='maxWidth === "xl" || maxWidth === "wide"'
-      class:max-w-screen-2xl='maxWidth === "2xl"'
-      class:max-w-none='maxWidth === "full"'
-      class:px-4='size === "compact" || size === "default"'
-      class:px-5='size === "comfortable"'
-      class:px-6='size === "spacious"'
-      class:sm:px-6='size !== "compact"'
-      class:lg:px-8='size === "default" || size === "comfortable" || size === "spacious"'
-      class:grid='columns > 1'
-      class:grid-cols-1='columns > 1'
-      class:sm:grid-cols-2='columns === 2 || columns === 3 || columns === 4 || columns === 5 || columns === 6'
-      class:lg:grid-cols-3='columns === 3'
-      class:lg:grid-cols-4='columns === 4'
-      class:lg:grid-cols-5='columns === 5'
-      class:lg:grid-cols-6='columns === 6'
-      class:gap-2='gap === "xs"'
-      class:gap-3='gap === "sm"'
-      class:gap-5='gap === "md"'
-      class:gap-8='gap === "lg"'
-      class:gap-10='gap === "xl"'
+      data-centered='{centered}'
+      data-columns='{columnCount()}'
     >
       <slot></slot>
     </div>
   }
+
+  style {
+    .wire-container {
+      --container-gap: 1.25rem;
+      width: 100%;
+      min-width: 0;
+      padding-inline: 1rem;
+    }
+
+    .wire-container[data-centered="true"] {
+      margin-inline: auto;
+    }
+
+    /* Reading widths, not breakpoints: the cap is about line length. */
+    .wire-container[data-max-width="md"] {
+      max-width: 48rem;
+    }
+
+    .wire-container[data-max-width="lg"] {
+      max-width: 64rem;
+    }
+
+    .wire-container[data-max-width="xl"],
+    .wire-container[data-max-width="wide"] {
+      max-width: 80rem;
+    }
+
+    .wire-container[data-max-width="2xl"] {
+      max-width: 96rem;
+    }
+
+    .wire-container[data-max-width="full"] {
+      max-width: none;
+    }
+
+    .wire-container[data-size="compact"] {
+      padding-inline: 1rem;
+    }
+
+    .wire-container[data-size="comfortable"] {
+      padding-inline: 1.25rem;
+    }
+
+    .wire-container[data-size="spacious"] {
+      padding-inline: 1.5rem;
+    }
+
+    .wire-container[data-gap="xs"] {
+      --container-gap: 0.5rem;
+    }
+
+    .wire-container[data-gap="sm"] {
+      --container-gap: 0.75rem;
+    }
+
+    .wire-container[data-gap="lg"] {
+      --container-gap: 2rem;
+    }
+
+    .wire-container[data-gap="xl"] {
+      --container-gap: 2.5rem;
+    }
+
+    /*
+     * Columns are opt-in. One column stays plain flow so a container does not
+     * quietly turn every page into a grid.
+     */
+    .wire-container:not([data-columns="1"]) {
+      display: grid;
+      gap: var(--container-gap);
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: 640px) {
+      .wire-container[data-columns="2"],
+      .wire-container[data-columns="3"],
+      .wire-container[data-columns="4"],
+      .wire-container[data-columns="5"],
+      .wire-container[data-columns="6"] {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .wire-container[data-size="default"],
+      .wire-container[data-size="comfortable"],
+      .wire-container[data-size="spacious"] {
+        padding-inline: 1.5rem;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      .wire-container[data-columns="3"] {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="4"] {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="5"] {
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+
+      .wire-container[data-columns="6"] {
+        grid-template-columns: repeat(6, minmax(0, 1fr));
+      }
+
+      .wire-container[data-size="default"],
+      .wire-container[data-size="comfortable"],
+      .wire-container[data-size="spacious"] {
+        padding-inline: 2rem;
+      }
+    }
+  }
 }