@luxfi/ui 5.5.3 → 5.6.0

package/tokens.css

@@ -0,0 +1,438 @@
+/*
+ * Design tokens — CSS custom properties
+ *
+ * These mirror the Chakra semantic tokens defined in
+ * toolkit/theme/foundations/semanticTokens.ts and
+ * toolkit/theme/foundations/colors.ts (DEFAULT_THEME_COLORS).
+ *
+ * Light mode is the default (:root). Dark mode activates via .dark class
+ * (applied by next-themes with the "class" strategy).
+ *
+ * Palette reference (true neutral grays):
+ *   gray.50  = #FAFAFA    gray.500 = #737373
+ *   gray.100 = #F5F5F5    gray.600 = #525252
+ *   gray.200 = #E5E5E5    gray.700 = #404040
+ *   gray.300 = #D4D4D4    gray.800 = #262626
+ *   gray.400 = #A3A3A3    gray.900 = #171717
+ *
+ *   blackAlpha.50  = rgba(16,17,18,0.04)   whiteAlpha.50  = rgba(255,255,255,0.04)
+ *   blackAlpha.100 = rgba(16,17,18,0.06)   whiteAlpha.100 = rgba(255,255,255,0.06)
+ *   blackAlpha.200 = rgba(16,17,18,0.08)   whiteAlpha.200 = rgba(255,255,255,0.08)
+ *   blackAlpha.300 = rgba(16,17,18,0.16)   whiteAlpha.300 = rgba(255,255,255,0.16)
+ *   blackAlpha.400 = rgba(16,17,18,0.24)   whiteAlpha.400 = rgba(255,255,255,0.24)
+ *   blackAlpha.500 = rgba(16,17,18,0.36)   whiteAlpha.500 = rgba(255,255,255,0.36)
+ *   blackAlpha.600 = rgba(16,17,18,0.48)   whiteAlpha.600 = rgba(255,255,255,0.48)
+ *   blackAlpha.700 = rgba(16,17,18,0.64)   whiteAlpha.700 = rgba(255,255,255,0.64)
+ *   blackAlpha.800 = rgba(16,17,18,0.80)   whiteAlpha.800 = rgba(255,255,255,0.80)
+ *   blackAlpha.900 = rgba(16,17,18,0.92)   whiteAlpha.900 = rgba(255,255,255,0.92)
+ */
+
+/* ================================================================
+   LIGHT MODE (default)
+   ================================================================ */
+:root {
+  /* --- Backgrounds --- */
+  --color-bg-primary: #FFFFFF;
+  --color-bg-info: #FAFAFA;
+  --color-bg-body: #FFFFFF;
+
+  /* --- Foregrounds --- */
+  --color-fg-info: #525252;
+
+  /* --- Text --- */
+  --color-text-primary: rgba(16, 17, 18, 0.80);
+  --color-text-secondary: #737373;
+  --color-text-error: #E53E3E;
+  --color-text-success: #38A169;
+
+  /* --- Headings --- */
+  --color-heading: rgba(16, 17, 18, 0.80);
+
+  /* --- Icons --- */
+  --color-icon-primary: #737373;
+  --color-icon-secondary: #A3A3A3;
+
+  /* --- Borders --- */
+  --color-border-divider: rgba(16, 17, 18, 0.06);
+  --color-border-error: #E53E3E;
+  --color-border-info: #A3A3A3;
+
+  /* --- Links --- */
+  --color-link-primary: #404040;
+  --color-link-primary-hover: #525252;
+  --color-link-secondary: #737373;
+  --color-link-subtle: rgba(16, 17, 18, 0.80);
+  --color-link-subtle-hover: rgba(16, 17, 18, 0.80);
+  --color-link-menu: rgba(16, 17, 18, 0.80);
+  --color-link-underlaid-bg: #F5F5F5;
+  --color-link-nav-fg: rgba(16, 17, 18, 0.80);
+  --color-link-nav-fg-hover: #525252;
+  --color-link-nav-fg-selected: #171717;
+  --color-link-nav-fg-active: #525252;
+  --color-link-nav-bg-selected: #F5F5F5;
+
+  /* --- Buttons --- */
+  --color-button-solid-bg: #171717;
+  --color-button-solid-text: #FFFFFF;
+  --color-button-outline-fg: #171717;
+  --color-button-subtle-fg: rgba(16, 17, 18, 0.80);
+  --color-button-subtle-bg: rgba(16, 17, 18, 0.08);
+  --color-button-dropdown-fg: rgba(16, 17, 18, 0.80);
+  --color-button-dropdown-border: #F5F5F5;
+  --color-button-header-fg: rgba(16, 17, 18, 0.80);
+  --color-button-header-fg-selected: rgba(16, 17, 18, 0.80);
+  --color-button-header-fg-highlighted: rgba(16, 17, 18, 0.80);
+  --color-button-header-border: #F5F5F5;
+  --color-button-header-bg-selected: rgba(16, 17, 18, 0.04);
+  --color-button-header-bg-highlighted: #FEEBCB;
+  --color-button-pagination-fg: rgba(16, 17, 18, 0.80);
+  --color-button-pagination-border: #F5F5F5;
+  --color-button-icon-background-bg: #FAFAFA;
+  --color-button-hero-bg: #171717;
+  --color-button-hero-fg: #FFFFFF;
+  --color-button-hero-bg-hover: #525252;
+  --color-button-hero-fg-hover: #FFFFFF;
+  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
+  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
+  --color-button-segmented-fg: rgba(16, 17, 18, 0.80);
+  --color-button-icon-bg: rgba(16, 17, 18, 0.04);
+
+  /* --- Hover / Selected --- */
+  --color-hover: #525252;
+  --color-selected-control-bg: #F5F5F5;
+  --color-selected-control-text: #171717;
+  --color-selected-option-bg: #404040;
+
+  /* --- Navigation --- */
+  --color-nav-bg-selected: #F5F5F5;
+  --color-nav-text-selected: #171717;
+
+  /* --- Inputs --- */
+  --color-input-fg: #262626;
+  --color-input-bg: #FFFFFF;
+  --color-input-bg-readonly: #E5E5E5;
+  --color-input-border: #F5F5F5;
+  --color-input-border-hover: #E5E5E5;
+  --color-input-border-focus: #525252;
+  --color-input-placeholder: #A3A3A3;
+
+  /* --- Tags --- */
+  --color-tag-subtle-bg: rgba(16, 17, 18, 0.04);
+  --color-tag-subtle-fg: rgba(16, 17, 18, 0.80);
+  --color-tag-clickable-bg: #F5F5F5;
+  --color-tag-clickable-fg: rgba(16, 17, 18, 0.80);
+  --color-tag-filter-bg: #F5F5F5;
+  --color-tag-select-bg: #F5F5F5;
+  --color-tag-select-fg: #737373;
+  --color-tag-select-selected-bg: #404040;
+  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
+
+  /* --- Badges --- */
+  --color-badge-gray-bg: rgba(16, 17, 18, 0.04);
+  --color-badge-gray-fg: rgba(16, 17, 18, 0.80);
+  --color-badge-green-bg: #F0FFF4;
+  --color-badge-green-fg: #38A169;
+  --color-badge-red-bg: #FFF5F5;
+  --color-badge-red-fg: #E53E3E;
+  --color-badge-purple-bg: #F5F5F5;
+  --color-badge-purple-fg: #525252;
+  --color-badge-orange-bg: #FFFAF0;
+  --color-badge-orange-fg: #DD6B20;
+  --color-badge-blue-bg: #F5F5F5;
+  --color-badge-blue-fg: #525252;
+  --color-badge-yellow-bg: #FFFFF0;
+  --color-badge-yellow-fg: #D69E2E;
+  --color-badge-teal-bg: #F5F5F5;
+  --color-badge-teal-fg: #525252;
+  --color-badge-cyan-bg: #F5F5F5;
+  --color-badge-cyan-fg: #525252;
+  --color-badge-pink-bg: #FFF5F7;
+  --color-badge-pink-fg: #D53F8C;
+  --color-badge-purple-alt-bg: #F5F5F5;
+  --color-badge-purple-alt-fg: rgba(16, 17, 18, 0.80);
+  --color-badge-blue-alt-bg: #F5F5F5;
+  --color-badge-blue-alt-fg: rgba(16, 17, 18, 0.80);
+  --color-badge-bright-gray-bg: #F5F5F5;
+  --color-badge-bright-gray-fg: #525252;
+  --color-badge-bright-green-bg: #C6F6D5;
+  --color-badge-bright-green-fg: #25855A;
+  --color-badge-bright-red-bg: #FED7D7;
+  --color-badge-bright-red-fg: #C53030;
+  --color-badge-bright-blue-bg: #E5E5E5;
+  --color-badge-bright-blue-fg: #404040;
+  --color-badge-bright-yellow-bg: #FEFCBF;
+  --color-badge-bright-yellow-fg: #B7791F;
+  --color-badge-bright-teal-bg: #E5E5E5;
+  --color-badge-bright-teal-fg: #404040;
+  --color-badge-bright-cyan-bg: #E5E5E5;
+  --color-badge-bright-cyan-fg: #404040;
+  --color-badge-bright-orange-bg: #FEEBCB;
+  --color-badge-bright-orange-fg: #C05621;
+  --color-badge-bright-purple-bg: #E5E5E5;
+  --color-badge-bright-purple-fg: #404040;
+  --color-badge-bright-pink-bg: #FFF5F7;
+  --color-badge-bright-pink-fg: #B83280;
+
+  /* --- Alerts --- */
+  --color-alert-fg: rgba(16, 17, 18, 0.80);
+  --color-alert-bg-info: rgba(16, 17, 18, 0.04);
+  --color-alert-bg-warning: #FEEBCB;
+  --color-alert-bg-warning-table: #FFFAF0;
+  --color-alert-bg-success: #C6F6D5;
+  --color-alert-bg-error: #FED7D7;
+
+  /* --- Dialogs / Popovers / Drawers --- */
+  --color-dialog-bg: #FFFFFF;
+  --color-dialog-fg: rgba(16, 17, 18, 0.80);
+  --color-popover-bg: #FFFFFF;
+  --color-popover-shadow: rgba(16, 17, 18, 0.08);
+  --color-drawer-bg: #FFFFFF;
+
+  /* --- Tooltip --- */
+  --color-tooltip-bg: #171717;
+  --color-tooltip-fg: #FFFFFF;
+
+  /* --- Table --- */
+  --color-table-header-bg: rgba(16, 17, 18, 0.06);
+  --color-table-header-fg: rgba(16, 17, 18, 0.64);
+
+  /* --- Tabs --- */
+  --color-tabs-solid-fg: #171717;
+  --color-tabs-secondary-fg: rgba(16, 17, 18, 0.80);
+  --color-tabs-secondary-border: #D4D4D4;
+
+  /* --- Switch --- */
+  --color-switch-bg: #D4D4D4;
+
+  /* --- Skeleton --- */
+  --color-skeleton-start: rgba(16, 17, 18, 0.04);
+  --color-skeleton-end: rgba(16, 17, 18, 0.06);
+
+  /* --- Progress --- */
+  --color-progress-track: #F5F5F5;
+
+  /* --- Stats / Topbar --- */
+  --color-stats-bg: #FAFAFA;
+  --color-topbar-bg: #FAFAFA;
+
+  /* --- Graph --- */
+  --color-graph-line: #737373;
+  --color-graph-gradient-start: rgba(163, 163, 163, 0.3);
+  --color-graph-gradient-stop: rgba(163, 163, 163, 0);
+
+  /* --- Scrollbar --- */
+  --color-scrollbar-thumb: rgba(16, 17, 18, 0.16);
+
+  /* --- Selection --- */
+  --color-selection-bg: #E3CFE7;
+
+  /* --- Shadows --- */
+  --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
+  --shadow-popover: 0px 15px 50px -12px rgba(0, 0, 0, 0.25);
+  --shadow-drawer: 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* ================================================================
+   DARK MODE
+   ================================================================ */
+.dark {
+  /* --- Backgrounds --- */
+  --color-bg-primary: #000000;
+  --color-bg-info: #171717;
+  --color-bg-body: #000000;
+
+  /* --- Foregrounds --- */
+  --color-fg-info: #D4D4D4;
+
+  /* --- Text --- */
+  --color-text-primary: rgba(255, 255, 255, 0.80);
+  --color-text-secondary: #A3A3A3;
+  --color-text-error: #E53E3E;
+  --color-text-success: #9AE6B4;
+
+  /* --- Headings --- */
+  --color-heading: rgba(255, 255, 255, 0.80);
+
+  /* --- Icons --- */
+  --color-icon-primary: #A3A3A3;
+  --color-icon-secondary: #737373;
+
+  /* --- Borders --- */
+  --color-border-divider: rgba(255, 255, 255, 0.06);
+  --color-border-error: #E53E3E;
+  --color-border-info: #737373;
+
+  /* --- Links --- */
+  --color-link-primary: rgba(255, 255, 255, 0.64);
+  --color-link-primary-hover: rgba(255, 255, 255, 0.64);
+  --color-link-secondary: #A3A3A3;
+  --color-link-subtle: #A3A3A3;
+  --color-link-subtle-hover: #A3A3A3;
+  --color-link-menu: rgba(255, 255, 255, 0.80);
+  --color-link-underlaid-bg: #262626;
+  --color-link-nav-fg: rgba(255, 255, 255, 0.80);
+  --color-link-nav-fg-hover: rgba(255, 255, 255, 0.64);
+  --color-link-nav-fg-selected: #FAFAFA;
+  --color-link-nav-fg-active: rgba(255, 255, 255, 0.64);
+  --color-link-nav-bg-selected: rgba(255, 255, 255, 0.06);
+
+  /* --- Buttons --- */
+  --color-button-solid-bg: rgba(255, 255, 255, 0.92);
+  --color-button-solid-text: #000000;
+  --color-button-outline-fg: rgba(255, 255, 255, 0.92);
+  --color-button-subtle-fg: rgba(255, 255, 255, 0.80);
+  --color-button-subtle-bg: rgba(255, 255, 255, 0.08);
+  --color-button-dropdown-fg: rgba(255, 255, 255, 0.80);
+  --color-button-dropdown-border: #525252;
+  --color-button-header-fg: #A3A3A3;
+  --color-button-header-fg-selected: rgba(255, 255, 255, 0.80);
+  --color-button-header-fg-highlighted: rgba(255, 255, 255, 0.80);
+  --color-button-header-border: #525252;
+  --color-button-header-bg-selected: rgba(255, 255, 255, 0.06);
+  --color-button-header-bg-highlighted: #7B341E;
+  --color-button-pagination-fg: #FAFAFA;
+  --color-button-pagination-border: rgba(255, 255, 255, 0.06);
+  --color-button-icon-background-bg: rgba(255, 255, 255, 0.04);
+  --color-button-hero-bg: rgba(255, 255, 255, 0.92);
+  --color-button-hero-fg: #FFFFFF;
+  --color-button-hero-bg-hover: rgba(255, 255, 255, 0.64);
+  --color-button-hero-fg-hover: #FFFFFF;
+  --color-button-hero-bg-selected: rgba(255, 255, 255, 0.06);
+  --color-button-hero-fg-selected: rgba(16, 17, 18, 0.80);
+  --color-button-segmented-fg: rgba(255, 255, 255, 0.80);
+  --color-button-icon-bg: rgba(255, 255, 255, 0.04);
+
+  /* --- Hover / Selected --- */
+  --color-hover: rgba(255, 255, 255, 0.64);
+  --color-selected-control-bg: rgba(255, 255, 255, 0.06);
+  --color-selected-control-text: #FAFAFA;
+  --color-selected-option-bg: rgba(255, 255, 255, 0.16);
+
+  /* --- Navigation --- */
+  --color-nav-bg-selected: rgba(255, 255, 255, 0.06);
+  --color-nav-text-selected: #FAFAFA;
+
+  /* --- Inputs --- */
+  --color-input-fg: #FAFAFA;
+  --color-input-bg: #000000;
+  --color-input-bg-readonly: #262626;
+  --color-input-border: #525252;
+  --color-input-border-hover: #737373;
+  --color-input-border-focus: rgba(255, 255, 255, 0.64);
+  --color-input-placeholder: #737373;
+
+  /* --- Tags --- */
+  --color-tag-subtle-bg: rgba(255, 255, 255, 0.06);
+  --color-tag-subtle-fg: rgba(255, 255, 255, 0.80);
+  --color-tag-clickable-bg: #262626;
+  --color-tag-clickable-fg: rgba(255, 255, 255, 0.80);
+  --color-tag-filter-bg: rgba(255, 255, 255, 0.08);
+  --color-tag-select-bg: #262626;
+  --color-tag-select-fg: rgba(255, 255, 255, 0.80);
+  --color-tag-select-selected-bg: rgba(255, 255, 255, 0.16);
+  --color-tag-select-selected-fg: rgba(255, 255, 255, 0.80);
+
+  /* --- Badges --- */
+  --color-badge-gray-bg: rgba(255, 255, 255, 0.06);
+  --color-badge-gray-fg: rgba(255, 255, 255, 0.80);
+  --color-badge-green-bg: #22543D;
+  --color-badge-green-fg: #9AE6B4;
+  --color-badge-red-bg: #822727;
+  --color-badge-red-fg: #FEB2B2;
+  --color-badge-purple-bg: #262626;
+  --color-badge-purple-fg: #D4D4D4;
+  --color-badge-orange-bg: #7B341E;
+  --color-badge-orange-fg: #FEEBCB;
+  --color-badge-blue-bg: #262626;
+  --color-badge-blue-fg: #D4D4D4;
+  --color-badge-yellow-bg: #744210;
+  --color-badge-yellow-fg: #FEFCBF;
+  --color-badge-teal-bg: #262626;
+  --color-badge-teal-fg: #D4D4D4;
+  --color-badge-cyan-bg: #262626;
+  --color-badge-cyan-fg: #D4D4D4;
+  --color-badge-pink-bg: #702459;
+  --color-badge-pink-fg: #FED7E2;
+  --color-badge-purple-alt-bg: #262626;
+  --color-badge-purple-alt-fg: rgba(255, 255, 255, 0.80);
+  --color-badge-blue-alt-bg: #262626;
+  --color-badge-blue-alt-fg: rgba(255, 255, 255, 0.80);
+  --color-badge-bright-gray-bg: #262626;
+  --color-badge-bright-gray-fg: #E5E5E5;
+  --color-badge-bright-green-bg: #22543D;
+  --color-badge-bright-green-fg: #9AE6B4;
+  --color-badge-bright-red-bg: #822727;
+  --color-badge-bright-red-fg: #FEB2B2;
+  --color-badge-bright-blue-bg: #404040;
+  --color-badge-bright-blue-fg: #E5E5E5;
+  --color-badge-bright-yellow-bg: #744210;
+  --color-badge-bright-yellow-fg: #FAF089;
+  --color-badge-bright-teal-bg: #404040;
+  --color-badge-bright-teal-fg: #E5E5E5;
+  --color-badge-bright-cyan-bg: #404040;
+  --color-badge-bright-cyan-fg: #E5E5E5;
+  --color-badge-bright-orange-bg: #C05621;
+  --color-badge-bright-orange-fg: #FEEBCB;
+  --color-badge-bright-purple-bg: #404040;
+  --color-badge-bright-purple-fg: #E5E5E5;
+  --color-badge-bright-pink-bg: #B83280;
+  --color-badge-bright-pink-fg: #FFF5F7;
+
+  /* --- Alerts --- */
+  --color-alert-fg: rgba(255, 255, 255, 0.80);
+  --color-alert-bg-info: rgba(255, 255, 255, 0.06);
+  --color-alert-bg-warning: rgba(124, 67, 16, 0.44);
+  --color-alert-bg-warning-table: rgba(123, 52, 30, 0.44);
+  --color-alert-bg-success: #1C4532;
+  --color-alert-bg-error: #63171B;
+
+  /* --- Dialogs / Popovers / Drawers --- */
+  --color-dialog-bg: #171717;
+  --color-dialog-fg: rgba(255, 255, 255, 0.80);
+  --color-popover-bg: #171717;
+  --color-popover-shadow: rgba(255, 255, 255, 0.16);
+  --color-drawer-bg: #171717;
+
+  /* --- Tooltip --- */
+  --color-tooltip-bg: #171717;
+  --color-tooltip-fg: #FFFFFF;
+
+  /* --- Table --- */
+  --color-table-header-bg: rgba(255, 255, 255, 0.08);
+  --color-table-header-fg: rgba(255, 255, 255, 0.64);
+
+  /* --- Tabs --- */
+  --color-tabs-solid-fg: rgba(255, 255, 255, 0.80);
+  --color-tabs-secondary-fg: rgba(255, 255, 255, 0.80);
+  --color-tabs-secondary-border: #525252;
+
+  /* --- Switch --- */
+  --color-switch-bg: rgba(255, 255, 255, 0.24);
+
+  /* --- Skeleton --- */
+  --color-skeleton-start: rgba(255, 255, 255, 0.04);
+  --color-skeleton-end: rgba(255, 255, 255, 0.06);
+
+  /* --- Progress --- */
+  --color-progress-track: rgba(255, 255, 255, 0.06);
+
+  /* --- Stats / Topbar --- */
+  --color-stats-bg: rgba(255, 255, 255, 0.04);
+  --color-topbar-bg: rgba(255, 255, 255, 0.04);
+
+  /* --- Graph --- */
+  --color-graph-line: rgba(255, 255, 255, 0.48);
+  --color-graph-gradient-start: rgba(255, 255, 255, 0.15);
+  --color-graph-gradient-stop: rgba(255, 255, 255, 0);
+
+  /* --- Scrollbar --- */
+  --color-scrollbar-thumb: rgba(255, 255, 255, 0.16);
+
+  /* --- Selection --- */
+  --color-selection-bg: #754B7D;
+
+  /* --- Shadows --- */
+  --shadow-action-bar: 0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%);
+  --shadow-popover: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  --shadow-drawer: 0px 15px 40px 0px rgba(0, 0, 0, 0.4), 0px 5px 10px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+}

package/commerce/ui/conf.ts

@@ -1,13 +0,0 @@
-import type { SnapPointsConfig } from './store'
-
-export default {
-  mb: {
-    micro: '72px',
-    full: '600px' 
-  },
-
-  dt: {
-    micro: '90px',
-    full: '620px' 
-  }
-} satisfies SnapPointsConfig

package/commerce/ui/context.tsx

@@ -1,123 +0,0 @@
-'use client'
-import React, { 
-  createContext, 
-  useContext, 
-  useRef, 
-  type PropsWithChildren, 
-  useEffect,
-  useLayoutEffect
-} from 'react'
-import { enableStaticRendering } from 'mobx-react-lite'
-import { usePathname } from 'next/navigation'
-import { useDebounceCallback } from 'usehooks-ts'
-
-
-import { preset as twConfig } from '@hanzo/ui/tailwind'
-import { useCommerce } from '@hanzo/commerce'
-
-import type { CommerceDrawer, SelectAndBuy } from './store'
-import { CommerceUIStore } from './store'
-import conf from './conf'
-
-const LOG = false ////////////////////
-const log = (s: string) => {
-  if (LOG) {
-    console.log('CMMC UI CONTEXT ' + s)
-  }
-}
-
-// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
-enableStaticRendering(typeof window === "undefined")
-
-const CommerceUIContext = createContext<CommerceUIStore | undefined>(undefined)
-
-const useCommerceDrawer = (): CommerceDrawer => {
-  return useContext(CommerceUIContext) as CommerceDrawer
-}
-
-const useSelectAndBuy = (): SelectAndBuy => {
-  return useContext(CommerceUIContext) as SelectAndBuy
-}
-
-const CommerceUIProvider: React.FC<PropsWithChildren> = ({ 
-  children,
-}) => {
-
-  const cmmc = useCommerce()
-  const pathname = usePathname()
-  const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
-  const prevPathRef = useRef<string>('initial')
-
-  const onResize = () => { 
-    const width = window.innerWidth 
-    let desktopMin = 0
-    if (twConfig.theme?.screens) {
-        // expected form: { md: '768px' }
-      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
-        desktopMin = parseInt(twConfig.theme?.screens.md)
-      }
-      if (width < desktopMin) {
-        if (!storeRef.current.isMobile) {
-          storeRef.current.setMobile(true)
-        }
-      }
-      else if (storeRef.current.isMobile) {
-        storeRef.current.setMobile(false)
-      }
-    }
-    storeRef.current.setViewportHeight(window.innerHeight)
-  }
-
-  const onResize_debounced = useDebounceCallback(onResize, 500)
-
-  useLayoutEffect(() => {
-    storeRef.current.initialize()
-    onResize()
-    window.addEventListener('resize', onResize_debounced);
-
-    return () => {
-      window.removeEventListener('resize', onResize_debounced)
-      storeRef.current.dispose() 
-    }
-  }, [])
-
-  useEffect(() => {
-    const checkingOut = (pathname === '/checkout')
-
-    /////////////////////////////////////
-    log("useEffect: pathname: " + pathname)
-    log("useEffect: prev pathname: " + prevPathRef.current)
-    
-    if (storeRef.current.checkingOut === undefined || storeRef.current._checkingOut!== checkingOut) {
-      log("useEffect: setting checkingOut to: " + checkingOut) /////////////////////////////////////
-      storeRef.current.setCheckingOut(checkingOut)
-    }
-    if ( prevPathRef.current === 'initial') {
-      prevPathRef.current = pathname
-      storeRef.current.newRoute()
-    }
-    else if (
-      !checkingOut
-      &&
-      prevPathRef.current !== pathname
-    ) {
-      storeRef.current.newRoute()
-      prevPathRef.current = pathname
-      log("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime)
-    }  
-  }, [pathname])
-
-
-  return (
-    <CommerceUIContext.Provider value={storeRef.current}>
-      {children}
-    </CommerceUIContext.Provider>
-  )
-}
-
-export {
-  useCommerceDrawer, 
-  useSelectAndBuy,
-  CommerceUIProvider
-}
-