@crowdedkingdoms/crowdyjs 12.0.0 → 12.2.0

package/dist/crowdy-studio/embed/dock.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Accessible splitter and persisted width state for the game/studio embed
+ * dock. Layout ownership stays with the embed panel through the width
+ * callback: the dock only decides "how wide", never "where".
+ *
+ * Ported from the proven Blocks with Friends dock so every game embedding
+ * Crowdy Studio gets the same keyboard/pointer resize semantics.
+ */
+export declare const CROWDY_STUDIO_EMBED_NARROW_BREAKPOINT_PX = 1000;
+export declare const CROWDY_STUDIO_EMBED_DEFAULT_DOCK_RATIO = 0.52;
+export declare const CROWDY_STUDIO_EMBED_MIN_DOCK_WIDTH_PX = 480;
+export declare const CROWDY_STUDIO_EMBED_MIN_GAME_WIDTH_PX = 420;
+export declare const CROWDY_STUDIO_EMBED_SPLITTER_WIDTH_PX = 10;
+export declare const CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY = "ck:crowdy-studio:embed:dock-width:v1";
+export interface CrowdyStudioEmbedDockWidthRange {
+    min: number;
+    max: number;
+}
+export type CrowdyStudioEmbedDockStorage = Pick<Storage, 'getItem' | 'setItem'>;
+/**
+ * Width bounds for the right-hand studio dock. The desktop breakpoint ensures
+ * these minimums do not conflict in normal use; the defensive Math.min keeps
+ * direct callers safe in unusually small test or embedded viewports.
+ */
+export declare function crowdyStudioEmbedDockWidthRange(viewportWidth?: number): CrowdyStudioEmbedDockWidthRange;
+export declare function clampCrowdyStudioEmbedDockWidth(width: number, viewportWidth?: number): number;
+export declare class CrowdyStudioEmbedDock {
+    private readonly onWidthChange;
+    private readonly storage;
+    readonly separator: HTMLDivElement;
+    private preferredWidth;
+    private currentWidth;
+    private active;
+    private draggingPointerId;
+    constructor(onWidthChange: (width: number) => void, storage?: CrowdyStudioEmbedDockStorage | null);
+    get width(): number;
+    activate(): void;
+    deactivate(): void;
+    /** Re-clamp the preferred width after a viewport resize. */
+    refresh(): void;
+    destroy(): void;
+    private applyPreferredWidth;
+    private setPreferredWidth;
+    private updateAria;
+    private readonly keyDown;
+    private readonly pointerDown;
+    private readonly pointerMove;
+    private readonly pointerUp;
+    private readonly pointerCancel;
+    private stopDragging;
+    private loadPersistedWidth;
+    private persistWidth;
+}
+export declare function addBodyClass(name: string): void;
+export declare function removeBodyClass(...names: readonly string[]): void;
+//# sourceMappingURL=dock.d.ts.map

package/dist/crowdy-studio/embed/dock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dock.d.ts","sourceRoot":"","sources":["../../../src/crowdy-studio/embed/dock.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,eAAO,MAAM,wCAAwC,OAAQ,CAAC;AAC9D,eAAO,MAAM,sCAAsC,OAAO,CAAC;AAC3D,eAAO,MAAM,qCAAqC,MAAM,CAAC;AACzD,eAAO,MAAM,qCAAqC,MAAM,CAAC;AACzD,eAAO,MAAM,qCAAqC,KAAK,CAAC;AACxD,eAAO,MAAM,0CAA0C,yCACf,CAAC;AAKzC,MAAM,WAAW,+BAA+B;IAC9C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,MAAM,4BAA4B,GAAG,IAAI,CAC7C,OAAO,EACP,SAAS,GAAG,SAAS,CACtB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,+BAA+B,CAC7C,aAAa,SAAoB,GAChC,+BAA+B,CASjC;AAED,wBAAgB,+BAA+B,CAC7C,KAAK,EAAE,MAAM,EACb,aAAa,SAAoB,GAChC,MAAM,CAGR;AAED,qBAAa,qBAAqB;IAQ9B,OAAO,CAAC,QAAQ,CAAC,aAAa;IAC9B,OAAO,CAAC,QAAQ,CAAC,OAAO;IAR1B,QAAQ,CAAC,SAAS,EAAE,cAAc,CAAC;IACnC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,iBAAiB,CAAuB;gBAG7B,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACtC,OAAO,GAAE,4BAA4B,GAAG,IAAyB;IAwBpF,IAAI,KAAK,IAAI,MAAM,CAElB;IAED,QAAQ,IAAI,IAAI;IAMhB,UAAU,IAAI,IAAI;IAMlB,4DAA4D;IAC5D,OAAO,IAAI,IAAI;IAQf,OAAO,IAAI,IAAI;IAcf,OAAO,CAAC,mBAAmB;IAQ3B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAatB;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAa1B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAK1B;IAEF,OAAO,CAAC,QAAQ,CAAC,SAAS,CAMxB;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAEF,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,YAAY;CAYrB;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAM/C;AAED,wBAAgB,eAAe,CAAC,GAAG,KAAK,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAMjE"}

package/dist/crowdy-studio/embed/dock.js

@@ -0,0 +1,231 @@
+/**
+ * Accessible splitter and persisted width state for the game/studio embed
+ * dock. Layout ownership stays with the embed panel through the width
+ * callback: the dock only decides "how wide", never "where".
+ *
+ * Ported from the proven Blocks with Friends dock so every game embedding
+ * Crowdy Studio gets the same keyboard/pointer resize semantics.
+ */
+export const CROWDY_STUDIO_EMBED_NARROW_BREAKPOINT_PX = 1000;
+export const CROWDY_STUDIO_EMBED_DEFAULT_DOCK_RATIO = 0.52;
+export const CROWDY_STUDIO_EMBED_MIN_DOCK_WIDTH_PX = 480;
+export const CROWDY_STUDIO_EMBED_MIN_GAME_WIDTH_PX = 420;
+export const CROWDY_STUDIO_EMBED_SPLITTER_WIDTH_PX = 10;
+export const CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY = 'ck:crowdy-studio:embed:dock-width:v1';
+const KEYBOARD_STEP_PX = 16;
+const KEYBOARD_LARGE_STEP_PX = 48;
+/**
+ * Width bounds for the right-hand studio dock. The desktop breakpoint ensures
+ * these minimums do not conflict in normal use; the defensive Math.min keeps
+ * direct callers safe in unusually small test or embedded viewports.
+ */
+export function crowdyStudioEmbedDockWidthRange(viewportWidth = window.innerWidth) {
+    const max = Math.max(CROWDY_STUDIO_EMBED_SPLITTER_WIDTH_PX, Math.floor(viewportWidth - CROWDY_STUDIO_EMBED_MIN_GAME_WIDTH_PX));
+    return {
+        min: Math.min(CROWDY_STUDIO_EMBED_MIN_DOCK_WIDTH_PX, max),
+        max,
+    };
+}
+export function clampCrowdyStudioEmbedDockWidth(width, viewportWidth = window.innerWidth) {
+    const range = crowdyStudioEmbedDockWidthRange(viewportWidth);
+    return Math.round(Math.min(range.max, Math.max(range.min, width)));
+}
+export class CrowdyStudioEmbedDock {
+    constructor(onWidthChange, storage = safeLocalStorage()) {
+        this.onWidthChange = onWidthChange;
+        this.storage = storage;
+        this.currentWidth = 0;
+        this.active = false;
+        this.draggingPointerId = null;
+        this.keyDown = (event) => {
+            if (!this.active)
+                return;
+            const range = crowdyStudioEmbedDockWidthRange();
+            const step = event.shiftKey ? KEYBOARD_LARGE_STEP_PX : KEYBOARD_STEP_PX;
+            let next = null;
+            if (event.code === 'ArrowLeft')
+                next = this.currentWidth + step;
+            else if (event.code === 'ArrowRight')
+                next = this.currentWidth - step;
+            else if (event.code === 'Home')
+                next = range.min;
+            else if (event.code === 'End')
+                next = range.max;
+            if (next === null)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.setPreferredWidth(next, true);
+        };
+        this.pointerDown = (event) => {
+            if (!this.active || event.button !== 0)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.draggingPointerId = event.pointerId;
+            this.separator.dataset.dragging = 'true';
+            addBodyClass('ck-crowdy-studio-embed-resizing');
+            try {
+                this.separator.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Synthetic browser tests and older engines may not expose capture.
+            }
+            this.setPreferredWidth(window.innerWidth - event.clientX, false);
+        };
+        this.pointerMove = (event) => {
+            if (event.pointerId !== this.draggingPointerId)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.setPreferredWidth(window.innerWidth - event.clientX, false);
+        };
+        this.pointerUp = (event) => {
+            if (event.pointerId !== this.draggingPointerId)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.setPreferredWidth(window.innerWidth - event.clientX, true);
+            this.stopDragging();
+        };
+        this.pointerCancel = (event) => {
+            if (event.pointerId !== this.draggingPointerId)
+                return;
+            event.stopPropagation();
+            this.persistWidth();
+            this.stopDragging();
+        };
+        this.preferredWidth =
+            this.loadPersistedWidth() ??
+                Math.round(window.innerWidth * CROWDY_STUDIO_EMBED_DEFAULT_DOCK_RATIO);
+        const separator = document.createElement('div');
+        separator.className = 'ck-crowdy-studio-embed-separator';
+        separator.hidden = true;
+        separator.tabIndex = 0;
+        separator.setAttribute('role', 'separator');
+        separator.setAttribute('aria-orientation', 'vertical');
+        separator.setAttribute('aria-label', 'Resize Crowdy Studio dock');
+        separator.title = 'Resize Crowdy Studio (Left/Right arrows, Home/End)';
+        separator.addEventListener('keydown', this.keyDown);
+        separator.addEventListener('pointerdown', this.pointerDown);
+        separator.addEventListener('pointermove', this.pointerMove);
+        separator.addEventListener('pointerup', this.pointerUp);
+        separator.addEventListener('pointercancel', this.pointerCancel);
+        separator.addEventListener('lostpointercapture', this.pointerCancel);
+        this.separator = separator;
+        this.updateAria();
+    }
+    get width() {
+        return this.currentWidth;
+    }
+    activate() {
+        this.active = true;
+        this.separator.hidden = false;
+        this.applyPreferredWidth(true);
+    }
+    deactivate() {
+        this.active = false;
+        this.separator.hidden = true;
+        this.stopDragging();
+    }
+    /** Re-clamp the preferred width after a viewport resize. */
+    refresh() {
+        if (!this.active) {
+            this.updateAria();
+            return;
+        }
+        this.applyPreferredWidth(false);
+    }
+    destroy() {
+        this.deactivate();
+        this.separator.removeEventListener('keydown', this.keyDown);
+        this.separator.removeEventListener('pointerdown', this.pointerDown);
+        this.separator.removeEventListener('pointermove', this.pointerMove);
+        this.separator.removeEventListener('pointerup', this.pointerUp);
+        this.separator.removeEventListener('pointercancel', this.pointerCancel);
+        this.separator.removeEventListener('lostpointercapture', this.pointerCancel);
+        this.separator.remove();
+    }
+    applyPreferredWidth(force) {
+        const next = clampCrowdyStudioEmbedDockWidth(this.preferredWidth);
+        const changed = next !== this.currentWidth;
+        this.currentWidth = next;
+        this.updateAria();
+        if (changed || force)
+            this.onWidthChange(next);
+    }
+    setPreferredWidth(width, persist) {
+        this.preferredWidth = clampCrowdyStudioEmbedDockWidth(width);
+        this.applyPreferredWidth(false);
+        if (persist)
+            this.persistWidth();
+    }
+    updateAria() {
+        const range = crowdyStudioEmbedDockWidthRange();
+        const width = this.currentWidth ||
+            clampCrowdyStudioEmbedDockWidth(this.preferredWidth);
+        const gameWidth = Math.max(0, window.innerWidth - width);
+        this.separator.setAttribute('aria-valuemin', String(range.min));
+        this.separator.setAttribute('aria-valuemax', String(range.max));
+        this.separator.setAttribute('aria-valuenow', String(width));
+        this.separator.setAttribute('aria-valuetext', `Crowdy Studio ${width} pixels; game ${gameWidth} pixels`);
+    }
+    stopDragging() {
+        const pointerId = this.draggingPointerId;
+        this.draggingPointerId = null;
+        this.separator.dataset.dragging = 'false';
+        removeBodyClass('ck-crowdy-studio-embed-resizing');
+        if (pointerId === null)
+            return;
+        try {
+            if (this.separator.hasPointerCapture(pointerId)) {
+                this.separator.releasePointerCapture(pointerId);
+            }
+        }
+        catch {
+            // Capture is an enhancement; width and persistence do not depend on it.
+        }
+    }
+    loadPersistedWidth() {
+        if (!this.storage)
+            return null;
+        try {
+            const parsed = Number(this.storage.getItem(CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY));
+            return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+        }
+        catch {
+            return null;
+        }
+    }
+    persistWidth() {
+        if (!this.storage || this.currentWidth <= 0)
+            return;
+        try {
+            this.storage.setItem(CROWDY_STUDIO_EMBED_DOCK_WIDTH_STORAGE_KEY, String(this.currentWidth));
+        }
+        catch {
+            // Storage can be unavailable in private/embedded contexts; resizing
+            // remains fully functional for the current session.
+        }
+    }
+}
+export function addBodyClass(name) {
+    const classes = new Set(document.body.className.split(/\s+/u).filter(Boolean));
+    classes.add(name);
+    document.body.className = [...classes].join(' ');
+}
+export function removeBodyClass(...names) {
+    const remove = new Set(names);
+    document.body.className = document.body.className
+        .split(/\s+/u)
+        .filter((value) => value && !remove.has(value))
+        .join(' ');
+}
+function safeLocalStorage() {
+    try {
+        return window.localStorage;
+    }
+    catch {
+        return null;
+    }
+}

package/dist/crowdy-studio/embed/embed-styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Injected presentation for the Crowdy Studio embed shell (panel, dock
+ * separator, context drawer, text HUD). Ported from the proven Blocks with
+ * Friends chrome so every embedding game starts from the same accessible
+ * baseline; games restyle by overriding these classes.
+ *
+ * Games that dock the studio can consume `--ck-game-right-inset` (set on
+ * `document.body` while docked) to inset their own canvas/HUD.
+ */
+export declare function ensureCrowdyStudioEmbedStyles(doc?: Document): void;
+export declare const CROWDY_STUDIO_EMBED_STYLES = "\nbody.ck-crowdy-studio-embed-open {\n  overscroll-behavior: none;\n}\n\nbody.ck-crowdy-studio-embed-resizing,\nbody.ck-crowdy-studio-embed-resizing * {\n  cursor: col-resize !important;\n  user-select: none !important;\n}\n\n.ck-crowdy-studio-embed {\n  position: fixed;\n  inset: 0;\n  z-index: 100;\n  padding: clamp(8px, 1.5vw, 22px);\n  color: #e2e8f0;\n  background:\n    radial-gradient(circle at 12% 4%, rgba(16, 185, 129, 0.2), transparent 30%),\n    radial-gradient(circle at 92% 98%, rgba(5, 150, 105, 0.13), transparent 34%),\n    rgba(2, 6, 23, 0.88);\n  backdrop-filter: blur(18px) saturate(120%);\n  pointer-events: auto;\n  animation: ck-crowdy-studio-embed-enter 160ms ease-out;\n}\n\n.ck-crowdy-studio-embed.is-docked {\n  inset: 0 0 0 auto;\n  display: grid;\n  grid-template-columns: 10px minmax(0, 1fr);\n  width: var(--ck-crowdy-studio-embed-dock-width);\n  padding: 0;\n  background: #020617;\n  backdrop-filter: none;\n  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.32);\n}\n\n.ck-crowdy-studio-embed-separator {\n  position: relative;\n  z-index: 3;\n  width: 10px;\n  min-width: 10px;\n  height: 100%;\n  padding: 0;\n  border: 0;\n  background: rgba(15, 23, 42, 0.98);\n  cursor: col-resize;\n  touch-action: none;\n}\n\n.ck-crowdy-studio-embed-separator::after {\n  position: absolute;\n  inset: 0 3px;\n  border-radius: 999px;\n  background: rgba(110, 231, 183, 0.34);\n  content: \"\";\n  transition:\n    inset 120ms ease,\n    background 120ms ease;\n}\n\n.ck-crowdy-studio-embed-separator:hover::after,\n.ck-crowdy-studio-embed-separator:focus-visible::after,\n.ck-crowdy-studio-embed-separator[data-dragging=\"true\"]::after {\n  inset-inline: 2px;\n  background: #6ee7b7;\n}\n\n.ck-crowdy-studio-embed-shell {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid rgba(110, 231, 183, 0.24);\n  border-radius: 20px;\n  background:\n    linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.96));\n  box-shadow:\n    0 32px 100px rgba(0, 0, 0, 0.62),\n    inset 0 1px rgba(255, 255, 255, 0.04);\n}\n\n.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-shell {\n  grid-column: 2;\n  border-block: 0;\n  border-right: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n\n/* Single compact header row: title \u00B7 context pill \u00B7 Context toggle \u00B7 Close. */\n.ck-crowdy-studio-embed-header {\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  min-height: 46px;\n  padding: 6px 12px;\n  border-bottom: 1px solid rgba(148, 163, 184, 0.18);\n  background: rgba(15, 23, 42, 0.78);\n}\n\n.ck-crowdy-studio-embed-header h1 {\n  overflow: hidden;\n  margin: 0;\n  margin-right: auto;\n  color: #f8fafc;\n  font-size: 16px;\n  line-height: 1.1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ck-crowdy-studio-embed-visually-hidden {\n  position: absolute;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.ck-crowdy-studio-embed-context-toggle {\n  border: 1px solid rgba(148, 163, 184, 0.3);\n  border-radius: 9px;\n  padding: 8px 13px;\n  color: #cbd5e1;\n  background: rgba(2, 6, 23, 0.48);\n  cursor: pointer;\n}\n\n.ck-crowdy-studio-embed-context-toggle:hover,\n.ck-crowdy-studio-embed-context-toggle[aria-expanded=\"true\"] {\n  border-color: #6ee7b7;\n  color: #d1fae5;\n}\n\n.ck-crowdy-studio-embed-context-pill {\n  display: grid;\n  gap: 2px;\n  max-width: 310px;\n  padding: 7px 10px;\n  border: 1px solid rgba(148, 163, 184, 0.2);\n  border-radius: 9px;\n  background: rgba(2, 6, 23, 0.48);\n}\n\n.ck-crowdy-studio-embed-context-pill small {\n  color: #64748b;\n  font-size: 9px;\n  font-weight: 800;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n.ck-crowdy-studio-embed-context-pill strong {\n  overflow: hidden;\n  color: #cbd5e1;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 600;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ck-crowdy-studio-embed-close,\n.ck-crowdy-studio-embed-retry {\n  border: 1px solid rgba(110, 231, 183, 0.38);\n  border-radius: 9px;\n  padding: 8px 13px;\n  color: #d1fae5;\n  background: rgba(6, 78, 59, 0.52);\n  cursor: pointer;\n}\n\n.ck-crowdy-studio-embed-close:hover,\n.ck-crowdy-studio-embed-retry:hover {\n  border-color: #6ee7b7;\n  background: rgba(5, 150, 105, 0.42);\n}\n\n.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-header {\n  min-height: 40px;\n  padding: 5px 8px;\n}\n\n.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-close,\n.ck-crowdy-studio-embed.is-docked .ck-crowdy-studio-embed-context-toggle {\n  padding: 6px 9px;\n}\n\n.ck-crowdy-studio-embed-workspace {\n  position: relative;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  min-height: 0;\n}\n\n/* On-demand context drawer overlays the studio from the right. */\n.ck-crowdy-studio-embed-drawer {\n  position: absolute;\n  inset: 0 0 0 auto;\n  z-index: 6;\n  width: min(320px, 88%);\n  min-height: 0;\n  padding: 16px;\n  overflow: auto;\n  border-left: 1px solid rgba(148, 163, 184, 0.16);\n  background:\n    linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(2, 6, 23, 0.96));\n  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.4);\n}\n\n.ck-crowdy-studio-embed-drawer[hidden] {\n  display: none;\n}\n\n.ck-crowdy-studio-embed-drawer h2 {\n  margin: 0 0 8px;\n  color: #a7f3d0;\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n}\n\n.ck-crowdy-studio-embed-drawer h2:not(:first-child) {\n  margin-top: 22px;\n}\n\n.ck-crowdy-studio-embed-drawer > p {\n  margin: 0 0 8px;\n  color: #94a3b8;\n  font-size: 11px;\n}\n\n.ck-crowdy-studio-embed-hud-preview-disclosure {\n  margin-top: 22px;\n}\n\n.ck-crowdy-studio-embed-hud-preview-disclosure summary {\n  color: #a7f3d0;\n  cursor: pointer;\n  font-size: 10px;\n  font-weight: 800;\n  letter-spacing: 0.11em;\n  text-transform: uppercase;\n}\n\n.ck-crowdy-studio-embed-hud-preview-disclosure[open] summary {\n  margin-bottom: 8px;\n}\n\n.ck-crowdy-studio-embed-grid-context {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  gap: 6px 10px;\n  margin: 0;\n  padding: 11px;\n  border: 1px solid rgba(148, 163, 184, 0.16);\n  border-radius: 11px;\n  background: rgba(2, 6, 23, 0.42);\n}\n\n.ck-crowdy-studio-embed-grid-context dt {\n  color: #64748b;\n  font-size: 11px;\n}\n\n.ck-crowdy-studio-embed-grid-context dd {\n  overflow: hidden;\n  margin: 0;\n  color: #cbd5e1;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 10px;\n  text-align: right;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ck-crowdy-studio-embed-permissions {\n  display: grid;\n  gap: 8px;\n}\n\n.ck-crowdy-studio-embed-permission {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 5px;\n  padding: 10px;\n  border: 1px solid rgba(52, 211, 153, 0.25);\n  border-radius: 10px;\n  background: rgba(6, 78, 59, 0.16);\n}\n\n.ck-crowdy-studio-embed-permission.is-disabled {\n  border-color: rgba(148, 163, 184, 0.15);\n  background: rgba(30, 41, 59, 0.36);\n}\n\n.ck-crowdy-studio-embed-permission strong {\n  color: #e2e8f0;\n  font-size: 11px;\n  letter-spacing: 0.08em;\n}\n\n.ck-crowdy-studio-embed-permission span {\n  font-size: 10px;\n}\n\n.ck-crowdy-studio-embed-permission .is-allowed {\n  color: #6ee7b7;\n}\n\n.ck-crowdy-studio-embed-permission .is-denied {\n  color: #94a3b8;\n}\n\n.ck-crowdy-studio-embed-permission-source,\n.ck-crowdy-studio-embed-shortcuts {\n  margin: 8px 0 0;\n  color: #64748b;\n  font-size: 10px;\n  line-height: 1.45;\n}\n\n.ck-crowdy-studio-embed-hud-preview {\n  min-height: 80px;\n  padding: 8px;\n  border: 1px dashed rgba(110, 231, 183, 0.26);\n  border-radius: 11px;\n  background: rgba(2, 6, 23, 0.5);\n}\n\n.ck-crowdy-studio-embed-main {\n  position: relative;\n  min-width: 0;\n  min-height: 0;\n  overflow: hidden;\n  background: #080f1d;\n}\n\n.ck-crowdy-studio-embed-mount {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.ck-crowdy-studio-embed-status {\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  color: #cbd5e1;\n  background:\n    radial-gradient(circle at 50% 35%, rgba(16, 185, 129, 0.1), transparent 34%),\n    #080f1d;\n  text-align: center;\n}\n\n.ck-crowdy-studio-embed-status.hidden {\n  display: none;\n}\n\n.ck-crowdy-studio-embed-status.is-error {\n  flex-direction: column;\n  color: #fecaca;\n}\n\n.ck-crowdy-studio-embed-status.is-error strong {\n  color: #fef2f2;\n  font-size: 18px;\n}\n\n.ck-crowdy-studio-embed-status.is-error span {\n  max-width: 560px;\n  line-height: 1.55;\n}\n\n.ck-crowdy-studio-embed-spinner {\n  width: 18px;\n  height: 18px;\n  border: 2px solid rgba(110, 231, 183, 0.2);\n  border-top-color: #6ee7b7;\n  border-radius: 999px;\n  animation: ck-crowdy-studio-embed-spin 700ms linear infinite;\n}\n\n/* Stable hooks so the embed themes the CrowdyJS studio panes it hosts. */\n.ck-crowdy-studio-embed-mount .ck-crowdy-studio {\n  width: 100%;\n  height: 100%;\n  color: #e2e8f0;\n  background: #080f1d;\n}\n\n.ck-crowdy-studio-embed-mount .ck-crowdy-studio-explorer {\n  border-right: 1px solid rgba(148, 163, 184, 0.16);\n  background: #0b1322;\n}\n\n.ck-crowdy-studio-embed-mount .ck-crowdy-studio-editor {\n  min-width: 0;\n  background: #080f1d;\n}\n\n.ck-crowdy-studio-embed-mount :is(\n  .ck-crowdy-studio-bottom,\n  .ck-crowdy-studio-panel\n) {\n  border-top: 1px solid rgba(148, 163, 184, 0.16);\n  color: #cbd5e1;\n  background: #0b1322;\n}\n\n.ck-crowdy-studio-embed-mount .ck-crowdy-studio-status {\n  color: #a7f3d0;\n  background: #052e2b;\n}\n\n.ck-crowdy-studio-embed-mount meter {\n  accent-color: #10b981;\n}\n\n/* Text-only player-mod HUD: no mod-supplied markup is inserted here. */\n.ck-crowdy-studio-hud-layer {\n  position: fixed;\n  top: 96px;\n  left: 12px;\n  right: calc(12px + var(--ck-game-right-inset, 0px));\n  z-index: 40;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-width: 280px;\n  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.ck-crowdy-studio-hud-layer[hidden] {\n  display: none;\n}\n\n.ck-crowdy-studio-hud-card {\n  padding: 7px 9px;\n  border: 1px solid rgba(110, 231, 183, 0.25);\n  border-radius: 8px;\n  color: #dbeafe;\n  background: rgba(8, 15, 29, 0.9);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);\n}\n\n.ck-crowdy-studio-hud-title {\n  margin-bottom: 3px;\n  color: #a7f3d0;\n  font-weight: 700;\n}\n\n.ck-crowdy-studio-hud-payload {\n  overflow-wrap: anywhere;\n  white-space: pre-wrap;\n}\n\n.ck-crowdy-studio-hud-preview-card {\n  box-shadow: none;\n}\n\n.ck-crowdy-studio-hud-preview-empty {\n  margin: 0;\n  color: #64748b;\n  font-size: 10px;\n  line-height: 1.45;\n}\n\n@keyframes ck-crowdy-studio-embed-enter {\n  from {\n    opacity: 0;\n    transform: scale(0.995);\n  }\n}\n\n@keyframes ck-crowdy-studio-embed-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n@media (max-width: 900px) {\n  .ck-crowdy-studio-embed-context-pill {\n    display: none;\n  }\n\n  .ck-crowdy-studio-embed-permission-source,\n  .ck-crowdy-studio-embed-shortcuts {\n    display: none;\n  }\n}\n\n@media (max-width: 620px) {\n  .ck-crowdy-studio-embed {\n    padding: 0;\n  }\n\n  .ck-crowdy-studio-embed-shell {\n    border: 0;\n    border-radius: 0;\n  }\n\n  .ck-crowdy-studio-embed-drawer {\n    width: 100%;\n    border-left: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ck-crowdy-studio-embed,\n  .ck-crowdy-studio-embed-spinner,\n  .ck-crowdy-studio-embed * {\n    scroll-behavior: auto !important;\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n  }\n}\n";
+//# sourceMappingURL=embed-styles.d.ts.map

package/dist/crowdy-studio/embed/embed-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"embed-styles.d.ts","sourceRoot":"","sources":["../../../src/crowdy-studio/embed/embed-styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,wBAAgB,6BAA6B,CAAC,GAAG,GAAE,QAAmB,GAAG,IAAI,CAM5E;AAED,eAAO,MAAM,0BAA0B,sqXAkhBtC,CAAC"}