Scaling Layout

Biblioteca interna para criar layouts responsivos baseados no scaling do SO e breakpoints customizados, totalmente compatível com TailwindCSS.

Ela detecta:

• Scaling do sistema (base, s125, s150)
• Breakpoint da janela (tiny, small, medium, large, huge)

Isso permite criar tipografia, espaçamentos, padding e cores adaptativos sem lógica extra de JavaScript.

Instalação

Como é uma biblioteca interna, basta instalar no seu workspace:

pnpm add scaling-layout
# ou
npm install scaling-layout

Uso básico com React + Tailwind

import { useScalingLayout } from 'scaling-layout/react';
import { clsx } from 'clsx';

export default function ScalingTest() {
  const { scaling, breakpoint } = useScalingLayout({
    breakpoints: {
      tiny: 320,
      small: 450,
      medium: 768,
      large: 1170,
      huge: 1440,
    },
  });

  return (
    <div className="min-h-screen p-8 bg-gray-100">
      {/* Header com informações */}
      <div className="max-w-6xl mx-auto mb-8 p-6 bg-white rounded-lg shadow-lg">
        <h1 className="text-3xl font-bold mb-4 text-gray-800">
          🔍 Scaling Layout – Playground
        </h1>

        <div className="grid grid-cols-2 gap-4">
          <div className="p-4 bg-blue-50 rounded">
            <p className="text-sm text-gray-600">Scaling (SO)</p>
            <p className="text-2xl font-bold text-blue-600">{scaling}</p>
          </div>

          <div className="p-4 bg-purple-50 rounded">
            <p className="text-sm text-gray-600">Breakpoint</p>
            <p className="text-2xl font-bold text-purple-600">{breakpoint}</p>
          </div>
        </div>
      </div>

      {/* Cards de exemplo */}
      <div className="max-w-6xl mx-auto grid grid-cols-1 gap-6 bp-medium:grid-cols-2 bp-large:grid-cols-3">
        <div
          className={clsx(
            'rounded-xl shadow-lg transition-all p-8',
            scaling === 'base' && 'bg-blue-500',
            scaling === 's125' && 'bg-yellow-500 w-3/4',
            scaling === 's150' && 'bg-red-500 w-2/3',
          )}
        >
          <h2 className="text-os font-bold text-white mb-4">Scaling (SO)</h2>
          <ul className="text-white space-y-2">
            <li>🟦 Base (100%)</li>
            <li>🟨 125%</li>
            <li>🟥 150%</li>
          </ul>
        </div>

        <div
          className={clsx(
            'p-8 rounded-xl shadow-lg transition-all bg-gray-500',
            breakpoint === 'tiny' && 'bg-gray-400',
            breakpoint === 'small' && 'bg-pink-500',
            breakpoint === 'medium' && 'bg-purple-500',
            breakpoint === 'large' && 'bg-indigo-500',
            breakpoint === 'huge' && 'bg-cyan-500',
          )}
        >
          <h2 className="text-2xl font-bold text-white mb-4">Breakpoints</h2>
          <p className="text-white">A cor muda conforme a largura da janela.</p>
        </div>
      </div>

      {/* Instruções */}
      <div className="max-w-6xl mx-auto mt-10 p-6 bg-yellow-50 border-2 border-yellow-300 rounded-lg">
        <h3 className="text-xl font-bold text-yellow-800 mb-2">📋 Como testar</h3>
        <ul className="text-yellow-900 space-y-2">
          <li>✅ Mude o scaling do Windows (100%, 125%, 150%)</li>
          <li>✅ Redimensione a janela do navegador</li>
          <li>✅ Nenhuma lógica JS controla o layout</li>
        </ul>
      </div>
    </div>
  );
}

API

useScalingLayout(config?)

const { scaling, breakpoint } = useScalingLayout({
  breakpoints: {
    tiny?: number,
    small?: number,
    medium?: number,
    large?: number,
    huge?: number,
  },
});

• scaling → 'base' | 's125' | 's150'
• breakpoint → 'tiny' | 'small' | 'medium' | 'large' | 'huge' | null
• breakpoints → define os limites de largura para cada bucket

Funciona especialmente bem com Tailwind + clsx, para trocar estilos dinamicamente.

Exemplo visual de fluxo

+-------------------------------------------+
| Windows Scaling                           |
|                                           |
| base   -> 100%                            |
| s125   -> 125%                            |
| s150   -> 150%                            |
+-------------------------------------------+

+-------------------------------------------+
| Breakpoints (width)                       |
|                                           |
| tiny   -> 320px                            |
| small  -> 450px                            |
| medium -> 768px                            |
| large  -> 1170px                           |
| huge   -> 1440px                           |
+-------------------------------------------+

Quando combinados, você consegue controlar:
- Tipografia adaptativa
- Padding responsivo
- Cores e backgrounds dinâmicos
- Layouts com múltiplos breakpoints e scaling

Exemplo avançado com Tailwind + clsx

<div
  className={clsx(
    'p-8 rounded-xl shadow-lg transition-all',
    scaling === 's125' && breakpoint === 'medium' && 'bg-orange-500',
    scaling === 's150' && breakpoint === 'large' && 'bg-amber-500',
  )}
>
  Scaling + Breakpoint ao mesmo tempo
</div>

• Permite criar tipografia, padding, cores e layouts adaptativos com múltiplos níveis de responsividade.
• Mantém seu layout limpo sem lógica adicional de JS.

Observações

• Biblioteca interna, focada em TailwindCSS.
• Não conflita com breakpoints nativos do Tailwind (sm, md, lg, xl, 2xl).
• Flexível e escalável para futuros aj