@particle-academy/fancy-cms-ui 0.0.1-dev.0

package/dist/types-DKCl14aV.d.cts

@@ -0,0 +1,176 @@
+/**
+ * Stages document model — see `fancy-ui/docs/fancy-cms.md` §4.
+ *
+ * A page is a vertical stack of full-bleed **sections**; inside each, **layers**
+ * are positioned by constraints (free + bold stays responsive), with stack/grid
+ * containers where structure is wanted. Nodes live in a **flat map** keyed by id
+ * (Figma-style) so ops target a stable identity and collab merges stay clean.
+ */
+type NodeId = string;
+type ScrollMode = "snap" | "smooth";
+/** Ordered, mobile-first. Convention: `"base" | "md" | "lg"`. */
+type Breakpoint = string;
+type Json = string | number | boolean | null | Json[] | {
+    [key: string]: Json;
+};
+/** A literal value OR a binding into the page's data context (`{ $bind: "profile.coins" }`). */
+interface Binding {
+    $bind: string;
+}
+type Bound<T> = T | Binding;
+declare function isBinding(v: unknown): v is Binding;
+type LengthUnit = "px" | "%" | "vw" | "vh" | "rem" | "fr";
+interface Length {
+    value: number;
+    unit: LengthUnit;
+}
+type SizeMode = Length | "fill" | "hug";
+interface Constraints {
+    /** Pinned offsets within a `free` parent (null = unpinned). */
+    left?: Length | null;
+    right?: Length | null;
+    top?: Length | null;
+    bottom?: Length | null;
+    centerX?: boolean;
+    centerY?: boolean;
+    width: SizeMode;
+    height: SizeMode;
+}
+type LayoutMode = "free" | "stack" | "grid";
+interface StyleProps {
+    padding?: Length;
+    margin?: Length;
+    radius?: Length;
+    background?: string;
+    color?: string;
+    opacity?: number;
+    fontFamily?: string;
+    fontSize?: Length;
+    fontWeight?: number;
+    lineHeight?: number;
+    textAlign?: "left" | "center" | "right" | "justify";
+    letterSpacing?: Length;
+    border?: string;
+    boxShadow?: string;
+    transform?: string;
+    filter?: string;
+    gap?: Length;
+    direction?: "row" | "column";
+    columns?: number;
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between" | "around";
+}
+/** Per-breakpoint overrides; `base` is required, others cascade mobile-first. */
+type PerBreakpoint<T> = {
+    base: T;
+} & Partial<Record<Breakpoint, Partial<T>>>;
+type AnimDriver = "enter" | "scroll" | "loop" | "hover" | "click" | "drag";
+interface Keyframe {
+    at: number;
+    props: Record<string, number | string>;
+}
+interface Anim {
+    id: string;
+    driver: AnimDriver;
+    keyframes: Keyframe[];
+    range?: {
+        start: number;
+        end: number;
+    };
+    ease?: string;
+    duration?: number;
+    delay?: number;
+    stagger?: number;
+    once?: boolean;
+    emit?: "css" | "js";
+}
+type ActionEvent = "click" | "submit" | "change" | "load" | "timer" | "scroll-into" | "hover";
+type ActionHandler = {
+    kind: "navigate";
+    href: Bound<string>;
+} | {
+    kind: "submitForm";
+    endpoint: string;
+    method?: "post" | "put";
+} | {
+    kind: "mutate";
+    target: string;
+    value: Bound<Json>;
+} | {
+    kind: "callEndpoint";
+    endpoint: string;
+    method?: string;
+} | {
+    kind: "runFlow";
+    flow: string;
+} | {
+    kind: "openModal";
+    node: NodeId;
+} | {
+    kind: "openDrawer";
+    node: NodeId;
+} | {
+    kind: "playTimeline";
+    section: NodeId;
+} | {
+    kind: "toggleNode";
+    node: NodeId;
+};
+interface Action {
+    on: ActionEvent;
+    do: ActionHandler;
+}
+interface Node {
+    id: NodeId;
+    /** Addon key: `section | text | image | shape | stack | grid | frame | <addon>`. */
+    type: string;
+    /** `null` = a top-level section. */
+    parent: NodeId | null;
+    /** Fractional index — collab-safe ordering among siblings. */
+    order: string;
+    /** Addon-specific props; any value may be a {@link Binding}. */
+    props: Record<string, Bound<Json>>;
+    /** How this node arranges its children. */
+    layout?: LayoutMode;
+    /** How this node positions itself within its parent. */
+    constraints?: PerBreakpoint<Constraints>;
+    style: PerBreakpoint<StyleProps>;
+    animations?: Anim[];
+    actions?: Action[];
+    /** Repeater: render this node once per item of a bound array. */
+    repeat?: {
+        each: Binding;
+        as: string;
+    };
+    /** Derived from the addon manifest — interactive/3rd-party ⇒ hydration island. */
+    island?: boolean;
+}
+interface ThemeTokens {
+    name?: string;
+    [key: string]: Json | undefined;
+}
+interface PageMeta {
+    title: string;
+    slug: string;
+    scrollMode: ScrollMode;
+    seo?: Record<string, string>;
+}
+interface PageDoc {
+    id: string;
+    /** Op counter — collab ordering + revision checkpoints. */
+    seq: number;
+    meta: PageMeta;
+    theme: ThemeTokens;
+    /** Ordered, mobile-first. */
+    breakpoints: Breakpoint[];
+    /** Top-level section order. */
+    sections: NodeId[];
+    /** Flat map — not a nested tree. */
+    nodes: Record<NodeId, Node>;
+}
+/** Default breakpoint → min-width (px) map. `base` has no media query. */
+declare const DEFAULT_BREAKPOINTS: Record<string, number>;
+/** A minimal empty document. */
+declare function emptyDoc(id: string, slug?: string): PageDoc;
+
+export { type Action as A, type Binding as B, type Constraints as C, DEFAULT_BREAKPOINTS as D, type Json as J, type Keyframe as K, type LayoutMode as L, type Node as N, type PageDoc as P, type ScrollMode as S, type ThemeTokens as T, type ActionEvent as a, type ActionHandler as b, type Anim as c, type AnimDriver as d, type Bound as e, type Breakpoint as f, type Length as g, type LengthUnit as h, type NodeId as i, type PageMeta as j, type PerBreakpoint as k, type SizeMode as l, type StyleProps as m, emptyDoc as n, isBinding as o };

package/dist/types-DKCl14aV.d.ts

@@ -0,0 +1,176 @@
+/**
+ * Stages document model — see `fancy-ui/docs/fancy-cms.md` §4.
+ *
+ * A page is a vertical stack of full-bleed **sections**; inside each, **layers**
+ * are positioned by constraints (free + bold stays responsive), with stack/grid
+ * containers where structure is wanted. Nodes live in a **flat map** keyed by id
+ * (Figma-style) so ops target a stable identity and collab merges stay clean.
+ */
+type NodeId = string;
+type ScrollMode = "snap" | "smooth";
+/** Ordered, mobile-first. Convention: `"base" | "md" | "lg"`. */
+type Breakpoint = string;
+type Json = string | number | boolean | null | Json[] | {
+    [key: string]: Json;
+};
+/** A literal value OR a binding into the page's data context (`{ $bind: "profile.coins" }`). */
+interface Binding {
+    $bind: string;
+}
+type Bound<T> = T | Binding;
+declare function isBinding(v: unknown): v is Binding;
+type LengthUnit = "px" | "%" | "vw" | "vh" | "rem" | "fr";
+interface Length {
+    value: number;
+    unit: LengthUnit;
+}
+type SizeMode = Length | "fill" | "hug";
+interface Constraints {
+    /** Pinned offsets within a `free` parent (null = unpinned). */
+    left?: Length | null;
+    right?: Length | null;
+    top?: Length | null;
+    bottom?: Length | null;
+    centerX?: boolean;
+    centerY?: boolean;
+    width: SizeMode;
+    height: SizeMode;
+}
+type LayoutMode = "free" | "stack" | "grid";
+interface StyleProps {
+    padding?: Length;
+    margin?: Length;
+    radius?: Length;
+    background?: string;
+    color?: string;
+    opacity?: number;
+    fontFamily?: string;
+    fontSize?: Length;
+    fontWeight?: number;
+    lineHeight?: number;
+    textAlign?: "left" | "center" | "right" | "justify";
+    letterSpacing?: Length;
+    border?: string;
+    boxShadow?: string;
+    transform?: string;
+    filter?: string;
+    gap?: Length;
+    direction?: "row" | "column";
+    columns?: number;
+    align?: "start" | "center" | "end" | "stretch";
+    justify?: "start" | "center" | "end" | "between" | "around";
+}
+/** Per-breakpoint overrides; `base` is required, others cascade mobile-first. */
+type PerBreakpoint<T> = {
+    base: T;
+} & Partial<Record<Breakpoint, Partial<T>>>;
+type AnimDriver = "enter" | "scroll" | "loop" | "hover" | "click" | "drag";
+interface Keyframe {
+    at: number;
+    props: Record<string, number | string>;
+}
+interface Anim {
+    id: string;
+    driver: AnimDriver;
+    keyframes: Keyframe[];
+    range?: {
+        start: number;
+        end: number;
+    };
+    ease?: string;
+    duration?: number;
+    delay?: number;
+    stagger?: number;
+    once?: boolean;
+    emit?: "css" | "js";
+}
+type ActionEvent = "click" | "submit" | "change" | "load" | "timer" | "scroll-into" | "hover";
+type ActionHandler = {
+    kind: "navigate";
+    href: Bound<string>;
+} | {
+    kind: "submitForm";
+    endpoint: string;
+    method?: "post" | "put";
+} | {
+    kind: "mutate";
+    target: string;
+    value: Bound<Json>;
+} | {
+    kind: "callEndpoint";
+    endpoint: string;
+    method?: string;
+} | {
+    kind: "runFlow";
+    flow: string;
+} | {
+    kind: "openModal";
+    node: NodeId;
+} | {
+    kind: "openDrawer";
+    node: NodeId;
+} | {
+    kind: "playTimeline";
+    section: NodeId;
+} | {
+    kind: "toggleNode";
+    node: NodeId;
+};
+interface Action {
+    on: ActionEvent;
+    do: ActionHandler;
+}
+interface Node {
+    id: NodeId;
+    /** Addon key: `section | text | image | shape | stack | grid | frame | <addon>`. */
+    type: string;
+    /** `null` = a top-level section. */
+    parent: NodeId | null;
+    /** Fractional index — collab-safe ordering among siblings. */
+    order: string;
+    /** Addon-specific props; any value may be a {@link Binding}. */
+    props: Record<string, Bound<Json>>;
+    /** How this node arranges its children. */
+    layout?: LayoutMode;
+    /** How this node positions itself within its parent. */
+    constraints?: PerBreakpoint<Constraints>;
+    style: PerBreakpoint<StyleProps>;
+    animations?: Anim[];
+    actions?: Action[];
+    /** Repeater: render this node once per item of a bound array. */
+    repeat?: {
+        each: Binding;
+        as: string;
+    };
+    /** Derived from the addon manifest — interactive/3rd-party ⇒ hydration island. */
+    island?: boolean;
+}
+interface ThemeTokens {
+    name?: string;
+    [key: string]: Json | undefined;
+}
+interface PageMeta {
+    title: string;
+    slug: string;
+    scrollMode: ScrollMode;
+    seo?: Record<string, string>;
+}
+interface PageDoc {
+    id: string;
+    /** Op counter — collab ordering + revision checkpoints. */
+    seq: number;
+    meta: PageMeta;
+    theme: ThemeTokens;
+    /** Ordered, mobile-first. */
+    breakpoints: Breakpoint[];
+    /** Top-level section order. */
+    sections: NodeId[];
+    /** Flat map — not a nested tree. */
+    nodes: Record<NodeId, Node>;
+}
+/** Default breakpoint → min-width (px) map. `base` has no media query. */
+declare const DEFAULT_BREAKPOINTS: Record<string, number>;
+/** A minimal empty document. */
+declare function emptyDoc(id: string, slug?: string): PageDoc;
+
+export { type Action as A, type Binding as B, type Constraints as C, DEFAULT_BREAKPOINTS as D, type Json as J, type Keyframe as K, type LayoutMode as L, type Node as N, type PageDoc as P, type ScrollMode as S, type ThemeTokens as T, type ActionEvent as a, type ActionHandler as b, type Anim as c, type AnimDriver as d, type Bound as e, type Breakpoint as f, type Length as g, type LengthUnit as h, type NodeId as i, type PageMeta as j, type PerBreakpoint as k, type SizeMode as l, type StyleProps as m, emptyDoc as n, isBinding as o };

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@particle-academy/fancy-cms-ui",
+  "version": "0.0.1-dev.0",
+  "description": "Editor + isomorphic renderer for fancy-cms — the Stages document model, PageOp op-spine, the JS style→CSS emitter (one half of the dual-emitter pair with the PHP particle-academy/fancy-cms), and the React renderer. Built on the Fancy UI suite.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Particle-Academy/fancy-cms-ui.git"
+  },
+  "homepage": "https://github.com/Particle-Academy/fancy-cms-ui#readme",
+  "bugs": "https://github.com/Particle-Academy/fancy-cms-ui/issues",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./editor": {
+      "import": {
+        "types": "./dist/editor.d.ts",
+        "default": "./dist/editor.js"
+      },
+      "require": {
+        "types": "./dist/editor.d.cts",
+        "default": "./dist/editor.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "docs",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "parity": "node parity/run.mjs",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "tsup"
+  },
+  "keywords": [
+    "cms",
+    "website-builder",
+    "wysiwyg",
+    "editor",
+    "fancy",
+    "human-plus",
+    "laravel",
+    "inertia"
+  ],
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "@particle-academy/react-fancy": ">=3"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@particle-academy/react-fancy": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.0",
+    "vitest": "^3.2.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}