print-canvas-designer 0.1.1

package/dist/editor/properties/CodeSection.vue.d.ts

@@ -0,0 +1,6 @@
+import { PrintElement } from '../core/schema';
+type __VLS_Props = {
+    element: PrintElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editor/properties/ComponentPropertySection.vue.d.ts

@@ -0,0 +1,6 @@
+import { PrintElement } from '../core/schema';
+type __VLS_Props = {
+    element: PrintElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editor/properties/GeometrySection.vue.d.ts

@@ -0,0 +1,6 @@
+import { PrintElement } from '../core/schema';
+type __VLS_Props = {
+    element: PrintElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+export default _default;

package/dist/editor/properties/TextSection.vue.d.ts

@@ -0,0 +1,6 @@
+import { PrintElement } from '../core/schema';
+type __VLS_Props = {
+    element: PrintElement;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editor/registry/components.d.ts

@@ -0,0 +1,2 @@
+import { PrintComponentDefinition } from '../core/schema';
+export declare const defaultPrintComponents: PrintComponentDefinition[];

package/dist/editor/render/PrintElementContent.vue.d.ts

@@ -0,0 +1,12 @@
+import { PrintComponentDefinition, PrintElement } from '../core/schema';
+type __VLS_Props = {
+    element: PrintElement;
+    componentDefinition?: PrintComponentDefinition;
+    data?: Record<string, unknown>;
+    designer?: unknown;
+    editable?: boolean;
+    readonly?: boolean;
+    selected?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/editor/render/styles.d.ts

@@ -0,0 +1,63 @@
+import { PrintElement } from '../core/schema';
+export declare const CANVAS_HIT_MIN_SIZE = 16;
+export declare const LINE_HIT_MIN_HEIGHT = 14;
+export declare const getElementBoxStyle: (item: PrintElement) => {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    color: string | undefined;
+    backgroundColor: string | undefined;
+    borderColor: string | undefined;
+    borderWidth: string | undefined;
+    borderStyle: string | undefined;
+    borderRadius: string | undefined;
+    transform: string;
+    transformOrigin: string;
+};
+export declare const getCanvasElementBoxStyle: (item: PrintElement) => {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+    color: string | undefined;
+    backgroundColor: string;
+    borderWidth: string;
+    borderRadius: string | undefined;
+    transform: string;
+    transformOrigin: string;
+};
+export declare const getCanvasElementContentStyle: (item: PrintElement) => {
+    readonly position: "absolute";
+    readonly left: `${number}px`;
+    readonly top: `${number}px`;
+    readonly width: `${number}px`;
+    readonly height: `${number}px`;
+    readonly color: string | undefined;
+    readonly backgroundColor: string | undefined;
+    readonly borderColor: string | undefined;
+    readonly borderWidth: string | undefined;
+    readonly borderStyle: string | undefined;
+    readonly borderRadius: string | undefined;
+};
+export declare const getTextContentStyle: (item: PrintElement) => {
+    color: string | undefined;
+    fontSize: string | undefined;
+    fontWeight: string | number | undefined;
+    fontStyle: string | undefined;
+    textDecoration: string | undefined;
+    textAlign: any;
+    whiteSpace: any;
+    textOverflow: any;
+    wordBreak: any;
+    overflowWrap: any;
+    lineHeight: string | number | undefined;
+    letterSpacing: string | undefined;
+    display: string;
+    justifyContent: string | undefined;
+    alignItems: string | undefined;
+};
+export declare const getLineContentStyle: (item: PrintElement) => {
+    backgroundColor: string;
+    backgroundImage: string;
+};

package/dist/editor/store/usePrintDesigner.d.ts

@@ -0,0 +1,186 @@
+import { ComputedRef, InjectionKey } from 'vue';
+import { CanvasPoint, PrintComponentDefinition, PrintDesignerEmits, PrintDesignerProps, PrintDocument, PrintElement, PrintElementStyle, PrintElementType, PrintPageOrientation, PrintPaperType, PrintSizeUnit } from '../core/schema';
+export interface PrintDesignerState {
+    printDocument: PrintDocument;
+    renderData?: Record<string, unknown>;
+    activeElementId: string | null;
+    selectedElementIds: string[];
+    hoverElementId: string | null;
+    editingElementId: string | null;
+    zoomRatio: number;
+    canvasViewportRect: {
+        width: number;
+        height: number;
+    };
+    copiedElement: PrintElement | null;
+    showGrid: boolean;
+    showRuler: boolean;
+    snapToGrid: boolean;
+    gridSize: number;
+    pageSizeUnit: PrintSizeUnit;
+    showMarginGuide: boolean;
+    showSafeAreaGuide: boolean;
+    alignmentGuides: {
+        vertical: number[];
+        horizontal: number[];
+    };
+    distanceGuides: {
+        id: string;
+        x: number;
+        y: number;
+        text: string;
+        direction: 'horizontal' | 'vertical';
+    }[];
+    isDirty: boolean;
+    isPreviewOpen: boolean;
+}
+export interface PrintDesignerContext {
+    state: PrintDesignerState;
+    availableComponents: ComputedRef<PrintComponentDefinition[]>;
+    componentMap: ComputedRef<Map<string, PrintComponentDefinition>>;
+    activeElement: ComputedRef<PrintElement | null>;
+    selectedElements: ComputedRef<PrintElement[]>;
+    canUndo: ComputedRef<boolean>;
+    canRedo: ComputedRef<boolean>;
+    selectElement: (id: string | null) => void;
+    toggleElementSelection: (id: string) => void;
+    setSelectedElements: (ids: string[]) => void;
+    setRenderData: (data?: Record<string, unknown>) => void;
+    hoverElement: (id: string | null) => void;
+    startTextEditing: (id: string) => void;
+    finishTextEditing: (id: string, text: string) => void;
+    addElement: (type: PrintElementType, point: CanvasPoint) => void;
+    updateElement: (id: string, patch: Partial<PrintElement>, capture?: boolean, emit?: boolean) => void;
+    updateElementStyle: (id: string, patch: Partial<PrintElementStyle>, capture?: boolean, keepInPage?: boolean, emit?: boolean) => void;
+    uploadImageForElement: (id: string, file: File) => Promise<void>;
+    setPaperType: (type: PrintPaperType) => void;
+    updatePageSize: (size: {
+        width?: number;
+        height?: number;
+        paperType?: PrintPaperType;
+    }) => void;
+    setPageOrientation: (orientation: PrintPageOrientation) => void;
+    updatePageMargin: (margin: Partial<NonNullable<PrintDocument['page']['margin']>>) => void;
+    captureSnapshot: () => void;
+    moveActiveElementBy: (deltaX: number, deltaY: number) => void;
+    moveSelectedElementsBy: (deltaX: number, deltaY: number) => void;
+    copyActiveElement: () => void;
+    pasteElement: () => void;
+    duplicateActiveElement: () => void;
+    bringActiveElementForward: () => void;
+    sendActiveElementBackward: () => void;
+    bringActiveElementToFront: () => void;
+    sendActiveElementToBack: () => void;
+    toggleActiveElementLock: () => void;
+    hideActiveElement: () => void;
+    showElement: (id: string) => void;
+    removeElement: (id: string) => void;
+    removeActiveElement: () => void;
+    removeSelectedElements: () => void;
+    setZoomRatio: (value: number) => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    fitCanvas: () => void;
+    fitCanvasWidth: () => void;
+    setCanvasViewportRect: (rect: {
+        width: number;
+        height: number;
+    }) => void;
+    toggleGrid: () => void;
+    toggleSnapToGrid: () => void;
+    setGridSize: (size: number) => void;
+    setPageSizeUnit: (unit: PrintSizeUnit) => void;
+    toggleRuler: () => void;
+    toggleMarginGuide: () => void;
+    toggleSafeAreaGuide: () => void;
+    setAlignmentGuides: (guides: {
+        vertical?: number[];
+        horizontal?: number[];
+    }) => void;
+    clearAlignmentGuides: () => void;
+    setDistanceGuides: (guides: PrintDesignerState['distanceGuides']) => void;
+    clearDistanceGuides: () => void;
+    undo: () => void;
+    redo: () => void;
+    save: () => void;
+    preview: () => void;
+    print: () => void;
+    exportPdf: () => void;
+    closePreview: () => void;
+    emitChange: () => void;
+}
+export interface PrintDesignerCommandMap {
+    selectElement: PrintDesignerContext['selectElement'];
+    toggleElementSelection: PrintDesignerContext['toggleElementSelection'];
+    setSelectedElements: PrintDesignerContext['setSelectedElements'];
+    setRenderData: PrintDesignerContext['setRenderData'];
+    hoverElement: PrintDesignerContext['hoverElement'];
+    startTextEditing: PrintDesignerContext['startTextEditing'];
+    finishTextEditing: PrintDesignerContext['finishTextEditing'];
+    addElement: PrintDesignerContext['addElement'];
+    updateElement: PrintDesignerContext['updateElement'];
+    updateElementStyle: PrintDesignerContext['updateElementStyle'];
+    uploadImageForElement: PrintDesignerContext['uploadImageForElement'];
+    setPaperType: PrintDesignerContext['setPaperType'];
+    updatePageSize: PrintDesignerContext['updatePageSize'];
+    setPageOrientation: PrintDesignerContext['setPageOrientation'];
+    updatePageMargin: PrintDesignerContext['updatePageMargin'];
+    captureSnapshot: PrintDesignerContext['captureSnapshot'];
+    moveActiveElementBy: PrintDesignerContext['moveActiveElementBy'];
+    moveSelectedElementsBy: PrintDesignerContext['moveSelectedElementsBy'];
+    copyActiveElement: PrintDesignerContext['copyActiveElement'];
+    pasteElement: PrintDesignerContext['pasteElement'];
+    duplicateActiveElement: PrintDesignerContext['duplicateActiveElement'];
+    bringActiveElementForward: PrintDesignerContext['bringActiveElementForward'];
+    sendActiveElementBackward: PrintDesignerContext['sendActiveElementBackward'];
+    bringActiveElementToFront: PrintDesignerContext['bringActiveElementToFront'];
+    sendActiveElementToBack: PrintDesignerContext['sendActiveElementToBack'];
+    toggleActiveElementLock: PrintDesignerContext['toggleActiveElementLock'];
+    hideActiveElement: PrintDesignerContext['hideActiveElement'];
+    showElement: PrintDesignerContext['showElement'];
+    removeElement: PrintDesignerContext['removeElement'];
+    removeActiveElement: PrintDesignerContext['removeActiveElement'];
+    removeSelectedElements: PrintDesignerContext['removeSelectedElements'];
+    setZoomRatio: PrintDesignerContext['setZoomRatio'];
+    zoomIn: PrintDesignerContext['zoomIn'];
+    zoomOut: PrintDesignerContext['zoomOut'];
+    resetZoom: PrintDesignerContext['resetZoom'];
+    fitCanvas: PrintDesignerContext['fitCanvas'];
+    fitCanvasWidth: PrintDesignerContext['fitCanvasWidth'];
+    setCanvasViewportRect: PrintDesignerContext['setCanvasViewportRect'];
+    toggleGrid: PrintDesignerContext['toggleGrid'];
+    toggleSnapToGrid: PrintDesignerContext['toggleSnapToGrid'];
+    setGridSize: PrintDesignerContext['setGridSize'];
+    setPageSizeUnit: PrintDesignerContext['setPageSizeUnit'];
+    toggleRuler: PrintDesignerContext['toggleRuler'];
+    toggleMarginGuide: PrintDesignerContext['toggleMarginGuide'];
+    toggleSafeAreaGuide: PrintDesignerContext['toggleSafeAreaGuide'];
+    setAlignmentGuides: PrintDesignerContext['setAlignmentGuides'];
+    clearAlignmentGuides: PrintDesignerContext['clearAlignmentGuides'];
+    setDistanceGuides: PrintDesignerContext['setDistanceGuides'];
+    clearDistanceGuides: PrintDesignerContext['clearDistanceGuides'];
+    undo: PrintDesignerContext['undo'];
+    redo: PrintDesignerContext['redo'];
+    save: PrintDesignerContext['save'];
+    preview: PrintDesignerContext['preview'];
+    print: PrintDesignerContext['print'];
+    exportPdf: PrintDesignerContext['exportPdf'];
+    closePreview: PrintDesignerContext['closePreview'];
+    emitChange: PrintDesignerContext['emitChange'];
+}
+export type PrintDesignerCommandName = keyof PrintDesignerCommandMap;
+export declare const printDesignerKey: InjectionKey<PrintDesignerContext>;
+export interface CreatePrintDesignerOptions extends PrintDesignerProps {
+    onUpdateModelValue?: (value: PrintDocument) => void;
+    onSave?: (value: PrintDocument) => void;
+    onPreview?: (value: PrintDocument) => void;
+    onPrint?: (value: PrintDocument) => void;
+    onExportPdf?: (value: PrintDocument) => void;
+    onChange?: (value: PrintDocument) => void;
+    onSelect?: (value: PrintElement | null) => void;
+}
+export declare const createPrintDesigner: (options: CreatePrintDesignerOptions, emit?: PrintDesignerEmits) => PrintDesignerContext;
+export declare const createPrintDesignerContext: (props: PrintDesignerProps, emit: PrintDesignerEmits) => PrintDesignerContext;
+export declare const providePrintDesigner: (context: PrintDesignerContext) => void;
+export declare const usePrintDesigner: () => PrintDesignerContext;

package/dist/editor/ui/BaseButton.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    icon?: string;
+    variant?: 'default' | 'primary';
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/editor/ui/BaseColor.vue.d.ts

@@ -0,0 +1,12 @@
+type __VLS_Props = {
+    modelValue?: string;
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+export default _default;

package/dist/editor/ui/BaseIconButton.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    icon: string;
+    title?: string;
+    active?: boolean;
+    variant?: 'default' | 'soft';
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
+export default _default;

package/dist/editor/ui/BaseIconGroup.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    modelValue?: string;
+    options: {
+        label: string;
+        value: string;
+        icon: string;
+    }[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/editor/ui/BaseInput.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    modelValue?: string;
+    placeholder?: string;
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/editor/ui/BaseNumberInput.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    modelValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+    change: (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    onChange?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLInputElement>;
+export default _default;

package/dist/editor/ui/BaseSegmented.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    modelValue?: string | number;
+    options: {
+        label: string;
+        value: string | number;
+        icon?: string;
+    }[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/editor/ui/BaseSelect.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    modelValue?: string | number;
+    disabled?: boolean;
+    options: {
+        label: string;
+        value: string | number;
+    }[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSelectElement>;
+export default _default;

package/dist/editor/ui/PropertyRow.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    label: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLLabelElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLabelElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/editor/ui/PropertySection.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    title: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64" role="img" aria-label="Print Canvas Designer icon">
+  <rect width="64" height="64" rx="14" fill="#2563eb"/>
+  <rect x="17" y="13" width="30" height="20" rx="4" fill="#ffffff" opacity="0.96"/>
+  <rect x="21" y="17" width="22" height="3" rx="1.5" fill="#2563eb" opacity="0.7"/>
+  <rect x="21" y="24" width="12" height="3" rx="1.5" fill="#2563eb" opacity="0.42"/>
+  <rect x="13" y="28" width="38" height="20" rx="5" fill="#dbeafe"/>
+  <rect x="19" y="36" width="26" height="15" rx="3" fill="#ffffff"/>
+  <path d="M24 42h16M24 47h10" stroke="#2563eb" stroke-width="3" stroke-linecap="round"/>
+  <circle cx="19" cy="34" r="2.2" fill="#2563eb"/>
+  <circle cx="45" cy="34" r="2.2" fill="#2563eb"/>
+  <path d="M42 13l5 5h-5z" fill="#bfdbfe"/>
+</svg>