@appshoteditor/shot-dsl 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appshoteditor/shot-dsl",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "App Shot Editor layout DSL + device-frame geometry — framework-free building blocks for composing editable App Store screenshot layouts. Intended for use via a bundler (Vite, esbuild, etc.).",
   "license": "MIT",
   "type": "module",

package/src/builders.ts

@@ -1,4 +1,4 @@
-import type { BackgroundJSON, ColorStop, LayerJSON, ScreenLayersJSON, Template, TemplateRole } from './types';
+import type { BackgroundJSON, ColorStop, DeviceClass, LayerJSON, ScreenLayersJSON, Template, TemplateRole } from './types';
 import { CURRENT_SCHEMA_VERSION } from './types';
 import { generateLayerId } from './validate';
 
@@ -176,11 +176,13 @@ export function makeScreen(opts: {
 	background?: BackgroundJSON;
 	canvasWidth?: number;
 	canvasHeight?: number;
+	deviceClass?: DeviceClass;
 }): ScreenLayersJSON {
 	return {
 		schemaVersion: CURRENT_SCHEMA_VERSION,
 		canvasWidth: opts.canvasWidth ?? DEFAULT_CANVAS_WIDTH,
 		canvasHeight: opts.canvasHeight ?? DEFAULT_CANVAS_HEIGHT,
+		deviceClass: opts.deviceClass,
 		layers: opts.layers,
 		background: opts.background
 	};

package/src/compose.ts

@@ -1,7 +1,7 @@
 import type { BackgroundJSON, Template } from './types';
 import { makeTextLayer, makeScreen, makeTemplate } from './builders';
 import { makeDeviceFrameLayers } from './frames';
-import { getDeviceFrame } from './device-frames';
+import { getDeviceFrame, deviceClassForDeviceId } from './device-frames';
 
 /**
  * Editor-unit canvas dimensions for a device, by frame class — so a plan that mixes iPhone, iPad,
@@ -85,6 +85,9 @@ export function composeTemplate(plan: ComposePlan): Template {
 			background: screen.background,
 			canvasWidth,
 			canvasHeight,
+			// Tag the device GROUP (multi-device) so a mixed plan lands as separate sidebar groups in
+			// the editor instead of relying on frame inference. Absent ⇒ editor infers it.
+			deviceClass: deviceClassForDeviceId(screen.deviceId) ?? undefined,
 			layers: [screenshot, frame, headline]
 		});
 	});

package/src/device-frames.ts

@@ -1,3 +1,5 @@
+import type { DeviceClass } from './types';
+
 // =============================================================================
 // DEVICE FRAME DEFINITIONS
 // =============================================================================
@@ -316,3 +318,16 @@ export function getDeviceFramesByPlatform(platform: DeviceFrame['platform']): De
 export function getDeviceFramesByCategory(category: DeviceFrame['category']): DeviceFrame[] {
 	return deviceFrames.filter((d) => d.category === category);
 }
+
+/**
+ * Map a device-frame id to its device GROUP (multi-device), using the frame's platform + category.
+ * Returns null for an unknown id. Kept in sync with the app's `device-groups.ts` mapping.
+ */
+export function deviceClassForDeviceId(deviceId: string): DeviceClass | null {
+	const frame = getDeviceFrame(deviceId);
+	if (!frame) return null;
+	if (frame.platform === 'ios') return frame.category === 'tablet' ? 'ipad_13' : 'iphone_6_9';
+	if (frame.platform === 'android') return 'android_phone';
+	if (frame.platform === 'macos' || frame.platform === 'windows') return 'macbook';
+	return null;
+}

package/src/types.ts

@@ -48,11 +48,19 @@ export interface BackgroundJSON {
 	};
 }
 
+/**
+ * Device GROUP a screen belongs to (multi-device). Mirrors the app's `db.ts` union so a composed
+ * template can tag each screen and the editor buckets it into the right sidebar group on import.
+ */
+export type DeviceClass = 'iphone_6_9' | 'ipad_13' | 'android_phone' | 'macbook';
+
 /** One screen (canvas) of a design. */
 export interface ScreenLayersJSON {
 	schemaVersion: number;
 	canvasWidth?: number;
 	canvasHeight?: number;
+	/** Device group (multi-device); optional/additive — absent ⇒ the editor infers it. */
+	deviceClass?: DeviceClass;
 	layers: LayerJSON[];
 	background?: BackgroundJSON;
 }