contain-css-svelte 1.1.4 → 1.1.6

package/dist/review/scenarios/LaunchStudio.svelte

@@ -29,6 +29,16 @@ let selectedAudience = $state("enterprise");
 let rolloutTrack = $state("pilot");
 let rolloutPercent = $state(68);
 let launchBriefOpen = $state(false);
+const audienceLabels = {
+    enterprise: "Atlantic pact",
+    midmarket: "Non-aligned observers",
+    "self-serve": "Backchannel committee",
+};
+const rolloutLabels = {
+    pilot: "Berlin buffer",
+    canary: "Embassy cable",
+    general: "Summit doctrine",
+};
 function resolveProgressState(value) {
     if (value >= 100)
         return "complete";
@@ -37,6 +47,8 @@ function resolveProgressState(value) {
     return "inprogress";
 }
 let progressState = $derived(resolveProgressState(rolloutPercent));
+let selectedAudienceLabel = $derived(audienceLabels[selectedAudience]);
+let rolloutTrackLabel = $derived(rolloutLabels[rolloutTrack]);
 </script>
 
 <Hero
@@ -45,20 +57,22 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
   headingFg="var(--primary-fg)"
 >
   <TextLayout>
-    <p>Product Launch Scenario</p>
+    <p>Encyclopedia Of Strategic Containers</p>
 
     <Stack gap="0">
       <div>
-        <Tag success>Ready</Tag>
-        <Tag info>Pilot</Tag>
-        <Tag warning>Needs Comms Review</Tag>
+        <Tag success>Stable</Tag>
+        <Tag info>Briefing</Tag>
+        <Tag warning>Needs Footnote</Tag>
       </div>
-      <h1>Ship the migration control center</h1>
+      <h1>Contain the cascade without spilling the tea</h1>
     </Stack>
     <p>
-      This review page exercises hero treatment, tabs, split panes, overlays,
-      status tags, and richer control states without relying on ad hoc demo
-      chrome.
+      Containment was a Cold War policy of limiting expansion by surrounding a
+      rival power with alliances, aid, military readiness, and patient
+      diplomacy. In this miniature entry, the doctrine is treated as a civic art
+      of boundaries: buffers hold, channels stay open, and every communique is
+      filed in a box marked "do not escalate before breakfast."
     </p>
 
     <Inline>
@@ -67,23 +81,23 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
         data-audit-action="open-dialog"
         onclick={() => (launchBriefOpen = true)}
       >
-        Open Launch Brief
+        Open Doctrine Brief
       </Button>
-      <ButtonLink href="#launch-plan">Jump To Plan</ButtonLink>
+      <ButtonLink href="#launch-plan">Jump To Map Room</ButtonLink>
     </Inline>
   </TextLayout>
 </Hero>
 <Page data-audit-target="page">
   {#snippet header()}<Bar --bar-border-top="none" --bar-border-bottom="none">
-      <div><strong>Launch Studio</strong></div>
+      <div><strong>Containment Studio</strong></div>
       <div>
         <DropdownMenu triggerAuditAction="open-launch-menu">
           {#snippet label()}
             Quick Actions
           {/snippet}
-          <li><button type="button">Duplicate brief</button></li>
-          <li><button type="button">Share plan</button></li>
-          <li><button type="button">Archive launch</button></li>
+          <li><button type="button">Duplicate memo</button></li>
+          <li><button type="button">Share doctrine</button></li>
+          <li><button type="button">Archive communique</button></li>
         </DropdownMenu>
       </div>
     </Bar>
@@ -92,36 +106,39 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
     <GridLayout card>
       <Card>
         {#snippet header()}
-          <h3>Audience</h3>
+          <h3>Sphere</h3>
         {/snippet}
         <ResponsiveText>
-          {#snippet xs()}Compact lane{/snippet}
-          {#snippet small()}Narrow launch lane{/snippet}
-          {#snippet medium()}Balanced launch lane{/snippet}
-          {#snippet large()}Wide launch lane{/snippet}
-          {#snippet xl()}Executive launch lane{/snippet}
+          {#snippet xs()}Pocket doctrine{/snippet}
+          {#snippet small()}Narrow buffer{/snippet}
+          {#snippet medium()}Balanced boundary{/snippet}
+          {#snippet large()}Wide diplomatic lane{/snippet}
+          {#snippet xl()}Grand strategy briefing{/snippet}
         </ResponsiveText>
-        <p>Enterprise rollout is first in line.</p>
+        <p>
+          The inner sphere marks the states, offices, and observers expected to
+          receive the first memo before policy hardens into posture.
+        </p>
       </Card>
       <Card>
         {#snippet header()}
-          <h3>Coverage</h3>
+          <h3>Stability</h3>
         {/snippet}
         <Progress state={progressState} value={rolloutPercent} max={100}>
-          {rolloutPercent}% launch readiness
+          {rolloutPercent}% boundary confidence
         </Progress>
       </Card>
       <Card>
         {#snippet header()}
-          <h3>CTA Surface</h3>
+          <h3>Margin Note</h3>
         {/snippet}
-        <p>
-          <Tooltip tooltipText="Use this to expose secondary explanatory text.">
+        <Inline>
+          <Tooltip tooltipText="Diplomatic cables also need explanatory hover text.">
             <Button data-audit-action="show-tooltip" data-audit-focus="true">
-              Review Help Copy
+              Review Margin Note
             </Button>
           </Tooltip>
-        </p>
+        </Inline>
       </Card>
     </GridLayout>
   </Container>
@@ -156,38 +173,43 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
             <TextLayout>
               <h2>Decision stack</h2>
               <p>
-                The left pane uses an accordion to exercise native details
-                styling in a denser app surface.
+                A containment policy normally joins military preparedness,
+                economic assistance, diplomatic signaling, and public patience.
+                The entries below summarize the map-room logic without pretending
+                that history ever fits neatly inside one filing cabinet.
               </p>
             </TextLayout>
 
             <Accordion>
               <details open>
-                <summary>Launch brief</summary>
+                <summary>Doctrine brief</summary>
                 <p>
-                  Messaging is approved for enterprise accounts. Support macros
-                  still need a final pass.
+                  The memo argues for containment by strong boundaries and calm
+                  escalation paths. The footnotes are mildly theatrical, because
+                  every serious doctrine needs one sentence wearing a tiny hat.
                 </p>
               </details>
               <details>
                 <summary data-audit-action="open-accordion">
-                  Readiness checklist
+                  Boundary checklist
                 </summary>
                 <div data-audit-target="accordion-open">
                   <p>
-                    Remaining blockers are limited to docs and rollout comms.
-                  </p>
-                  <p>
-                    <Tag success>QA Signed Off</Tag>
-                    <Tag warning>Docs Pending</Tag>
+                    Remaining risks are limited to vague metaphors, leaky
+                    margins, and one suspiciously ambitious sidebar.
                   </p>
+                  <Inline wrap="wrap">
+                    <Tag success>Buffers Stable</Tag>
+                    <Tag warning>Footnotes Pending</Tag>
+                  </Inline>
                 </div>
               </details>
               <details>
                 <summary>Fallback plan</summary>
                 <p>
-                  Traffic can be routed back to the old experience inside five
-                  minutes if error rate rises.
+                  If a crisis escalates, return the matter to the old treaty
+                  room, serve lukewarm coffee, and let the ambassadors discover
+                  whether their sternest sentences still fit inside the folder.
                 </p>
               </details>
             </Accordion>
@@ -195,44 +217,44 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
 
           {#snippet right()}
             <TextLayout>
-              <h2>Control surface</h2>
+              <h2>Policy controls</h2>
             </TextLayout>
             <Card>
               {#snippet header()}
-                <h3>Audience and rollout</h3>
+                <h3>Sphere and boundary</h3>
               {/snippet}
 
-              <p>
+              <Stack gap="var(--space-sm)">
                 <RadioButton bind:group={selectedAudience} value="enterprise">
-                  Enterprise
+                  Atlantic pact
                 </RadioButton>
                 <RadioButton bind:group={selectedAudience} value="midmarket">
-                  Mid-market
+                  Non-aligned observers
                 </RadioButton>
                 <RadioButton bind:group={selectedAudience} value="self-serve">
-                  Self-serve
+                  Backchannel committee
                 </RadioButton>
-              </p>
+              </Stack>
 
-              <p>
+              <div>
                 <Select bind:value={rolloutTrack}>
-                  <Option value="pilot"><strong>Pilot</strong> ring</Option>
-                  <Option value="canary"><strong>Canary</strong> ring</Option>
+                  <Option value="pilot"><strong>Berlin</strong> buffer</Option>
+                  <Option value="canary"><strong>Embassy</strong> cable</Option>
                   <Option value="general"
-                    ><strong>General</strong> availability</Option
+                    ><strong>Summit</strong> doctrine</Option
                   >
                 </Select>
-              </p>
+              </div>
 
               <p>
-                <strong>Rollout percentage:</strong>
+                <strong>Boundary confidence:</strong>
                 {rolloutPercent}%
               </p>
-              <p>
+              <div>
                 <Slider bind:value={rolloutPercent} min={0} max={100} />
-              </p>
+              </div>
               <Progress state={progressState} value={rolloutPercent} max={100}>
-                {selectedAudience} · {rolloutTrack}
+                {selectedAudienceLabel} · {rolloutTrackLabel}
               </Progress>
             </Card>
           {/snippet}
@@ -242,31 +264,32 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
           <TextLayout>
             <h2>Readiness board</h2>
             <p>
-              This tab gives the harness a second named state while exercising
-              row layouts and semantic tag surfaces.
+              Containment depended on slow maintenance: cables answered on time,
+              boundaries rehearsed before emergencies, and public explanations
+              prepared before rumors filled the room.
             </p>
           </TextLayout>
           <GridLayout card --card-width="var(--card-width-small)">
             <Card>
               {#snippet header()}
-                <h3>Engineering</h3>
+                <h3>Map Room</h3>
               {/snippet}
-              <p><Tag success>Green</Tag></p>
-              <p>Rollback rehearsed and metrics alerts verified.</p>
+              <Inline><Tag success>Stable</Tag></Inline>
+              <p>Boundaries rehearsed and annotation alerts verified.</p>
             </Card>
             <Card>
               {#snippet header()}
-                <h3>Marketing</h3>
+                <h3>Historian</h3>
               {/snippet}
-              <p><Tag warning>Reviewing</Tag></p>
-              <p>Announcement email still needs regional approval.</p>
+              <Inline><Tag warning>Reviewing</Tag></Inline>
+              <p>One paragraph still confuses containment with a casserole lid.</p>
             </Card>
             <Card>
               {#snippet header()}
-                <h3>Support</h3>
+                <h3>Protocol Desk</h3>
               {/snippet}
-              <p><Tag info>Queued</Tag></p>
-              <p>Macro updates are prepared for the pilot cohort.</p>
+              <Inline><Tag info>Queued</Tag></Inline>
+              <p>Memo templates are prepared for the next boxed-in briefing.</p>
             </Card>
           </GridLayout>
         </div>
@@ -274,15 +297,15 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
         <TextLayout>
           <h2>Timeline</h2>
           <p>
-            Timeline is intentionally quiet. It exists to show a third tab state
-            without adding more bespoke chrome.
+            The short chronology begins with a warning, becomes a doctrine, and
+            ends as a habit of institutions. The dates matter, but so does the
+            recurring act of putting tension into procedural containers.
           </p>
           <Code
-            language="svelte"
-            code={`<Hero>
-  <Tag success>Ready</Tag>
-  <ButtonLink href="#launch-plan">Jump To Plan</ButtonLink>
-</Hero>`}
+            language="text"
+            code={`1946: The long telegram frames expansion as a pressure problem.
+1947: The Truman Doctrine names aid as a boundary tool.
+1949: NATO turns the boundary into an institution.`}
           />
         </TextLayout>
       {/if}
@@ -298,28 +321,30 @@ let progressState = $derived(resolveProgressState(rolloutPercent));
     >
       <div data-audit-target="dialog-open">
         <TextLayout>
-          <h2>Launch brief</h2>
+          <h2>Doctrine brief</h2>
           <p>
-            This dialog exercises overlay surfaces, sticky close affordances,
-            and nested content containers.
+            The brief treats containment as an argument for patience under
+            pressure. It is less a wall than a series of labeled compartments:
+            alliances, aid, signals, reserves, and enough coffee to keep the
+            night staff civil.
           </p>
         </TextLayout>
         <GridLayout card --card-width="var(--card-width-small)">
           <Card>
             {#snippet header()}
-              <h3>Target cohort</h3>
+              <h3>Sphere</h3>
             {/snippet}
-            <p>{selectedAudience}</p>
+            <strong>{selectedAudienceLabel}</strong>
           </Card>
           <Card>
             {#snippet header()}
-              <h3>Release track</h3>
+              <h3>Boundary</h3>
             {/snippet}
-            <p>{rolloutTrack}</p>
+            <strong>{rolloutTrackLabel}</strong>
           </Card>
           <Card>
             {#snippet header()}
-              <h3>Readiness</h3>
+              <h3>Confidence</h3>
             {/snippet}
             <Progress state={progressState} value={rolloutPercent} max={100}>
               {rolloutPercent}%

package/dist/review/scenarios/LayoutWorkbench.svelte

@@ -11,28 +11,28 @@ import Tile from "../../layout/Tile.svelte";
 import TextLayout from "../../typography/TextLayout.svelte";
 const cards = [
     {
-        title: "Launch Readiness",
+        title: "Aisle Containment",
         metric: "87%",
-        detail: "Three blockers remain before release cutoff.",
+        detail: "Core storage categories remain aligned with spring reset targets.",
     },
     {
-        title: "Open Approvals",
+        title: "Drawer Dividers",
         metric: "12",
-        detail: "Legal and security still need sign-off.",
+        detail: "Twelve modular drawer programs are under assortment review.",
     },
     {
-        title: "Active Experiments",
+        title: "Elfa Experiments",
         metric: "4",
-        detail: "Two pricing variants are outperforming control.",
+        detail: "Four shelving pilots are active across closet and pantry segments.",
     },
     {
-        title: "Support Load",
+        title: "Label Maker Load",
         metric: "19",
-        detail: "Queue volume is down 8% week over week.",
+        detail: "Nineteen signage updates are queued for category managers.",
     },
 ];
 let hideSidebar = $state(false);
-let selectedTile = $state("pipeline");
+let selectedTile = $state("closet wall");
 let tileSelected = $state(false);
 function toggleSidebar() {
     hideSidebar = !hideSidebar;
@@ -47,7 +47,7 @@ function inspectTile(tile) {
   {#snippet header()}
     <Bar primary>
       <div>
-        <h1>Layout Workbench</h1>
+        <h1>Container Store Report</h1>
       </div>
 
       <Inline>
@@ -56,7 +56,7 @@ function inspectTile(tile) {
           aria-expanded={!hideSidebar}
           onclick={toggleSidebar}
         >
-          {hideSidebar ? "Show Sidebar" : "Hide Sidebar"}
+          {hideSidebar ? "Show Aisles" : "Hide Aisles"}
         </Button>
         <MiniButton aria-label="Notifications">3</MiniButton>
       </Inline>
@@ -67,19 +67,22 @@ function inspectTile(tile) {
     <Sidebar left>
       <MenuList striped>
         <li><button class="active">Overview</button></li>
-        <li><button>Launches</button></li>
-        <li><button>Approvals</button></li>
-        <li><button>Insights</button></li>
-        <li><button>Settings</button></li>
+        <li><button>Closets</button></li>
+        <li><button>Pantries</button></li>
+        <li><button>Bins</button></li>
+        <li><button>Receipts</button></li>
       </MenuList>
     </Sidebar>
   {/snippet}
 
   <TextLayout>
-    <h1>Sidebar and card layout workbench</h1>
+    <h1>Container Store field report</h1>
     <p>
-      This scenario exercises page chrome, a collapsible sidebar, summary cards,
-      and interactive tiles in the same route.
+      The Container Store continues to position organization as a premium retail
+      service, not merely a collection of bins. Store teams report steady demand
+      for closet systems, pantry canisters, drawer programs, and labeled
+      back-of-house workflows that make small spaces feel professionally
+      governed.
     </p>
   </TextLayout>
   <GridLayout card>
@@ -91,35 +94,47 @@ function inspectTile(tile) {
 
         <h2>{card.metric}</h2>
         <p>{card.detail}</p>
-        <p><Button>Review</Button></p>
+        <p><Button>Inspect</Button></p>
       </Card>
     {/each}
   </GridLayout>
 
-  <TextLayout><h2>Interactive tiles</h2></TextLayout>
+  <TextLayout><h2>Interactive report sections</h2></TextLayout>
   <GridLayout tile>
     <Tile
       interactive
       data-audit-action="select-tile"
-      onclick={() => inspectTile("pipeline")}
+      onclick={() => inspectTile("closet wall")}
     >
-      <h3>Pipeline</h3>
-      <p>Inspect work across launch stages.</p>
+      <h3>Closet wall</h3>
+      <p>
+        Review shelving attach rates, installation capacity, and the mix of
+        drawers, rods, and upper storage in the current Elfa program.
+      </p>
     </Tile>
 
-    <Tile interactive onclick={() => inspectTile("customers")}>
-      <h3>Customers</h3>
-      <p>See which accounts need a follow-up this week.</p>
+    <Tile interactive onclick={() => inspectTile("pantry aisle")}>
+      <h3>Pantry aisle</h3>
+      <p>
+        Compare clear canisters, turntables, risers, and private-label
+        replenishment against seasonal meal-prep traffic.
+      </p>
     </Tile>
 
-    <Tile interactive onclick={() => inspectTile("experiments")}>
-      <h3>Experiments</h3>
-      <p>Review rollout status and watch for regressions.</p>
+    <Tile interactive onclick={() => inspectTile("desk drawer")}>
+      <h3>Desk drawer</h3>
+      <p>
+        Review office trays, cable boxes, desktop files, and small-item storage
+        as hybrid work demand settles into a steadier pattern.
+      </p>
     </Tile>
 
     <Tile selectable>
-      <h3>Pin this workspace</h3>
-      <p>Keep this board in the default sidebar view.</p>
+      <h3>Pin this aisle</h3>
+      <p>
+        Keep this section in the weekly merchant packet for follow-up on margin,
+        attachment, and staff training.
+      </p>
     </Tile>
   </GridLayout>
 
@@ -132,9 +147,9 @@ function inspectTile(tile) {
           {/snippet}
 
           <p>
-            The <strong>{selectedTile}</strong> workspace is now in focus. This gives
-            the review harness a second state for tiles without adding custom layout
-            chrome.
+            The <strong>{selectedTile}</strong> section is now in focus. The next
+            review should compare traffic, basket size, and installation
+            availability before making changes to the regional plan.
           </p>
         </Card>
       </div>