@memberjunction/ng-conversations 6.2.0-edge.0 → 6.2.0-edge.1

package/dist/lib/components/project/project-form-modal.component.js

@@ -8,32 +8,75 @@ function ProjectFormModalComponent_Conditional_11_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtext(1, "Folder name is required");
     i0.ɵɵelementEnd();
 } }
-function ProjectFormModalComponent_For_22_Template(rf, ctx) { if (rf & 1) {
+function ProjectFormModalComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "fieldset", 11)(1, "legend");
+    i0.ɵɵtext(2, "Visibility");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 23);
+    i0.ɵɵelement(4, "i", 24);
+    i0.ɵɵtext(5, " Shared with everyone ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p", 25);
+    i0.ɵɵtext(7, " A shared folder stays shared. To keep something to yourself, create a new private folder and move it there. ");
+    i0.ɵɵelementEnd()();
+} }
+function ProjectFormModalComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function ProjectFormModalComponent_For_22_Template_button_click_0_listener() { const color_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectColor(color_r2)); });
+    i0.ɵɵelementStart(0, "fieldset", 11)(1, "legend");
+    i0.ɵɵtext(2, "Visibility");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "label", 26)(4, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function ProjectFormModalComponent_Conditional_18_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormData.isPersonal, $event) || (ctx_r1.FormData.isPersonal = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Only me");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "label", 26)(8, "input", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function ProjectFormModalComponent_Conditional_18_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.FormData.isPersonal, $event) || (ctx_r1.FormData.isPersonal = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Everyone");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "p", 25);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const color_r2 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("background-color", color_r2);
-    i0.ɵɵclassProp("selected", ctx_r2.formData.color === color_r2);
-    i0.ɵɵproperty("title", color_r2);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", true);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormData.isPersonal);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("value", false);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.FormData.isPersonal);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.FormData.isPersonal ? "Only you can see this folder." : "Everyone can see this folder and its name. They will not see the conversations you keep in it.", " ");
 } }
-function ProjectFormModalComponent_For_34_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function ProjectFormModalComponent_For_34_Template_button_click_0_listener() { const icon_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectIcon(icon_r5)); });
+function ProjectFormModalComponent_For_25_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function ProjectFormModalComponent_For_25_Template_button_click_0_listener() { const color_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectColor(color_r4)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const color_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("background-color", color_r4);
+    i0.ɵɵclassProp("selected", ctx_r1.formData.color === color_r4);
+    i0.ɵɵproperty("title", color_r4);
+} }
+function ProjectFormModalComponent_For_37_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function ProjectFormModalComponent_For_37_Template_button_click_0_listener() { const icon_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectIcon(icon_r6)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const icon_r5 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵstyleProp("color", ctx_r2.formData.icon === icon_r5 ? ctx_r2.formData.color : null);
-    i0.ɵɵclassProp("selected", ctx_r2.formData.icon === icon_r5);
-    i0.ɵɵproperty("title", icon_r5);
+    const icon_r6 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("color", ctx_r1.formData.icon === icon_r6 ? ctx_r1.formData.color : null);
+    i0.ɵɵclassProp("selected", ctx_r1.formData.icon === icon_r6);
+    i0.ɵɵproperty("title", icon_r6);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", icon_r5));
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("fa-solid ", icon_r6));
 } }
 const DEFAULT_PROJECT_COLORS = [
     '#0076B6', // MJ Blue
@@ -81,98 +124,253 @@ const DEFAULT_PROJECT_ICONS = [
 ];
 export class ProjectFormModalComponent extends BaseAngularComponent {
     cdr;
-    dialogRef;
-    project = null;
-    environmentId;
-    currentUser;
+    DialogRef;
+    /** @deprecated Use {@link DialogRef}. */
+    set dialogRef(value) {
+        this.DialogRef = value;
+    }
+    /** @deprecated Use {@link DialogRef}. */
+    get dialogRef() {
+        return this.DialogRef;
+    }
+    Project = null;
+    /** @deprecated Use {@link Project}. */
+    set project(value) {
+        this.Project = value;
+    }
+    /** @deprecated Use {@link Project}. */
+    get project() {
+        return this.Project;
+    }
+    EnvironmentId;
+    /** @deprecated Use {@link EnvironmentId}. */
+    set environmentId(value) {
+        this.EnvironmentId = value;
+    }
+    /** @deprecated Use {@link EnvironmentId}. */
+    get environmentId() {
+        return this.EnvironmentId;
+    }
+    CurrentUser;
+    /** @deprecated Use {@link CurrentUser}. */
+    set currentUser(value) {
+        this.CurrentUser = value;
+    }
+    /** @deprecated Use {@link CurrentUser}. */
+    get currentUser() {
+        return this.CurrentUser;
+    }
     /** When creating a new folder, the parent folder ID for nesting (null = top level). */
-    parentId = null;
-    projectSaved = new EventEmitter();
-    formData = {
+    ParentId = null;
+    /** @deprecated Use {@link ParentId}. */
+    set parentId(value) {
+        this.ParentId = value;
+    }
+    /** @deprecated Use {@link ParentId}. */
+    get parentId() {
+        return this.ParentId;
+    }
+    ProjectSaved = new EventEmitter();
+    /**
+     * @deprecated Use {@link ProjectSaved}.
+     *
+     * The same emitter under the old binding name, so a template still binding
+     * (projectSaved) keeps working. Must stay AFTER ProjectSaved: class fields
+     * initialise in order, and the other way round this captures undefined.
+     */
+    projectSaved = this.ProjectSaved;
+    FormData = {
         name: '',
         description: '',
         color: '#0076B6',
-        icon: 'fa-folder'
+        icon: 'fa-folder',
+        // A NEW folder is personal by default. The conversation sidebar is a personal
+        // surface — the conversations in it are already bound to their owner — so a
+        // folder everyone can see is the surprising option, not the private one. Folder
+        // NAMES are user-authored free text, and before OwnerUserID existed every one of
+        // them was readable by every user of the environment, which is what prompted
+        // this. Existing folders are untouched: they carry NULL, which still means shared.
+        isPersonal: true
     };
-    showNameError = false;
-    isEditMode = false;
-    availableColors = DEFAULT_PROJECT_COLORS;
-    availableIcons = DEFAULT_PROJECT_ICONS;
+    /** @deprecated Use {@link FormData}. */
+    get formData() {
+        return this.FormData;
+    }
+    /** @deprecated Use {@link FormData}. */
+    set formData(value) {
+        this.FormData = value;
+    }
+    ShowNameError = false;
+    /** @deprecated Use {@link ShowNameError}. */
+    get showNameError() {
+        return this.ShowNameError;
+    }
+    /** @deprecated Use {@link ShowNameError}. */
+    set showNameError(value) {
+        this.ShowNameError = value;
+    }
+    IsEditMode = false;
+    /** @deprecated Use {@link IsEditMode}. */
+    get isEditMode() {
+        return this.IsEditMode;
+    }
+    /** @deprecated Use {@link IsEditMode}. */
+    set isEditMode(value) {
+        this.IsEditMode = value;
+    }
+    AvailableColors = DEFAULT_PROJECT_COLORS;
+    /** @deprecated Use {@link AvailableColors}. */
+    get availableColors() {
+        return this.AvailableColors;
+    }
+    /** @deprecated Use {@link AvailableColors}. */
+    set availableColors(value) {
+        this.AvailableColors = value;
+    }
+    AvailableIcons = DEFAULT_PROJECT_ICONS;
+    /** @deprecated Use {@link AvailableIcons}. */
+    get availableIcons() {
+        return this.AvailableIcons;
+    }
+    /** @deprecated Use {@link AvailableIcons}. */
+    set availableIcons(value) {
+        this.AvailableIcons = value;
+    }
+    /**
+     * True when this dialog is editing a folder that is currently SHARED — in which case
+     * visibility is shown as a statement rather than a control.
+     *
+     * Sharing is one-way by design, and the reason is in the data model rather than the UI.
+     * NULL-means-shared conflates "shared" with "unowned": the moment a folder is shared its
+     * `OwnerUserID` goes to NULL and there is no column anywhere recording who created it
+     * (`Project` has `__mj_CreatedAt`, but no created-by). So `OwnerUserID = currentUser.ID`
+     * on a shared folder is indistinguishable from any other user claiming it — the system
+     * cannot tell reclaiming from appropriating, which makes "take it back" an affordance
+     * that was never really there.
+     *
+     * What that would cost on day one is the deciding argument. Every folder that exists
+     * today carries NULL, so without this the whole team's folder structure — subfolders
+     * included — is one radio button away from belonging to whichever person opens its
+     * settings first. A confirm does not fix that; it only narrates it.
+     *
+     * Personal -> shared stays available, because it only ever adds. Someone who wants a
+     * private copy makes a private folder. If personal folders later grow features that need
+     * a stable creator (sharing with named users, transfer, recovering a departed employee's
+     * folders), the fix is a separate IsShared flag so ownership stops being erased by
+     * sharing — a bigger change, and deliberately not this one.
+     */
+    get VisibilityIsLocked() {
+        return this.IsEditMode && !this.Project?.OwnerUserID;
+    }
     /** Translucent tint of the selected color, used behind the preview/icon glyph. */
-    get chipBackground() {
-        const hex = this.formData.color || '#0076B6';
+    get ChipBackground() {
+        const hex = this.FormData.color || '#0076B6';
         // 8-digit hex (#RRGGBBAA) — ~14% alpha tint of the chosen color
         return /^#[0-9a-fA-F]{6}$/.test(hex) ? `${hex}24` : hex;
     }
+    /** @deprecated Use {@link ChipBackground}. */
+    get chipBackground() {
+        return this.ChipBackground;
+    }
     constructor(cdr) {
         super();
         this.cdr = cdr;
     }
     ngOnInit() {
-        this.isEditMode = this.project != null;
-        if (this.project) {
+        this.IsEditMode = this.Project != null;
+        if (this.Project) {
             this.loadProjectData();
         }
     }
     loadProjectData() {
-        if (!this.project)
+        if (!this.Project)
             return;
-        this.formData = {
-            name: this.project.Name || '',
-            description: this.project.Description || '',
-            color: this.project.Color || '#0076B6',
-            icon: this.project.Icon || 'fa-folder'
+        this.FormData = {
+            name: this.Project.Name || '',
+            description: this.Project.Description || '',
+            color: this.Project.Color || '#0076B6',
+            icon: this.Project.Icon || 'fa-folder',
+            // Reflect what the folder IS, not the create-time default — otherwise opening
+            // a shared folder's settings and pressing Save would silently make it private.
+            isPersonal: !!this.Project.OwnerUserID
         };
     }
+    SelectColor(color) {
+        this.FormData.color = color;
+        this.cdr.detectChanges();
+    }
+    /** @deprecated Use {@link SelectColor}. */
     selectColor(color) {
-        this.formData.color = color;
+        return this.SelectColor(color);
+    }
+    SelectIcon(icon) {
+        this.FormData.icon = icon;
         this.cdr.detectChanges();
     }
+    /** @deprecated Use {@link SelectIcon}. */
     selectIcon(icon) {
-        this.formData.icon = icon;
-        this.cdr.detectChanges();
+        return this.SelectIcon(icon);
     }
-    async onSave() {
+    async OnSave() {
         // Validate
-        if (!this.formData.name.trim()) {
-            this.showNameError = true;
+        if (!this.FormData.name.trim()) {
+            this.ShowNameError = true;
             this.cdr.detectChanges();
             return;
         }
-        this.showNameError = false;
+        this.ShowNameError = false;
         try {
             const md = this.ProviderToUse;
-            const project = this.project || await md.GetEntityObject('MJ: Projects', this.currentUser);
-            project.Name = this.formData.name.trim();
-            project.Description = this.formData.description.trim() || null;
-            project.Color = this.formData.color;
-            project.Icon = this.formData.icon;
-            if (!this.isEditMode) {
-                project.EnvironmentID = this.environmentId;
+            // A shared folder cannot be taken private — the control is not rendered for one
+            // (see VisibilityIsLocked). This is the same rule expressed where the write happens,
+            // so a future template change, a stale `formData` from a reopened dialog, or anything
+            // else that sets the flag cannot quietly appropriate a folder the whole team uses.
+            // It resolves to the folder's CURRENT state, so it is a no-op in every other case.
+            const isPersonal = this.VisibilityIsLocked ? false : this.FormData.isPersonal;
+            const project = this.Project || await md.GetEntityObject('MJ: Projects', this.CurrentUser);
+            project.Name = this.FormData.name.trim();
+            project.Description = this.FormData.description.trim() || null;
+            project.Color = this.FormData.color;
+            project.Icon = this.FormData.icon;
+            // Settable on edit, in one direction: a personal folder can be shared with the team.
+            // Null means shared, which is what every folder created before this column existed
+            // carries — and, because sharing erases the owner, is also why the reverse is not on
+            // offer. See VisibilityIsLocked.
+            project.OwnerUserID = isPersonal ? this.CurrentUser.ID : null;
+            if (!this.IsEditMode) {
+                project.EnvironmentID = this.EnvironmentId;
                 project.IsArchived = false;
-                if (this.parentId) {
-                    project.ParentID = this.parentId;
+                if (this.ParentId) {
+                    project.ParentID = this.ParentId;
                 }
             }
             const saved = await project.Save();
             if (saved) {
-                this.projectSaved.emit(project);
-                this.dialogRef.Close();
+                this.ProjectSaved.emit(project);
+                this.DialogRef.Close();
             }
             else {
-                throw new Error('Failed to save project');
+                // Save() records WHY it refused on LatestResult and returns false — a
+                // server refusal, a constraint violation, a failed validation. Reporting
+                // a generic message here would throw the only copy of that reason away.
+                throw new Error(project.LatestResult?.CompleteMessage || 'The save was refused with no reason given.');
             }
         }
         catch (error) {
             console.error('Error saving project:', error);
-            alert('Failed to save project. Please try again.');
+            const reason = error instanceof Error ? error.message : String(error);
+            alert(`Failed to save folder.\n\n${reason}`);
         }
     }
+    /** @deprecated Use {@link OnSave}. */
+    async onSave() {
+        return this.OnSave();
+    }
     onCancel() {
-        this.dialogRef.Close();
+        this.DialogRef.Close();
     }
     static ɵfac = function ProjectFormModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProjectFormModalComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProjectFormModalComponent, selectors: [["mj-project-form-modal"]], inputs: { dialogRef: "dialogRef", project: "project", environmentId: "environmentId", currentUser: "currentUser", parentId: "parentId" }, outputs: { projectSaved: "projectSaved" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 40, vars: 18, consts: [[3, "Close", "Title", "Width", "MinWidth", "Visible"], [1, "project-form"], [1, "folder-preview"], [1, "folder-preview-chip"], [1, "folder-preview-name"], [1, "form-field"], ["for", "projectName", 1, "required"], ["id", "projectName", "type", "text", "placeholder", "e.g. Client work, Research, Ideas", "autofocus", "", 1, "mj-input", "full-width", 3, "ngModelChange", "keydown.enter", "ngModel"], [1, "error-message"], ["for", "projectDescription"], ["id", "projectDescription", "placeholder", "What goes in this folder? (optional)", "rows", "2", 1, "mj-textarea", "full-width", 3, "ngModelChange", "ngModel"], [1, "color-picker-section"], [1, "color-palette"], ["type", "button", 1, "color-swatch", 3, "selected", "backgroundColor", "title"], [1, "custom-color-input"], ["for", "customColor"], ["id", "customColor", "type", "color", 1, "custom-color-picker", 3, "ngModelChange", "ngModel"], [1, "color-value"], [1, "icon-grid"], ["type", "button", 1, "icon-option", 3, "selected", "color", "title"], ["mjButton", "", "variant", "primary", 3, "click"], ["mjButton", "", 3, "click"], ["type", "button", 1, "color-swatch", 3, "click", "title"], ["type", "button", 1, "icon-option", 3, "click", "title"]], template: function ProjectFormModalComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProjectFormModalComponent, selectors: [["mj-project-form-modal"]], inputs: { DialogRef: "DialogRef", dialogRef: "dialogRef", Project: "Project", project: "project", EnvironmentId: "EnvironmentId", environmentId: "environmentId", CurrentUser: "CurrentUser", currentUser: "currentUser", ParentId: "ParentId", parentId: "parentId" }, outputs: { ProjectSaved: "ProjectSaved", projectSaved: "projectSaved" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 43, vars: 19, consts: [[3, "Close", "Title", "Width", "MinWidth", "Visible"], [1, "project-form"], [1, "folder-preview"], [1, "folder-preview-chip"], [1, "folder-preview-name"], [1, "form-field"], ["for", "projectName", 1, "required"], ["id", "projectName", "type", "text", "placeholder", "e.g. Client work, Research, Ideas", "autofocus", "", 1, "mj-input", "full-width", 3, "ngModelChange", "keydown.enter", "ngModel"], [1, "error-message"], ["for", "projectDescription"], ["id", "projectDescription", "placeholder", "What goes in this folder? (optional)", "rows", "2", 1, "mj-textarea", "full-width", 3, "ngModelChange", "ngModel"], ["aria-describedby", "projectVisibilityHint", 1, "visibility-set"], [1, "color-picker-section"], [1, "color-palette"], ["type", "button", 1, "color-swatch", 3, "selected", "backgroundColor", "title"], [1, "custom-color-input"], ["for", "customColor"], ["id", "customColor", "type", "color", 1, "custom-color-picker", 3, "ngModelChange", "ngModel"], [1, "color-value"], [1, "icon-grid"], ["type", "button", 1, "icon-option", 3, "selected", "color", "title"], ["mjButton", "", "variant", "primary", 3, "click"], ["mjButton", "", 3, "click"], [1, "visibility-locked"], ["aria-hidden", "true", 1, "fa-solid", "fa-users"], ["id", "projectVisibilityHint", 1, "visibility-hint"], [1, "visibility-choice"], ["type", "radio", "name", "projectVisibility", 3, "ngModelChange", "value", "ngModel"], ["type", "button", 1, "color-swatch", 3, "click", "title"], ["type", "button", 1, "icon-option", 3, "click", "title"]], template: function ProjectFormModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "mj-dialog", 0);
             i0.ɵɵlistener("Close", function ProjectFormModalComponent_Template_mj_dialog_Close_0_listener() { return ctx.onCancel(); });
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "span", 3);
@@ -196,34 +394,37 @@ export class ProjectFormModalComponent extends BaseAngularComponent {
             i0.ɵɵelementStart(15, "textarea", 10);
             i0.ɵɵtwoWayListener("ngModelChange", function ProjectFormModalComponent_Template_textarea_ngModelChange_15_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.formData.description, $event) || (ctx.formData.description = $event); return $event; });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(16, "div", 5)(17, "label");
-            i0.ɵɵtext(18, "Color");
+            i0.ɵɵelementStart(16, "div", 5);
+            i0.ɵɵconditionalCreate(17, ProjectFormModalComponent_Conditional_17_Template, 8, 0, "fieldset", 11)(18, ProjectFormModalComponent_Conditional_18_Template, 13, 5, "fieldset", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(19, "div", 11)(20, "div", 12);
-            i0.ɵɵrepeaterCreate(21, ProjectFormModalComponent_For_22_Template, 1, 5, "button", 13, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(19, "div", 5)(20, "label");
+            i0.ɵɵtext(21, "Color");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(23, "div", 14)(24, "label", 15);
-            i0.ɵɵtext(25, "Custom:");
+            i0.ɵɵelementStart(22, "div", 12)(23, "div", 13);
+            i0.ɵɵrepeaterCreate(24, ProjectFormModalComponent_For_25_Template, 1, 5, "button", 14, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(26, "input", 16);
-            i0.ɵɵtwoWayListener("ngModelChange", function ProjectFormModalComponent_Template_input_ngModelChange_26_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.formData.color, $event) || (ctx.formData.color = $event); return $event; });
+            i0.ɵɵelementStart(26, "div", 15)(27, "label", 16);
+            i0.ɵɵtext(28, "Custom:");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "span", 17);
-            i0.ɵɵtext(28);
+            i0.ɵɵelementStart(29, "input", 17);
+            i0.ɵɵtwoWayListener("ngModelChange", function ProjectFormModalComponent_Template_input_ngModelChange_29_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.formData.color, $event) || (ctx.formData.color = $event); return $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(30, "span", 18);
+            i0.ɵɵtext(31);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(29, "div", 5)(30, "label");
-            i0.ɵɵtext(31, "Icon");
+            i0.ɵɵelementStart(32, "div", 5)(33, "label");
+            i0.ɵɵtext(34, "Icon");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "div", 18);
-            i0.ɵɵrepeaterCreate(33, ProjectFormModalComponent_For_34_Template, 2, 8, "button", 19, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(35, "div", 19);
+            i0.ɵɵrepeaterCreate(36, ProjectFormModalComponent_For_37_Template, 2, 8, "button", 20, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(35, "mj-dialog-actions")(36, "button", 20);
-            i0.ɵɵlistener("click", function ProjectFormModalComponent_Template_button_click_36_listener() { return ctx.onSave(); });
-            i0.ɵɵtext(37);
+            i0.ɵɵelementStart(38, "mj-dialog-actions")(39, "button", 21);
+            i0.ɵɵlistener("click", function ProjectFormModalComponent_Template_button_click_39_listener() { return ctx.onSave(); });
+            i0.ɵɵtext(40);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "button", 21);
-            i0.ɵɵlistener("click", function ProjectFormModalComponent_Template_button_click_38_listener() { return ctx.onCancel(); });
-            i0.ɵɵtext(39, "Cancel");
+            i0.ɵɵelementStart(41, "button", 22);
+            i0.ɵɵlistener("click", function ProjectFormModalComponent_Template_button_click_41_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(42, "Cancel");
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵproperty("Title", ctx.isEditMode ? "Edit Folder" : "New Folder")("Width", 560)("MinWidth", 400)("Visible", true);
@@ -239,7 +440,9 @@ export class ProjectFormModalComponent extends BaseAngularComponent {
             i0.ɵɵconditional(ctx.showNameError ? 11 : -1);
             i0.ɵɵadvance(4);
             i0.ɵɵtwoWayProperty("ngModel", ctx.formData.description);
-            i0.ɵɵadvance(6);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.VisibilityIsLocked ? 17 : 18);
+            i0.ɵɵadvance(7);
             i0.ɵɵrepeater(ctx.availableColors);
             i0.ɵɵadvance(5);
             i0.ɵɵtwoWayProperty("ngModel", ctx.formData.color);
@@ -249,7 +452,7 @@ export class ProjectFormModalComponent extends BaseAngularComponent {
             i0.ɵɵrepeater(ctx.availableIcons);
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate1(" ", ctx.isEditMode ? "Save Changes" : "Create Folder", " ");
-        } }, dependencies: [i1.DefaultValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], styles: [".project-form[_ngcontent-%COMP%] {\n      padding: 20px 24px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 22px;\n    }\n\n    \n    .folder-preview[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-subtle);\n    }\n    .folder-preview-chip[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n      transition: background-color 150ms ease, color 150ms ease;\n    }\n    .folder-preview-name[_ngcontent-%COMP%] {\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .form-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-field[_ngcontent-%COMP%]   label.required[_ngcontent-%COMP%]::after {\n      content: '*';\n      color: var(--mj-status-error);\n      margin-left: 4px;\n    }\n\n    .full-width[_ngcontent-%COMP%] { width: 100%; }\n\n    .error-message[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n      font-size: 12px;\n    }\n\n    \n    .color-picker-section[_ngcontent-%COMP%] {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 14px;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-palette[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n\n    .color-swatch[_ngcontent-%COMP%] {\n      width: 100%;\n      aspect-ratio: 1;\n      border: none;\n      border-radius: 8px;\n      cursor: pointer;\n      padding: 0;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    }\n\n    .color-swatch[_ngcontent-%COMP%]:hover {\n      transform: scale(1.12);\n    }\n\n    .color-swatch.selected[_ngcontent-%COMP%] {\n      box-shadow: 0 0 0 2px var(--mj-bg-surface), 0 0 0 4px var(--mj-brand-primary);\n    }\n\n    .custom-color-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding-top: 14px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .custom-color-input[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .custom-color-picker[_ngcontent-%COMP%] {\n      width: 44px;\n      height: 30px;\n      padding: 2px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-value[_ngcontent-%COMP%] {\n      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n    }\n\n    \n    .icon-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      max-height: 184px;\n      overflow-y: auto;\n      padding: 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      background: var(--mj-bg-surface);\n    }\n\n    .icon-option[_ngcontent-%COMP%] {\n      aspect-ratio: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      cursor: pointer;\n      color: var(--mj-text-secondary);\n      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n\n    .icon-option[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      border-color: var(--mj-border-strong);\n      transform: translateY(-1px);\n    }\n\n    .icon-option.selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 1px var(--mj-brand-primary);\n    }\n\n    .icon-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 17px; }\n\n    \n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--mj-border-strong);\n      border-radius: 4px;\n    }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n      background: var(--mj-text-disabled);\n    }"] });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.RadioControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent], styles: [".project-form[_ngcontent-%COMP%] {\n      padding: 20px 24px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 22px;\n    }\n\n    \n    .folder-preview[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-subtle);\n    }\n    .folder-preview-chip[_ngcontent-%COMP%] {\n      width: 40px;\n      height: 40px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n      transition: background-color 150ms ease, color 150ms ease;\n    }\n    .folder-preview-name[_ngcontent-%COMP%] {\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .form-field[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-field[_ngcontent-%COMP%]   label.required[_ngcontent-%COMP%]::after {\n      content: '*';\n      color: var(--mj-status-error);\n      margin-left: 4px;\n    }\n\n    .full-width[_ngcontent-%COMP%] { width: 100%; }\n\n    .error-message[_ngcontent-%COMP%] {\n      color: var(--mj-status-error);\n      font-size: 12px;\n    }\n\n    \n    .visibility-set[_ngcontent-%COMP%] {\n      border: none;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 0.35rem;\n    }\n\n    \n\n\n\n    .visibility-set[_ngcontent-%COMP%]   legend[_ngcontent-%COMP%] {\n      padding: 0;\n      margin-bottom: 0.15rem;\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    \n\n\n\n    .form-field[_ngcontent-%COMP%]   .visibility-choice[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      cursor: pointer;\n      font-weight: 400;\n      font-size: 13px;\n      margin: 0;\n      \n\n      padding: 0.25rem 0;\n    }\n\n    .visibility-choice[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n      flex: 0 0 auto;\n      margin: 0;\n    }\n\n    \n\n\n\n    .form-field[_ngcontent-%COMP%]   .visibility-locked[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 0;\n      padding: 0.25rem 0;\n      font-weight: 400;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .visibility-locked[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .visibility-hint[_ngcontent-%COMP%] {\n      margin: 0.15rem 0 0;\n      \n      font-size: 12px;\n      line-height: 1.4;\n      color: var(--mj-text-muted);\n    }\n\n    .color-picker-section[_ngcontent-%COMP%] {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 14px;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-palette[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n\n    .color-swatch[_ngcontent-%COMP%] {\n      width: 100%;\n      aspect-ratio: 1;\n      border: none;\n      border-radius: 8px;\n      cursor: pointer;\n      padding: 0;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    }\n\n    .color-swatch[_ngcontent-%COMP%]:hover {\n      transform: scale(1.12);\n    }\n\n    .color-swatch.selected[_ngcontent-%COMP%] {\n      box-shadow: 0 0 0 2px var(--mj-bg-surface), 0 0 0 4px var(--mj-brand-primary);\n    }\n\n    .custom-color-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding-top: 14px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .custom-color-input[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .custom-color-picker[_ngcontent-%COMP%] {\n      width: 44px;\n      height: 30px;\n      padding: 2px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-value[_ngcontent-%COMP%] {\n      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n    }\n\n    \n    .icon-grid[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      max-height: 184px;\n      overflow-y: auto;\n      padding: 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      background: var(--mj-bg-surface);\n    }\n\n    .icon-option[_ngcontent-%COMP%] {\n      aspect-ratio: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      cursor: pointer;\n      color: var(--mj-text-secondary);\n      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n\n    .icon-option[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-hover);\n      border-color: var(--mj-border-strong);\n      transform: translateY(-1px);\n    }\n\n    .icon-option.selected[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 1px var(--mj-brand-primary);\n    }\n\n    .icon-option[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] { font-size: 17px; }\n\n    \n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar { width: 8px; }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n      background: var(--mj-border-strong);\n      border-radius: 4px;\n    }\n    .icon-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n      background: var(--mj-text-disabled);\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectFormModalComponent, [{
         type: Component,
@@ -301,6 +504,52 @@ export class ProjectFormModalComponent extends BaseAngularComponent {
             rows="2"></textarea>
         </div>
 
+        <!-- Visibility. TWO NAMED OPTIONS, not a checkbox: with a checkbox the unchecked
+             meaning lives only in the helper text, so the shared state is never actually
+             named. A fieldset/legend also gives the group a real accessible name, which a
+             bare <label>Visibility</label> did not, and the hint is a sibling of the
+             options rather than inside one — inside, a screen reader read the whole hint
+             as part of the option's name.
+
+             A SHARED folder shows a statement instead of the control. Visibility is a
+             create-time choice in one direction only: personal -> shared stays available,
+             because it only ever adds. See VisibilityIsLocked for why the reverse is not
+             offered. -->
+        <div class="form-field">
+          @if (VisibilityIsLocked) {
+            <fieldset class="visibility-set" aria-describedby="projectVisibilityHint">
+              <legend>Visibility</legend>
+              <p class="visibility-locked">
+                <i class="fa-solid fa-users" aria-hidden="true"></i>
+                Shared with everyone
+              </p>
+              <p class="visibility-hint" id="projectVisibilityHint">
+                A shared folder stays shared. To keep something to yourself, create a new
+                private folder and move it there.
+              </p>
+            </fieldset>
+          } @else {
+            <fieldset class="visibility-set" aria-describedby="projectVisibilityHint">
+              <legend>Visibility</legend>
+              <label class="visibility-choice">
+                <input type="radio" name="projectVisibility" [value]="true"
+                       [(ngModel)]="FormData.isPersonal" />
+                <span>Only me</span>
+              </label>
+              <label class="visibility-choice">
+                <input type="radio" name="projectVisibility" [value]="false"
+                       [(ngModel)]="FormData.isPersonal" />
+                <span>Everyone</span>
+              </label>
+              <p class="visibility-hint" id="projectVisibilityHint">
+                {{ FormData.isPersonal
+                    ? 'Only you can see this folder.'
+                    : 'Everyone can see this folder and its name. They will not see the conversations you keep in it.' }}
+              </p>
+            </fieldset>
+          }
+        </div>
+
         <!-- Color Picker -->
         <div class="form-field">
           <label>Color</label>
@@ -355,19 +604,31 @@ export class ProjectFormModalComponent extends BaseAngularComponent {
         <button mjButton (click)="onCancel()">Cancel</button>
       </mj-dialog-actions>
     </mj-dialog>
-  `, styles: ["\n    .project-form {\n      padding: 20px 24px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 22px;\n    }\n\n    /* Live preview chip */\n    .folder-preview {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-subtle);\n    }\n    .folder-preview-chip {\n      width: 40px;\n      height: 40px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n      transition: background-color 150ms ease, color 150ms ease;\n    }\n    .folder-preview-name {\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-field label {\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-field label.required::after {\n      content: '*';\n      color: var(--mj-status-error);\n      margin-left: 4px;\n    }\n\n    .full-width { width: 100%; }\n\n    .error-message {\n      color: var(--mj-status-error);\n      font-size: 12px;\n    }\n\n    /* Color Picker */\n    .color-picker-section {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 14px;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-palette {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n\n    .color-swatch {\n      width: 100%;\n      aspect-ratio: 1;\n      border: none;\n      border-radius: 8px;\n      cursor: pointer;\n      padding: 0;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    }\n\n    .color-swatch:hover {\n      transform: scale(1.12);\n    }\n\n    .color-swatch.selected {\n      box-shadow: 0 0 0 2px var(--mj-bg-surface), 0 0 0 4px var(--mj-brand-primary);\n    }\n\n    .custom-color-input {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding-top: 14px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .custom-color-input label {\n      margin: 0;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .custom-color-picker {\n      width: 44px;\n      height: 30px;\n      padding: 2px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-value {\n      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n    }\n\n    /* Icon Selector */\n    .icon-grid {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      max-height: 184px;\n      overflow-y: auto;\n      padding: 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      background: var(--mj-bg-surface);\n    }\n\n    .icon-option {\n      aspect-ratio: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      cursor: pointer;\n      color: var(--mj-text-secondary);\n      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n\n    .icon-option:hover {\n      background: var(--mj-bg-surface-hover);\n      border-color: var(--mj-border-strong);\n      transform: translateY(-1px);\n    }\n\n    .icon-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 1px var(--mj-brand-primary);\n    }\n\n    .icon-option i { font-size: 17px; }\n\n    /* Scrollbar */\n    .icon-grid::-webkit-scrollbar { width: 8px; }\n    .icon-grid::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .icon-grid::-webkit-scrollbar-thumb {\n      background: var(--mj-border-strong);\n      border-radius: 4px;\n    }\n    .icon-grid::-webkit-scrollbar-thumb:hover {\n      background: var(--mj-text-disabled);\n    }\n  "] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { dialogRef: [{
+  `, styles: ["\n    .project-form {\n      padding: 20px 24px 8px;\n      display: flex;\n      flex-direction: column;\n      gap: 22px;\n    }\n\n    /* Live preview chip */\n    .folder-preview {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 14px 16px;\n      border-radius: 12px;\n      background: var(--mj-bg-surface-sunken);\n      border: 1px solid var(--mj-border-subtle);\n    }\n    .folder-preview-chip {\n      width: 40px;\n      height: 40px;\n      border-radius: 10px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: 18px;\n      flex-shrink: 0;\n      transition: background-color 150ms ease, color 150ms ease;\n    }\n    .folder-preview-name {\n      font-size: 15px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .form-field {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .form-field label {\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    .form-field label.required::after {\n      content: '*';\n      color: var(--mj-status-error);\n      margin-left: 4px;\n    }\n\n    .full-width { width: 100%; }\n\n    .error-message {\n      color: var(--mj-status-error);\n      font-size: 12px;\n    }\n\n    /* Color Picker */\n    .visibility-set {\n      border: none;\n      margin: 0;\n      padding: 0;\n      display: flex;\n      flex-direction: column;\n      gap: 0.35rem;\n    }\n\n    /* A <legend> is not matched by the .form-field label rule, so it inherited 16px/400\n       and read larger and lighter than every other field label. Restated here rather than\n       widening that selector, which would also catch the option labels below.\n       (No backticks in this block: it is a template literal.) */\n    .visibility-set legend {\n      padding: 0;\n      margin-bottom: 0.15rem;\n      font-weight: 600;\n      font-size: 13px;\n      letter-spacing: 0.01em;\n      color: var(--mj-text-secondary);\n    }\n\n    /* Scoped as .form-field .visibility-choice (0,2,1) so it deliberately outranks the\n       .form-field label rule (0,1,1) this sits inside \u2014 at equal specificity that rule\n       won on source order and rendered the option text bold.\n       (No backticks in here: this block is a template literal.) */\n    .form-field .visibility-choice {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      cursor: pointer;\n      font-weight: 400;\n      font-size: 13px;\n      margin: 0;\n      /* The rows were the height of the radio alone (~16px). The checkbox this replaced\n         sat in a 31px row, so the tap target got smaller when the control got clearer. */\n      padding: 0.25rem 0;\n    }\n\n    .visibility-choice input {\n      flex: 0 0 auto;\n      margin: 0;\n    }\n\n    /* The shared-folder statement that stands in for the radios. Matches the option rows\n       it replaces \u2014 same size, same weight, same 0.25rem row padding \u2014 so the dialog does\n       not visibly reflow between a folder that offers the choice and one that does not.\n       (No backticks in here: this block is a template literal.) */\n    .form-field .visibility-locked {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      margin: 0;\n      padding: 0.25rem 0;\n      font-weight: 400;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .visibility-locked i {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .visibility-hint {\n      margin: 0.15rem 0 0;\n      /* Unsized it inherited 16px and read LARGER than the options it describes. */\n      font-size: 12px;\n      line-height: 1.4;\n      color: var(--mj-text-muted);\n    }\n\n    .color-picker-section {\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      padding: 14px;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-palette {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      margin-bottom: 12px;\n    }\n\n    .color-swatch {\n      width: 100%;\n      aspect-ratio: 1;\n      border: none;\n      border-radius: 8px;\n      cursor: pointer;\n      padding: 0;\n      transition: transform 120ms ease, box-shadow 120ms ease;\n      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    }\n\n    .color-swatch:hover {\n      transform: scale(1.12);\n    }\n\n    .color-swatch.selected {\n      box-shadow: 0 0 0 2px var(--mj-bg-surface), 0 0 0 4px var(--mj-brand-primary);\n    }\n\n    .custom-color-input {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      padding-top: 14px;\n      border-top: 1px solid var(--mj-border-subtle);\n    }\n\n    .custom-color-input label {\n      margin: 0;\n      font-size: 13px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n    }\n\n    .custom-color-picker {\n      width: 44px;\n      height: 30px;\n      padding: 2px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      cursor: pointer;\n      background: var(--mj-bg-surface);\n    }\n\n    .color-value {\n      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n      font-size: 13px;\n      color: var(--mj-text-muted);\n      text-transform: uppercase;\n    }\n\n    /* Icon Selector */\n    .icon-grid {\n      display: grid;\n      grid-template-columns: repeat(10, 1fr);\n      gap: 8px;\n      max-height: 184px;\n      overflow-y: auto;\n      padding: 14px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 12px;\n      background: var(--mj-bg-surface);\n    }\n\n    .icon-option {\n      aspect-ratio: 1;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      border: 1px solid var(--mj-border-subtle);\n      background: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      cursor: pointer;\n      color: var(--mj-text-secondary);\n      transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;\n    }\n\n    .icon-option:hover {\n      background: var(--mj-bg-surface-hover);\n      border-color: var(--mj-border-strong);\n      transform: translateY(-1px);\n    }\n\n    .icon-option.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n      border-color: var(--mj-brand-primary);\n      box-shadow: 0 0 0 1px var(--mj-brand-primary);\n    }\n\n    .icon-option i { font-size: 17px; }\n\n    /* Scrollbar */\n    .icon-grid::-webkit-scrollbar { width: 8px; }\n    .icon-grid::-webkit-scrollbar-track {\n      background: transparent;\n    }\n    .icon-grid::-webkit-scrollbar-thumb {\n      background: var(--mj-border-strong);\n      border-radius: 4px;\n    }\n    .icon-grid::-webkit-scrollbar-thumb:hover {\n      background: var(--mj-text-disabled);\n    }\n  "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { DialogRef: [{
+            type: Input
+        }], dialogRef: [{
+            type: Input
+        }], Project: [{
             type: Input
         }], project: [{
             type: Input
+        }], EnvironmentId: [{
+            type: Input
         }], environmentId: [{
             type: Input
+        }], CurrentUser: [{
+            type: Input
         }], currentUser: [{
             type: Input
+        }], ParentId: [{
+            type: Input
         }], parentId: [{
             type: Input
+        }], ProjectSaved: [{
+            type: Output
         }], projectSaved: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProjectFormModalComponent, { className: "ProjectFormModalComponent", filePath: "src/lib/components/project/project-form-modal.component.ts", lineNumber: 350 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProjectFormModalComponent, { className: "ProjectFormModalComponent", filePath: "src/lib/components/project/project-form-modal.component.ts", lineNumber: 470 }); })();
 //# sourceMappingURL=project-form-modal.component.js.map