@flamingo-stack/openframe-frontend-core 0.0.852 → 0.0.854

package/src/hooks/ui/use-content-breakpoint.ts

@@ -2,12 +2,24 @@
 
 import { createContext, createElement, type ReactNode, useContext } from 'react';
 import { LAYOUT_STEPS } from '../../styles/layout-steps';
-import { useLgUp, useMdUp } from './use-media-query';
+import { breakpoints, useLgUp, useMdUp, useMediaQuery } from './use-media-query';
 
 export type ContentBreakpoint = 'mobile' | 'tablet' | 'desktop';
 
 /** Content-area steps, in px of the area's own width. */
-export const CONTENT_BREAKPOINTS = { md: LAYOUT_STEPS.md.content, lg: LAYOUT_STEPS.lg.content } as const;
+export const CONTENT_BREAKPOINTS = {
+  md: LAYOUT_STEPS.md.content,
+  lg: LAYOUT_STEPS.lg.content,
+  xl: LAYOUT_STEPS.xl.content,
+} as const;
+
+/**
+ * How many content steps a width has passed, `xl` included: `AppLayout` publishes a new width only when this changes,
+ * so every reader below sees each crossing it asks about (`useContentBreakpoint`, `useContentXlUp`).
+ */
+export function contentStepFor(width: number): number {
+  return [CONTENT_BREAKPOINTS.md, CONTENT_BREAKPOINTS.lg, CONTENT_BREAKPOINTS.xl].filter(step => width >= step).length;
+}
 
 /**
  * Width of the enclosing content area (`AppLayout` with a side panel or a composer
@@ -58,3 +70,10 @@ export function useContentLgUp(): boolean | undefined {
   const breakpoint = useContentBreakpoint();
   return breakpoint === undefined ? undefined : breakpoint === 'desktop';
 }
+
+/** The `content-xl:` step in JS: the content area's width from `xl`, the viewport's outside one. */
+export function useContentXlUp(): boolean | undefined {
+  const width = useContext(ContentAreaWidthContext);
+  const viewportXlUp = useMediaQuery(breakpoints.xl);
+  return width === null ? viewportXlUp : width >= CONTENT_BREAKPOINTS.xl;
+}

package/src/hooks/ui/use-media-query.ts

@@ -40,6 +40,7 @@ export function useMediaQuery(query: string): boolean | undefined {
 export const breakpoints = {
   md: `(min-width: ${LAYOUT_STEPS.md.viewport}px)`, // Tablet
   lg: `(min-width: ${LAYOUT_STEPS.lg.viewport}px)`, // Desktop
+  xl: `(min-width: ${LAYOUT_STEPS.xl.viewport}px)`, // Wide desktop
 };
 
 /** @deprecated Use useMdUp instead */

package/src/types/data-sync.ts

@@ -1,11 +1,14 @@
 /**
  * Every system a shared page's records are mirrored from, with the name a page shows for it. THE list: `DataSync`,
- * `DataSyncLine`'s marks, the docs hook and every host that answers a `sync` read it.
+ * `DataSyncLine`'s and `DataSyncIcon`'s marks, the docs hook and every host that answers a `sync` read it.
  */
 export const DATA_SYNC_SOURCES = {
   clickup: 'ClickUp',
   hubspot: 'HubSpot',
   github: 'GitHub',
+  openframe: 'OpenFrame',
+  stripe: 'Stripe',
+  quickbooks: 'QuickBooks',
 } as const;
 
 export type DataSyncSource = keyof typeof DATA_SYNC_SOURCES;

package/src/utils/presentation-for.ts

@@ -0,0 +1,10 @@
+/**
+ * The entry of a value → presentation table for a value off the wire, `undefined` for one the table does not know.
+ * Own keys only: `in` or a bare index would answer `toString` or `constructor` with the prototype's function.
+ */
+export function presentationFor<K extends string, V>(
+  map: Readonly<Record<K, V>>,
+  key: string | null | undefined,
+): V | undefined {
+  return key != null && Object.prototype.hasOwnProperty.call(map, key) ? map[key as K] : undefined;
+}

package/dist/chunk-UAI4VMEF.cjs

@@ -1,46 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
-
-
-
-
-var _chunkCOWMXUHNcjs = require('./chunk-COWMXUHN.cjs');
-
-// src/hooks/ui/use-content-breakpoint.ts
-var _react = require('react');
-var CONTENT_BREAKPOINTS = { md: _chunkCOWMXUHNcjs.LAYOUT_STEPS.md.content, lg: _chunkCOWMXUHNcjs.LAYOUT_STEPS.lg.content };
-var ContentAreaWidthContext = _react.createContext.call(void 0, null);
-function ViewportBreakpoints({ children }) {
-  return _react.createElement.call(void 0, ContentAreaWidthContext.Provider, { value: null }, children);
-}
-function contentBreakpointFor(width) {
-  if (width >= CONTENT_BREAKPOINTS.lg) return "desktop";
-  if (width >= CONTENT_BREAKPOINTS.md) return "tablet";
-  return "mobile";
-}
-function useContentBreakpoint() {
-  const width = _react.useContext.call(void 0, ContentAreaWidthContext);
-  const mdUp = _chunkCOWMXUHNcjs.useMdUp.call(void 0, );
-  const lgUp = _chunkCOWMXUHNcjs.useLgUp.call(void 0, );
-  if (width !== null) return contentBreakpointFor(width);
-  if (mdUp === void 0) return void 0;
-  if (lgUp) return "desktop";
-  return mdUp ? "tablet" : "mobile";
-}
-function useContentMdUp() {
-  const breakpoint = useContentBreakpoint();
-  return breakpoint === void 0 ? void 0 : breakpoint !== "mobile";
-}
-function useContentLgUp() {
-  const breakpoint = useContentBreakpoint();
-  return breakpoint === void 0 ? void 0 : breakpoint === "desktop";
-}
-
-
-
-
-
-
-
-
-
-exports.CONTENT_BREAKPOINTS = CONTENT_BREAKPOINTS; exports.ContentAreaWidthContext = ContentAreaWidthContext; exports.ViewportBreakpoints = ViewportBreakpoints; exports.contentBreakpointFor = contentBreakpointFor; exports.useContentBreakpoint = useContentBreakpoint; exports.useContentMdUp = useContentMdUp; exports.useContentLgUp = useContentLgUp;