basefn 1.7.0 → 1.9.0

package/src/Basefn__Responsive.res.mjs

@@ -0,0 +1,407 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+import './components/Basefn__Responsive.css'
+;
+
+function breakpointToPixels(bp) {
+  switch (bp) {
+    case "Xs" :
+      return 480;
+    case "Sm" :
+      return 640;
+    case "Md" :
+      return 768;
+    case "Lg" :
+      return 1024;
+    case "Xl" :
+      return 1280;
+    case "Xxl" :
+      return 1536;
+  }
+}
+
+function breakpointToString(bp) {
+  switch (bp) {
+    case "Xs" :
+      return "xs";
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+    case "Xl" :
+      return "xl";
+    case "Xxl" :
+      return "xxl";
+  }
+}
+
+function minWidth(bp) {
+  let px = breakpointToPixels(bp);
+  return `(min-width: ` + px.toString() + `px)`;
+}
+
+function maxWidth(bp) {
+  let px = breakpointToPixels(bp) - 1 | 0;
+  return `(max-width: ` + px.toString() + `px)`;
+}
+
+function between(lower, upper) {
+  let minPx = breakpointToPixels(lower);
+  let maxPx = breakpointToPixels(upper) - 1 | 0;
+  return `(min-width: ` + minPx.toString() + `px) and (max-width: ` + maxPx.toString() + `px)`;
+}
+
+let xsUp = minWidth("Xs");
+
+let smUp = minWidth("Sm");
+
+let mdUp = minWidth("Md");
+
+let lgUp = minWidth("Lg");
+
+let xlUp = minWidth("Xl");
+
+let xxlUp = minWidth("Xxl");
+
+let xsDown = maxWidth("Xs");
+
+let smDown = maxWidth("Sm");
+
+let mdDown = maxWidth("Md");
+
+let lgDown = maxWidth("Lg");
+
+let xlDown = maxWidth("Xl");
+
+let xxlDown = maxWidth("Xxl");
+
+let xsOnly = maxWidth("Sm");
+
+let smOnly = between("Sm", "Md");
+
+let mdOnly = between("Md", "Lg");
+
+let lgOnly = between("Lg", "Xl");
+
+let xlOnly = between("Xl", "Xxl");
+
+let xxlOnly = minWidth("Xxl");
+
+let portrait = "(orientation: portrait)";
+
+let landscape = "(orientation: landscape)";
+
+let prefersReducedMotion = "(prefers-reduced-motion: reduce)";
+
+let prefersDark = "(prefers-color-scheme: dark)";
+
+let touchDevice = "(hover: none) and (pointer: coarse)";
+
+let retina = "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
+
+let Query = {
+  xsUp: xsUp,
+  smUp: smUp,
+  mdUp: mdUp,
+  lgUp: lgUp,
+  xlUp: xlUp,
+  xxlUp: xxlUp,
+  xsDown: xsDown,
+  smDown: smDown,
+  mdDown: mdDown,
+  lgDown: lgDown,
+  xlDown: xlDown,
+  xxlDown: xxlDown,
+  xsOnly: xsOnly,
+  smOnly: smOnly,
+  mdOnly: mdOnly,
+  lgOnly: lgOnly,
+  xlOnly: xlOnly,
+  xxlOnly: xxlOnly,
+  portrait: portrait,
+  landscape: landscape,
+  prefersReducedMotion: prefersReducedMotion,
+  prefersDark: prefersDark,
+  prefersLight: "(prefers-color-scheme: light)",
+  highContrast: "(prefers-contrast: more)",
+  touchDevice: touchDevice,
+  finePointer: "(hover: hover) and (pointer: fine)",
+  retina: retina
+};
+
+let addChangeListener = (function(mql, cb) { mql.addEventListener("change", cb) });
+
+let removeChangeListener = (function(mql, cb) { mql.removeEventListener("change", cb) });
+
+function matchesQuery(query) {
+  return window.matchMedia(query).matches;
+}
+
+function matchesBreakpointUp(bp) {
+  let query = minWidth(bp);
+  return window.matchMedia(query).matches;
+}
+
+function matchesBreakpointDown(bp) {
+  let query = maxWidth(bp);
+  return window.matchMedia(query).matches;
+}
+
+function makeMediaSignal(query) {
+  let mql = window.matchMedia(query);
+  let signal = Xote.Signal.make(mql.matches, undefined, undefined);
+  let handler = evt => Xote.Signal.set(signal, evt.matches);
+  addChangeListener(mql, handler);
+  return signal;
+}
+
+function makeBreakpointSignal(bp) {
+  return makeMediaSignal(minWidth(bp));
+}
+
+function _memo(make) {
+  let cached = {
+    contents: undefined
+  };
+  return () => {
+    let s = cached.contents;
+    if (s !== undefined) {
+      return s;
+    }
+    let s$1 = make();
+    cached.contents = s$1;
+    return s$1;
+  };
+}
+
+let isXsScreen = _memo(() => makeMediaSignal(xsDown));
+
+let isSmScreen = _memo(() => makeMediaSignal(smOnly));
+
+let isMdScreen = _memo(() => makeMediaSignal(mdOnly));
+
+let isLgScreen = _memo(() => makeMediaSignal(lgOnly));
+
+let isXlScreen = _memo(() => makeMediaSignal(xlOnly));
+
+let isXxlScreen = _memo(() => makeMediaSignal(xxlOnly));
+
+let isSmallAndUp = _memo(() => makeMediaSignal(smUp));
+
+let isMediumAndUp = _memo(() => makeMediaSignal(mdUp));
+
+let isLargeAndUp = _memo(() => makeMediaSignal(lgUp));
+
+let isExtraLargeAndUp = _memo(() => makeMediaSignal(xlUp));
+
+let isMobile = _memo(() => makeMediaSignal(smDown));
+
+let isTablet = _memo(() => makeMediaSignal(mdOnly));
+
+let isDesktop = _memo(() => makeMediaSignal(lgUp));
+
+let isPortrait = _memo(() => makeMediaSignal(portrait));
+
+let isLandscape = _memo(() => makeMediaSignal(landscape));
+
+let prefersReducedMotion$1 = _memo(() => makeMediaSignal(prefersReducedMotion));
+
+let prefersDarkMode = _memo(() => makeMediaSignal(prefersDark));
+
+let isTouchDevice = _memo(() => makeMediaSignal(touchDevice));
+
+let isRetina = _memo(() => makeMediaSignal(retina));
+
+function currentBreakpointToString(bp) {
+  switch (bp) {
+    case "ExtraSmall" :
+      return "xs";
+    case "Small" :
+      return "sm";
+    case "Medium" :
+      return "md";
+    case "Large" :
+      return "lg";
+    case "ExtraLarge" :
+      return "xl";
+    case "ExtraExtraLarge" :
+      return "xxl";
+  }
+}
+
+function getCurrentBreakpoint() {
+  if (window.matchMedia(xxlUp).matches) {
+    return "ExtraExtraLarge";
+  } else if (window.matchMedia(xlUp).matches) {
+    return "ExtraLarge";
+  } else if (window.matchMedia(lgUp).matches) {
+    return "Large";
+  } else if (window.matchMedia(mdUp).matches) {
+    return "Medium";
+  } else if (window.matchMedia(smUp).matches) {
+    return "Small";
+  } else {
+    return "ExtraSmall";
+  }
+}
+
+function makeCurrentBreakpointSignal() {
+  let signal = Xote.Signal.make(getCurrentBreakpoint(), undefined, undefined);
+  let breakpoints = [
+    "Sm",
+    "Md",
+    "Lg",
+    "Xl",
+    "Xxl"
+  ];
+  breakpoints.forEach(bp => {
+    let mql = window.matchMedia(minWidth(bp));
+    let _handler = _evt => Xote.Signal.set(signal, getCurrentBreakpoint());
+    addChangeListener(mql, _handler);
+  });
+  return signal;
+}
+
+let currentBreakpoint = {
+  contents: undefined
+};
+
+function getCurrentBreakpointSignal() {
+  let s = currentBreakpoint.contents;
+  if (s !== undefined) {
+    return s;
+  }
+  let s$1 = makeCurrentBreakpointSignal();
+  currentBreakpoint.contents = s$1;
+  return s$1;
+}
+
+function resolveResponsiveValue(value, fallback) {
+  let bp = getCurrentBreakpoint();
+  let ordered;
+  switch (bp) {
+    case "ExtraSmall" :
+      ordered = [value.xs];
+      break;
+    case "Small" :
+      ordered = [
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "Medium" :
+      ordered = [
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "Large" :
+      ordered = [
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "ExtraLarge" :
+      ordered = [
+        value.xl,
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "ExtraExtraLarge" :
+      ordered = [
+        value.xxl,
+        value.xl,
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+  }
+  let _idx = 0;
+  while (true) {
+    let idx = _idx;
+    if (idx >= ordered.length) {
+      return fallback;
+    }
+    let v = ordered[idx];
+    if (v !== undefined) {
+      return Primitive_option.valFromOption(v);
+    }
+    _idx = idx + 1 | 0;
+    continue;
+  };
+}
+
+function hiddenBelow(bp) {
+  return `basefn-hidden-below-` + breakpointToString(bp);
+}
+
+function hiddenAbove(bp) {
+  return `basefn-hidden-above-` + breakpointToString(bp);
+}
+
+function visibleOnly(bp) {
+  return `basefn-visible-` + breakpointToString(bp) + `-only`;
+}
+
+let Visibility = {
+  hiddenBelow: hiddenBelow,
+  hiddenAbove: hiddenAbove,
+  visibleOnly: visibleOnly
+};
+
+export {
+  breakpointToPixels,
+  breakpointToString,
+  minWidth,
+  maxWidth,
+  between,
+  Query,
+  addChangeListener,
+  removeChangeListener,
+  matchesQuery,
+  matchesBreakpointUp,
+  matchesBreakpointDown,
+  makeMediaSignal,
+  makeBreakpointSignal,
+  _memo,
+  isXsScreen,
+  isSmScreen,
+  isMdScreen,
+  isLgScreen,
+  isXlScreen,
+  isXxlScreen,
+  isSmallAndUp,
+  isMediumAndUp,
+  isLargeAndUp,
+  isExtraLargeAndUp,
+  isMobile,
+  isTablet,
+  isDesktop,
+  isPortrait,
+  isLandscape,
+  prefersReducedMotion$1 as prefersReducedMotion,
+  prefersDarkMode,
+  isTouchDevice,
+  isRetina,
+  currentBreakpointToString,
+  getCurrentBreakpoint,
+  makeCurrentBreakpointSignal,
+  currentBreakpoint,
+  getCurrentBreakpointSignal,
+  resolveResponsiveValue,
+  Visibility,
+}
+/*  Not a pure module */

package/src/components/Basefn__Responsive.css

@@ -0,0 +1,118 @@
+/* ============================================================================
+   Responsive Visibility Utilities
+   ============================================================================ */
+
+/* Hidden below breakpoint (hidden on screens smaller than) */
+@media (max-width: 479px) {
+  .basefn-hidden-below-xs { display: none !important; }
+}
+@media (max-width: 639px) {
+  .basefn-hidden-below-sm { display: none !important; }
+}
+@media (max-width: 767px) {
+  .basefn-hidden-below-md { display: none !important; }
+}
+@media (max-width: 1023px) {
+  .basefn-hidden-below-lg { display: none !important; }
+}
+@media (max-width: 1279px) {
+  .basefn-hidden-below-xl { display: none !important; }
+}
+@media (max-width: 1535px) {
+  .basefn-hidden-below-xxl { display: none !important; }
+}
+
+/* Hidden above breakpoint (hidden on screens larger than) */
+@media (min-width: 480px) {
+  .basefn-hidden-above-xs { display: none !important; }
+}
+@media (min-width: 640px) {
+  .basefn-hidden-above-sm { display: none !important; }
+}
+@media (min-width: 768px) {
+  .basefn-hidden-above-md { display: none !important; }
+}
+@media (min-width: 1024px) {
+  .basefn-hidden-above-lg { display: none !important; }
+}
+@media (min-width: 1280px) {
+  .basefn-hidden-above-xl { display: none !important; }
+}
+@media (min-width: 1536px) {
+  .basefn-hidden-above-xxl { display: none !important; }
+}
+
+/* Visible only at specific breakpoint */
+.basefn-visible-xs-only {
+  display: none !important;
+}
+@media (max-width: 479px) {
+  .basefn-visible-xs-only { display: revert !important; }
+}
+
+.basefn-visible-sm-only {
+  display: none !important;
+}
+@media (min-width: 640px) and (max-width: 767px) {
+  .basefn-visible-sm-only { display: revert !important; }
+}
+
+.basefn-visible-md-only {
+  display: none !important;
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .basefn-visible-md-only { display: revert !important; }
+}
+
+.basefn-visible-lg-only {
+  display: none !important;
+}
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .basefn-visible-lg-only { display: revert !important; }
+}
+
+.basefn-visible-xl-only {
+  display: none !important;
+}
+@media (min-width: 1280px) and (max-width: 1535px) {
+  .basefn-visible-xl-only { display: revert !important; }
+}
+
+.basefn-visible-xxl-only {
+  display: none !important;
+}
+@media (min-width: 1536px) {
+  .basefn-visible-xxl-only { display: revert !important; }
+}
+
+/* Orientation-based visibility */
+.basefn-hidden-portrait {
+  display: revert !important;
+}
+@media (orientation: portrait) {
+  .basefn-hidden-portrait { display: none !important; }
+}
+
+.basefn-hidden-landscape {
+  display: revert !important;
+}
+@media (orientation: landscape) {
+  .basefn-hidden-landscape { display: none !important; }
+}
+
+/* Device-based visibility */
+@media (hover: none) and (pointer: coarse) {
+  .basefn-hidden-touch { display: none !important; }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .basefn-hidden-desktop { display: none !important; }
+}
+
+/* Print visibility */
+@media print {
+  .basefn-hidden-print { display: none !important; }
+}
+@media not print {
+  .basefn-visible-print-only { display: none !important; }
+}

package/src/components/Basefn__Spotlight.css

@@ -0,0 +1,207 @@
+@import '../styles/variables.css';
+
+.basefn-spotlight-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--basefn-surface-overlay);
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 20vh;
+  z-index: 1100;
+  animation: basefn-spotlight-fade-in 0.15s ease-out;
+}
+
+.basefn-spotlight {
+  background: var(--basefn-bg-primary);
+  border-radius: var(--basefn-radius-xl);
+  box-shadow: var(--basefn-shadow-lg);
+  width: 560px;
+  max-width: 90vw;
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: basefn-spotlight-slide-in 0.2s ease-out;
+}
+
+/* Search input area */
+.basefn-spotlight__input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-md);
+  padding: var(--basefn-spacing-md) var(--basefn-spacing-lg);
+  border-bottom: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-spotlight__icon {
+  flex-shrink: 0;
+  color: var(--basefn-text-tertiary);
+  width: 20px;
+  height: 20px;
+}
+
+.basefn-spotlight__input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-base);
+  color: var(--basefn-text-primary);
+  line-height: var(--basefn-line-height-normal);
+  padding: var(--basefn-spacing-sm) 0;
+}
+
+.basefn-spotlight__input::placeholder {
+  color: var(--basefn-text-muted);
+}
+
+/* Results list */
+.basefn-spotlight__results {
+  overflow-y: auto;
+  padding: var(--basefn-spacing-sm) 0;
+}
+
+.basefn-spotlight__empty {
+  padding: var(--basefn-spacing-xl) var(--basefn-spacing-lg);
+  text-align: center;
+  color: var(--basefn-text-muted);
+  font-size: var(--basefn-font-size-sm);
+}
+
+.basefn-spotlight__group-label {
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  font-size: var(--basefn-font-size-xs);
+  font-weight: var(--basefn-font-weight-semibold);
+  color: var(--basefn-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.basefn-spotlight__item {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-md);
+  width: 100%;
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  margin: 0;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  color: var(--basefn-text-primary);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  transition: background-color var(--basefn-transition-fast);
+  border-radius: 0;
+}
+
+.basefn-spotlight__item:hover,
+.basefn-spotlight__item--active {
+  background-color: var(--basefn-color-primary);
+  color: #ffffff;
+}
+
+.basefn-spotlight__item-icon {
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  color: var(--basefn-text-tertiary);
+}
+
+.basefn-spotlight__item:hover .basefn-spotlight__item-icon,
+.basefn-spotlight__item--active .basefn-spotlight__item-icon {
+  color: #ffffff;
+}
+
+.basefn-spotlight__item-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.basefn-spotlight__item-label {
+  font-weight: var(--basefn-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.basefn-spotlight__item-description {
+  font-size: var(--basefn-font-size-xs);
+  color: var(--basefn-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 1px;
+}
+
+.basefn-spotlight__item:hover .basefn-spotlight__item-description,
+.basefn-spotlight__item--active .basefn-spotlight__item-description {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+/* Footer with keyboard hints */
+.basefn-spotlight__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-lg);
+  padding: var(--basefn-spacing-sm) var(--basefn-spacing-lg);
+  border-top: 1px solid var(--basefn-border-primary);
+  font-size: var(--basefn-font-size-xs);
+  color: var(--basefn-text-muted);
+}
+
+.basefn-spotlight__footer-hint {
+  display: flex;
+  align-items: center;
+  gap: var(--basefn-spacing-xs);
+}
+
+.basefn-spotlight__footer-key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.25rem;
+  border-radius: var(--basefn-radius-sm);
+  border: 1px solid var(--basefn-border-secondary);
+  background: var(--basefn-bg-secondary);
+  font-size: 0.6875rem;
+  font-family: var(--basefn-font-family);
+  line-height: 1;
+}
+
+/* Animations */
+@keyframes basefn-spotlight-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes basefn-spotlight-slide-in {
+  from {
+    opacity: 0;
+    transform: scale(0.98) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .basefn-spotlight-backdrop {
+    padding-top: 10vh;
+  }
+
+  .basefn-spotlight {
+    max-width: 95vw;
+    max-height: 70vh;
+  }
+
+  .basefn-spotlight__footer {
+    display: none;
+  }
+}