@damarkuncoro/layout-engine 0.1.0 → 0.1.1

package/{dist → lib/cjs}/system/contracts.d.ts

@@ -15,3 +15,23 @@ export interface DashboardLayoutContract {
     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/cjs/system/contracts.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/{dist → lib/cjs}/system/index.d.ts

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

package/lib/cjs/system/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./types.js"), exports);
+__exportStar(require("./contracts.js"), exports);
+__exportStar(require("./theme.js"), exports);

package/lib/cjs/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/cjs/system/theme.js

@@ -0,0 +1,195 @@
+"use strict";
+/**
+ * Theme System untuk layout-engine
+ * Menyediakan tokens untuk colors, typography, spacing, dan dark mode
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.theme = exports.themeDark = exports.themeLight = void 0;
+exports.getSystemColorScheme = getSystemColorScheme;
+exports.getTheme = getTheme;
+/**
+ * Light theme
+ */
+exports.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
+ */
+exports.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)
+ */
+exports.theme = exports.themeLight;
+/**
+ * Detect system color scheme preference
+ */
+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
+ */
+function getTheme(colorScheme = "system") {
+    if (colorScheme === "system") {
+        return getSystemColorScheme() === "dark" ? exports.themeDark : exports.themeLight;
+    }
+    return colorScheme === "dark" ? exports.themeDark : exports.themeLight;
+}

package/lib/cjs/system/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/cjs/tests/basic.test.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert = (cond, msg) => {
+    if (!cond) {
+        throw new Error(`Test failed: ${msg}`);
+    }
+};
+const run = async () => {
+    const api = await Promise.resolve(`${new URL("../index.js", import.meta.url).href}`).then(s => __importStar(require(s)));
+    const { normalizeUnit, space, resolveResponsive, Flex, Box, renderToString } = api;
+    // normalizeUnit
+    assert(normalizeUnit(16) === "16px", "normalizeUnit number to px");
+    assert(normalizeUnit("2rem") === "2rem", "normalizeUnit keeps string");
+    // spacing tokens
+    assert(space(2) === "8px", "spacing index 2 is 8px");
+    // responsive resolver (object form)
+    assert(resolveResponsive({ base: 8, md: 16, xl: 24 }, 800) === 16, "resolveResponsive picks md at width 800");
+    assert(resolveResponsive({ base: 8, md: 16, xl: 24 }, 1300) === 24, "resolveResponsive picks xl at width 1300");
+    // primitives mapping + render
+    const node = Flex({
+        direction: "row",
+        gap: 16,
+        children: [
+            Box({ width: 240, children: "Sidebar" }),
+            Box({ style: { flex: 1 }, children: "Content" })
+        ]
+    });
+    const html = renderToString(node);
+    assert(html.includes("display:flex"), "Flex renders display flex");
+    assert(html.includes("flex-direction:row"), "Flex renders direction");
+    assert(html.includes("gap:16px"), "Flex renders gap 16px");
+    assert(html.includes("width:240px"), "Box width 240px");
+    assert(html.includes("flex:1"), "Box flex:1 in style");
+    console.log("All tests passed");
+};
+run().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});

package/lib/cjs/tests/structures.test.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const assert = (cond, msg) => {
+    if (!cond) {
+        throw new Error(`Test failed: ${msg}`);
+    }
+};
+const run = async () => {
+    const api = await Promise.resolve(`${new URL("../index.js", import.meta.url).href}`).then(s => __importStar(require(s)));
+    const { SidebarLayout, DashboardLayout, renderToString, Box } = api;
+    const sidebar = Box({ children: "SIDE" });
+    const content = Box({ children: "MAIN" });
+    const header = Box({ children: "HEAD" });
+    const node1 = SidebarLayout({ sidebar, children: content, sidebarWidth: 200 });
+    const html1 = renderToString(node1);
+    assert(html1.includes("width:200px"), "Sidebar width applied");
+    assert(html1.indexOf("SIDE") < html1.indexOf("MAIN"), "Sidebar before content");
+    const node2 = DashboardLayout({ header, sidebar, children: content });
+    const html2 = renderToString(node2);
+    assert(html2.indexOf("HEAD") < html2.indexOf("SIDE"), "Header before sidebar/content");
+    console.log("Structures tests passed");
+};
+run().catch((e) => {
+    console.error(e);
+    process.exit(1);
+});

package/lib/esm/core/index.js

@@ -0,0 +1,3 @@
+export * from "./styleResolver.js";
+export * from "./spacingSystem.js";
+export * from "./responsiveSystem.js";

package/lib/esm/core/render.d.ts

@@ -0,0 +1,5 @@
+import type { HeadlessNode } from "../system/types.js";
+/**
+ * Merender HeadlessNode menjadi string HTML dengan inline style.
+ */
+export declare const renderToString: (node: HeadlessNode) => string;

package/lib/esm/core/responsiveSystem.d.ts

@@ -0,0 +1,11 @@
+export type BreakpointKey = "sm" | "md" | "lg" | "xl" | "2xl";
+export declare const breakpoints: Record<BreakpointKey, number>;
+export type ResponsiveValue<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    "2xl"?: T;
+} | T[];
+export declare const resolveResponsive: <T>(value: ResponsiveValue<T> | undefined, width: number) => T | undefined;

package/lib/esm/core/spacingSystem.d.ts

@@ -0,0 +1,2 @@
+export declare const spacingScale: Record<number, number>;
+export declare const space: (i: number) => string;

package/lib/esm/core/styleResolver.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Mengubah nilai panjang CSS: angka → px, string tetap.
+ * Contoh: 16 -> "16px", "2rem" -> "2rem", undefined -> undefined
+ */
+export declare const normalizeUnit: (value?: number | string) => string | undefined;

package/lib/esm/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./system/index.js";
+export * from "./primitives/index.js";
+export * from "./structures/index.js";
+export * from "./patterns/index.js";
+export * from "./presets/index.js";
+export { resolveResponsive, breakpoints, type BreakpointKey } from "./core/responsiveSystem.js";
+export * from "./core/spacingSystem.js";
+export * from "./core/styleResolver.js";
+export * from "./core/render.js";

package/lib/esm/index.js

@@ -0,0 +1,9 @@
+export * from "./system/index.js";
+export * from "./primitives/index.js";
+export * from "./structures/index.js";
+export * from "./patterns/index.js";
+export * from "./presets/index.js";
+export { resolveResponsive, breakpoints } from "./core/responsiveSystem.js";
+export * from "./core/spacingSystem.js";
+export * from "./core/styleResolver.js";
+export * from "./core/render.js";

package/lib/esm/patterns/AuthLayout.d.ts

@@ -0,0 +1,17 @@
+import type { NodeLike } from "../system/contracts.js";
+export interface AuthLayoutProps {
+    children: NodeLike;
+    logo?: NodeLike;
+    subtitle?: string;
+}
+/**
+ * AuthLayout - layout untuk halaman login/register
+ * Konsisten centered dengan form di tengah layar
+ */
+export declare function AuthLayout({ children, logo, subtitle }: AuthLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/patterns/AuthLayout.js

@@ -0,0 +1,31 @@
+import { Flex } from "../primitives/Flex.js";
+import { Box } from "../primitives/Box.js";
+/**
+ * AuthLayout - layout untuk halaman login/register
+ * Konsisten centered dengan form di tengah layar
+ */
+export function AuthLayout({ children, logo, subtitle }) {
+    return Flex({
+        style: {
+            minHeight: "100vh",
+            alignItems: "center",
+            justifyContent: "center"
+        },
+        children: Box({
+            style: {
+                width: "100%",
+                maxWidth: "400px",
+                padding: "24px"
+            },
+            children: Flex({
+                direction: "column",
+                gap: 4,
+                children: [
+                    logo ? Box({ children: logo }) : null,
+                    subtitle ? Box({ children: subtitle }) : null,
+                    children
+                ].filter(Boolean)
+            })
+        })
+    });
+}

package/lib/esm/patterns/DashboardLayout.d.ts

@@ -0,0 +1,8 @@
+import type { DashboardLayoutContract } from "../system/contracts.js";
+export declare function DashboardLayout({ header, sidebar, children }: DashboardLayoutContract): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};

package/lib/esm/patterns/LandingLayout.d.ts

@@ -0,0 +1,20 @@
+import type { NodeLike } from "../system/contracts.js";
+export interface LandingLayoutProps {
+    header?: NodeLike;
+    hero?: NodeLike;
+    features?: NodeLike;
+    pricing?: NodeLike;
+    footer?: NodeLike;
+    children?: NodeLike;
+}
+/**
+ * LandingLayout - layout untuk halaman landing page
+ * Dengan section hero, features, pricing, dan footer
+ */
+export declare function LandingLayout({ header, hero, features, pricing, footer, children }: LandingLayoutProps): {
+    type: string;
+    props: {
+        children: any;
+        style: Record<string, any>;
+    };
+};