@themeable/layout 1.0.3 → 1.0.6

package/dist/EnviroSniffer.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import { useThemeableLayout } from "./Provider";
-import { useLayout } from "./Provider/Layout";
+import { useLayout } from "./Provider";
 export var EnviroSniffer = function () {
-    var viewSize = useLayout().viewSize;
-    var browserViewport = useThemeableLayout().browserViewport;
+    var _a = useLayout(), viewSize = _a.viewSize, browserViewport = _a.browserViewport;
     return (React.createElement(React.Fragment, null,
         React.createElement("p", null,
             "Browser size: ",

package/dist/Provider/Layout.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-type ViewSize = 'compact' | 'medium' | 'expanded';
-type ViewSizeLimit = 'compact' | 'medium';
-type SpacingContextValue = {
-    spacingMode?: 'normal' | 'grouped';
-    setMaxViewSize?: ViewSizeLimit;
-    viewSize?: ViewSize;
-};
-export declare const Modifier: ({ setMaxViewSize: localSetMaxViewSize, children, }: {
-    setMaxViewSize?: ViewSizeLimit;
-    children: React.ReactNode;
-}) => React.JSX.Element;
-export declare const useLayout: () => SpacingContextValue;
-export {};

package/dist/Provider/Layout.js

@@ -1,35 +1,56 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { createContext, useContext } from 'react';
-import { useThemeableLayout } from './index';
-var clampViewSize = function (actual, limit) {
-    if (!limit)
-        return actual;
-    if (limit === 'compact')
-        return 'compact';
-    return actual === 'compact' ? 'compact' : 'medium';
-};
-// @ts-ignore
-var TokenContext = createContext({});
-export var Modifier = function (_a) {
-    var localSetMaxViewSize = _a.setMaxViewSize, children = _a.children;
-    var parent = useContext(TokenContext);
-    var browserViewport = useThemeableLayout().browserViewport;
-    // Inherit from parent if not provided locally
-    var inheritedSetMaxViewSize = localSetMaxViewSize !== null && localSetMaxViewSize !== void 0 ? localSetMaxViewSize : parent.setMaxViewSize;
-    var maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
-    var value = __assign(__assign({}, parent), { setMaxViewSize: inheritedSetMaxViewSize, viewSize: maxViewSize });
-    return (React.createElement(TokenContext.Provider, { value: value }, children));
-};
-export var useLayout = function () {
-    return useContext(TokenContext);
-};
+"use strict";
+// import React, { createContext, useContext } from 'react';
+// import { useThemeableLayout } from './index';
+//
+// type ViewSize = 'compact' | 'medium' | 'expanded';
+// type ViewSizeLimit = 'compact' | 'medium';
+//
+// type SpacingContextValue = {
+//   spacingMode?: 'normal' | 'grouped';
+//   setMaxViewSize?: ViewSizeLimit;
+//   viewSize?: ViewSize;
+// };
+//
+// const clampViewSize = (
+//   actual: ViewSize,
+//   limit?: ViewSizeLimit
+// ): ViewSize => {
+//   if (!limit) return actual;
+//   if (limit === 'compact') return 'compact';
+//   return actual === 'compact' ? 'compact' : 'medium';
+// };
+//
+// // @ts-ignore
+// const TokenContext = createContext<SpacingContextValue>({});
+//
+// export const Modifier = ({
+//   setMaxViewSize: localSetMaxViewSize,
+//   children,
+// }: {
+//   setMaxViewSize?: ViewSizeLimit;
+//   children: React.ReactNode;
+// }) => {
+//   const parent = useContext(TokenContext);
+//   const { browserViewport } = useThemeableLayout();
+//
+//   // Inherit from parent if not provided locally
+//   const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
+//
+//   const maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
+//
+//   const value: SpacingContextValue = {
+//     ...parent,
+//     setMaxViewSize: inheritedSetMaxViewSize,
+//     viewSize: maxViewSize,
+//   };
+//
+//   return (
+//     <TokenContext.Provider value={value}>
+//       {children}
+//     </TokenContext.Provider>
+//   );
+// };
+//
+// export const useLayout = () => {
+//   return useContext(TokenContext);
+// };

package/dist/Provider/index.d.ts

@@ -1,9 +1,19 @@
 import React from 'react';
-import { Theme } from "./types";
-export declare const ThemeableContext: React.Context<Theme | undefined>;
-interface ThemeConfigProps {
+export type ViewSize = 'compact' | 'medium' | 'expanded';
+export type ViewSizeLimit = 'compact' | 'medium';
+type LayoutContextValue = {
+    browserViewport: ViewSize;
+    viewSize: ViewSize;
+    setMaxViewSize?: ViewSizeLimit;
+    spacingMode?: 'normal' | 'grouped';
+};
+export declare const LayoutProvider: ({ children }: {
     children: React.ReactNode;
-}
-export declare const LayoutProvider: ({ children, }: ThemeConfigProps) => React.JSX.Element;
-export declare const useThemeableLayout: () => Theme;
+}) => React.JSX.Element;
+export declare const LayoutModifier: ({ setMaxViewSize: localSetMaxViewSize, spacingMode, children, }: {
+    setMaxViewSize?: ViewSizeLimit;
+    spacingMode?: "normal" | "grouped";
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare const useLayout: () => LayoutContextValue;
 export {};

package/dist/Provider/index.js

@@ -1,37 +1,65 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-export var ThemeableContext = createContext(undefined);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
+// --- Helper ---
+var clampViewSize = function (actual, limit) {
+    if (!limit)
+        return actual;
+    if (limit === 'compact')
+        return 'compact';
+    return actual === 'expanded' ? 'medium' : actual; // If expanded, lock to medium
+};
+// 1. Single Context with a safe default value fallback
+var LayoutContext = createContext(null);
+// 2. Root Provider: Handles the window resizing logic
 export var LayoutProvider = function (_a) {
     var children = _a.children;
     var _b = useState('compact'), browserViewport = _b[0], setBrowserViewport = _b[1];
-    var prefResponsive = {
-        medium: 600,
-        expanded: 1200
-    };
     useEffect(function () {
+        var breakpoints = { medium: 600, expanded: 1200 };
         var updateViewportSize = function () {
             var width = window.innerWidth;
-            if (width > prefResponsive.expanded) {
+            if (width > breakpoints.expanded)
                 setBrowserViewport('expanded');
-            }
-            else if (width > prefResponsive.medium) {
+            else if (width > breakpoints.medium)
                 setBrowserViewport('medium');
-            }
-            else {
+            else
                 setBrowserViewport('compact');
-            }
         };
         updateViewportSize();
         window.addEventListener('resize', updateViewportSize);
         return function () { return window.removeEventListener('resize', updateViewportSize); };
-    }, [prefResponsive]);
-    return (React.createElement(ThemeableContext.Provider, { value: {
-            browserViewport: browserViewport
-        } }, children));
+    }, []);
+    // By default, viewSize mirrors browserViewport at the root level
+    var value = useMemo(function () { return ({
+        browserViewport: browserViewport,
+        viewSize: browserViewport,
+    }); }, [browserViewport]);
+    return (React.createElement(LayoutContext.Provider, { value: value }, children));
+};
+// 3. Modifier: Nested anywhere to constrain or modify the current layout state
+export var LayoutModifier = function (_a) {
+    var localSetMaxViewSize = _a.setMaxViewSize, spacingMode = _a.spacingMode, children = _a.children;
+    var parent = useLayout(); // Inherit from nearest parent context
+    var inheritedSetMaxViewSize = localSetMaxViewSize !== null && localSetMaxViewSize !== void 0 ? localSetMaxViewSize : parent.setMaxViewSize;
+    var maxViewSize = clampViewSize(parent.browserViewport, inheritedSetMaxViewSize);
+    var value = useMemo(function () { return (__assign(__assign({}, parent), { spacingMode: spacingMode !== null && spacingMode !== void 0 ? spacingMode : parent.spacingMode, setMaxViewSize: inheritedSetMaxViewSize, viewSize: maxViewSize })); }, [parent, inheritedSetMaxViewSize, maxViewSize, spacingMode]);
+    return (React.createElement(LayoutContext.Provider, { value: value }, children));
 };
-export var useThemeableLayout = function () {
-    var context = useContext(ThemeableContext);
+// 4. Consolidated Hook
+export var useLayout = function () {
+    var context = useContext(LayoutContext);
     if (!context) {
-        throw new Error('useThemeableLayout must be used within a ThemeableLayoutProvider');
+        throw new Error('useLayout must be used within a LayoutProvider');
     }
     return context;
 };

package/dist/Stack/HStack.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React, { useMemo } from "react";
 import { generateGridTemplateColumns, showOnSplit } from "./utils";
 import '../../Stack.css';
-import { Modifier, useLayout } from "../Provider/Layout";
+import { LayoutModifier, useLayout } from "../Provider";
 export var HStack = function (_a) {
     var style = _a.style, _b = _a.maxWidth, maxWidth = _b === void 0 ? undefined : _b, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, _c = _a.padding, padding = _c === void 0 ? false : _c, gridExpanded = _a.gridExpanded, gridMedium = _a.gridMedium, gridCompact = _a.gridCompact, ref = _a.ref, _d = _a.width, width = _d === void 0 ? 'fill' : _d, _e = _a.height, height = _e === void 0 ? 'hug' : _e, wrap = _a.wrap, _f = _a.sectionSpacing, sectionSpacing = _f === void 0 ? false : _f, _g = _a.group, group = _g === void 0 ? false : _g, setMaxViewSize = _a.setMaxViewSize;
     var viewSize = useLayout().viewSize;
@@ -65,7 +65,7 @@ export var HStack = function (_a) {
         .join(' ');
     var content = (React.createElement("div", { ref: ref, style: hstackStyles, className: classes }, children));
     if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
-        return (React.createElement(Modifier, { setMaxViewSize: setMaxViewSize }, content));
+        return (React.createElement(LayoutModifier, { setMaxViewSize: setMaxViewSize }, content));
     }
     return content;
 };

package/dist/Stack/VStack.js

@@ -13,7 +13,7 @@ import React, { forwardRef, useRef, useImperativeHandle } from "react";
 // import { useViewportSize, ViewportSizeProvider } from "../ProviderResponsive";
 import { showOnSplit } from "./utils";
 import '../../Stack.css';
-import { Modifier, useLayout } from "../Provider/Layout";
+import { LayoutModifier, useLayout } from "../Provider/index";
 export var VStack = forwardRef(function (_a, parentRef) {
     var style = _a.style, maxWidth = _a.maxWidth, children = _a.children, className = _a.className, align = _a.align, showOn = _a.showOn, _b = _a.padding, padding = _b === void 0 ? false : _b, _c = _a.height, height = _c === void 0 ? 'hug' : _c, _d = _a.width, width = _d === void 0 ? 'fill' : _d, scroll = _a.scroll, _e = _a.group, group = _e === void 0 ? false : _e, setMaxViewSize = _a.setMaxViewSize;
     var localRef = useRef(null);
@@ -35,7 +35,7 @@ export var VStack = forwardRef(function (_a, parentRef) {
         viewSize,
         children));
     if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
-        return (React.createElement(Modifier, { setMaxViewSize: setMaxViewSize || 'compact' }, content));
+        return (React.createElement(LayoutModifier, { setMaxViewSize: setMaxViewSize || 'compact' }, content));
     }
     return content;
 });

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { HStack, VStack } from './Stack/index';
 export { EnviroSniffer } from './EnviroSniffer';
 export { LayoutProvider } from './Provider/index';
-export { useLayout } from './Provider/Layout';
+export { useLayout, LayoutModifier } from './Provider';

package/dist/index.js

@@ -1,4 +1,4 @@
 export { HStack, VStack } from './Stack/index';
 export { EnviroSniffer } from './EnviroSniffer';
 export { LayoutProvider } from './Provider/index';
-export { useLayout } from './Provider/Layout';
+export { useLayout, LayoutModifier } from './Provider';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@themeable/layout",
   "author": "Themeable Systems",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/EnviroSniffer.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
-import { useThemeableLayout } from "./Provider";
-import { useLayout } from "./Provider/Layout";
+import { useLayout } from "./Provider";
 
 export const EnviroSniffer = () => {
 
-  const { viewSize } = useLayout();
-  const { browserViewport } = useThemeableLayout()
+  const { viewSize, browserViewport } = useLayout();
   return (
     <>
       <p>Browser size: {browserViewport}</p>

package/src/Provider/Layout.tsx

@@ -1,55 +1,55 @@
-import React, { createContext, useContext } from 'react';
-import { ThemeableContext, useThemeableLayout } from './index';
-
-type ViewSize = 'compact' | 'medium' | 'expanded';
-type ViewSizeLimit = 'compact' | 'medium';
-
-type SpacingContextValue = {
-  spacingMode?: 'normal' | 'grouped';
-  setMaxViewSize?: ViewSizeLimit;
-  viewSize?: ViewSize;
-};
-
-const clampViewSize = (
-  actual: ViewSize,
-  limit?: ViewSizeLimit
-): ViewSize => {
-  if (!limit) return actual;
-  if (limit === 'compact') return 'compact';
-  return actual === 'compact' ? 'compact' : 'medium';
-};
-
-// @ts-ignore
-const TokenContext = createContext<SpacingContextValue>({});
-
-export const Modifier = ({
-  setMaxViewSize: localSetMaxViewSize,
-  children,
-}: {
-  setMaxViewSize?: ViewSizeLimit;
-  children: React.ReactNode;
-}) => {
-  const parent = useContext(TokenContext);
-  const { browserViewport } = useThemeableLayout();
-
-  // Inherit from parent if not provided locally
-  const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
-
-  const maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
-
-  const value: SpacingContextValue = {
-    ...parent,
-    setMaxViewSize: inheritedSetMaxViewSize,
-    viewSize: maxViewSize,
-  };
-
-  return (
-    <TokenContext.Provider value={value}>
-      {children}
-    </TokenContext.Provider>
-  );
-};
-
-export const useLayout = () => {
-  return useContext(TokenContext);
-};
+// import React, { createContext, useContext } from 'react';
+// import { useThemeableLayout } from './index';
+//
+// type ViewSize = 'compact' | 'medium' | 'expanded';
+// type ViewSizeLimit = 'compact' | 'medium';
+//
+// type SpacingContextValue = {
+//   spacingMode?: 'normal' | 'grouped';
+//   setMaxViewSize?: ViewSizeLimit;
+//   viewSize?: ViewSize;
+// };
+//
+// const clampViewSize = (
+//   actual: ViewSize,
+//   limit?: ViewSizeLimit
+// ): ViewSize => {
+//   if (!limit) return actual;
+//   if (limit === 'compact') return 'compact';
+//   return actual === 'compact' ? 'compact' : 'medium';
+// };
+//
+// // @ts-ignore
+// const TokenContext = createContext<SpacingContextValue>({});
+//
+// export const Modifier = ({
+//   setMaxViewSize: localSetMaxViewSize,
+//   children,
+// }: {
+//   setMaxViewSize?: ViewSizeLimit;
+//   children: React.ReactNode;
+// }) => {
+//   const parent = useContext(TokenContext);
+//   const { browserViewport } = useThemeableLayout();
+//
+//   // Inherit from parent if not provided locally
+//   const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
+//
+//   const maxViewSize = clampViewSize(browserViewport || 'expanded', inheritedSetMaxViewSize);
+//
+//   const value: SpacingContextValue = {
+//     ...parent,
+//     setMaxViewSize: inheritedSetMaxViewSize,
+//     viewSize: maxViewSize,
+//   };
+//
+//   return (
+//     <TokenContext.Provider value={value}>
+//       {children}
+//     </TokenContext.Provider>
+//   );
+// };
+//
+// export const useLayout = () => {
+//   return useContext(TokenContext);
+// };

package/src/Provider/index.tsx

@@ -1,51 +1,92 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import { Theme } from "./types"
+import React, { createContext, useContext, useState, useEffect, useMemo } from 'react';
 
-export const ThemeableContext = createContext<Theme | undefined>(undefined);
+// --- Types ---
+export type ViewSize = 'compact' | 'medium' | 'expanded';
+export type ViewSizeLimit = 'compact' | 'medium';
 
-interface ThemeConfigProps {
-  children: React.ReactNode;
-}
+type LayoutContextValue = {
+  browserViewport: ViewSize; // Always guaranteed
+  viewSize: ViewSize;        // Adjusted by modifiers, defaults to browserViewport
+  setMaxViewSize?: ViewSizeLimit;
+  spacingMode?: 'normal' | 'grouped';
+};
 
-export const LayoutProvider = ({
-  children,
-}: ThemeConfigProps) => {
+// --- Helper ---
+const clampViewSize = (actual: ViewSize, limit?: ViewSizeLimit): ViewSize => {
+  if (!limit) return actual;
+  if (limit === 'compact') return 'compact';
+  return actual === 'expanded' ? 'medium' : actual; // If expanded, lock to medium
+};
 
-  const [browserViewport, setBrowserViewport] = useState<'compact' | 'medium' | 'expanded'>('compact');
+// 1. Single Context with a safe default value fallback
+const LayoutContext = createContext<LayoutContextValue | null>(null);
+
+// 2. Root Provider: Handles the window resizing logic
+export const LayoutProvider = ({ children }: { children: React.ReactNode }) => {
+  const [browserViewport, setBrowserViewport] = useState<ViewSize>('compact');
 
-  const prefResponsive = {
-    medium: 600,
-    expanded: 1200
-  }
   useEffect(() => {
+    const breakpoints = { medium: 600, expanded: 1200 };
+
     const updateViewportSize = () => {
       const width = window.innerWidth;
-      if (width > prefResponsive.expanded) {
-        setBrowserViewport('expanded');
-      } else if (width > prefResponsive.medium) {
-        setBrowserViewport('medium');
-      } else {
-        setBrowserViewport('compact');
-      }
+      if (width > breakpoints.expanded) setBrowserViewport('expanded');
+      else if (width > breakpoints.medium) setBrowserViewport('medium');
+      else setBrowserViewport('compact');
     };
+
     updateViewportSize();
     window.addEventListener('resize', updateViewportSize);
     return () => window.removeEventListener('resize', updateViewportSize);
-  }, [prefResponsive]);
+  }, []);
+
+  // By default, viewSize mirrors browserViewport at the root level
+  const value = useMemo(() => ({
+    browserViewport,
+    viewSize: browserViewport,
+  }), [browserViewport]);
+
+  return (
+    <LayoutContext.Provider value={value}>
+      {children}
+    </LayoutContext.Provider>
+  );
+};
+
+// 3. Modifier: Nested anywhere to constrain or modify the current layout state
+export const LayoutModifier = ({
+  setMaxViewSize: localSetMaxViewSize,
+  spacingMode,
+  children,
+}: {
+  setMaxViewSize?: ViewSizeLimit;
+  spacingMode?: 'normal' | 'grouped';
+  children: React.ReactNode;
+}) => {
+  const parent = useLayout(); // Inherit from nearest parent context
+
+  const inheritedSetMaxViewSize = localSetMaxViewSize ?? parent.setMaxViewSize;
+  const maxViewSize = clampViewSize(parent.browserViewport, inheritedSetMaxViewSize);
+
+  const value = useMemo(() => ({
+    ...parent,
+    spacingMode: spacingMode ?? parent.spacingMode,
+    setMaxViewSize: inheritedSetMaxViewSize,
+    viewSize: maxViewSize,
+  }), [parent, inheritedSetMaxViewSize, maxViewSize, spacingMode]);
 
   return (
-    <ThemeableContext.Provider value={{
-      browserViewport
-    }}>
+    <LayoutContext.Provider value={value}>
       {children}
-    </ThemeableContext.Provider>
+    </LayoutContext.Provider>
   );
 };
 
-export const useThemeableLayout = () => {
-  const context = useContext(ThemeableContext);
+// 4. Consolidated Hook
+export const useLayout = () => {
+  const context = useContext(LayoutContext);
   if (!context) {
-    throw new Error('useThemeableLayout must be used within a ThemeableLayoutProvider');
+    throw new Error('useLayout must be used within a LayoutProvider');
   }
   return context;
 };

package/src/Stack/HStack.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import { generateGridTemplateColumns, showOnSplit } from "./utils";
 import { HStackProps } from "./types";
 import '../../Stack.css';
-import { Modifier, useLayout } from "../Provider/Layout";
+import { LayoutModifier, useLayout } from "../Provider";
 
 export const HStack: React.FC<HStackProps> = ({
   style,
@@ -96,9 +96,9 @@ export const HStack: React.FC<HStackProps> = ({
 
   if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
     return (
-      <Modifier setMaxViewSize={setMaxViewSize}>
+      <LayoutModifier setMaxViewSize={setMaxViewSize}>
         {content}
-      </Modifier>
+      </LayoutModifier>
     );
   }
 

package/src/Stack/VStack.tsx

@@ -3,7 +3,7 @@ import { VStackProps } from "./types";
 // import { useViewportSize, ViewportSizeProvider } from "../ProviderResponsive";
 import { showOnSplit } from "./utils";
 import '../../Stack.css';
-import { Modifier, useLayout } from "../Provider/Layout";
+import { LayoutModifier, useLayout } from "../Provider/index";
 
 export const VStack = forwardRef<HTMLDivElement, VStackProps>(
   ({
@@ -60,9 +60,9 @@ export const VStack = forwardRef<HTMLDivElement, VStackProps>(
 
     if (setMaxViewSize === 'medium' || setMaxViewSize === 'compact') {
       return (
-        <Modifier setMaxViewSize={setMaxViewSize || 'compact'}>
+        <LayoutModifier setMaxViewSize={setMaxViewSize || 'compact'}>
           {content}
-        </Modifier>
+        </LayoutModifier>
       );
     }
 

package/src/index.ts

@@ -2,4 +2,5 @@ export { HStack, VStack } from './Stack/index';
 export { EnviroSniffer } from './EnviroSniffer'
 
 export { LayoutProvider } from './Provider/index';
-export { useLayout } from './Provider/Layout'
+export { useLayout, LayoutModifier } from './Provider'
+