@nextlyhq/plugin-page-builder 0.0.2-alpha.31

package/dist/style-compiler-hnWIDfko.d.ts

@@ -0,0 +1,212 @@
+import { ReactNode } from 'react';
+
+/**
+ * Core contracts for the page builder — isomorphic and runtime-React-free.
+ *
+ * Only *type-only* imports of React / Nextly are allowed here (they are erased at
+ * build, so the `.` bundle has no React/Nextly runtime dependency). The registry
+ * stores block-definition objects (including their `render` functions) but core
+ * never calls React itself.
+ */
+
+/** Document-format version. Bumped only for envelope-shape changes (migrations). */
+type DocumentVersion = 1;
+/** Reserved doors (spec §13): templates/parts and i18n are designed-for, not built. */
+type BlockDocumentKind = "page" | "template" | "part";
+interface BlockDocument {
+    version: DocumentVersion;
+    /** Reserved — defaults to "page". Enables Theme-Builder-style templates later. */
+    kind?: BlockDocumentKind;
+    /** Reserved (i18n) — the locale this document's content is authored in. */
+    locale?: string;
+    /** Reserved (i18n) — links documents that are translations of one another. */
+    translationGroup?: string;
+    root: BlockNode;
+    /** Reserved — page-level settings (SEO, etc.). */
+    settings?: {
+        seo?: Record<string, unknown>;
+    };
+    /** Reserved — a usage index so media/relationship refs are trackable without a full walk. */
+    assets?: {
+        mediaIds?: string[];
+    };
+}
+interface BlockNode {
+    /** Stable unique id (crypto.randomUUID). Stable across locales; drives the scoped CSS class. */
+    id: string;
+    /** Namespaced block type, e.g. "core/heading". */
+    type: string;
+    /** Schema version of the block instance; compared to the definition's `version` for migrations. */
+    definitionVersion?: number;
+    /** Content/config values. Literal values only — bound values live in `bindings`. */
+    props: Record<string, unknown>;
+    /** Typed, responsive style overrides (spec §8). */
+    style?: ResponsiveStyle;
+    /** Responsive style overrides applied on `:hover` (spec §8, hover states). */
+    styleHover?: ResponsiveStyle;
+    /** Named child regions. "default" is the primary slot; only container blocks have slots. */
+    slots?: Record<string, BlockNode[]>;
+    /** Typed data bindings, keyed by the prop they fill. Kept separate from `props` (spec §10). */
+    bindings?: Record<string, Binding>;
+    /** Author escape hatch. */
+    customClass?: string;
+}
+type Breakpoint = string;
+interface BoxSides {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+}
+/** A style value may be a literal or a design-token reference (spec §8). */
+type TokenRef = {
+    token: string;
+};
+type StyleScalar = string | TokenRef;
+interface StyleValues {
+    margin?: BoxSides;
+    padding?: BoxSides;
+    backgroundColor?: StyleScalar;
+    backgroundImage?: StyleScalar;
+    color?: StyleScalar;
+    fontSize?: StyleScalar;
+    lineHeight?: StyleScalar;
+    textAlign?: "left" | "center" | "right" | "justify";
+    width?: StyleScalar;
+    maxWidth?: StyleScalar;
+    height?: StyleScalar;
+    borderRadius?: StyleScalar;
+    display?: string;
+    gridTemplateColumns?: StyleScalar;
+    gap?: StyleScalar;
+    justifyContent?: string;
+    alignItems?: string;
+}
+/** Per-breakpoint style overrides. The base breakpoint holds defaults; others override. */
+type ResponsiveStyle = Partial<Record<Breakpoint, StyleValues>>;
+interface Binding {
+    source: "field";
+    /** Dot-path into the current Query Loop item, e.g. "title" or "author.name". */
+    path: string;
+    /** Optional display transform, e.g. "date:MMM d, yyyy". */
+    transform?: string;
+}
+type BlockCategory = "basic" | "layout" | "media" | "dynamic";
+interface SlotSpec {
+    name: string;
+    /** Namespaced block types allowed in this slot. Omit for "any". */
+    allowedBlocks?: string[];
+}
+/** A reference from a block definition to a style control + the style key it edits. */
+interface ControlRef {
+    /** Control type registered in the control registry, e.g. "spacing" | "color" | "dimension". */
+    control: string;
+    /** Style key this control writes (e.g. "padding", "backgroundColor"). */
+    styleKey: string;
+    label: string;
+}
+interface BlockRenderArgs<P = Record<string, unknown>> {
+    props: P;
+    node: BlockNode;
+    slots: Record<string, ReactNode>;
+    /** The scoped class the block MUST apply to its own root element (no wrapper div). */
+    className: string;
+}
+interface BlockDefinition<P = Record<string, unknown>> {
+    /** Namespaced type, e.g. "core/heading". */
+    type: string;
+    /** Schema version; drives per-block migrations. */
+    version: number;
+    label: string;
+    icon: string;
+    category: BlockCategory;
+    isContainer?: boolean;
+    slots?: SlotSpec[];
+    /**
+     * Content fields — reuse Nextly's field system so the inspector "Content" tab and
+     * dynamic-data binding are driven by one schema. Typed loosely here to avoid coupling
+     * core's compile to Nextly's full type surface; the admin narrows it to `FieldConfig[]`.
+     */
+    contentFields?: unknown[];
+    /** Style/visual controls (page-builder control registry) driving the Style/Responsive tabs. */
+    styleControls?: ControlRef[];
+    defaultProps: P;
+    defaultStyle?: ResponsiveStyle;
+    /** Prop keys that are translatable (i18n door; metadata only for MVP). */
+    localized?: string[];
+    /** Server-safe by default; may be a client component when interactive. */
+    render: (args: BlockRenderArgs<P>) => ReactNode;
+    /** Pure JSON→JSON upgrade for instances older than `version`. */
+    migrate?: (old: unknown, fromVersion: number) => {
+        props: P;
+        style?: ResponsiveStyle;
+    };
+    /** Extra per-instance validation beyond the core invariants. */
+    validate?: (node: BlockNode) => true | string;
+}
+interface ControlDef {
+    /** Control type key, e.g. "spacing" | "color" | "dimension" | "align" | "media" | "link". */
+    type: string;
+    /** The React control component (registered from the admin entry). Opaque to core. */
+    Component: unknown;
+}
+declare const MAX_DEPTH = 12;
+declare const MAX_NODES = 5000;
+declare const DEFAULT_SLOT = "default";
+
+/**
+ * Open, string-keyed registries — the single extensibility seam (spec §7).
+ *
+ * The validator, renderer, and inspector all read the SAME block registry, so a
+ * third party adds a block with one `registerBlock()` call and no core edit.
+ * Types are namespaced (`core/heading`, `acme/pricing-table`) to stay collision-free.
+ */
+
+interface BlockRegistry {
+    register(def: BlockDefinition): void;
+    get(type: string): BlockDefinition | undefined;
+    has(type: string): boolean;
+    all(): BlockDefinition[];
+}
+declare function createBlockRegistry(): BlockRegistry;
+/** The default registry that built-in `core/*` blocks register into on import. */
+declare const defaultBlockRegistry: BlockRegistry;
+/**
+ * Declare a block and register it into the default registry. This is the Puck-style
+ * declarative model: one definition drives validator + renderer + inspector.
+ */
+declare function defineBlock<P>(def: BlockDefinition<P>): BlockDefinition<P>;
+interface ControlRegistry {
+    register(control: ControlDef): void;
+    get(type: string): ControlDef | undefined;
+    all(): ControlDef[];
+}
+declare function createControlRegistry(): ControlRegistry;
+/** The default style/visual control registry (extensible — novel controls register here). */
+declare const defaultControlRegistry: ControlRegistry;
+
+interface BreakpointDef {
+    id: string;
+    maxWidth: number;
+}
+/** Desktop-first defaults (base = desktop; these override downward). */
+declare const DEFAULT_BREAKPOINTS: BreakpointDef[];
+interface CompileOptions {
+    breakpoints?: BreakpointDef[];
+}
+/**
+ * Default design-token palette (spec §8). Token refs (`{ token: "color.primary" }`)
+ * compile to `var(--nx-color-primary)`; these values back those vars out of the box so
+ * tokens work without extra config. A host can override via `PageRenderer`'s `tokens`
+ * prop (a fuller project-config surface is a future door).
+ */
+declare const DEFAULT_TOKENS: Record<string, string>;
+/** Emit the token palette as CSS custom properties on the page root. */
+declare function compileTokensCss(rootClass: string, tokens?: Record<string, string>): string;
+/** Deterministic, short, stable scoped class for a node id (FNV-1a → base36). */
+declare function nodeClass(id: string): string;
+declare function compileNodeCss(node: BlockNode, opts?: CompileOptions): string;
+/** One <style> block worth of CSS for the whole document. */
+declare function compileDocumentCss(doc: BlockDocument, opts?: CompileOptions): string;
+
+export { defineBlock as A, type BlockNode as B, type CompileOptions as C, DEFAULT_BREAKPOINTS as D, nodeClass as E, MAX_DEPTH as M, type ResponsiveStyle as R, type SlotSpec as S, type TokenRef as T, type BlockRegistry as a, type BlockDocument as b, type Binding as c, type BlockCategory as d, type BlockDefinition as e, type BlockDocumentKind as f, type BlockRenderArgs as g, type BoxSides as h, type Breakpoint as i, type BreakpointDef as j, type ControlDef as k, type ControlRef as l, type ControlRegistry as m, DEFAULT_SLOT as n, DEFAULT_TOKENS as o, type DocumentVersion as p, MAX_NODES as q, type StyleScalar as r, type StyleValues as s, compileDocumentCss as t, compileNodeCss as u, compileTokensCss as v, createBlockRegistry as w, createControlRegistry as x, defaultBlockRegistry as y, defaultControlRegistry as z };

package/dist/styles/editor.css

@@ -0,0 +1,412 @@
+/*
+ * @nextlyhq/plugin-page-builder — admin editor styles.
+ *
+ * All colors come from the host admin's semantic tokens (`hsl(var(--token))`), so the
+ * editor looks native AND inherits dark mode automatically (the admin flips the tokens
+ * under `.adminapp.dark`). Everything is scoped under `.nx-pb-*` so it never leaks into
+ * the surrounding admin. Inline styles can't express :hover/:focus — these classes can.
+ */
+
+/* ------------------------------------------------------------------ shell */
+.nx-pb-editor {
+  display: flex;
+  flex-direction: column;
+  height: 78vh;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.nx-pb-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+}
+
+.nx-pb-body {
+  display: grid;
+  grid-template-columns: 232px 1fr 320px;
+  flex: 1;
+  min-height: 0;
+}
+
+.nx-pb-pane {
+  overflow: auto;
+  background: hsl(var(--sidebar-background));
+}
+.nx-pb-pane--left {
+  border-right: 1px solid hsl(var(--border));
+}
+.nx-pb-pane--right {
+  border-left: 1px solid hsl(var(--border));
+}
+.nx-pb-pane--center {
+  /* min-width:0 lets the 1fr canvas column shrink below the iframe's min-content instead
+     of forcing the 3-column grid wider than the editor — otherwise the editor's
+     overflow:hidden clips the right-hand inspector off-screen on narrower viewports. */
+  min-width: 0;
+  min-height: 0;
+  background: hsl(var(--muted));
+}
+
+.nx-pb-pane-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 12px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+  border-bottom: 1px solid hsl(var(--border));
+  position: sticky;
+  top: 0;
+  background: hsl(var(--sidebar-background));
+  z-index: 1;
+}
+
+/* ------------------------------------------------------------- segmented */
+.nx-pb-seg {
+  display: inline-flex;
+  padding: 2px;
+  gap: 2px;
+  background: hsl(var(--muted));
+  border-radius: var(--radius);
+}
+.nx-pb-seg-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--radius);
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease;
+}
+.nx-pb-seg-btn:hover {
+  color: hsl(var(--foreground));
+}
+.nx-pb-seg-btn[aria-pressed="true"] {
+  color: hsl(var(--foreground));
+  background: hsl(var(--card));
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
+}
+.nx-pb-seg-btn:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+}
+
+/* ------------------------------------------------------------ generic btn */
+.nx-pb-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  border-radius: var(--radius);
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    border-color 0.12s ease;
+}
+.nx-pb-icon-btn:hover {
+  background: hsl(var(--muted));
+}
+.nx-pb-icon-btn:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+}
+.nx-pb-icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+/* --------------------------------------------------------------- library */
+.nx-pb-lib-search {
+  position: relative;
+  padding: 10px 12px;
+}
+.nx-pb-lib-search svg {
+  position: absolute;
+  left: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 15px;
+  height: 15px;
+  color: hsl(var(--muted-foreground));
+  pointer-events: none;
+}
+.nx-pb-lib-search input {
+  width: 100%;
+  padding: 7px 10px 7px 32px;
+  font-size: 13px;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--input));
+  border-radius: var(--radius);
+}
+.nx-pb-lib-search input:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+}
+
+.nx-pb-lib-cat {
+  padding: 0 8px 8px;
+}
+.nx-pb-lib-cat-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 6px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+}
+.nx-pb-lib-cat-btn svg {
+  width: 14px;
+  height: 14px;
+  transition: transform 0.12s ease;
+}
+.nx-pb-lib-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+}
+.nx-pb-lib-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  padding: 12px 6px 8px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  cursor: grab;
+  text-align: center;
+  transition:
+    border-color 0.12s ease,
+    background 0.12s ease;
+}
+.nx-pb-lib-item:hover {
+  border-color: hsl(var(--ring));
+  background: hsl(var(--muted));
+}
+.nx-pb-lib-item[data-dragging="true"] {
+  opacity: 0.5;
+}
+.nx-pb-lib-item svg {
+  width: 20px;
+  height: 20px;
+  color: hsl(var(--muted-foreground));
+}
+.nx-pb-lib-item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+.nx-pb-lib-item-insert {
+  margin-top: 2px;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-decoration: underline;
+}
+.nx-pb-lib-item-insert:hover {
+  color: hsl(var(--foreground));
+}
+.nx-pb-lib-empty {
+  padding: 16px 12px;
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+
+/* ------------------------------------------------------------- inspector */
+.nx-pb-inspector {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.nx-pb-inspector-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 12px 10px;
+  border-bottom: 1px solid hsl(var(--border));
+}
+.nx-pb-inspector-header .nx-pb-block-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--radius);
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  flex: none;
+}
+.nx-pb-inspector-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: hsl(var(--foreground));
+}
+.nx-pb-inspector-sub {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  text-transform: capitalize;
+}
+.nx-pb-inspector-empty {
+  padding: 24px 16px;
+  font-size: 13px;
+  color: hsl(var(--muted-foreground));
+  text-align: center;
+}
+
+.nx-pb-section-label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+  margin: 4px 0 8px;
+}
+.nx-pb-empty {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+  padding: 10px 0;
+}
+.nx-pb-control-label {
+  font-size: 12px;
+  color: hsl(var(--muted-foreground));
+}
+.nx-pb-device-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: var(--radius);
+  color: hsl(var(--muted-foreground));
+}
+.nx-pb-device-badge[data-active="true"] {
+  color: hsl(var(--primary-foreground));
+  background: hsl(var(--primary));
+}
+
+/* -------------------------------------------------------- align / choice */
+.nx-pb-choice {
+  display: flex;
+  gap: 4px;
+}
+.nx-pb-choice-btn {
+  flex: 1;
+  padding: 6px 4px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--card));
+  color: hsl(var(--foreground));
+  transition: background 0.12s ease;
+}
+.nx-pb-choice-btn:hover {
+  background: hsl(var(--muted));
+}
+.nx-pb-choice-btn[aria-pressed="true"] {
+  background: hsl(var(--primary));
+  color: hsl(var(--primary-foreground));
+  border-color: hsl(var(--primary));
+}
+
+/* ----------------------------------------------------- spacing box-model */
+.nx-pb-box {
+  display: flex;
+  align-items: flex-end;
+  gap: 4px;
+}
+.nx-pb-box-side {
+  flex: 1;
+  display: grid;
+  gap: 2px;
+  justify-items: center;
+}
+.nx-pb-box-side span {
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+.nx-pb-box-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius);
+  background: hsl(var(--card));
+  color: hsl(var(--muted-foreground));
+  cursor: pointer;
+}
+.nx-pb-box-link[aria-pressed="true"] {
+  color: hsl(var(--primary-foreground));
+  background: hsl(var(--primary));
+  border-color: hsl(var(--primary));
+}
+
+/* ------------------------------------------------------------- color ctl */
+.nx-pb-color-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.nx-pb-color-swatch {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid hsl(var(--input));
+  border-radius: var(--radius);
+  background: none;
+  cursor: pointer;
+}
+.nx-pb-color-tokens {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin-top: 6px;
+}
+.nx-pb-color-token {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  border: 1px solid hsl(var(--border));
+}
+.nx-pb-color-token[data-active="true"] {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 1px;
+}