@hypen-space/web 0.3.7 → 0.3.8

package/dist/src/dom/index.js

@@ -39,6 +39,7 @@ var init_column = __esm(() => {
       const el = document.createElement("div");
       el.style.display = "flex";
       el.style.flexDirection = "column";
+      el.style.alignItems = "flex-start";
       el.dataset.hypenType = "column";
       return el;
     }
@@ -50,13 +51,29 @@ var exports_row = {};
 __export(exports_row, {
   rowHandler: () => rowHandler
 });
-var rowHandler;
+function ensureRowStyles() {
+  if (rowStylesInjected)
+    return;
+  rowStylesInjected = true;
+  const style = document.createElement("style");
+  style.id = "hypen-row-styles";
+  style.textContent = `
+    [data-hypen-type="row"] > * {
+      flex: 1 1 0%;
+      min-width: 0;
+    }
+  `;
+  document.head.appendChild(style);
+}
+var rowStylesInjected = false, rowHandler;
 var init_row = __esm(() => {
   rowHandler = {
     create() {
+      ensureRowStyles();
       const el = document.createElement("div");
       el.style.display = "flex";
       el.style.flexDirection = "row";
+      el.style.alignItems = "flex-start";
       el.dataset.hypenType = "row";
       return el;
     }
@@ -139,6 +156,9 @@ var init_container = __esm(() => {
   containerHandler = {
     create() {
       const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.alignItems = "stretch";
       el.dataset.hypenType = "container";
       return el;
     }
@@ -175,6 +195,8 @@ var init_list = __esm(() => {
     create() {
       const el = document.createElement("div");
       el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.alignItems = "flex-start";
       el.style.overflow = "auto";
       el.dataset.hypenType = "list";
       return el;
@@ -395,28 +417,34 @@ var exports_stack = {};
 __export(exports_stack, {
   stackHandler: () => stackHandler
 });
-var stackHandler;
+function ensureStackStyles() {
+  if (stackStylesInjected)
+    return;
+  stackStylesInjected = true;
+  const style = document.createElement("style");
+  style.id = "hypen-stack-styles";
+  style.textContent = `
+    [data-hypen-type="stack"] {
+      position: relative;
+      display: grid;
+      grid-template-areas: "stack";
+      /* Ensure Stack participates properly in flex layouts (Row/Column) */
+      min-width: 0;
+      min-height: 0;
+    }
+    [data-hypen-type="stack"] > * {
+      grid-area: stack;
+    }
+  `;
+  document.head.appendChild(style);
+}
+var stackStylesInjected = false, stackHandler;
 var init_stack = __esm(() => {
   stackHandler = {
     create() {
+      ensureStackStyles();
       const el = document.createElement("div");
-      el.style.position = "relative";
-      el.style.display = "flex";
       el.dataset.hypenType = "stack";
-      const style = document.createElement("style");
-      style.textContent = `
-      [data-hypen-type="stack"] > * {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-      [data-hypen-type="stack"] > *:first-child {
-        position: relative;
-      }
-    `;
-      el.appendChild(style);
       return el;
     }
   };
@@ -1619,6 +1647,7 @@ var init_font = __esm(() => {
 // src/dom/applicators/layout.ts
 var exports_layout = {};
 __export(exports_layout, {
+  mapAlignmentValue: () => mapAlignmentValue,
   layoutHandlers: () => layoutHandlers
 });
 function mapAlignmentValue(value) {
@@ -2377,6 +2406,7 @@ __export(exports_advanced_layout, {
 });
 var advancedLayoutHandlers;
 var init_advanced_layout = __esm(() => {
+  init_layout();
   advancedLayoutHandlers = {
     flexDirection: (el, value) => {
       el.style.flexDirection = String(value);
@@ -2388,10 +2418,10 @@ var init_advanced_layout = __esm(() => {
       el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
     },
     justifyContent: (el, value) => {
-      el.style.justifyContent = String(value);
+      el.style.justifyContent = mapAlignmentValue(String(value));
     },
     alignItems: (el, value) => {
-      el.style.alignItems = String(value);
+      el.style.alignItems = mapAlignmentValue(String(value));
     },
     alignContent: (el, value) => {
       el.style.alignContent = String(value);
@@ -3536,4 +3566,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=42F73782BE47D84964756E2164756E21
+//# debugId=DAAB42C61CF69F0464756E2164756E21