@ulu/frontend 0.1.0-beta.99 → 0.2.0-beta.1

package/lib/js/core/index.js

@@ -0,0 +1,34 @@
+/**
+ * @module core
+ * @description
+ * Public API for the core modules.
+ *
+ * This file re-exports the internal implementations from the `core` directory
+ * with new names where appropriate, defining the public-facing API for the
+ * library bundle.
+ *
+ * For internal library usage, import directly from the specific file within
+ * the `core` directory (e.g., `import { ... } from './settings.js'`).
+ */
+
+export {
+  dispatchCoreEvent,
+  getCoreEventName,
+  getUluEventName,
+  createUluEvent
+} from './events.js';
+
+export {
+  getDefaultSettings,
+  updateSettings,
+  getSettings,
+  getSetting,
+  updateSetting,
+  wrapSettingString
+} from './settings.js';
+
+export {
+  ComponentInitializer
+} from './component.js';
+
+

package/{js → lib/js/core}/settings.js

@@ -1,6 +1,6 @@
 /**
- * @module settings
- * @description Manages shared configuration for the library.
+ * @module core/settings
+ * @description Internal implementation for managing shared configuration.
  */
 
 /**
@@ -94,4 +94,4 @@ export function wrapSettingString(key, transform) {
       return transform ? transform(value) : value;
     }
   };
-}
+}

package/lib/js/exports.md

@@ -0,0 +1,126 @@
+# Exports Map
+
+## Example Import
+
+All JavaScript modules are exported from the main `@ulu/frontend` package entry point.
+
+**Example Usage:**
+```javascript
+import { dialogInit, Slider, updateSettings } from '@ulu/frontend';
+
+// Update a library setting
+updateSettings({ cssvarPrefix: "my-app" });
+
+// Initialize all dialogs
+dialogInit();
+
+// Create a new slider
+const slider = new Slider(...);
+```
+
+## Exports Map
+
+### Core Modules
+
+These exports originate from the `lib/js/core/` directory and provide the foundational, cross-cutting logic for the library.
+
+- `ComponentInitializer`
+- `createUluEvent`
+- `dispatchCoreEvent`
+- `getCoreEventName`
+- `getDefaultSettings`
+- `getSettings`
+- `getSetting`
+- `getUluEventName`
+- `updateSetting`
+- `updateSettings`
+- `wrapSettingString`
+
+### UI Modules
+
+These exports originate from the `lib/js/ui/` directory.
+
+- `BreakpointManager`
+- `Collapsible`
+- `detailsGroupInit`
+- `detailsGroupInitializer`
+- `detailsGroupSetupGroup`
+- `dialogBaseAttribute`
+- `dialogCloseAttribute`
+- `dialogDefaults`
+- `dialogGetDialogOptions`
+- `dialogInit`
+- `dialogInitializer`
+- `dialogSetDefaults`
+- `dialogSetupDialog`
+- `dialogSetupTrigger`
+- `Flipcard`
+- `flipcardInit`
+- `flipcardInitializer`
+- `gridInit`
+- `gridInitializer`
+- `modalBuilderBuildModal`
+- `modalBuilderDefaults`
+- `modalBuilderInit`
+- `modalBuilderInitializer`
+- `modalBuilderSetDefaults`
+- `OverflowScroller`
+- `overflowScrollerCreatePager`
+- `pageInit`
+- `Popover`
+- `popoverGetContentByTrigger`
+- `popoverInit`
+- `popoverInitializer`
+- `popoverInstances`
+- `popoverResolve`
+- `printDetailsAttrs`
+- `printDetailsInit`
+- `printInit`
+- `proxyClickAttachHandlers`
+- `proxyClickDefaults`
+- `proxyClickInit`
+- `proxyClickInitializer`
+- `proxyClickSetDefaults`
+- `proxyClickSetupProxy`
+- `Resizer`
+- `scrollSliderInit`
+- `scrollSliderInitializer`
+- `Scrollpoint`
+- `scrollpointInit`
+- `scrollpointInitializer`
+- `Slider`
+- `sliderInit`
+- `sliderInitializer`
+- `sliderSetupSlider`
+- `tabsInit`
+- `tabsInitializer`
+- `tabsInstances`
+- `tabsSetup`
+- `themeToggleDefaults`
+- `themeToggleInit`
+- `themeToggleInitializer`
+- `themeToggleSetDefaults`
+- `themeToggleSetupToggle`
+- `Tooltip`
+- `tooltipInit`
+- `tooltipInitializer`
+
+### Utility Modules
+
+These exports originate from the `lib/js/utils/` directory.
+
+- `classLoggerLog`
+- `classLoggerLogError`
+- `classLoggerLogWarning`
+- `classLoggerSet`
+- `fontAwesomeConfigureIcons`
+- `createFloatingUi`
+- `dataAttributeToDatasetKey`
+- `ensureId`
+- `FileSave`
+- `floatingUiDefaults`
+- `newId`
+- `resolveClasses`
+- `setPositionClasses`
+- `youtubePauseVideos`
+- `youtubePrepVideos`

package/lib/js/index.js

@@ -0,0 +1,7 @@
+// Re-export all flattened, prefixed modules from the library.
+// This serves as the main entry point for the tree-shakable ESM bundle.
+
+export * from "./core/index.js";
+export * from "./ui/index.js";
+export * from "./utils/index.js";
+

package/{js → lib/js}/ui/breakpoints.js

@@ -4,15 +4,15 @@
 
 // Pass breakpoints from CSS to stylesheet, use this to attach behaviors on breakpoints
 import { removeArrayElement } from "@ulu/utils/array.js";
-import { getName } from "../events/index.js";
-import { wrapSettingString } from "../settings.js";
+import { getCoreEventName } from "../core/events.js";
+import { wrapSettingString } from "../core/settings.js";
 import { getCustomProperty } from "../utils/css.js";
 import { log, logError } from "../utils/class-logger.js";
 
 const getDefaultCustomProperty = prefix => getCustomProperty(prefix, "breakpoint");
 
 // Resize Handler to update breakpoints for all instances (Called after resize finished)
-window.addEventListener(getName("pageResized"), () => {
+window.addEventListener(getCoreEventName("pageResized"), () => {
   BreakpointManager.instances.forEach(i => i.update());
 });
 
@@ -110,28 +110,23 @@ export class BreakpointManager {
     const index = this.order.indexOf(name);
     this.active = name;
     this.activeIndex = index;
-    const activeBreakpoint = this.at(this.active);
-    // Get arrays of breakpoints based on the order array
-    const mapBreakpoints = n => this.at(n);
-    // From breakpoint to end (highest)
-    const max = this.order.slice(index).map(mapBreakpoints);
-    const notMax = this.order.slice(0, index).map(mapBreakpoints);
-    // From start up to this breakpoint
-    const min = this.order.slice(0, index + 1).map(mapBreakpoints);
-    const notMin = this.order.slice(index + 1).map(mapBreakpoints);
-    const notOnly = this.order.slice().map(mapBreakpoints);
-    notOnly.splice(index, 1);
-    
-    log(this, 'max:', max.map(b => b.name).join());
-    log(this, 'min:', min.map(b => b.name).join());
-    
-    max.forEach(b => b._setDirection('max', true));
-    min.forEach(b => b._setDirection('min', true));
-    activeBreakpoint._setDirection('only', true);
+    // const activeBreakpoint = this.at(this.active);
+
+    // For each breakpoint, set its directional status based on the active index.
+    // This ensures the JS methods match the SCSS mixin behavior.
+    this.order.forEach((bpName, bpIndex) => {
+      const bp = this.breakpoints[bpName];
+      const activeIndex = this.activeIndex;
+
+      // at(NAME).min() is active if active breakpoint is >= NAME.
+      bp._setDirection('min', bpIndex <= activeIndex);
+
+      // at(NAME).max() is active if active breakpoint is < NAME.
+      bp._setDirection('max', bpIndex > activeIndex);
 
-    notMax.forEach(b => b._setDirection('max', false));
-    notMin.forEach(b => b._setDirection('min', false));
-    notOnly.forEach(b => b._setDirection('only', false));
+      // at(NAME).only() is active if active breakpoint is == NAME.
+      bp._setDirection('only', bpIndex === activeIndex);
+    });
 
     // Set direction (extra info if needed)
     if (this.previousIndex !== null) {
@@ -246,18 +241,16 @@ class Breakpoint {
     this.directions[direction].change(active);
   }
   /**
-   * Attach handler to be executed from the breakpoint and to all breakpoints below.
-   * - If the browser resizes from a breakpoint below this breakpoint, 
-   *   and above the breakpoint name specified, this handler will fire
+   * Attach handler to be executed from the breakpoint and to all breakpoints below (inclusive).
+   * This corresponds to a `max-width` media query in SCSS.
    * @param {Function} handler Handler to be executed
    */    
   max(handler) {
     this.directions.max.add(handler);
   }
   /**
-   * Attach handler to be executed from the breakpoint and to all breakpoints below.
-   * - If the browser resizes from a breakpoint above this breakpoint, 
-   *   and below the breakpoint name specified, this handler will fire
+   * Attach handler to be executed from the breakpoint and to all breakpoints above (inclusive).
+   * This corresponds to a `min-width` media query in SCSS.
    * @param {Function} handler Handler to be executed
    */  
   min(handler) {
@@ -277,7 +270,11 @@ class Breakpoint {
    */      
   remove(handler, direction) {
     const directions = direction ? [ direction ] : ['max', 'min', 'only'];
-    directions.forEach(d => d.remove(handler));
+    directions.forEach(d => {
+      if (this.directions[d]) {
+        this.directions[d].remove(handler);
+      }
+    });
   }
   
   log(...msg) {

package/{js → lib/js}/ui/collapsible.js

@@ -2,7 +2,7 @@
  * @module ui/collapsible
  */
 
-import { getName as getEventName } from "../events/index.js";
+import { getUluEventName } from "../core/events.js";
 import { log, logError } from "../utils/class-logger.js";
 import { ensureId } from "../utils/id.js";
 
@@ -110,7 +110,7 @@ export class Collapsible {
     this.setState(startOpen);
   }
   createEvent(name, detail) {
-    return new CustomEvent(getEventName("collapsible:" + name), { detail });
+    return new CustomEvent(getUluEventName("collapsible:" + name), { detail });
   }
   setState(isOpen, event) {
     const ctx = { 

package/{js → lib/js}/ui/details-group.js

@@ -3,7 +3,7 @@
  * @description Manages groups of details (ie. onlyOneOpen at a time)
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 
 /**
  * Dialog Component Initializer
@@ -26,7 +26,7 @@ const defaults = {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupGroup(element, data);
       initialize();

package/{js → lib/js}/ui/dialog.js

@@ -2,8 +2,8 @@
  * @module ui/dialog
  */
 
-import { getName } from "../events/index.js";
-import { ComponentInitializer } from "../utils/system.js";
+import { getUluEventName } from "../core/events.js";
+import { ComponentInitializer } from "../core/component.js";
 import { wasClickOutside, preventScroll as setupPreventScroll } from "@ulu/utils/browser/dom.js";
 import { pauseVideos as pauseYoutubeVideos, prepVideos as prepYoutubeVideos } from "../utils/pause-youtube-video.js";
 
@@ -73,7 +73,7 @@ export function setDefaults(options) {
 export function init() {
   // Initialize all the dialogs
   initializer.init({
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     withData: true,
     setup({ element, initialize, data }) {
       setupDialog(element, data);
@@ -84,7 +84,7 @@ export function init() {
   // Initialize all triggers (things that trigger opening a dialog)
   initializer.init({
     key: "trigger",
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     withData: true,
     setup({ element, initialize, data: dialogId }) {
       setupTrigger(element, dialogId);
@@ -137,8 +137,8 @@ export function setupDialog(dialog, userOptions) {
   // is finished which is after the click is complete
   let activeResizePointer;
 
-  dialog.addEventListener(getName("resizer:start"), handleResizeStart);
-  dialog.addEventListener(getName("resizer:end"), handleResizeEnd);
+  dialog.addEventListener(getUluEventName("resizer:start"), handleResizeStart);
+  dialog.addEventListener(getUluEventName("resizer:end"), handleResizeEnd);
   dialog.addEventListener("click", handleClicks);
 
   if (options.documentEnd) {

package/{js → lib/js}/ui/flipcard.js

@@ -2,7 +2,7 @@
  * @module ui/flipcard
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { trimWhitespace } from "@ulu/utils/string.js";
 import { log, logError } from "../utils/class-logger.js";
 
@@ -20,7 +20,7 @@ export const initializer = new ComponentInitializer({
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       const options = Object.assign({}, data);
       const front = element.querySelector(initializer.attributeSelector("front"));

package/{js → lib/js}/ui/grid.js

@@ -2,7 +2,7 @@
  * @module ui/grid
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { setPositionClasses } from "../utils/dom.js";
 
 /**
@@ -19,7 +19,7 @@ export const initializer = new ComponentInitializer({
  */
 export function init(classes) {
   initializer.init({
-    events: ["pageModified", "pageResized"],
+    coreEvents: ["pageModified", "pageResized"],
     setup({ element, initialize }) {
       setPositionClasses(element, classes);
       initialize();

package/lib/js/ui/index.js

@@ -0,0 +1,161 @@
+/**
+ * @module ui
+ * @description
+ * Public API for the UI modules.
+ *
+ * This file re-exports the internal implementations from the `ui` directory
+ * with new names where appropriate, defining the public-facing API for the
+ * library bundle.
+ *
+ * For internal library usage, import directly from the specific file within
+ * the `ui` directory (e.g., `import { ... } from './dialog.js'`).
+ *
+ * @internal How to Name Exports
+ *
+ * Each export is renamed with a prefix based on its source module's name
+ * (e.g., `init` from `dialog.js` becomes `dialogInit`). This is a critical
+ * part of the library's bundling strategy, which creates a single, "flat"
+ * module with uniquely named exports.
+ *
+ * This approach:
+ * 1. Prevents name collisions between modules that might use the same export
+ *    names (like `init` or `defaults`).
+ * 2. Allows bundlers in consuming projects to perform dead-code elimination
+ *    (tree-shaking) with maximum effectiveness.
+ *
+ * How To Add New Exports
+ *
+ * When adding a new export, follow the naming convention:
+ * `[moduleName][OriginalExportName]` (using camelCase).
+ *
+ * For example, to export `myFunction` from `./foo.js`, you would add:
+ * `myFunction as fooMyFunction`
+ *
+ * Please keep the exports within each block alphabetized.
+ */
+export {
+  BreakpointManager
+} from "./breakpoints.js";
+
+export {
+  Collapsible
+} from "./collapsible.js";
+
+export {
+  init as detailsGroupInit,
+  initializer as detailsGroupInitializer,
+  setupGroup as detailsGroupSetupGroup
+} from "./details-group.js";
+
+export {
+  baseAttribute as dialogBaseAttribute,
+  closeAttribute as dialogCloseAttribute,
+  defaults as dialogDefaults,
+  getDialogOptions as dialogGetDialogOptions,
+  init as dialogInit,
+  initializer as dialogInitializer,
+  setDefaults as dialogSetDefaults,
+  setupDialog as dialogSetupDialog,
+  setupTrigger as dialogSetupTrigger,
+} from "./dialog.js";
+
+export {
+  Flipcard,
+  init as flipcardInit,
+  initializer as flipcardInitializer,
+} from "./flipcard.js";
+
+export {
+  init as gridInit,
+  initializer as gridInitializer,
+} from "./grid.js";
+
+export {
+  buildModal as modalBuilderBuildModal,
+  defaults as modalBuilderDefaults,
+  init as modalBuilderInit,
+  initializer as modalBuilderInitializer,
+  setDefaults as modalBuilderSetDefaults,
+} from "./modal-builder.js";
+
+export {
+  OverflowScroller
+} from "./overflow-scroller.js";
+
+export {
+  createPager as overflowScrollerCreatePager
+} from "./overflow-scroller-pager.js";
+
+export {
+  init as pageInit
+} from "./page.js";
+
+export {
+  getContentByTrigger as popoverGetContentByTrigger,
+  init as popoverInit,
+  initializer as popoverInitializer,
+  instances as popoverInstances,
+  Popover,
+  resolve as popoverResolve,
+} from "./popover.js";
+
+export {
+  attrs as printDetailsAttrs,
+  init as printDetailsInit
+} from "./print-details.js";
+
+export {
+  init as printInit
+} from "./print.js";
+
+export {
+  attachHandlers as proxyClickAttachHandlers,
+  defaults as proxyClickDefaults,
+  init as proxyClickInit,
+  initializer as proxyClickInitializer,
+  setDefaults as proxyClickSetDefaults,
+  setupProxy as proxyClickSetupProxy,
+} from "./proxy-click.js";
+
+export {
+  Resizer
+} from "./resizer.js";
+
+export {
+  init as scrollSliderInit,
+  initializer as scrollSliderInitializer,
+} from "./scroll-slider.js";
+
+export {
+  init as scrollpointInit,
+  initializer as scrollpointInitializer,
+  Scrollpoint,
+} from "./scrollpoint.js";
+
+export {
+  init as sliderInit,
+  initializer as sliderInitializer,
+  setupSlider as sliderSetupSlider,
+  Slider,
+} from "./slider.js";
+
+export {
+  init as tabsInit,
+  initializer as tabsInitializer,
+  instances as tabsInstances,
+  setup as tabsSetup,
+} from "./tabs.js";
+
+export {
+  defaults as themeToggleDefaults,
+  init as themeToggleInit,
+  initializer as themeToggleInitializer,
+  setDefaults as themeToggleSetDefaults,
+  setupToggle as themeToggleSetupToggle,
+} from "./theme-toggle.js";
+
+export {
+  init as tooltipInit,
+  initializer as tooltipInitializer,
+  Tooltip,
+} from "./tooltip.js";

package/{js → lib/js}/ui/modal-builder.js

@@ -3,9 +3,9 @@
  * @description Note this module needs to be initialized before dialogs!
  */
 
-import { ComponentInitializer } from "../utils/system.js";
-import { wrapSettingString } from "../settings.js";
-import { getName } from "../events/index.js";
+import { ComponentInitializer } from "../core/component.js";
+import { wrapSettingString } from "../core/settings.js";
+import { getCoreEventName } from "../core/events.js";
 import { Resizer } from "./resizer.js";
 import { baseAttribute, closeAttribute, defaults as dialogDefaults } from "./dialog.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
@@ -158,7 +158,7 @@ export function setDefaults(options) {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data }) {
       buildModal(element, data);
     }
@@ -228,11 +228,11 @@ export function buildModal(content, options) {
 
   if (config.print) {
     let printClone;
-    document.addEventListener(getName("beforePrint"), () => {
+    document.addEventListener(getCoreEventName("beforePrint"), () => {
       printClone = content.cloneNode(true);
       modal.after(printClone);
     });
-    document.addEventListener(getName("afterPrint"), () => {
+    document.addEventListener(getCoreEventName("afterPrint"), () => {
       printClone.remove();
     });
   }

package/{js → lib/js}/ui/overflow-scroller.js

@@ -10,7 +10,7 @@
  * @todo - Document that user could use something like [https://github.com/LachlanArthur/scroll-snap-api/tree/master/src] to have it go between items
  * 
  */
-import { wrapSettingString } from "../settings.js";
+import { wrapSettingString } from "../core/settings.js";
 import { hasRequiredProps } from '@ulu/utils/object.js';
 import { logError } from "../utils/class-logger.js";
 const requiredElements = [
@@ -35,7 +35,7 @@ export class OverflowScroller {
     if (!hasRequiredProps(requiredElements)) {
       logError(this, 'Missing a required Element');
     }
-    console.log(elements)
+    // console.log(elements)
     this.elements = {
       ...elements,
       ...this.createControls(elements.controls)

package/{js → lib/js}/ui/popover.js

@@ -2,7 +2,7 @@
  * @module ui/popover
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { createFloatingUi } from "../utils/floating-ui.js";
 import { Collapsible } from "./collapsible.js";
 
@@ -37,7 +37,7 @@ export function init() {
   initializer.init({
     key: "trigger",
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       if (instances.has(element)) return;
       const resolved = resolve(element, data);

package/{js → lib/js}/ui/print-details.js

@@ -2,7 +2,7 @@
  * @module ui/print-details
  */
 
-import { getName } from "../events/index.js";
+import { getCoreEventName } from "../core/events.js";
 
 /**
  * Default data attributes
@@ -26,7 +26,7 @@ export function init(options) {
   const config = Object.assign({}, defaults, options);
   
   // Add flag and open each details that's closed
-  document.addEventListener(getName("beforePrint"), () => {
+  document.addEventListener(getCoreEventName("beforePrint"), () => {
     document.querySelectorAll(config.selector).forEach(details => {
       if (!details.open) {
         details.setAttribute(attrs.opened, true);
@@ -35,7 +35,7 @@ export function init(options) {
     });
   });
   // When print ends find all flagged and close
-  document.addEventListener(getName("afterPrint"), () => {
+  document.addEventListener(getCoreEventName("afterPrint"), () => {
     document.querySelectorAll(attrSelector("opened")).forEach(details => {
       details.removeAttribute(attrs.opened);
       details.open = false;

package/{js → lib/js}/ui/print.js

@@ -2,7 +2,7 @@
  * @module ui/print
  */
 
-import { ComponentInitializer } from "../utils/system.js";
+import { ComponentInitializer } from "../core/component.js";
 import { getElement } from "@ulu/utils/browser/dom.js";
 import { printElement } from "@ulu/utils/browser/print.js";
 
@@ -28,7 +28,7 @@ const defaults = {
 export function init() {
   initializer.init({
     withData: true,
-    events: ["pageModified"],
+    coreEvents: ["pageModified"],
     setup({ element, data, initialize }) {
       setupTrigger(element, data);
       initialize();