@cliangdev/conductor 0.21.0 → 0.22.0

package/dist/creative/layouts/bleed/layout.css

@@ -0,0 +1,47 @@
+/* bleed — photo covers the whole artboard, text sits over a scrim. */
+
+.cc-board--bleed {
+  background-image: var(--cc-photo);
+  background-size: cover;
+  background-position: var(--cc-focal, 50% 50%);
+  justify-content: flex-end;
+}
+
+/* Fill variant (9x16, 4x5, story): the scrim covers the artboard and the
+   copy is distributed from top to bottom over it. */
+.cc-board__panel--fill {
+  flex: 1 1 auto;
+  height: 100%;
+  justify-content: space-between;
+}
+.cc-r-9x16 .cc-board__panel--fill,
+.cc-r-story .cc-board__panel--fill {
+  padding: 48px 88px var(--cc-safe-bottom, 430px);
+  background-image: linear-gradient(to top,
+    rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.88) 42%,
+    rgba(0,0,0,0.68) 62%, rgba(0,0,0,0.34) 80%, rgba(0,0,0,0.55) 100%);
+}
+.cc-r-4x5 .cc-board__panel--fill {
+  padding: 48px 88px 96px;
+  background-image: linear-gradient(to top,
+    rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.88) 48%,
+    rgba(0,0,0,0.62) 70%, rgba(0,0,0,0.30) 86%, rgba(0,0,0,0.50) 100%);
+}
+/* The chip's own padding already reads as a visual left inset over a full-bleed photo; nudge it back
+   flush with the panel's other content (ported from nexus's bleed layout.css). */
+.cc-board__panel--fill .cc-lockup--chip { margin-left: -40px; }
+
+/* Sequence frames (stories and carousels): anchored bottom so the eye does
+   not have to re-find the copy between taps or swipes. */
+.cc-board--seq .cc-board__panel--fill { justify-content: flex-end; gap: 28px; }
+.cc-board--story.cc-board--bleed .cc-board__panel--fill { padding-top: var(--cc-safe-top, 250px); }
+
+/* Bottom variant (every 1x1, forced via perPlacement). */
+.cc-board__panel--bottom {
+  flex: 0 0 auto;
+  padding: 220px 72px 48px;
+  gap: 14px;
+  background-image: linear-gradient(to top,
+    rgba(28,28,30,0.97) 0%, rgba(28,28,30,0.95) 42%,
+    rgba(28,28,30,0.74) 66%, rgba(28,28,30,0.26) 88%, rgba(28,28,30,0) 100%);
+}

package/dist/creative/layouts/bleed/layout.json

@@ -0,0 +1,17 @@
+{
+  "name": "bleed",
+  "description": "Photo fills the artboard, copy sits over a scrim.",
+  "themes": [
+    "dark"
+  ],
+  "lockupInPanel": true,
+  "photo": "background",
+  "panel": "fill",
+  "dropBody": [],
+  "perPlacement": {
+    "1x1": {
+      "layout": "bleed",
+      "panel": "bottom"
+    }
+  }
+}

package/dist/creative/layouts/card/layout.css

@@ -0,0 +1,24 @@
+/* card — the light layout: inset rounded photo card on a light page. */
+
+.cc-board--card { padding: var(--cc-card-pad); gap: var(--cc-card-gap); }
+
+.cc-board__card {
+  position: relative;
+  width: 100%;
+  height: var(--cc-band-h);
+  flex: 0 0 auto;
+  border-radius: 24px;
+  overflow: hidden;
+  box-shadow: var(--cc-elev-high);
+}
+.cc-board__card img {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  object-position: var(--cc-focal, 50% 40%);
+}
+.cc-board--card .cc-board__panel {
+  flex: 1 1 auto; min-height: 0;
+  justify-content: center;
+  gap: 28px;
+}

package/dist/creative/layouts/card/layout.json

@@ -0,0 +1,17 @@
+{
+  "name": "card",
+  "description": "The light layout: inset rounded photo on a light page.",
+  "themes": [
+    "dark",
+    "light"
+  ],
+  "lockupInPanel": false,
+  "photo": "card",
+  "panel": "plain",
+  "band": {
+    "9x16": 700,
+    "4x5": 520,
+    "1x1": 320
+  },
+  "dropBody": []
+}

package/dist/creative/layouts/index.js

@@ -0,0 +1,62 @@
+// layouts/index.js — the layout registry as a JS module: the same data as
+// layouts/index.json plus every layouts/<name>/layout.json, assembled into one
+// object. Ships alongside the .json files so a bundler can import the
+// registry directly; test/registry.test.mjs asserts the two never drift.
+//
+// A layout is a structural family (where the photo goes, how the panel is
+// built, which themes it allows, per-placement overrides) with its look coming
+// entirely from the CSS custom properties a brand and a placement set — never
+// a brand value baked in here. Adding a layout is a new folder plus an entry
+// in both this file and layouts/index.json.
+export const layoutNames = ['stacked', 'bleed', 'card', 'split'];
+
+export const layouts = {
+  stacked: {
+    name: 'stacked',
+    description: 'Photo band pinned top over a solid text panel.',
+    themes: ['dark'],
+    lockupInPanel: true,
+    photo: 'band',
+    panel: 'plain',
+    band: { '9x16': 1080, '4x5': 800 },
+    dropBody: ['4x5'],
+    perPlacement: {
+      '1x1': { layout: 'bleed', panel: 'bottom' },
+    },
+  },
+  bleed: {
+    name: 'bleed',
+    description: 'Photo fills the artboard, copy sits over a scrim.',
+    themes: ['dark'],
+    lockupInPanel: true,
+    photo: 'background',
+    panel: 'fill',
+    dropBody: [],
+    perPlacement: {
+      '1x1': { layout: 'bleed', panel: 'bottom' },
+    },
+  },
+  card: {
+    name: 'card',
+    description: 'The light layout: inset rounded photo on a light page.',
+    themes: ['dark', 'light'],
+    lockupInPanel: false,
+    photo: 'card',
+    panel: 'plain',
+    band: { '9x16': 700, '4x5': 520, '1x1': 320 },
+    dropBody: [],
+  },
+  split: {
+    name: 'split',
+    description: 'Photo on the top half, copy on a solid panel below, no scrim.',
+    themes: ['dark'],
+    lockupInPanel: true,
+    photo: 'band',
+    panel: 'plain',
+    band: { '9x16': 960, '4x5': 675, '1x1': 540 },
+    dropBody: [],
+    bandScrim: false,
+  },
+};
+
+export default layouts;

package/dist/creative/layouts/index.json

@@ -0,0 +1 @@
+["stacked","bleed","card","split"]

package/dist/creative/layouts/split/layout.css

@@ -0,0 +1,22 @@
+/* split — photo on the top half, plain panel below, no scrim. Proves a fourth
+   layout needs only this folder plus an entry in layouts/index.json. */
+
+.cc-board--split .cc-board__band {
+  position: relative;
+  flex: 0 0 auto;
+  height: var(--cc-band-h);
+  overflow: hidden;
+}
+.cc-board--split .cc-board__band img {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  object-position: var(--cc-focal, 50% 30%);
+}
+.cc-board--split .cc-board__panel {
+  flex: 1 1 auto; min-height: 0;
+  padding: 72px 88px;
+  justify-content: center;
+  gap: 24px;
+  background-color: var(--cc-d-bg);
+}

package/dist/creative/layouts/split/layout.json

@@ -0,0 +1,17 @@
+{
+  "name": "split",
+  "description": "Photo on the top half, copy on a solid panel below, no scrim.",
+  "themes": [
+    "dark"
+  ],
+  "lockupInPanel": true,
+  "photo": "band",
+  "panel": "plain",
+  "band": {
+    "9x16": 960,
+    "4x5": 675,
+    "1x1": 540
+  },
+  "dropBody": [],
+  "bandScrim": false
+}

package/dist/creative/layouts/stacked/layout.css

@@ -0,0 +1,40 @@
+/* stacked — photo band pinned top over a solid text panel. */
+
+.cc-board__band {
+  position: relative;
+  flex: 0 0 auto;
+  height: var(--cc-band-h);
+  overflow: hidden;
+  margin-bottom: -2px; /* hides a subpixel seam against the panel below */
+}
+.cc-board__band img {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  object-position: var(--cc-focal, 50% 30%);
+}
+.cc-board__scrim {
+  position: absolute; left: 0; right: 0; bottom: 0; height: 220px;
+  background: linear-gradient(to top,
+    var(--cc-d-bg) 0%, var(--cc-d-bg) 18%,
+    rgba(28,28,30,0.75) 42%, rgba(28,28,30,0.25) 72%, rgba(28,28,30,0) 100%);
+}
+.cc-board__glow {
+  position: absolute; right: -200px; bottom: -260px;
+  width: 720px; height: 720px; border-radius: 50%;
+  background: radial-gradient(circle, color-mix(in srgb, var(--cc-accent) 13%, transparent), transparent 68%);
+  pointer-events: none;
+}
+
+.cc-board--stacked .cc-board__panel { flex: 1 1 auto; min-height: 0; }
+.cc-r-9x16.cc-board--stacked .cc-board__panel,
+.cc-r-story.cc-board--stacked .cc-board__panel {
+  padding: 88px 88px var(--cc-pad-b, var(--cc-safe-bottom, 430px));
+  justify-content: space-between;
+  gap: 26px;
+}
+.cc-r-4x5.cc-board--stacked .cc-board__panel {
+  padding: 0 88px 88px;
+  justify-content: center;
+  gap: 20px;
+}

package/dist/creative/layouts/stacked/layout.json

@@ -0,0 +1,23 @@
+{
+  "name": "stacked",
+  "description": "Photo band pinned top over a solid text panel.",
+  "themes": [
+    "dark"
+  ],
+  "lockupInPanel": true,
+  "photo": "band",
+  "panel": "plain",
+  "band": {
+    "9x16": 1080,
+    "4x5": 800
+  },
+  "dropBody": [
+    "4x5"
+  ],
+  "perPlacement": {
+    "1x1": {
+      "layout": "bleed",
+      "panel": "bottom"
+    }
+  }
+}

package/dist/creative/placements.js

@@ -0,0 +1,200 @@
+// placements.js — the placement registry as a JS module, exporting the exact
+// same data as placements.json. Shipping both lets a bundler (the Next.js
+// frontend) import the object directly without a JSON loader, while a probe
+// like the backend's sync test (or a Node consumer) can read placements.json
+// on disk. test/registry.test.mjs asserts the two never drift apart.
+//
+// Each placement key is an artboard size: pixel dimensions, a platform label,
+// whether it renders by default, the safe zone (top/bottom/right px a layout
+// must not intrude on — this is where a caption sticker, a link overlay, etc.
+// live on the real platform surface), the headline auto-fit bounds, and the
+// per-placement scale numbers render.js applies as CSS custom properties.
+//
+// Adding a placement is a new key here (and in placements.json, kept equal by
+// the sync test) — no code change.
+export const placements = {
+  '9x16': {
+    w: 1080,
+    h: 1920,
+    label: '9:16 TikTok and Reels',
+    platform: 'tiktok',
+    default: true,
+    safe: { top: 220, bottom: 430, right: 140 },
+    fit: { max: 132, min: 54, lines: 4 },
+    badgeHeight: 108,
+    scale: {
+      lockupGap: 22,
+      iconSize: 80,
+      iconRadius: 20,
+      markHeight: 50,
+      chipPadding: '12px 28px 12px 12px',
+      chipGap: 20,
+      chipIcon: 64,
+      chipIconRadius: 16,
+      chipMark: 40,
+      bodySize: 32,
+      bodyLineHeight: 1.35,
+      bodyMaxWidth: 860,
+      bodyColor: 'rgba(255,255,255,0.72)',
+      lightBodySize: 40,
+      ctaGap: 28,
+      ctaMarginTop: 0,
+      noteSize: 28,
+      noteColor: 'rgba(255,255,255,0.55)',
+      cardPad: '72px 72px var(--cc-safe-bottom, 430px) 72px',
+      cardGap: 56,
+    },
+  },
+  '4x5': {
+    w: 1080,
+    h: 1350,
+    label: '4:5 Instagram feed',
+    platform: 'instagram',
+    default: true,
+    safe: { top: 0, bottom: 0, right: 0 },
+    fit: { max: 118, min: 44, lines: 4 },
+    badgeHeight: 90,
+    scale: {
+      lockupGap: 22,
+      iconSize: 80,
+      iconRadius: 20,
+      markHeight: 50,
+      chipPadding: '12px 28px 12px 12px',
+      chipGap: 20,
+      chipIcon: 64,
+      chipIconRadius: 16,
+      chipMark: 40,
+      bodySize: 30,
+      bodyLineHeight: 1.35,
+      bodyMaxWidth: 860,
+      bodyColor: 'rgba(255,255,255,0.72)',
+      ctaGap: 28,
+      ctaMarginTop: 0,
+      noteSize: 28,
+      noteColor: 'rgba(255,255,255,0.55)',
+      cardPad: '72px 72px 88px 72px',
+      cardGap: 56,
+    },
+  },
+  '1x1': {
+    w: 1080,
+    h: 1080,
+    label: '1:1 Facebook feed',
+    platform: 'facebook',
+    default: true,
+    safe: { top: 0, bottom: 0, right: 0 },
+    fit: { max: 60, min: 30, lines: 3 },
+    badgeHeight: 64,
+    scale: {
+      lockupGap: 13,
+      iconSize: 44,
+      iconRadius: 11,
+      markHeight: 27,
+      chipPadding: '8px 20px 8px 8px',
+      chipGap: 12,
+      bodySize: 23,
+      bodyLineHeight: 1.3,
+      bodyMaxWidth: 880,
+      bodyColor: 'rgba(255,255,255,0.75)',
+      ctaGap: 24,
+      ctaMarginTop: 6,
+      noteSize: 21,
+      noteColor: 'rgba(255,255,255,0.6)',
+      cardPad: '64px 64px 72px 64px',
+      cardGap: 40,
+    },
+  },
+  story: {
+    w: 1080,
+    h: 1920,
+    label: '9:16 Instagram and Facebook Stories',
+    platform: 'story',
+    default: false,
+    safe: { top: 250, bottom: 350, right: 170 },
+    fit: { max: 132, min: 54, lines: 4 },
+    badgeHeight: 108,
+    scale: {
+      lockupGap: 22,
+      iconSize: 80,
+      iconRadius: 20,
+      markHeight: 50,
+      chipPadding: '12px 28px 12px 12px',
+      chipGap: 20,
+      chipIcon: 64,
+      chipIconRadius: 16,
+      chipMark: 40,
+      bodySize: 32,
+      bodyLineHeight: 1.35,
+      bodyMaxWidth: 860,
+      bodyColor: 'rgba(255,255,255,0.72)',
+      lightBodySize: 40,
+      ctaGap: 28,
+      ctaMarginTop: 0,
+      noteSize: 28,
+      noteColor: 'rgba(255,255,255,0.55)',
+      cardPad: '72px 72px var(--cc-safe-bottom, 430px) 72px',
+      cardGap: 56,
+    },
+  },
+  '1.91x1': {
+    w: 1200,
+    h: 628,
+    label: '1.91:1 link ad',
+    platform: 'link',
+    default: false,
+    safe: { top: 0, bottom: 0, right: 0 },
+    fit: { max: 72, min: 34, lines: 3 },
+    badgeHeight: 56,
+    scale: {
+      lockupGap: 13,
+      iconSize: 44,
+      iconRadius: 11,
+      markHeight: 27,
+      chipPadding: '8px 20px 8px 8px',
+      chipGap: 12,
+      bodySize: 23,
+      bodyLineHeight: 1.3,
+      bodyMaxWidth: 880,
+      bodyColor: 'rgba(255,255,255,0.75)',
+      ctaGap: 24,
+      ctaMarginTop: 6,
+      noteSize: 21,
+      noteColor: 'rgba(255,255,255,0.6)',
+      cardPad: '64px 64px 72px 64px',
+      cardGap: 40,
+    },
+  },
+  '2x3': {
+    w: 1000,
+    h: 1500,
+    label: '2:3 Pinterest',
+    platform: 'pinterest',
+    default: false,
+    safe: { top: 0, bottom: 0, right: 0 },
+    fit: { max: 118, min: 44, lines: 4 },
+    badgeHeight: 90,
+    scale: {
+      lockupGap: 22,
+      iconSize: 80,
+      iconRadius: 20,
+      markHeight: 50,
+      chipPadding: '12px 28px 12px 12px',
+      chipGap: 20,
+      chipIcon: 64,
+      chipIconRadius: 16,
+      chipMark: 40,
+      bodySize: 30,
+      bodyLineHeight: 1.35,
+      bodyMaxWidth: 860,
+      bodyColor: 'rgba(255,255,255,0.72)',
+      ctaGap: 28,
+      ctaMarginTop: 0,
+      noteSize: 28,
+      noteColor: 'rgba(255,255,255,0.55)',
+      cardPad: '72px 72px 88px 72px',
+      cardGap: 56,
+    },
+  },
+};
+
+export default placements;