dees-domtools/ts/domtools.css.breakpoints.ts

import { DomTools } from './domtools.classes.domtools.js';

import { css, CSSResult, unsafeCSS } from 'lit';

export const desktop = 1600;
export const notebook = 1240;
export const tablet = 1024;
export const phablet = 600;
export const phone = 400;

export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';

// ---------------------------------------------------------------------------
// Constraint-based helpers
// ---------------------------------------------------------------------------

export interface ICssForConstraints {
  maxWidth?: number;
  minWidth?: number;
}

const buildCondition = (constraints: ICssForConstraints): string => {
  const parts: string[] = [];
  if (constraints.minWidth) parts.push(`(min-width: ${constraints.minWidth}px)`);
  if (constraints.maxWidth) parts.push(`(max-width: ${constraints.maxWidth}px)`);
  return parts.join(' and ');
};

// ---------------------------------------------------------------------------
// Viewport-level: @container wccToolsViewport + @media
// ---------------------------------------------------------------------------

export const cssForViewport = (cssArg: CSSResult, condition: string) => {
  return unsafeCSS(`
    @container wccToolsViewport ${condition} {
      ${cssArg.cssText}
    }
    @media ${condition} {
      ${cssArg.cssText}
    }
  `);
};

// ---------------------------------------------------------------------------
// Component-level: @container <name> only
// ---------------------------------------------------------------------------

export const cssForContainer = (cssArg: CSSResult, condition: string, containerName: string) => {
  return unsafeCSS(`
    @container ${containerName} ${condition} {
      ${cssArg.cssText}
    }
  `);
};

// ---------------------------------------------------------------------------
// Custom constraints (curried)
// ---------------------------------------------------------------------------

export const cssForCustom = (constraints: ICssForConstraints) =>
  (cssArg: CSSResult) => cssForViewport(cssArg, buildCondition(constraints));

export const cssForCustomContainer = (constraints: ICssForConstraints, containerName: string) =>
  (cssArg: CSSResult) => cssForContainer(cssArg, buildCondition(constraints), containerName);

// ---------------------------------------------------------------------------
// Container context style factory — used by @containerResponsive()
// ---------------------------------------------------------------------------

export const containerContextStyles = (containerName: string) => css`
  :host {
    container-type: inline-size;
    container-name: ${unsafeCSS(containerName)};
  }
`;

// ---------------------------------------------------------------------------
// Preset viewport breakpoint helpers (existing API, unchanged behaviour)
// ---------------------------------------------------------------------------

export const cssForDesktop = (cssArg: CSSResult) => {
  return cssForViewport(cssArg, `(min-width: ${desktop}px)`);
};

export const cssForNotebook = (cssArg: CSSResult) => {
  return cssForViewport(cssArg, `(max-width: ${notebook}px)`);
};

export const cssForTablet = (cssArg: CSSResult) => {
  return cssForViewport(cssArg, `(max-width: ${tablet}px)`);
};

export const cssForPhablet = (cssArg: CSSResult) => {
  return cssForViewport(cssArg, `(max-width: ${phablet}px)`);
};

export const cssForPhone = (cssArg: CSSResult) => {
  return cssForViewport(cssArg, `(max-width: ${phone}px)`);
};