@foliokit/cms-admin-ui 0.0.0 → 0.1.0

package/esm2022/lib/post-editor/post-editor-cover-image.component.js

@@ -0,0 +1,251 @@
+import { ChangeDetectionStrategy, Component, PLATFORM_ID, ViewChild, inject, signal, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
+import { FIREBASE_STORAGE, PostService } from '@foliokit/cms-core';
+import { PostEditorStore } from './post-editor.store';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/progress-bar";
+export class PostEditorCoverImageComponent {
+    fileInput;
+    store = inject(PostEditorStore);
+    storage = inject(FIREBASE_STORAGE);
+    postService = inject(PostService);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : /* istanbul ignore next */ []));
+    uploadError = signal(null, ...(ngDevMode ? [{ debugName: "uploadError" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    storagePath = signal(null, ...(ngDevMode ? [{ debugName: "storagePath" }] : /* istanbul ignore next */ []));
+    onDragOver(event) {
+        event.preventDefault();
+        this.isDragOver.set(true);
+    }
+    onDragLeave() {
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        this.isDragOver.set(false);
+        const files = event.dataTransfer?.files;
+        if (files?.length) {
+            this.upload(files[0]);
+        }
+    }
+    onFileSelected(files) {
+        if (!files?.length)
+            return;
+        this.upload(files[0]);
+        // Reset so the same file can be re-selected after a delete
+        if (this.fileInput?.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    onDeleteCover() {
+        if (!window.confirm('Remove cover image?'))
+            return;
+        const path = this.storagePath();
+        if (path) {
+            this.postService.deleteStorageFile(path).subscribe({
+                next: () => this.clearCover(),
+                error: () => this.clearCover(),
+            });
+        }
+        else {
+            this.clearCover();
+        }
+    }
+    clearCover() {
+        this.store.updateField('thumbnailUrl', '');
+        this.store.updateField('thumbnailAlt', '');
+        this.storagePath.set(null);
+        this.uploadProgress.set(0);
+    }
+    upload(file) {
+        const previousPath = this.storagePath();
+        const postId = this.store.post()?.id || this.store.tempPostId();
+        const storagePath = `posts/${postId}/cover/${file.name}`;
+        if (previousPath) {
+            this.postService.deleteStorageFile(previousPath).subscribe();
+        }
+        const fileRef = ref(this.storage, storagePath);
+        this.uploading.set(true);
+        this.uploadProgress.set(0);
+        this.uploadError.set(null);
+        const task = uploadBytesResumable(fileRef, file);
+        task.on('state_changed', (snapshot) => {
+            this.uploadProgress.set(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100));
+        }, (error) => {
+            this.uploading.set(false);
+            this.uploadError.set(error.message);
+        }, () => {
+            getDownloadURL(task.snapshot.ref).then((downloadUrl) => {
+                this.store.updateField('thumbnailUrl', downloadUrl);
+                this.store.updateField('thumbnailAlt', file.name);
+                this.storagePath.set(storagePath);
+                this.uploading.set(false);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorCoverImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PostEditorCoverImageComponent, isStandalone: true, selector: "folio-post-editor-cover-image", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-semibold">Cover Image</span>
+
+      @if (store.post()?.thumbnailUrl; as url) {
+        <!-- Filled state -->
+        <div class="image-wrapper rounded-lg overflow-hidden">
+          <div class="aspect-video w-full relative">
+            <img
+              [src]="url"
+              [alt]="store.post()?.thumbnailAlt ?? ''"
+              class="w-full h-full object-cover"
+            />
+            <!-- Hover overlay -->
+            <div
+              class="hover-overlay absolute inset-0 flex items-center justify-center gap-3"
+              style="background: rgba(0,0,0,0.45)"
+            >
+              <button
+                mat-icon-button
+                style="color: white"
+                title="Replace image"
+                (click)="isBrowser && fileInput.click()"
+              >
+                <mat-icon>swap_horiz</mat-icon>
+              </button>
+              <button
+                mat-icon-button
+                style="color: white"
+                title="Delete image"
+                (click)="onDeleteCover()"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <!-- Empty state -->
+        <div
+          class="drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none"
+          [class.drag-over]="isDragOver()"
+          (click)="isBrowser && fileInput.click()"
+          (dragover)="isBrowser && onDragOver($event)"
+          (dragleave)="isBrowser && onDragLeave()"
+          (drop)="isBrowser && onDrop($event)"
+        >
+          <mat-icon class="opacity-40" style="font-size: 2.5rem; width: 2.5rem; height: 2.5rem">
+            upload_file
+          </mat-icon>
+          <span class="text-sm opacity-50">Upload cover image</span>
+        </div>
+      }
+
+      <!-- Hidden file input -->
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+
+      <!-- Progress bar -->
+      @if (uploading()) {
+        <mat-progress-bar mode="determinate" [value]="uploadProgress()" />
+      }
+
+      <!-- Error message -->
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px;transition:border-color .15s,background .15s}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.image-wrapper{position:relative}.image-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorCoverImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'folio-post-editor-cover-image', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatProgressBarModule], template: `
+    <div class="flex flex-col gap-2">
+      <span class="text-sm font-semibold">Cover Image</span>
+
+      @if (store.post()?.thumbnailUrl; as url) {
+        <!-- Filled state -->
+        <div class="image-wrapper rounded-lg overflow-hidden">
+          <div class="aspect-video w-full relative">
+            <img
+              [src]="url"
+              [alt]="store.post()?.thumbnailAlt ?? ''"
+              class="w-full h-full object-cover"
+            />
+            <!-- Hover overlay -->
+            <div
+              class="hover-overlay absolute inset-0 flex items-center justify-center gap-3"
+              style="background: rgba(0,0,0,0.45)"
+            >
+              <button
+                mat-icon-button
+                style="color: white"
+                title="Replace image"
+                (click)="isBrowser && fileInput.click()"
+              >
+                <mat-icon>swap_horiz</mat-icon>
+              </button>
+              <button
+                mat-icon-button
+                style="color: white"
+                title="Delete image"
+                (click)="onDeleteCover()"
+              >
+                <mat-icon>delete</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <!-- Empty state -->
+        <div
+          class="drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none"
+          [class.drag-over]="isDragOver()"
+          (click)="isBrowser && fileInput.click()"
+          (dragover)="isBrowser && onDragOver($event)"
+          (dragleave)="isBrowser && onDragLeave()"
+          (drop)="isBrowser && onDrop($event)"
+        >
+          <mat-icon class="opacity-40" style="font-size: 2.5rem; width: 2.5rem; height: 2.5rem">
+            upload_file
+          </mat-icon>
+          <span class="text-sm opacity-50">Upload cover image</span>
+        </div>
+      }
+
+      <!-- Hidden file input -->
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+
+      <!-- Progress bar -->
+      @if (uploading()) {
+        <mat-progress-bar mode="determinate" [value]="uploadProgress()" />
+      }
+
+      <!-- Error message -->
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+    </div>
+  `, styles: [":host{display:block}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px;transition:border-color .15s,background .15s}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}.image-wrapper{position:relative}.image-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"] }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+//# sourceMappingURL=post-editor-cover-image.component.js.map

package/esm2022/lib/post-editor/post-editor-cover-image.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-editor-cover-image.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/post-editor/post-editor-cover-image.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  PLATFORM_ID,\n  ViewChild,\n  inject,\n  signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';\nimport { FIREBASE_STORAGE, PostService } from '@foliokit/cms-core';\nimport { PostEditorStore } from './post-editor.store';\n\n@Component({\n  selector: 'folio-post-editor-cover-image',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatButtonModule, MatIconModule, MatProgressBarModule],\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      .drop-zone {\n        border: 2px dashed color-mix(in srgb, currentColor 25%, transparent);\n        border-radius: 8px;\n        transition: border-color 0.15s, background 0.15s;\n      }\n      .drop-zone.drag-over {\n        border-color: var(--mat-sys-primary);\n        background: color-mix(in srgb, var(--mat-sys-primary) 8%, transparent);\n      }\n      .image-wrapper {\n        position: relative;\n      }\n      .image-wrapper:hover .hover-overlay {\n        opacity: 1;\n      }\n      .hover-overlay {\n        opacity: 0;\n        transition: opacity 0.15s;\n      }\n    `,\n  ],\n  template: `\n    <div class=\"flex flex-col gap-2\">\n      <span class=\"text-sm font-semibold\">Cover Image</span>\n\n      @if (store.post()?.thumbnailUrl; as url) {\n        <!-- Filled state -->\n        <div class=\"image-wrapper rounded-lg overflow-hidden\">\n          <div class=\"aspect-video w-full relative\">\n            <img\n              [src]=\"url\"\n              [alt]=\"store.post()?.thumbnailAlt ?? ''\"\n              class=\"w-full h-full object-cover\"\n            />\n            <!-- Hover overlay -->\n            <div\n              class=\"hover-overlay absolute inset-0 flex items-center justify-center gap-3\"\n              style=\"background: rgba(0,0,0,0.45)\"\n            >\n              <button\n                mat-icon-button\n                style=\"color: white\"\n                title=\"Replace image\"\n                (click)=\"isBrowser && fileInput.click()\"\n              >\n                <mat-icon>swap_horiz</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                style=\"color: white\"\n                title=\"Delete image\"\n                (click)=\"onDeleteCover()\"\n              >\n                <mat-icon>delete</mat-icon>\n              </button>\n            </div>\n          </div>\n        </div>\n      } @else {\n        <!-- Empty state -->\n        <div\n          class=\"drop-zone w-full flex flex-col items-center justify-center gap-2 py-10 cursor-pointer select-none\"\n          [class.drag-over]=\"isDragOver()\"\n          (click)=\"isBrowser && fileInput.click()\"\n          (dragover)=\"isBrowser && onDragOver($event)\"\n          (dragleave)=\"isBrowser && onDragLeave()\"\n          (drop)=\"isBrowser && onDrop($event)\"\n        >\n          <mat-icon class=\"opacity-40\" style=\"font-size: 2.5rem; width: 2.5rem; height: 2.5rem\">\n            upload_file\n          </mat-icon>\n          <span class=\"text-sm opacity-50\">Upload cover image</span>\n        </div>\n      }\n\n      <!-- Hidden file input -->\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        class=\"hidden\"\n        (change)=\"onFileSelected($any($event.target).files)\"\n      />\n\n      <!-- Progress bar -->\n      @if (uploading()) {\n        <mat-progress-bar mode=\"determinate\" [value]=\"uploadProgress()\" />\n      }\n\n      <!-- Error message -->\n      @if (uploadError()) {\n        <p class=\"text-sm text-red-500\">{{ uploadError() }}</p>\n      }\n    </div>\n  `,\n})\nexport class PostEditorCoverImageComponent {\n  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;\n\n  readonly store = inject(PostEditorStore);\n  private readonly storage = inject(FIREBASE_STORAGE);\n  private readonly postService = inject(PostService);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly isBrowser = isPlatformBrowser(this.platformId);\n\n  readonly uploading = signal(false);\n  readonly uploadProgress = signal(0);\n  readonly uploadError = signal<string | null>(null);\n  readonly isDragOver = signal(false);\n  readonly storagePath = signal<string | null>(null);\n\n  onDragOver(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver.set(true);\n  }\n\n  onDragLeave(): void {\n    this.isDragOver.set(false);\n  }\n\n  onDrop(event: DragEvent): void {\n    event.preventDefault();\n    this.isDragOver.set(false);\n    const files = event.dataTransfer?.files;\n    if (files?.length) {\n      this.upload(files[0]);\n    }\n  }\n\n  onFileSelected(files: FileList | null): void {\n    if (!files?.length) return;\n    this.upload(files[0]);\n    // Reset so the same file can be re-selected after a delete\n    if (this.fileInput?.nativeElement) {\n      this.fileInput.nativeElement.value = '';\n    }\n  }\n\n  onDeleteCover(): void {\n    if (!window.confirm('Remove cover image?')) return;\n    const path = this.storagePath();\n    if (path) {\n      this.postService.deleteStorageFile(path).subscribe({\n        next: () => this.clearCover(),\n        error: () => this.clearCover(),\n      });\n    } else {\n      this.clearCover();\n    }\n  }\n\n  private clearCover(): void {\n    this.store.updateField('thumbnailUrl', '');\n    this.store.updateField('thumbnailAlt', '');\n    this.storagePath.set(null);\n    this.uploadProgress.set(0);\n  }\n\n  private upload(file: File): void {\n    const previousPath = this.storagePath();\n    const postId = this.store.post()?.id || this.store.tempPostId();\n    const storagePath = `posts/${postId}/cover/${file.name}`;\n\n    if (previousPath) {\n      this.postService.deleteStorageFile(previousPath).subscribe();\n    }\n\n    const fileRef = ref(this.storage, storagePath);\n\n    this.uploading.set(true);\n    this.uploadProgress.set(0);\n    this.uploadError.set(null);\n\n    const task = uploadBytesResumable(fileRef, file);\n\n    task.on(\n      'state_changed',\n      (snapshot) => {\n        this.uploadProgress.set(\n          Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100),\n        );\n      },\n      (error) => {\n        this.uploading.set(false);\n        this.uploadError.set(error.message);\n      },\n      () => {\n        getDownloadURL(task.snapshot.ref).then((downloadUrl) => {\n          this.store.updateField('thumbnailUrl', downloadUrl);\n          this.store.updateField('thumbnailAlt', file.name);\n          this.storagePath.set(storagePath);\n          this.uploading.set(false);\n        });\n      },\n    );\n  }\n}\n"]}

package/esm2022/lib/post-editor/post-editor-embedded-media-item.component.js

@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, inject, input, } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { PostEditorStore } from './post-editor.store';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/tooltip";
+export class PostEditorEmbeddedMediaItemComponent {
+    entry = input.required(...(ngDevMode ? [{ debugName: "entry" }] : /* istanbul ignore next */ []));
+    token = input.required(...(ngDevMode ? [{ debugName: "token" }] : /* istanbul ignore next */ []));
+    store = inject(PostEditorStore);
+    onInsert() {
+        this.store.insertMediaAtCursor(this.token());
+    }
+    onDelete() {
+        if (!window.confirm('Remove this image? It will be removed from Storage and any markdown references will break.'))
+            return;
+        this.store.removeEmbeddedMedia(this.token());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorEmbeddedMediaItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: PostEditorEmbeddedMediaItemComponent, isStandalone: true, selector: "folio-post-editor-embedded-media-item", inputs: { entry: { classPropertyName: "entry", publicName: "entry", isSignal: true, isRequired: true, transformFunction: null }, token: { classPropertyName: "token", publicName: "token", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <div class="item-wrapper flex flex-col gap-1">
+      <div class="relative aspect-square rounded-md overflow-hidden bg-[var(--mat-sys-surface-container-high)]">
+        <img
+          [src]="entry().downloadUrl"
+          [alt]="entry().alt"
+          class="w-full h-full object-cover"
+        />
+        <!-- Hover overlay -->
+        <div
+          class="hover-overlay absolute inset-0 flex items-center justify-center gap-2"
+          style="background: rgba(0,0,0,0.5)"
+        >
+          <button
+            mat-icon-button
+            style="color: white"
+            matTooltip="Insert at cursor"
+            (click)="onInsert()"
+          >
+            <mat-icon>add_photo_alternate</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            style="color: white"
+            matTooltip="Delete"
+            (click)="onDelete()"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      </div>
+      <span class="text-xs opacity-60 truncate" [title]="entry().alt">
+        {{ entry().alt }}
+      </span>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.item-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorEmbeddedMediaItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'folio-post-editor-embedded-media-item', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatTooltipModule], template: `
+    <div class="item-wrapper flex flex-col gap-1">
+      <div class="relative aspect-square rounded-md overflow-hidden bg-[var(--mat-sys-surface-container-high)]">
+        <img
+          [src]="entry().downloadUrl"
+          [alt]="entry().alt"
+          class="w-full h-full object-cover"
+        />
+        <!-- Hover overlay -->
+        <div
+          class="hover-overlay absolute inset-0 flex items-center justify-center gap-2"
+          style="background: rgba(0,0,0,0.5)"
+        >
+          <button
+            mat-icon-button
+            style="color: white"
+            matTooltip="Insert at cursor"
+            (click)="onInsert()"
+          >
+            <mat-icon>add_photo_alternate</mat-icon>
+          </button>
+          <button
+            mat-icon-button
+            style="color: white"
+            matTooltip="Delete"
+            (click)="onDelete()"
+          >
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+      </div>
+      <span class="text-xs opacity-60 truncate" [title]="entry().alt">
+        {{ entry().alt }}
+      </span>
+    </div>
+  `, styles: [":host{display:block}.item-wrapper:hover .hover-overlay{opacity:1}.hover-overlay{opacity:0;transition:opacity .15s}\n"] }]
+        }], propDecorators: { entry: [{ type: i0.Input, args: [{ isSignal: true, alias: "entry", required: true }] }], token: [{ type: i0.Input, args: [{ isSignal: true, alias: "token", required: true }] }] } });
+//# sourceMappingURL=post-editor-embedded-media-item.component.js.map

package/esm2022/lib/post-editor/post-editor-embedded-media-item.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-editor-embedded-media-item.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/post-editor/post-editor-embedded-media-item.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;;;;AA0DtD,MAAM,OAAO,oCAAoC;IACtC,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAsB,CAAC;IAC7C,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU,CAAC;IAEjC,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAEzC,QAAQ;QACN,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,4FAA4F,CAAC;YAAE,OAAO;QAC1H,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC/C,CAAC;uGAbU,oCAAoC;2FAApC,oCAAoC,2VArCrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT,6LAlDS,eAAe,qNAAE,aAAa,mLAAE,gBAAgB;;2FAoD/C,oCAAoC;kBAxDhD,SAAS;+BACE,uCAAuC,cACrC,IAAI,mBACC,uBAAuB,CAAC,MAAM,WACtC,CAAC,eAAe,EAAE,aAAa,EAAE,gBAAgB,CAAC,YAejD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCT","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n} from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { EmbeddedMediaEntry } from '@foliokit/cms-core';\nimport { PostEditorStore } from './post-editor.store';\n\n@Component({\n  selector: 'folio-post-editor-embedded-media-item',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatButtonModule, MatIconModule, MatTooltipModule],\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      .item-wrapper:hover .hover-overlay {\n        opacity: 1;\n      }\n      .hover-overlay {\n        opacity: 0;\n        transition: opacity 0.15s;\n      }\n    `,\n  ],\n  template: `\n    <div class=\"item-wrapper flex flex-col gap-1\">\n      <div class=\"relative aspect-square rounded-md overflow-hidden bg-[var(--mat-sys-surface-container-high)]\">\n        <img\n          [src]=\"entry().downloadUrl\"\n          [alt]=\"entry().alt\"\n          class=\"w-full h-full object-cover\"\n        />\n        <!-- Hover overlay -->\n        <div\n          class=\"hover-overlay absolute inset-0 flex items-center justify-center gap-2\"\n          style=\"background: rgba(0,0,0,0.5)\"\n        >\n          <button\n            mat-icon-button\n            style=\"color: white\"\n            matTooltip=\"Insert at cursor\"\n            (click)=\"onInsert()\"\n          >\n            <mat-icon>add_photo_alternate</mat-icon>\n          </button>\n          <button\n            mat-icon-button\n            style=\"color: white\"\n            matTooltip=\"Delete\"\n            (click)=\"onDelete()\"\n          >\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      </div>\n      <span class=\"text-xs opacity-60 truncate\" [title]=\"entry().alt\">\n        {{ entry().alt }}\n      </span>\n    </div>\n  `,\n})\nexport class PostEditorEmbeddedMediaItemComponent {\n  readonly entry = input.required<EmbeddedMediaEntry>();\n  readonly token = input.required<string>();\n\n  readonly store = inject(PostEditorStore);\n\n  onInsert(): void {\n    this.store.insertMediaAtCursor(this.token());\n  }\n\n  onDelete(): void {\n    if (!window.confirm('Remove this image? It will be removed from Storage and any markdown references will break.')) return;\n    this.store.removeEmbeddedMedia(this.token());\n  }\n}\n"]}

package/esm2022/lib/post-editor/post-editor-embedded-media.component.js

@@ -0,0 +1,173 @@
+import { ChangeDetectionStrategy, Component, PLATFORM_ID, ViewChild, computed, inject, signal, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
+import { FIREBASE_STORAGE } from '@foliokit/cms-core';
+import { PostEditorStore } from './post-editor.store';
+import { PostEditorEmbeddedMediaItemComponent } from './post-editor-embedded-media-item.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/icon";
+import * as i3 from "@angular/material/progress-bar";
+export class PostEditorEmbeddedMediaComponent {
+    fileInput;
+    store = inject(PostEditorStore);
+    storage = inject(FIREBASE_STORAGE);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    uploading = signal(false, ...(ngDevMode ? [{ debugName: "uploading" }] : /* istanbul ignore next */ []));
+    uploadError = signal(null, ...(ngDevMode ? [{ debugName: "uploadError" }] : /* istanbul ignore next */ []));
+    entries = computed(() => {
+        const media = this.store.post()?.embeddedMedia ?? {};
+        return Object.values(media);
+    }, ...(ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []));
+    onFileSelected(files) {
+        if (!files?.length)
+            return;
+        this.upload(files[0]);
+        if (this.fileInput?.nativeElement) {
+            this.fileInput.nativeElement.value = '';
+        }
+    }
+    upload(file) {
+        const postId = this.store.post()?.id || this.store.tempPostId();
+        const storagePath = `posts/${postId}/media/${file.name}`;
+        const fileRef = ref(this.storage, storagePath);
+        const token = crypto.randomUUID();
+        this.uploading.set(true);
+        this.uploadError.set(null);
+        const task = uploadBytesResumable(fileRef, file);
+        task.on('state_changed', null, (error) => {
+            this.uploading.set(false);
+            this.uploadError.set(error.message);
+        }, () => {
+            getDownloadURL(task.snapshot.ref).then((downloadUrl) => {
+                const entry = {
+                    token,
+                    storagePath,
+                    downloadUrl,
+                    alt: file.name,
+                    mimeType: file.type,
+                };
+                const currentMedia = this.store.post()?.embeddedMedia ?? {};
+                this.store.updateField('embeddedMedia', {
+                    ...currentMedia,
+                    [token]: entry,
+                });
+                this.uploading.set(false);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorEmbeddedMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PostEditorEmbeddedMediaComponent, isStandalone: true, selector: "folio-post-editor-embedded-media", viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: `
+    <div class="flex flex-col gap-3">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <span class="text-sm font-semibold">Embedded Media</span>
+        <button
+          mat-stroked-button
+          [disabled]="uploading()"
+          (click)="isBrowser && fileInput.click()"
+        >
+          <mat-icon>upload</mat-icon>
+          Upload Image
+        </button>
+      </div>
+
+      <!-- Hidden file input -->
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+
+      <!-- Upload progress -->
+      @if (uploading()) {
+        <mat-progress-bar mode="indeterminate" />
+      }
+
+      <!-- Upload error -->
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+
+      <!-- Media grid -->
+      @if (entries().length > 0) {
+        <div class="grid grid-cols-2 gap-3">
+          @for (item of entries(); track item.token) {
+            <folio-post-editor-embedded-media-item
+              [entry]="item"
+              [token]="item.token"
+            />
+          }
+        </div>
+      } @else {
+        <div class="flex items-center justify-center py-8">
+          <span class="text-sm opacity-40">No embedded media yet</span>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: PostEditorEmbeddedMediaItemComponent, selector: "folio-post-editor-embedded-media-item", inputs: ["entry", "token"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorEmbeddedMediaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'folio-post-editor-embedded-media', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, MatProgressBarModule, PostEditorEmbeddedMediaItemComponent], template: `
+    <div class="flex flex-col gap-3">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <span class="text-sm font-semibold">Embedded Media</span>
+        <button
+          mat-stroked-button
+          [disabled]="uploading()"
+          (click)="isBrowser && fileInput.click()"
+        >
+          <mat-icon>upload</mat-icon>
+          Upload Image
+        </button>
+      </div>
+
+      <!-- Hidden file input -->
+      <input
+        #fileInput
+        type="file"
+        accept="image/*"
+        class="hidden"
+        (change)="onFileSelected($any($event.target).files)"
+      />
+
+      <!-- Upload progress -->
+      @if (uploading()) {
+        <mat-progress-bar mode="indeterminate" />
+      }
+
+      <!-- Upload error -->
+      @if (uploadError()) {
+        <p class="text-sm text-red-500">{{ uploadError() }}</p>
+      }
+
+      <!-- Media grid -->
+      @if (entries().length > 0) {
+        <div class="grid grid-cols-2 gap-3">
+          @for (item of entries(); track item.token) {
+            <folio-post-editor-embedded-media-item
+              [entry]="item"
+              [token]="item.token"
+            />
+          }
+        </div>
+      } @else {
+        <div class="flex items-center justify-center py-8">
+          <span class="text-sm opacity-40">No embedded media yet</span>
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }], propDecorators: { fileInput: [{
+                type: ViewChild,
+                args: ['fileInput']
+            }] } });
+//# sourceMappingURL=post-editor-embedded-media.component.js.map

package/esm2022/lib/post-editor/post-editor-embedded-media.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-editor-embedded-media.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/post-editor/post-editor-embedded-media.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  PLATFORM_ID,\n  ViewChild,\n  computed,\n  inject,\n  signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatProgressBarModule } from '@angular/material/progress-bar';\nimport { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';\nimport { EmbeddedMediaEntry, FIREBASE_STORAGE } from '@foliokit/cms-core';\nimport { PostEditorStore } from './post-editor.store';\nimport { PostEditorEmbeddedMediaItemComponent } from './post-editor-embedded-media-item.component';\n\n@Component({\n  selector: 'folio-post-editor-embedded-media',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatButtonModule, MatIconModule, MatProgressBarModule, PostEditorEmbeddedMediaItemComponent],\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n    `,\n  ],\n  template: `\n    <div class=\"flex flex-col gap-3\">\n      <!-- Header -->\n      <div class=\"flex items-center justify-between\">\n        <span class=\"text-sm font-semibold\">Embedded Media</span>\n        <button\n          mat-stroked-button\n          [disabled]=\"uploading()\"\n          (click)=\"isBrowser && fileInput.click()\"\n        >\n          <mat-icon>upload</mat-icon>\n          Upload Image\n        </button>\n      </div>\n\n      <!-- Hidden file input -->\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        class=\"hidden\"\n        (change)=\"onFileSelected($any($event.target).files)\"\n      />\n\n      <!-- Upload progress -->\n      @if (uploading()) {\n        <mat-progress-bar mode=\"indeterminate\" />\n      }\n\n      <!-- Upload error -->\n      @if (uploadError()) {\n        <p class=\"text-sm text-red-500\">{{ uploadError() }}</p>\n      }\n\n      <!-- Media grid -->\n      @if (entries().length > 0) {\n        <div class=\"grid grid-cols-2 gap-3\">\n          @for (item of entries(); track item.token) {\n            <folio-post-editor-embedded-media-item\n              [entry]=\"item\"\n              [token]=\"item.token\"\n            />\n          }\n        </div>\n      } @else {\n        <div class=\"flex items-center justify-center py-8\">\n          <span class=\"text-sm opacity-40\">No embedded media yet</span>\n        </div>\n      }\n    </div>\n  `,\n})\nexport class PostEditorEmbeddedMediaComponent {\n  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;\n\n  readonly store = inject(PostEditorStore);\n  private readonly storage = inject(FIREBASE_STORAGE);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly isBrowser = isPlatformBrowser(this.platformId);\n  readonly uploading = signal(false);\n  readonly uploadError = signal<string | null>(null);\n\n  readonly entries = computed<EmbeddedMediaEntry[]>(() => {\n    const media = this.store.post()?.embeddedMedia ?? {};\n    return Object.values(media) as EmbeddedMediaEntry[];\n  });\n\n  onFileSelected(files: FileList | null): void {\n    if (!files?.length) return;\n    this.upload(files[0]);\n    if (this.fileInput?.nativeElement) {\n      this.fileInput.nativeElement.value = '';\n    }\n  }\n\n  private upload(file: File): void {\n    const postId = this.store.post()?.id || this.store.tempPostId();\n    const storagePath = `posts/${postId}/media/${file.name}`;\n    const fileRef = ref(this.storage, storagePath);\n    const token = crypto.randomUUID();\n\n    this.uploading.set(true);\n    this.uploadError.set(null);\n\n    const task = uploadBytesResumable(fileRef, file);\n\n    task.on(\n      'state_changed',\n      null,\n      (error) => {\n        this.uploading.set(false);\n        this.uploadError.set(error.message);\n      },\n      () => {\n        getDownloadURL(task.snapshot.ref).then((downloadUrl) => {\n          const entry: EmbeddedMediaEntry = {\n            token,\n            storagePath,\n            downloadUrl,\n            alt: file.name,\n            mimeType: file.type,\n          };\n          const currentMedia = this.store.post()?.embeddedMedia ?? {};\n          this.store.updateField('embeddedMedia', {\n            ...currentMedia,\n            [token]: entry,\n          });\n          this.uploading.set(false);\n        });\n      },\n    );\n  }\n}\n"]}

package/esm2022/lib/post-editor/post-editor-media-tab.component.js

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { PostEditorCoverImageComponent } from './post-editor-cover-image.component';
+import { PostEditorEmbeddedMediaComponent } from './post-editor-embedded-media.component';
+import * as i0 from "@angular/core";
+export class PostEditorMediaTabComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorMediaTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: PostEditorMediaTabComponent, isStandalone: true, selector: "folio-post-editor-media-tab", ngImport: i0, template: `
+    <div class="flex flex-col gap-6 p-4">
+      <folio-post-editor-cover-image />
+      <folio-post-editor-embedded-media />
+    </div>
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}\n"], dependencies: [{ kind: "component", type: PostEditorCoverImageComponent, selector: "folio-post-editor-cover-image" }, { kind: "component", type: PostEditorEmbeddedMediaComponent, selector: "folio-post-editor-embedded-media" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PostEditorMediaTabComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'folio-post-editor-media-tab', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [PostEditorCoverImageComponent, PostEditorEmbeddedMediaComponent], template: `
+    <div class="flex flex-col gap-6 p-4">
+      <folio-post-editor-cover-image />
+      <folio-post-editor-embedded-media />
+    </div>
+  `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}\n"] }]
+        }] });
+//# sourceMappingURL=post-editor-media-tab.component.js.map

package/esm2022/lib/post-editor/post-editor-media-tab.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-editor-media-tab.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/post-editor/post-editor-media-tab.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,gCAAgC,EAAE,MAAM,wCAAwC,CAAC;;AAyB1F,MAAM,OAAO,2BAA2B;uGAA3B,2BAA2B;2FAA3B,2BAA2B,uFAP5B;;;;;GAKT,yJAjBS,6BAA6B,0EAAE,gCAAgC;;2FAmB9D,2BAA2B;kBAvBvC,SAAS;+BACE,6BAA6B,cAC3B,IAAI,mBACC,uBAAuB,CAAC,MAAM,WACtC,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,YAYhE;;;;;GAKT","sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\nimport { PostEditorCoverImageComponent } from './post-editor-cover-image.component';\nimport { PostEditorEmbeddedMediaComponent } from './post-editor-embedded-media.component';\n\n@Component({\n  selector: 'folio-post-editor-media-tab',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [PostEditorCoverImageComponent, PostEditorEmbeddedMediaComponent],\n  styles: [\n    `\n      :host {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        min-height: 0;\n        overflow-y: auto;\n      }\n    `,\n  ],\n  template: `\n    <div class=\"flex flex-col gap-6 p-4\">\n      <folio-post-editor-cover-image />\n      <folio-post-editor-embedded-media />\n    </div>\n  `,\n})\nexport class PostEditorMediaTabComponent {}\n"]}