@foliokit/cms-admin-ui 0.0.0 → 0.1.0

package/esm2022/index.js

@@ -1,2 +1,16 @@
 export * from './lib/cms-admin-ui/cms-admin-ui';
+export * from './lib/post-editor/post-editor.store';
+export * from './lib/page-editor/page-editor.store';
+export * from './lib/page-editor/about-editor-form.component';
+export * from './lib/page-editor/links-editor-form.component';
+export * from './lib/post-editor/post-editor-media-tab.component';
+export * from './lib/post-editor/post-editor-cover-image.component';
+export * from './lib/post-editor/post-editor-embedded-media.component';
+export * from './lib/post-editor/post-editor-embedded-media-item.component';
+export * from './lib/posts-list/posts-list.store';
+export * from './lib/posts-list/posts-board.component';
+export * from './lib/posts-list/posts-draft-column.component';
+export * from './lib/posts-list/posts-queue-column.component';
+export * from './lib/posts-list/posts-published-column.component';
+export * from './lib/posts-list/posts-list.component';
 //# sourceMappingURL=index.js.map

package/esm2022/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-admin-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './lib/cms-admin-ui/cms-admin-ui';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../libs/cms-admin-ui/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAChD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mDAAmD,CAAC;AAClE,cAAc,qDAAqD,CAAC;AACpE,cAAc,wDAAwD,CAAC;AACvE,cAAc,6DAA6D,CAAC;AAC5E,cAAc,mCAAmC,CAAC;AAClD,cAAc,wCAAwC,CAAC;AACvD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,+CAA+C,CAAC;AAC9D,cAAc,mDAAmD,CAAC;AAClE,cAAc,uCAAuC,CAAC","sourcesContent":["export * from './lib/cms-admin-ui/cms-admin-ui';\nexport * from './lib/post-editor/post-editor.store';\nexport * from './lib/page-editor/page-editor.store';\nexport * from './lib/page-editor/about-editor-form.component';\nexport * from './lib/page-editor/links-editor-form.component';\nexport * from './lib/post-editor/post-editor-media-tab.component';\nexport * from './lib/post-editor/post-editor-cover-image.component';\nexport * from './lib/post-editor/post-editor-embedded-media.component';\nexport * from './lib/post-editor/post-editor-embedded-media-item.component';\nexport * from './lib/posts-list/posts-list.store';\nexport * from './lib/posts-list/posts-board.component';\nexport * from './lib/posts-list/posts-draft-column.component';\nexport * from './lib/posts-list/posts-queue-column.component';\nexport * from './lib/posts-list/posts-published-column.component';\nexport * from './lib/posts-list/posts-list.component';\n"]}

package/esm2022/lib/cms-admin-ui/cms-admin-ui.js

@@ -1,10 +1,10 @@
 import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export class CmsAdminUi {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CmsAdminUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.6", type: CmsAdminUi, isStandalone: true, selector: "lib-cms-admin-ui", ngImport: i0, template: "<p>CmsAdminUi works!</p>\n", styles: [""] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmsAdminUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CmsAdminUi, isStandalone: true, selector: "lib-cms-admin-ui", ngImport: i0, template: "<p>CmsAdminUi works!</p>\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: CmsAdminUi, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CmsAdminUi, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cms-admin-ui', imports: [], template: "<p>CmsAdminUi works!</p>\n" }]
         }] });

package/esm2022/lib/page-editor/about-editor-form.component.js

@@ -0,0 +1,84 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { PageEditorStore } from './page-editor.store';
+import { PageEditorHeroImageComponent } from './page-editor-hero-image.component';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/form-field";
+import * as i2 from "@angular/material/input";
+export class AboutEditorFormComponent {
+    store = inject(PageEditorStore);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutEditorFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AboutEditorFormComponent, isStandalone: true, selector: "admin-about-editor-form", ngImport: i0, template: `
+    @if (store.page(); as page) {
+      @if (page.type === 'about') {
+        <div class="flex flex-col gap-4 p-4">
+          <mat-form-field class="w-full shrink-0">
+            <mat-label>Title</mat-label>
+            <input
+              matInput
+              [value]="page.title"
+              (input)="store.updateField('title', $any($event.target).value)"
+              placeholder="About"
+            />
+          </mat-form-field>
+
+          <admin-page-editor-hero-image class="shrink-0" />
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium opacity-60">Body (Markdown)</label>
+            <textarea
+              class="markdown-textarea"
+              [value]="page.body"
+              (input)="store.updateField('body', $any($event.target).value)"
+              (click)="store.setCursorPosition($any($event.target).selectionStart)"
+              (keyup)="store.setCursorPosition($any($event.target).selectionStart)"
+              placeholder="Write your about page content in Markdown…"
+            ></textarea>
+          </div>
+        </div>
+      }
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.markdown-textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;resize:none;flex:1;min-height:200px;width:100%;padding:.5rem;outline:none;background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:4px}.markdown-textarea:focus{border-color:var(--mat-sys-primary);outline:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: PageEditorHeroImageComponent, selector: "admin-page-editor-hero-image" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AboutEditorFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'admin-about-editor-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        PageEditorHeroImageComponent,
+                    ], template: `
+    @if (store.page(); as page) {
+      @if (page.type === 'about') {
+        <div class="flex flex-col gap-4 p-4">
+          <mat-form-field class="w-full shrink-0">
+            <mat-label>Title</mat-label>
+            <input
+              matInput
+              [value]="page.title"
+              (input)="store.updateField('title', $any($event.target).value)"
+              placeholder="About"
+            />
+          </mat-form-field>
+
+          <admin-page-editor-hero-image class="shrink-0" />
+
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium opacity-60">Body (Markdown)</label>
+            <textarea
+              class="markdown-textarea"
+              [value]="page.body"
+              (input)="store.updateField('body', $any($event.target).value)"
+              (click)="store.setCursorPosition($any($event.target).selectionStart)"
+              (keyup)="store.setCursorPosition($any($event.target).selectionStart)"
+              placeholder="Write your about page content in Markdown…"
+            ></textarea>
+          </div>
+        </div>
+      }
+    }
+  `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.markdown-textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.875rem;line-height:1.5;resize:none;flex:1;min-height:200px;width:100%;padding:.5rem;outline:none;background:transparent;color:inherit;border:1px solid color-mix(in srgb,currentColor 20%,transparent);border-radius:4px}.markdown-textarea:focus{border-color:var(--mat-sys-primary);outline:none}\n"] }]
+        }] });
+//# sourceMappingURL=about-editor-form.component.js.map

package/esm2022/lib/page-editor/about-editor-form.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"about-editor-form.component.js","sourceRoot":"","sources":["../../../../../../libs/cms-admin-ui/src/lib/page-editor/about-editor-form.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,4BAA4B,EAAE,MAAM,oCAAoC,CAAC;;;;AA0ElF,MAAM,OAAO,wBAAwB;IAC1B,KAAK,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;uGAD9B,wBAAwB;2FAAxB,wBAAwB,mFAhCzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT,iiBAjEC,WAAW,8BACX,kBAAkB,0SAClB,cAAc,kYACd,4BAA4B;;2FAgEnB,wBAAwB;kBAxEpC,SAAS;+BACE,yBAAyB,cACvB,IAAI,mBACC,uBAAuB,CAAC,MAAM,WACtC;wBACP,WAAW;wBACX,kBAAkB;wBAClB,cAAc;wBACd,4BAA4B;qBAC7B,YA+BS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BT","sourcesContent":["import { ChangeDetectionStrategy, Component, inject } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { PageEditorStore } from './page-editor.store';\nimport { PageEditorHeroImageComponent } from './page-editor-hero-image.component';\n\n@Component({\n  selector: 'admin-about-editor-form',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    PageEditorHeroImageComponent,\n  ],\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      .markdown-textarea {\n        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;\n        font-size: 0.875rem;\n        line-height: 1.5;\n        resize: none;\n        flex: 1;\n        min-height: 200px;\n        width: 100%;\n        padding: 0.5rem;\n        outline: none;\n        background: transparent;\n        color: inherit;\n        border: 1px solid color-mix(in srgb, currentColor 20%, transparent);\n        border-radius: 4px;\n      }\n      .markdown-textarea:focus {\n        border-color: var(--mat-sys-primary);\n        outline: none;\n      }\n    `,\n  ],\n  template: `\n    @if (store.page(); as page) {\n      @if (page.type === 'about') {\n        <div class=\"flex flex-col gap-4 p-4\">\n          <mat-form-field class=\"w-full shrink-0\">\n            <mat-label>Title</mat-label>\n            <input\n              matInput\n              [value]=\"page.title\"\n              (input)=\"store.updateField('title', $any($event.target).value)\"\n              placeholder=\"About\"\n            />\n          </mat-form-field>\n\n          <admin-page-editor-hero-image class=\"shrink-0\" />\n\n          <div class=\"flex flex-col gap-1\">\n            <label class=\"text-xs font-medium opacity-60\">Body (Markdown)</label>\n            <textarea\n              class=\"markdown-textarea\"\n              [value]=\"page.body\"\n              (input)=\"store.updateField('body', $any($event.target).value)\"\n              (click)=\"store.setCursorPosition($any($event.target).selectionStart)\"\n              (keyup)=\"store.setCursorPosition($any($event.target).selectionStart)\"\n              placeholder=\"Write your about page content in Markdown…\"\n            ></textarea>\n          </div>\n        </div>\n      }\n    }\n  `,\n})\nexport class AboutEditorFormComponent {\n  readonly store = inject(PageEditorStore);\n}\n"]}

package/esm2022/lib/page-editor/links-editor-form.component.js

@@ -0,0 +1,474 @@
+import { ChangeDetectionStrategy, Component, PLATFORM_ID, ViewChild, inject, signal, } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { DragDropModule, moveItemInArray, } from '@angular/cdk/drag-drop';
+import { getDownloadURL, ref, uploadBytesResumable } from 'firebase/storage';
+import { FIREBASE_STORAGE, PageService } from '@foliokit/cms-core';
+import { PageEditorStore } from './page-editor.store';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/material/button";
+import * as i2 from "@angular/material/form-field";
+import * as i3 from "@angular/material/icon";
+import * as i4 from "@angular/material/input";
+import * as i5 from "@angular/material/progress-bar";
+import * as i6 from "@angular/material/select";
+import * as i7 from "@angular/material/slide-toggle";
+import * as i8 from "@angular/cdk/drag-drop";
+const PLATFORM_OPTIONS = [
+    'twitter',
+    'instagram',
+    'github',
+    'linkedin',
+    'youtube',
+    'tiktok',
+    'facebook',
+    'email',
+    'website',
+];
+export class LinksEditorFormComponent {
+    avatarInput;
+    store = inject(PageEditorStore);
+    storage = inject(FIREBASE_STORAGE);
+    pageService = inject(PageService);
+    platformId = inject(PLATFORM_ID);
+    isBrowser = isPlatformBrowser(this.platformId);
+    platformOptions = PLATFORM_OPTIONS;
+    avatarUploading = signal(false, ...(ngDevMode ? [{ debugName: "avatarUploading" }] : /* istanbul ignore next */ []));
+    avatarProgress = signal(0, ...(ngDevMode ? [{ debugName: "avatarProgress" }] : /* istanbul ignore next */ []));
+    avatarError = signal(null, ...(ngDevMode ? [{ debugName: "avatarError" }] : /* istanbul ignore next */ []));
+    avatarStoragePath = signal(null, ...(ngDevMode ? [{ debugName: "avatarStoragePath" }] : /* istanbul ignore next */ []));
+    onAvatarSelected(files) {
+        if (!files?.length)
+            return;
+        this.uploadAvatar(files[0]);
+        if (this.avatarInput?.nativeElement) {
+            this.avatarInput.nativeElement.value = '';
+        }
+    }
+    onDeleteAvatar() {
+        if (!window.confirm('Remove avatar?'))
+            return;
+        const path = this.avatarStoragePath();
+        const clear = () => {
+            this.store.updateField('avatarUrl', undefined);
+            this.store.updateField('avatarAlt', undefined);
+            this.avatarStoragePath.set(null);
+        };
+        if (path) {
+            this.pageService.deleteStorageFile(path).subscribe({ next: clear, error: clear });
+        }
+        else {
+            clear();
+        }
+    }
+    addLink(links) {
+        const newLink = {
+            id: crypto.randomUUID(),
+            label: '',
+            url: '',
+            order: links.length,
+        };
+        this.store.updateField('links', [...links, newLink]);
+    }
+    deleteLink(links, id) {
+        const updated = links
+            .filter((l) => l.id !== id)
+            .map((l, i) => ({ ...l, order: i }));
+        this.store.updateField('links', updated);
+    }
+    updateLink(links, id, field, value) {
+        const updated = links.map((l) => l.id === id ? { ...l, [field]: value } : l);
+        this.store.updateField('links', updated);
+    }
+    onDrop(event, links) {
+        const reordered = [...links];
+        moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+        const withOrder = reordered.map((l, i) => ({ ...l, order: i }));
+        this.store.updateField('links', withOrder);
+    }
+    uploadAvatar(file) {
+        const previous = this.avatarStoragePath();
+        const pageId = this.store.page()?.id || this.store.tempPageId();
+        const storagePath = `pages/${pageId}/avatar/${file.name}`;
+        if (previous) {
+            this.pageService.deleteStorageFile(previous).subscribe();
+        }
+        const fileRef = ref(this.storage, storagePath);
+        this.avatarUploading.set(true);
+        this.avatarProgress.set(0);
+        this.avatarError.set(null);
+        const task = uploadBytesResumable(fileRef, file);
+        task.on('state_changed', (snapshot) => {
+            this.avatarProgress.set(Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100));
+        }, (error) => {
+            this.avatarUploading.set(false);
+            this.avatarError.set(error.message);
+        }, () => {
+            getDownloadURL(task.snapshot.ref).then((downloadUrl) => {
+                this.store.updateField('avatarUrl', downloadUrl);
+                this.store.updateField('avatarAlt', file.name);
+                this.avatarStoragePath.set(storagePath);
+                this.avatarUploading.set(false);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksEditorFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LinksEditorFormComponent, isStandalone: true, selector: "admin-links-editor-form", viewQueries: [{ propertyName: "avatarInput", first: true, predicate: ["avatarInput"], descendants: true }], ngImport: i0, template: `
+    @if (store.page(); as page) {
+      @if (page.type === 'links') {
+        <div class="flex flex-col gap-6 p-4">
+          <!-- Title -->
+          <mat-form-field class="w-full">
+            <mat-label>Title</mat-label>
+            <input
+              matInput
+              [value]="page.title"
+              (input)="store.updateField('title', $any($event.target).value)"
+              placeholder="Links"
+            />
+          </mat-form-field>
+
+          <!-- Avatar upload -->
+          <div class="flex flex-col gap-2">
+            <span class="text-sm font-semibold">Avatar</span>
+            @if (avatarUploading()) {
+              <mat-progress-bar mode="determinate" [value]="avatarProgress()" />
+            }
+            @if (avatarError()) {
+              <p class="text-sm text-red-500">{{ avatarError() }}</p>
+            }
+            <div class="flex items-center gap-4">
+              @if (page.avatarUrl) {
+                <img
+                  [src]="page.avatarUrl"
+                  [alt]="page.avatarAlt || 'Avatar'"
+                  class="w-16 h-16 rounded-full object-cover shrink-0"
+                />
+              } @else {
+                <div class="w-16 h-16 rounded-full flex items-center justify-center shrink-0"
+                  style="background: color-mix(in srgb, currentColor 10%, transparent)">
+                  <mat-icon class="opacity-40">person</mat-icon>
+                </div>
+              }
+              <button mat-stroked-button [disabled]="avatarUploading()" (click)="isBrowser && avatarInput.click()">
+                {{ page.avatarUrl ? 'Replace' : 'Upload' }}
+              </button>
+              @if (page.avatarUrl) {
+                <button mat-icon-button (click)="onDeleteAvatar()" title="Remove avatar">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
+            </div>
+            <input
+              #avatarInput
+              type="file"
+              accept="image/*"
+              class="hidden"
+              (change)="onAvatarSelected($any($event.target).files)"
+            />
+          </div>
+
+          <!-- Headline -->
+          <mat-form-field class="w-full">
+            <mat-label>Headline</mat-label>
+            <input
+              matInput
+              [value]="page.headline ?? ''"
+              (input)="store.updateField('headline', $any($event.target).value)"
+              placeholder="Your name or tagline"
+            />
+          </mat-form-field>
+
+          <!-- Bio -->
+          <mat-form-field class="w-full">
+            <mat-label>Bio</mat-label>
+            <textarea
+              matInput
+              rows="3"
+              [value]="page.bio ?? ''"
+              (input)="store.updateField('bio', $any($event.target).value)"
+              placeholder="Short bio shown below your headline"
+            ></textarea>
+          </mat-form-field>
+
+          <!-- Link list -->
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-semibold">Links</span>
+              <button mat-stroked-button (click)="addLink(page.links)">
+                <mat-icon>add</mat-icon>
+                Add Link
+              </button>
+            </div>
+
+            <div
+              cdkDropList
+              (cdkDropListDropped)="onDrop($event, page.links)"
+              class="flex flex-col gap-2"
+            >
+              @for (link of page.links; track link.id) {
+                <div
+                  cdkDrag
+                  class="flex flex-col gap-3 p-3 rounded-lg"
+                  style="background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent)"
+                >
+                  <!-- Drag handle row -->
+                  <div class="flex items-center gap-2">
+                    <mat-icon cdkDragHandle class="drag-handle opacity-40 shrink-0" style="font-size: 1.25rem; width: 1.25rem; height: 1.25rem">
+                      drag_indicator
+                    </mat-icon>
+                    <span class="flex-1 text-sm font-medium truncate">{{ link.label || '(untitled)' }}</span>
+                    <mat-slide-toggle
+                      [checked]="!!link.highlighted"
+                      (change)="updateLink(page.links, link.id, 'highlighted', $event.checked)"
+                      class="shrink-0"
+                    >
+                      Highlighted
+                    </mat-slide-toggle>
+                    <button mat-icon-button (click)="deleteLink(page.links, link.id)" title="Delete link">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                  </div>
+
+                  <!-- Label + URL -->
+                  <div class="flex gap-3">
+                    <mat-form-field class="flex-1">
+                      <mat-label>Label</mat-label>
+                      <input
+                        matInput
+                        [value]="link.label"
+                        (input)="updateLink(page.links, link.id, 'label', $any($event.target).value)"
+                        placeholder="My Website"
+                      />
+                    </mat-form-field>
+                    <mat-form-field class="flex-1">
+                      <mat-label>URL</mat-label>
+                      <input
+                        matInput
+                        type="url"
+                        [value]="link.url"
+                        (input)="updateLink(page.links, link.id, 'url', $any($event.target).value)"
+                        placeholder="https://example.com"
+                      />
+                    </mat-form-field>
+                  </div>
+
+                  <!-- Platform -->
+                  <mat-form-field class="w-full">
+                    <mat-label>Platform</mat-label>
+                    <mat-select
+                      [value]="link.platform ?? null"
+                      (selectionChange)="updateLink(page.links, link.id, 'platform', $event.value)"
+                    >
+                      <mat-option [value]="null">— none —</mat-option>
+                      @for (p of platformOptions; track p) {
+                        <mat-option [value]="p">{{ p }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              }
+
+              @if (!page.links.length) {
+                <div class="flex items-center justify-center py-8 opacity-40 text-sm">
+                  No links yet. Add one above.
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    }
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.drag-handle{cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-shadow:0 4px 16px #00000026;border-radius:8px;opacity:.95}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i8.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LinksEditorFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'admin-links-editor-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatProgressBarModule,
+                        MatSelectModule,
+                        MatSlideToggleModule,
+                        DragDropModule,
+                    ], template: `
+    @if (store.page(); as page) {
+      @if (page.type === 'links') {
+        <div class="flex flex-col gap-6 p-4">
+          <!-- Title -->
+          <mat-form-field class="w-full">
+            <mat-label>Title</mat-label>
+            <input
+              matInput
+              [value]="page.title"
+              (input)="store.updateField('title', $any($event.target).value)"
+              placeholder="Links"
+            />
+          </mat-form-field>
+
+          <!-- Avatar upload -->
+          <div class="flex flex-col gap-2">
+            <span class="text-sm font-semibold">Avatar</span>
+            @if (avatarUploading()) {
+              <mat-progress-bar mode="determinate" [value]="avatarProgress()" />
+            }
+            @if (avatarError()) {
+              <p class="text-sm text-red-500">{{ avatarError() }}</p>
+            }
+            <div class="flex items-center gap-4">
+              @if (page.avatarUrl) {
+                <img
+                  [src]="page.avatarUrl"
+                  [alt]="page.avatarAlt || 'Avatar'"
+                  class="w-16 h-16 rounded-full object-cover shrink-0"
+                />
+              } @else {
+                <div class="w-16 h-16 rounded-full flex items-center justify-center shrink-0"
+                  style="background: color-mix(in srgb, currentColor 10%, transparent)">
+                  <mat-icon class="opacity-40">person</mat-icon>
+                </div>
+              }
+              <button mat-stroked-button [disabled]="avatarUploading()" (click)="isBrowser && avatarInput.click()">
+                {{ page.avatarUrl ? 'Replace' : 'Upload' }}
+              </button>
+              @if (page.avatarUrl) {
+                <button mat-icon-button (click)="onDeleteAvatar()" title="Remove avatar">
+                  <mat-icon>delete</mat-icon>
+                </button>
+              }
+            </div>
+            <input
+              #avatarInput
+              type="file"
+              accept="image/*"
+              class="hidden"
+              (change)="onAvatarSelected($any($event.target).files)"
+            />
+          </div>
+
+          <!-- Headline -->
+          <mat-form-field class="w-full">
+            <mat-label>Headline</mat-label>
+            <input
+              matInput
+              [value]="page.headline ?? ''"
+              (input)="store.updateField('headline', $any($event.target).value)"
+              placeholder="Your name or tagline"
+            />
+          </mat-form-field>
+
+          <!-- Bio -->
+          <mat-form-field class="w-full">
+            <mat-label>Bio</mat-label>
+            <textarea
+              matInput
+              rows="3"
+              [value]="page.bio ?? ''"
+              (input)="store.updateField('bio', $any($event.target).value)"
+              placeholder="Short bio shown below your headline"
+            ></textarea>
+          </mat-form-field>
+
+          <!-- Link list -->
+          <div class="flex flex-col gap-3">
+            <div class="flex items-center justify-between">
+              <span class="text-sm font-semibold">Links</span>
+              <button mat-stroked-button (click)="addLink(page.links)">
+                <mat-icon>add</mat-icon>
+                Add Link
+              </button>
+            </div>
+
+            <div
+              cdkDropList
+              (cdkDropListDropped)="onDrop($event, page.links)"
+              class="flex flex-col gap-2"
+            >
+              @for (link of page.links; track link.id) {
+                <div
+                  cdkDrag
+                  class="flex flex-col gap-3 p-3 rounded-lg"
+                  style="background: color-mix(in srgb, currentColor 5%, transparent); border: 1px solid color-mix(in srgb, currentColor 10%, transparent)"
+                >
+                  <!-- Drag handle row -->
+                  <div class="flex items-center gap-2">
+                    <mat-icon cdkDragHandle class="drag-handle opacity-40 shrink-0" style="font-size: 1.25rem; width: 1.25rem; height: 1.25rem">
+                      drag_indicator
+                    </mat-icon>
+                    <span class="flex-1 text-sm font-medium truncate">{{ link.label || '(untitled)' }}</span>
+                    <mat-slide-toggle
+                      [checked]="!!link.highlighted"
+                      (change)="updateLink(page.links, link.id, 'highlighted', $event.checked)"
+                      class="shrink-0"
+                    >
+                      Highlighted
+                    </mat-slide-toggle>
+                    <button mat-icon-button (click)="deleteLink(page.links, link.id)" title="Delete link">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                  </div>
+
+                  <!-- Label + URL -->
+                  <div class="flex gap-3">
+                    <mat-form-field class="flex-1">
+                      <mat-label>Label</mat-label>
+                      <input
+                        matInput
+                        [value]="link.label"
+                        (input)="updateLink(page.links, link.id, 'label', $any($event.target).value)"
+                        placeholder="My Website"
+                      />
+                    </mat-form-field>
+                    <mat-form-field class="flex-1">
+                      <mat-label>URL</mat-label>
+                      <input
+                        matInput
+                        type="url"
+                        [value]="link.url"
+                        (input)="updateLink(page.links, link.id, 'url', $any($event.target).value)"
+                        placeholder="https://example.com"
+                      />
+                    </mat-form-field>
+                  </div>
+
+                  <!-- Platform -->
+                  <mat-form-field class="w-full">
+                    <mat-label>Platform</mat-label>
+                    <mat-select
+                      [value]="link.platform ?? null"
+                      (selectionChange)="updateLink(page.links, link.id, 'platform', $event.value)"
+                    >
+                      <mat-option [value]="null">— none —</mat-option>
+                      @for (p of platformOptions; track p) {
+                        <mat-option [value]="p">{{ p }}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              }
+
+              @if (!page.links.length) {
+                <div class="flex items-center justify-center py-8 opacity-40 text-sm">
+                  No links yet. Add one above.
+                </div>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    }
+  `, styles: [":host{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto}.drag-handle{cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}.cdk-drag-preview{box-shadow:0 4px 16px #00000026;border-radius:8px;opacity:.95}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.drop-zone{border:2px dashed color-mix(in srgb,currentColor 25%,transparent);border-radius:8px}.drop-zone.drag-over{border-color:var(--mat-sys-primary);background:color-mix(in srgb,var(--mat-sys-primary) 8%,transparent)}\n"] }]
+        }], propDecorators: { avatarInput: [{
+                type: ViewChild,
+                args: ['avatarInput']
+            }] } });
+//# sourceMappingURL=links-editor-form.component.js.map