@damarkuncoro/layout-engine 0.1.0 → 0.1.1

package/lib/esm/structures/HeaderLayout.js

@@ -0,0 +1,21 @@
+import { Flex } from "../primitives/Flex.js";
+import { Box } from "../primitives/Box.js";
+/**
+ * HeaderLayout - layout dengan header di atas dan content di bawah
+ */
+export function HeaderLayout({ header, children, headerHeight = 64 }) {
+    return Flex({
+        direction: "column",
+        children: [
+            Box({
+                height: headerHeight,
+                style: { position: "sticky", top: 0, zIndex: 10 },
+                children: header
+            }),
+            Box({
+                style: { flex: 1 },
+                children
+            })
+        ]
+    });
+}

package/lib/esm/structures/SidebarLayout.d.ts

@@ -0,0 +1,13 @@
+import type { SidebarLayoutContract } from "../system/contracts.js";
+import type { CSSLength, ResponsiveValue } from "../system/types.js";
+export interface ResponsiveSidebarLayoutProps extends Omit<SidebarLayoutContract, "sidebarWidth"> {
+    sidebarWidth?: ResponsiveValue<CSSLength>;
+    viewportWidth?: number;
+}
+export declare function SidebarLayout({ sidebar, children, sidebarWidth, viewportWidth }: ResponsiveSidebarLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/structures/SplitLayout.d.ts

@@ -0,0 +1,18 @@
+import type { CSSLength, ResponsiveValue } from "../system/types.js";
+export interface SplitLayoutProps {
+    left: any;
+    right: any;
+    leftWidth?: CSSLength | ResponsiveValue<CSSLength>;
+    splitRatio?: string;
+    viewportWidth?: number;
+}
+/**
+ * SplitLayout - layout dua kolom (kiri/kanan)
+ */
+export declare function SplitLayout({ left, right, leftWidth, splitRatio, viewportWidth }: SplitLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/structures/SplitLayout.js

@@ -0,0 +1,27 @@
+import { Flex } from "../primitives/Flex.js";
+import { Box } from "../primitives/Box.js";
+import { resolveResponsive } from "../core/responsiveSystem.js";
+import { normalizeUnit } from "../core/styleResolver.js";
+/**
+ * SplitLayout - layout dua kolom (kiri/kanan)
+ */
+export function SplitLayout({ left, right, leftWidth, splitRatio = "50%", viewportWidth = 1024 }) {
+    var _a;
+    const resolvedWidth = leftWidth
+        ? normalizeUnit((_a = resolveResponsive(leftWidth, viewportWidth)) !== null && _a !== void 0 ? _a : splitRatio)
+        : splitRatio;
+    return Flex({
+        gap: 4,
+        children: [
+            Box({
+                width: resolvedWidth,
+                style: { flexShrink: 0 },
+                children: left
+            }),
+            Box({
+                style: { flex: 1 },
+                children: right
+            })
+        ]
+    });
+}

package/lib/esm/structures/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./SidebarLayout.js";
+export * from "./HeaderLayout.js";
+export * from "./SplitLayout.js";
+export * from "./HeaderContentFooter.js";

package/lib/esm/structures/index.js

@@ -0,0 +1,4 @@
+export * from "./SidebarLayout.js";
+export * from "./HeaderLayout.js";
+export * from "./SplitLayout.js";
+export * from "./HeaderContentFooter.js";

package/lib/esm/system/contracts.d.ts

@@ -0,0 +1,37 @@
+import type { CSSLength, HeadlessNode, ResponsiveValue } from "./types.js";
+export type NodeLike = HeadlessNode | string | number | boolean | null | undefined;
+export interface SidebarLayoutContract {
+    sidebar: NodeLike;
+    children: NodeLike;
+    sidebarWidth?: CSSLength | ResponsiveValue<CSSLength>;
+    viewportWidth?: number;
+}
+export interface HeaderLayoutContract {
+    header: NodeLike;
+    children: NodeLike;
+}
+export interface DashboardLayoutContract {
+    header: NodeLike;
+    sidebar: NodeLike;
+    children: NodeLike;
+}
+export interface SplitLayoutContract {
+    left: NodeLike;
+    right: NodeLike;
+    leftWidth?: CSSLength | ResponsiveValue<CSSLength>;
+    splitRatio?: string;
+    viewportWidth?: number;
+}
+export interface AuthLayoutContract {
+    children: NodeLike;
+    logo?: NodeLike;
+    subtitle?: string;
+}
+export interface LandingLayoutContract {
+    header?: NodeLike;
+    hero?: NodeLike;
+    features?: NodeLike;
+    pricing?: NodeLike;
+    footer?: NodeLike;
+    children?: NodeLike;
+}

package/lib/esm/system/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export * from "./contracts.js";
+export * from "./theme.js";

package/{dist → lib/esm}/system/index.js

@@ -1,2 +1,3 @@
 export * from "./types.js";
 export * from "./contracts.js";
+export * from "./theme.js";

package/lib/esm/system/theme.d.ts

@@ -0,0 +1,134 @@
+/**
+ * Theme System untuk layout-engine
+ * Menyediakan tokens untuk colors, typography, spacing, dan dark mode
+ */
+/**
+ * Theme colors
+ */
+export interface ThemeColors {
+    primary: string;
+    primaryHover: string;
+    primaryFg: string;
+    secondary: string;
+    secondaryHover: string;
+    secondaryFg: string;
+    bg: string;
+    bgSubtle: string;
+    bgMuted: string;
+    fg: string;
+    fgMuted: string;
+    fgSubtle: string;
+    border: string;
+    borderFocus: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+}
+/**
+ * Theme typography
+ */
+export interface ThemeTypography {
+    fontSans: string;
+    fontMono: string;
+    textXs: string;
+    textSm: string;
+    textBase: string;
+    textLg: string;
+    textXl: string;
+    text2xl: string;
+    text3xl: string;
+    text4xl: string;
+    fontNormal: number;
+    fontMedium: number;
+    fontSemibold: number;
+    fontBold: number;
+    leadingTight: number;
+    leadingNormal: number;
+    leadingRelaxed: number;
+}
+/**
+ * Theme border radii
+ */
+export interface ThemeRadii {
+    radiusNone: string;
+    radiusSm: string;
+    radiusBase: string;
+    radiusMd: string;
+    radiusLg: string;
+    radiusXl: string;
+    radiusFull: string;
+}
+/**
+ * Theme shadows
+ */
+export interface ThemeShadows {
+    shadowSm: string;
+    shadowBase: string;
+    shadowMd: string;
+    shadowLg: string;
+    shadowXl: string;
+}
+/**
+ * Theme spacing (spacing tokens)
+ */
+export interface ThemeSpacing {
+    space0: string;
+    space1: string;
+    space2: string;
+    space3: string;
+    space4: string;
+    space5: string;
+    space6: string;
+    space8: string;
+    space10: string;
+    space12: string;
+    space16: string;
+    space20: string;
+    space24: string;
+    space32: string;
+    space40: string;
+    space48: string;
+    space64: string;
+    space80: string;
+    space96: string;
+}
+/**
+ * Theme breakpoints
+ */
+export interface ThemeBreakpoints {
+    bpSm: number;
+    bpMd: number;
+    bpLg: number;
+    bpXl: number;
+    bp2xl: number;
+}
+/**
+ * Complete theme type
+ */
+export interface Theme extends ThemeColors, ThemeTypography, ThemeRadii, ThemeShadows, ThemeSpacing, ThemeBreakpoints {
+}
+/**
+ * Light theme
+ */
+export declare const themeLight: Theme;
+/**
+ * Dark theme
+ */
+export declare const themeDark: Theme;
+/**
+ * Default theme (light)
+ */
+export declare const theme: Theme;
+/**
+ * Color scheme type
+ */
+export type ColorScheme = "light" | "dark" | "system";
+/**
+ * Detect system color scheme preference
+ */
+export declare function getSystemColorScheme(): "light" | "dark";
+/**
+ * Get theme based on color scheme
+ */
+export declare function getTheme(colorScheme?: ColorScheme): Theme;

package/lib/esm/system/theme.js

@@ -0,0 +1,190 @@
+/**
+ * Theme System untuk layout-engine
+ * Menyediakan tokens untuk colors, typography, spacing, dan dark mode
+ */
+/**
+ * Light theme
+ */
+export const themeLight = {
+    // Colors
+    primary: "#3b82f6",
+    primaryHover: "#2563eb",
+    primaryFg: "#ffffff",
+    secondary: "#64748b",
+    secondaryHover: "#475569",
+    secondaryFg: "#ffffff",
+    bg: "#ffffff",
+    bgSubtle: "#f8fafc",
+    bgMuted: "#f1f5f9",
+    fg: "#0f172a",
+    fgMuted: "#475569",
+    fgSubtle: "#94a3b8",
+    border: "#e2e8f0",
+    borderFocus: "#3b82f6",
+    success: "#22c55e",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
+    // Typography
+    fontSans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontMono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    textXs: "0.75rem",
+    textSm: "0.875rem",
+    textBase: "1rem",
+    textLg: "1.125rem",
+    textXl: "1.25rem",
+    text2xl: "1.5rem",
+    text3xl: "1.875rem",
+    text4xl: "2.25rem",
+    fontNormal: 400,
+    fontMedium: 500,
+    fontSemibold: 600,
+    fontBold: 700,
+    leadingTight: 1.25,
+    leadingNormal: 1.5,
+    leadingRelaxed: 1.625,
+    // Radii
+    radiusNone: "0",
+    radiusSm: "0.125rem",
+    radiusBase: "0.25rem",
+    radiusMd: "0.375rem",
+    radiusLg: "0.5rem",
+    radiusXl: "0.75rem",
+    radiusFull: "9999px",
+    // Shadows
+    shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+    shadowBase: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+    shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+    shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+    shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+    // Spacing
+    space0: "0",
+    space1: "0.25rem",
+    space2: "0.5rem",
+    space3: "0.75rem",
+    space4: "1rem",
+    space5: "1.25rem",
+    space6: "1.5rem",
+    space8: "2rem",
+    space10: "2.5rem",
+    space12: "3rem",
+    space16: "4rem",
+    space20: "5rem",
+    space24: "6rem",
+    space32: "8rem",
+    space40: "10rem",
+    space48: "12rem",
+    space64: "16rem",
+    space80: "20rem",
+    space96: "24rem",
+    // Breakpoints
+    bpSm: 640,
+    bpMd: 768,
+    bpLg: 1024,
+    bpXl: 1280,
+    bp2xl: 1536,
+};
+/**
+ * Dark theme
+ */
+export const themeDark = {
+    // Colors
+    primary: "#3b82f6",
+    primaryHover: "#60a5fa",
+    primaryFg: "#ffffff",
+    secondary: "#64748b",
+    secondaryHover: "#94a3b8",
+    secondaryFg: "#ffffff",
+    bg: "#0f172a",
+    bgSubtle: "#1e293b",
+    bgMuted: "#334155",
+    fg: "#f8fafc",
+    fgMuted: "#cbd5e1",
+    fgSubtle: "#64748b",
+    border: "#334155",
+    borderFocus: "#3b82f6",
+    success: "#22c55e",
+    warning: "#f59e0b",
+    error: "#ef4444",
+    info: "#3b82f6",
+    // Typography
+    fontSans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+    fontMono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    textXs: "0.75rem",
+    textSm: "0.875rem",
+    textBase: "1rem",
+    textLg: "1.125rem",
+    textXl: "1.25rem",
+    text2xl: "1.5rem",
+    text3xl: "1.875rem",
+    text4xl: "2.25rem",
+    fontNormal: 400,
+    fontMedium: 500,
+    fontSemibold: 600,
+    fontBold: 700,
+    leadingTight: 1.25,
+    leadingNormal: 1.5,
+    leadingRelaxed: 1.625,
+    // Radii
+    radiusNone: "0",
+    radiusSm: "0.125rem",
+    radiusBase: "0.25rem",
+    radiusMd: "0.375rem",
+    radiusLg: "0.5rem",
+    radiusXl: "0.75rem",
+    radiusFull: "9999px",
+    // Shadows - lebih terang untuk dark mode
+    shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.3)",
+    shadowBase: "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4)",
+    shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)",
+    shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4)",
+    shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4)",
+    // Spacing
+    space0: "0",
+    space1: "0.25rem",
+    space2: "0.5rem",
+    space3: "0.75rem",
+    space4: "1rem",
+    space5: "1.25rem",
+    space6: "1.5rem",
+    space8: "2rem",
+    space10: "2.5rem",
+    space12: "3rem",
+    space16: "4rem",
+    space20: "5rem",
+    space24: "6rem",
+    space32: "8rem",
+    space40: "10rem",
+    space48: "12rem",
+    space64: "16rem",
+    space80: "20rem",
+    space96: "24rem",
+    // Breakpoints
+    bpSm: 640,
+    bpMd: 768,
+    bpLg: 1024,
+    bpXl: 1280,
+    bp2xl: 1536,
+};
+/**
+ * Default theme (light)
+ */
+export const theme = themeLight;
+/**
+ * Detect system color scheme preference
+ */
+export function getSystemColorScheme() {
+    var _a;
+    if (typeof window === "undefined")
+        return "light";
+    return ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-color-scheme: dark)").matches) ? "dark" : "light";
+}
+/**
+ * Get theme based on color scheme
+ */
+export function getTheme(colorScheme = "system") {
+    if (colorScheme === "system") {
+        return getSystemColorScheme() === "dark" ? themeDark : themeLight;
+    }
+    return colorScheme === "dark" ? themeDark : themeLight;
+}

package/lib/esm/system/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Tipe panjang CSS. Angka akan dinormalisasi ke 'px' oleh resolver.
+ */
+export type CSSLength = number | string;
+/**
+ * Responsive value that adapts based on viewport width.
+ */
+export type ResponsiveValue<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    "2xl"?: T;
+} | T[];
+/**
+ * Props dasar untuk layout primitives.
+ * Hanya properti yang dipetakan ke style inline.
+ */
+export interface LayoutProps {
+    padding?: CSSLength;
+    margin?: CSSLength;
+    width?: CSSLength;
+    height?: CSSLength;
+    display?: string;
+    style?: Record<string, any>;
+}
+/**
+ * Representasi node headless untuk renderer.
+ */
+export interface HeadlessNode {
+    type: string;
+    props: {
+        style?: Record<string, any>;
+        children?: any;
+        [key: string]: any;
+    };
+}

package/lib/esm/tests/basic.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/esm/tests/structures.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@damarkuncoro/layout-engine",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Minimal layout engine primitives and resolvers",
   "license": "MIT",
   "type": "module",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
   "sideEffects": false,
   "files": [
-    "dist"
+    "lib"
   ],
   "keywords": [
     "layout",
@@ -23,17 +23,25 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    }
+      "types": "./lib/esm/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "npm run build && node dist/tests/basic.test.js && node dist/tests/structures.test.js"
+  "publishConfig": {
+    "access": "public"
   },
   "peerDependencies": {},
   "devDependencies": {
     "typescript": "^5.4.0"
+  },
+  "scripts": {
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "postbuild:cjs": "node scripts/ensure-cjs.js",
+    "build": "npm run build:esm && npm run build:cjs && npm run postbuild:cjs",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "npm run build && node lib/esm/tests/basic.test.js && node lib/esm/tests/structures.test.js"
   }
-}
+}

package/dist/index.d.ts

@@ -1,12 +0,0 @@
-export * from "./core/styleResolver.js";
-export * from "./core/spacingSystem.js";
-export { resolveResponsive, breakpoints, type BreakpointKey } from "./core/responsiveSystem.js";
-export * from "./core/render.js";
-export * from "./system/types.js";
-export * from "./system/contracts.js";
-export { Box, type LayoutProps } from "./primitives/Box.js";
-export { Flex, type FlexProps } from "./primitives/Flex.js";
-export { Stack, type StackProps } from "./primitives/Stack.js";
-export { Grid, type GridProps } from "./primitives/Grid.js";
-export { SidebarLayout, type ResponsiveSidebarLayoutProps } from "./structures/SidebarLayout.js";
-export * from "./patterns/DashboardLayout.js";

package/dist/index.js

@@ -1,12 +0,0 @@
-export * from "./core/styleResolver.js";
-export * from "./core/spacingSystem.js";
-export { resolveResponsive, breakpoints } from "./core/responsiveSystem.js";
-export * from "./core/render.js";
-export * from "./system/types.js";
-export * from "./system/contracts.js";
-export { Box } from "./primitives/Box.js";
-export { Flex } from "./primitives/Flex.js";
-export { Stack } from "./primitives/Stack.js";
-export { Grid } from "./primitives/Grid.js";
-export { SidebarLayout } from "./structures/SidebarLayout.js";
-export * from "./patterns/DashboardLayout.js";

package/dist/primitives/Grid.d.ts

@@ -1,15 +0,0 @@
-import type { CSSLength, LayoutProps } from "../system/types.js";
-export interface GridProps extends LayoutProps {
-    columns?: number | string;
-    rows?: number | string;
-    gap?: CSSLength;
-}
-export declare function Grid({ children, columns, rows, gap, padding, margin, width, height, display, style, ...rest }: GridProps & {
-    children?: any;
-}): {
-    type: string;
-    props: {
-        children: any;
-        style: Record<string, any>;
-    };
-};

package/dist/primitives/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./Box";
-export * from "./Flex";
-export * from "./Grid";
-export * from "./Stack";

package/dist/primitives/index.js

@@ -1,4 +0,0 @@
-export * from "./Box";
-export * from "./Flex";
-export * from "./Grid";
-export * from "./Stack";