@kosdev-code/kos-ddk-styles 3.0.7 → 3.1.0

package/index.cjs

@@ -91,6 +91,50 @@ const fontStyles = react.css`
     font-weight: 600;
   }
 `;
+const layoutStyles = react.css`
+  body[data-orientation="landscape"] {
+    /* --- page width (the single knob Container/View consume) --- */
+    --ddk-component-shell-max-width: 1920px;
+    --ddk-component-page-max-width: 1820px;
+    /* kept for any consumer still reading the large-container token directly */
+    --ddk-component-container-max-width-large: 1820px;
+
+    /* --- dashboard structure: holder rows stack full-width, cards reflow --- */
+    --ddk-component-dashboard-card-flex-direction: var(--ddk-component-dashboard-card-flex-direction-horizontal);
+    --ddk-component-dashboard-card-flex-wrap: wrap;
+    --ddk-component-dashboard-overflow: visible;
+
+    /* grid: macros & assembly share the last row */
+    --ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
+    --ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
+    --ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
+    --ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
+    --ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
+    --ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
+
+    /* spacing */
+    --ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
+    --ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
+
+    /* --- card value defaults for landscape (themes/overlay may refine) --- */
+    --ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
+    --ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
+    --ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
+    --ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
+    --ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
+    --ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
+    --ddk-component-macro-card-height: var(--ddk-component-macro-card-height-horizontal);
+
+    /* modal */
+    --ddk-component-modal-max-width: 1000px;
+    --ddk-component-modal-max-height: 750px;
+  }
+
+  /* small cards (macros & assembly) take the shorter macro height */
+  body[data-orientation="landscape"] [data-card-size="small"] {
+    --ddk-component-dashboard-card-height: var(--ddk-component-macro-card-height-horizontal);
+  }
+`;
 const rootStyles = react.css`
   ::-webkit-scrollbar {
     background-color: transparent;
@@ -890,6 +934,11 @@ const baseComponentStyles = react.css`
     --ddk-component-container-max-width-medium: 640px;
     --ddk-component-container-max-width-small: 408px;
 
+    // page width — single knob consumed by Container/View (decoupled from
+    // container-max-width-large so the orientation skeleton/overlay can widen
+    // pages without disturbing other consumers). Landscape widens it in layout.ts.
+    --ddk-component-page-max-width: var(--ddk-component-container-max-width-large);
+
     // frame-container
     --ddk-component-frame-body-padding: var(--ddk-semantic-control-padding-small);
     --ddk-component-frame-container-background-color: var(--ddk-generic-color-grey-5);
@@ -1514,6 +1563,10 @@ const baseComponentStyles = react.css`
     // dashboard layout mode flag (set to 'horizontal' to activate horizontal layout)
     --ddk-component-dashboard-layout-mode: vertical;
 
+    // dashboard - structural defaults (orientation skeleton refines these in layout.ts)
+    --ddk-component-dashboard-card-flex-wrap: nowrap;
+    --ddk-component-dashboard-overflow: visible;
+
     // dashboard-card
     --ddk-component-dashboard-card-background-color-unassigned: var(--ddk-generic-color-grey-10);
     --ddk-component-dashboard-card-background-color-removed: var(--ddk-generic-color-grey-10);
@@ -1527,17 +1580,21 @@ const baseComponentStyles = react.css`
     --ddk-component-dashboard-card-small-width: 216px; // validated
     --ddk-component-dashboard-card-max-height: 92px; // validated
 
-    // dashboard-card - horizontal layout overrides (cards flow horizontally in rows)
+    // dashboard-card - horizontal layout overrides (cards reflow into a wrapping grid)
+    // Heights sized for actual content (title + small fuel gauge + footer/troubles);
+    // the old 284px was tuned for a single horizontal-scroll row. ~1.5x the 115px
+    // portrait height gives the wider landscape card visual balance without empty
+    // space. Tune per device via theme :root or the device theme-overlay.css.
     --ddk-component-dashboard-card-flex-direction-horizontal: row;
-    --ddk-component-dashboard-card-height-horizontal: 284px;
-    --ddk-component-dashboard-card-small-height-horizontal: 284px;
+    --ddk-component-dashboard-card-height-horizontal: 176px;
+    --ddk-component-dashboard-card-small-height-horizontal: 176px;
     --ddk-component-dashboard-card-large-width-horizontal: 217px;
     --ddk-component-dashboard-card-small-width-horizontal: 217px;
     --ddk-component-dashboard-card-min-width-horizontal: 217px;
     --ddk-component-dashboard-card-max-height-horizontal: none;
 
     // macro-card - horizontal layout overrides (different height than holder cards)
-    --ddk-component-macro-card-height-horizontal: 200px;
+    --ddk-component-macro-card-height-horizontal: 148px;
 
     // dashboard - horizontal layout overrides (macros and assembly on same row)
     --ddk-component-dashboard-grid-template-areas-horizontal: "holder1 holder1" "holder2 holder2" "macros assembly";
@@ -1654,46 +1711,13 @@ const baseComponentStyles = react.css`
     --ddk-component-setup-sidebar-step-item-padding: 0px;
   }
 
-  /* Horizontal dashboard layout mode overrides */
-  [data-dashboard-layout="horizontal"] {
-    --ddk-component-shell-max-width: 1920px;
-    --ddk-component-container-max-width-large: 1820px;
-
-    /* Override 2-column layout */
-    --ddk-component-dashboard-grid-template-areas: var(--ddk-component-dashboard-grid-template-areas-horizontal);
-    --ddk-component-dashboard-grid-template-columns: var(--ddk-component-dashboard-grid-template-columns-horizontal);
-    --ddk-component-dashboard-grid-template-rows: var(--ddk-component-dashboard-grid-template-rows-horizontal);
-
-    /* Override 3-column layout */
-    --ddk-component-dashboard-grid-template-areas-3col: var(--ddk-component-dashboard-grid-template-areas-3col-horizontal);
-    --ddk-component-dashboard-grid-template-columns-3col: var(--ddk-component-dashboard-grid-template-columns-3col-horizontal);
-    --ddk-component-dashboard-grid-template-rows-3col: var(--ddk-component-dashboard-grid-template-rows-3col-horizontal);
-
-    /* Override spacing */
-    --ddk-component-dashboard-row-gap: var(--ddk-component-dashboard-row-gap-horizontal);
-    --ddk-component-dashboard-column-gap: var(--ddk-component-dashboard-column-gap-horizontal);
-
-    /* Override card properties - large cards (holders) */
-    --ddk-component-dashboard-card-flex-direction: var(--ddk-component-dashboard-card-flex-direction-horizontal);
-    --ddk-component-dashboard-card-height: var(--ddk-component-dashboard-card-height-horizontal);
-    --ddk-component-dashboard-card-small-height: var(--ddk-component-dashboard-card-small-height-horizontal);
-    --ddk-component-dashboard-card-large-width: var(--ddk-component-dashboard-card-large-width-horizontal);
-    --ddk-component-dashboard-card-small-width: var(--ddk-component-dashboard-card-small-width-horizontal);
-    --ddk-component-dashboard-card-min-width: var(--ddk-component-dashboard-card-min-width-horizontal);
-    --ddk-component-dashboard-card-max-height: var(--ddk-component-dashboard-card-max-height-horizontal);
-
-    /* Override macro card height (macros are shorter than holder cards) */
-    --ddk-component-macro-card-height: var(--ddk-component-macro-card-height-horizontal);
-
-    /* Modal dimensions in horizontal mode */
-    --ddk-component-modal-max-width: 1000px;
-    --ddk-component-modal-max-height: 750px;
-  }
-
-  /* Small cards in horizontal mode (macros and assembly cards) */
-  [data-dashboard-layout="horizontal"] [data-card-size="small"] {
-    --ddk-component-dashboard-card-height: var(--ddk-component-macro-card-height-horizontal);
-  }
+  /*
+   * Landscape orientation overrides have moved to the always-on structural
+   * skeleton in ./layout.ts (selector body[data-orientation="landscape"]), so
+   * they win over any theme :root by specificity instead of being clobbered.
+   * The *-horizontal value tokens above remain here as the values that skeleton
+   * reads.
+   */
 `;
 const baseGenericStyles = react.css`
   :root {
@@ -2131,6 +2155,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
   baseGenericStyles,
   baseComponentStyles,
   baseSemanticStyles,
+  layoutStyles,
   flexEUComponentStyles,
   flexEUSemanticStyles
 ] : temporaryThemeID === "compact" ? [
@@ -2139,6 +2164,7 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
   baseGenericStyles,
   baseComponentStyles,
   baseSemanticStyles,
+  layoutStyles,
   flexEUComponentStyles,
   flexEUSemanticStyles,
   compactComponentStyles,
@@ -2148,7 +2174,8 @@ const getStyles = (temporaryThemeID) => temporaryThemeID === "flex-eu" ? [
   rootStyles,
   baseGenericStyles,
   baseComponentStyles,
-  baseSemanticStyles
+  baseSemanticStyles,
+  layoutStyles
 ];
 const SvgAlertFilled = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0009 7.23564C11.6963 7.23613 11.4496 7.48285 11.4491 7.78735V15.1544C11.4491 15.4591 11.6961 15.7061 12.0009 15.7061C12.3056 15.7061 12.5526 15.4591 12.5526 15.1544V7.78735C12.5521 7.48285 12.3054 7.23613 12.0009 7.23564Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.07318 20.7783L11.5263 2.67477C11.6239 2.50482 11.8049 2.40002 12.0009 2.40002C12.1969 2.40002 12.3779 2.50482 12.4755 2.67477L22.9268 20.7783C23.0245 20.9478 23.0244 21.1566 22.9265 21.326C22.8287 21.4955 22.6479 21.5999 22.4522 21.6H1.54779C1.35211 21.5999 1.17134 21.4955 1.07348 21.326C0.975613 21.1566 0.975501 20.9478 1.07318 20.7783ZM12.0009 16.4238C11.3001 16.4228 10.7323 15.855 10.7313 15.1544V7.78735C10.7313 7.08629 11.2997 6.51796 12.0009 6.51796C12.702 6.51796 13.2704 7.08629 13.2704 7.78735V15.1544C13.2694 15.855 12.7016 16.4228 12.0009 16.4238ZM12.0009 19.6291C11.9067 19.6289 11.8129 19.6184 11.721 19.5977C11.3898 19.5246 11.1014 19.3227 10.9194 19.0365C10.7374 18.7503 10.6769 18.4035 10.7511 18.0726C10.7943 17.8791 10.9861 17.7572 11.1795 17.8004C11.373 17.8435 11.495 18.0352 11.4518 18.2287C11.3849 18.5305 11.5753 18.8293 11.877 18.8963C12.1788 18.9634 12.4778 18.7732 12.5449 18.4715C12.612 18.1698 12.4219 17.8708 12.1202 17.8035C12.054 17.7883 11.9856 17.7856 11.9184 17.7954C11.7889 17.8197 11.6565 17.7712 11.5735 17.6689C11.4904 17.5666 11.4701 17.427 11.5206 17.3053C11.5711 17.1836 11.6841 17.0994 11.8152 17.0858C12.2862 17.0219 12.7537 17.2248 13.0288 17.6124C13.3039 18.0001 13.341 18.5083 13.1252 18.9318C12.9093 19.3552 12.4762 19.6239 12.0009 19.6291Z", fill: "currentColor" }));
 const SvgCloseSidebar = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_1054_40209)" }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 12C0 5.36842 5.36842 0 12 0C18.6316 0 24 5.36842 24 12C24 18.6316 18.6316 24 12 24C5.36842 24 0 18.6316 0 12ZM1.38947 12C1.38947 17.8737 6.12632 22.6105 12 22.6105C17.8737 22.6105 22.6105 17.8737 22.6105 12C22.6105 6.12632 17.8737 1.38947 12 1.38947C6.12632 1.38947 1.38947 6.12632 1.38947 12ZM14.9684 7.38947L10.3579 12L14.9684 16.6105C15.2211 16.8632 15.2211 17.2737 14.9684 17.5263C14.7158 17.8105 14.2737 17.8105 14.0211 17.5579L9.41053 12.9474L8.46316 12L9.41053 11.0526L14.0211 6.44211C14.3053 6.18947 14.7158 6.18947 14.9684 6.44211C15.2211 6.69474 15.2211 7.13684 14.9684 7.38947Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1054_40209" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 24, height: 24, fill: "white" }))));
@@ -2425,6 +2452,7 @@ exports.getNextSequentialColor = getNextSequentialColor;
 exports.getRgb = getRgb;
 exports.getStyles = getStyles;
 exports.hsvToRgb = hsvToRgb;
+exports.layoutStyles = layoutStyles;
 exports.padHex = padHex;
 exports.rgbToHex = rgbToHex;
 exports.seedRandom = seedRandom;