Feat: add page titles and favicon support

.gitignore

@@ -6,6 +6,7 @@ dist/
 
 # dependencies
 node_modules/
+Frontend/.pnpm-store/
 
 # logs
 npm-debug.log*
@@ -28,4 +29,4 @@ bin/
 
 .cgcignore
 
-POSIX/
+POSIX/

Assets/favicon/browserconfig.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

Assets/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Moku Work",
+    "short_name": "Moku Work",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

Backend/Dockerfile

@@ -6,6 +6,9 @@ WORKDIR /app
 
 RUN apk add --no-cache ca-certificates curl git tzdata && update-ca-certificates
 
+RUN mkdir -p /tmp/home /tmp/go/pkg/mod /tmp/go-build \
+	&& chmod 0777 /tmp/home /tmp/go /tmp/go/pkg /tmp/go/pkg/mod /tmp/go-build
+
 COPY go.mod go.sum ./
 RUN go mod download
 

Backend/go.mod

@@ -3,11 +3,13 @@ module moku-backend
 go 1.25.7
 
 require (
+	github.com/fxamacker/cbor/v2 v2.9.0
 	github.com/go-chi/chi/v5 v5.3.0
 	github.com/google/uuid v1.6.0
 	github.com/jackc/pgx/v5 v5.10.0
 	github.com/pressly/goose/v3 v3.27.1
 	github.com/redis/go-redis/v9 v9.20.1
+	github.com/tailscale/hujson v0.0.0-20250605163823-992244df8c5a
 )
 
 require (
@@ -17,6 +19,7 @@ require (
 	github.com/jackc/puddle/v2 v2.2.2 // indirect
 	github.com/mfridman/interpolate v0.0.2 // indirect
 	github.com/sethvargo/go-retry v0.3.0 // indirect
+	github.com/x448/float16 v0.8.4 // indirect
 	go.uber.org/atomic v1.11.0 // indirect
 	go.uber.org/multierr v1.11.0 // indirect
 	golang.org/x/sync v0.20.0 // indirect

Backend/go.sum

@@ -9,8 +9,12 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
 github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
+github.com/fxamacker/cbor/v2 v2.9.0 h1:NpKPmjDBgUfBms6tr6JZkTHtfFGcMKsw3eGcmD/sapM=
+github.com/fxamacker/cbor/v2 v2.9.0/go.mod h1:vM4b+DJCtHn+zz7h3FFp/hDAI9WNWCsZj23V5ytsSxQ=
 github.com/go-chi/chi/v5 v5.3.0 h1:halUjDxhshgXHMrao5bB8eNBXo/rnzwr8m5m36glehM=
 github.com/go-chi/chi/v5 v5.3.0/go.mod h1:R+tYY2hNuVUUjxoPtqUdgBqevM9s9njzkTLutVsOCto=
+github.com/google/go-cmp v0.5.8 h1:e6P7q2lk1O+qJJb4BtCQXlK8vWEO8V1ZeuEdJNOqZyg=
+github.com/google/go-cmp v0.5.8/go.mod h1:17dUlkBOakJ0+DkrSSNjCkIjxS6bF9zb3elmeNGIjoY=
 github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
 github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/jackc/pgpassfile v1.0.0 h1:/6Hmqy13Ss2zCq62VdNG8tM1wchn8zjSGOBJ6icpsIM=
@@ -44,6 +48,10 @@ github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UV
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
 github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
 github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
+github.com/tailscale/hujson v0.0.0-20250605163823-992244df8c5a h1:a6TNDN9CgG+cYjaeN8l2mc4kSz2iMiCDQxPEyltUV/I=
+github.com/tailscale/hujson v0.0.0-20250605163823-992244df8c5a/go.mod h1:EbW0wDK/qEUYI0A5bqq0C2kF8JTQwWONmGDBbzsxxHo=
+github.com/x448/float16 v0.8.4 h1:qLwI1I70+NjRFUR3zs1JPUCgaCXSh3SW62uAKT1mSBM=
+github.com/x448/float16 v0.8.4/go.mod h1:14CWIYCyZA/cWjXOioeEpHeN/83MdbZDRQHoFcYsOfg=
 github.com/zeebo/xxh3 v1.1.0 h1:s7DLGDK45Dyfg7++yxI0khrfwq9661w9EN78eP/UZVs=
 github.com/zeebo/xxh3 v1.1.0/go.mod h1:IisAie1LELR4xhVinxWS5+zf1lA4p0MW4T+w+W07F5s=
 go.uber.org/atomic v1.11.0 h1:ZvwS0R+56ePWxUNi+Atn9dWONBPp/AUETXlHW0DxSjE=

Backend/internal/bootstrap/bootstrap_types.go

@@ -91,6 +91,11 @@ type AdminRecord struct {
 	DisplayName     string `json:"displayName"`
 	IsInstanceAdmin bool   `json:"isInstanceAdmin"`
 	HomeTitle       string `json:"homeTitle"`
+	ThemePresetID   string `json:"themePresetId,omitempty"`
+}
+
+type SaveThemePresetInput struct {
+	PresetID string
 }
 
 type OrganizationRecord struct {
@@ -243,8 +248,8 @@ type MoveProjectItemInput struct {
 }
 
 type CreateProjectFolderResult struct {
-	ProjectID     string                       `json:"projectId"`
-	CreatedFolder ProjectHierarchyFolderRecord `json:"createdFolder"`
+	ProjectID     string                         `json:"projectId"`
+	CreatedFolder ProjectHierarchyFolderRecord   `json:"createdFolder"`
 	Folders       []ProjectHierarchyFolderRecord `json:"folders"`
 }
 
@@ -272,8 +277,8 @@ type MoveProjectFolderResult struct {
 }
 
 type CreateProjectItemResult struct {
-	ProjectID   string                `json:"projectId"`
-	CreatedItem ProjectTreeNodeRecord `json:"createdItem"`
+	ProjectID   string                  `json:"projectId"`
+	CreatedItem ProjectTreeNodeRecord   `json:"createdItem"`
 	Nodes       []ProjectTreeNodeRecord `json:"nodes"`
 }
 
@@ -285,10 +290,10 @@ type DeleteProjectItemResult struct {
 }
 
 type MoveProjectItemResult struct {
-	ProjectID            string                `json:"projectId"`
-	PreviousItemStableID string                `json:"previousItemId"`
-	PreviousItemPath     string                `json:"previousItemPath"`
-	MovedItem            ProjectTreeNodeRecord `json:"movedItem"`
+	ProjectID            string                  `json:"projectId"`
+	PreviousItemStableID string                  `json:"previousItemId"`
+	PreviousItemPath     string                  `json:"previousItemPath"`
+	MovedItem            ProjectTreeNodeRecord   `json:"movedItem"`
 	Nodes                []ProjectTreeNodeRecord `json:"nodes"`
 }
 

Backend/internal/bootstrap/project_disk_bootstrap.go

@@ -26,7 +26,7 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 		return fmt.Errorf("create POSIX root: %w", err)
 	}
 
-	if err := writeJSONFile(filepath.Join(rootPath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(rootPath, posixSettingsFileName), map[string]any{
 		"installation": map[string]any{
 			"id":             installation.ID,
 			"name":           installation.Name,
@@ -42,17 +42,17 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 			"slug": organization.Slug,
 		},
 	}); err != nil {
-		return fmt.Errorf("write tenant settings.json: %w", err)
+		return fmt.Errorf("write tenant %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(rootPath, "layout.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(rootPath, posixLayoutFileName), map[string]any{
 		"version": 1,
 		"type":    "tenant-layout",
 		"home": map[string]any{
 			"defaultProjectSlug": project.Slug,
 		},
 	}); err != nil {
-		return fmt.Errorf("write tenant layout.json: %w", err)
+		return fmt.Errorf("write tenant %s: %w", posixLayoutFileName, err)
 	}
 
 	if err := os.MkdirAll(filepath.Join(rootPath, "catalog", "packs"), 0o755); err != nil {
@@ -63,6 +63,67 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 		return fmt.Errorf("create catalog standalone root: %w", err)
 	}
 
+	corePackPath := filepath.Join(rootPath, "catalog", "packs", "pack-core")
+	corePackEntriesPath := filepath.Join(corePackPath, "entries")
+	coreAppEntryPath := filepath.Join(corePackEntriesPath, "app-shell")
+	standaloneAppPath := filepath.Join(rootPath, "catalog", "standalone", "app-shell")
+
+	for _, dirPath := range []string{corePackPath, corePackEntriesPath, coreAppEntryPath, standaloneAppPath} {
+		if err := os.MkdirAll(dirPath, 0o755); err != nil {
+			return fmt.Errorf("create catalog directory %s: %w", dirPath, err)
+		}
+	}
+
+	if err := writeJSONCFile(filepath.Join(corePackPath, posixManifestFileName), map[string]any{
+		"id":          "pack-core",
+		"slug":        "core",
+		"type":        "pack",
+		"name":        "Core Pack",
+		"version":     "0.1.0",
+		"description": "First-party shared package of starter Moku surfaces.",
+		"entries": []map[string]any{{
+			"slug": "app-shell",
+			"path": "entries/app-shell",
+		}},
+		"capabilities": []string{"first-party", "bootstrap", "catalog-pack"},
+	}); err != nil {
+		return fmt.Errorf("write catalog pack %s: %w", posixManifestFileName, err)
+	}
+
+	if err := writeJSONCFile(filepath.Join(coreAppEntryPath, posixManifestFileName), map[string]any{
+		"id":          "app-shell",
+		"slug":        "app-shell",
+		"type":        "app",
+		"name":        "App Shell",
+		"version":     "0.1.0",
+		"description": "Primary shell surface for navigating the installation.",
+		"source":      "pack-core",
+		"runtime": map[string]any{
+			"kind": "route",
+			"path": "/v1/app-shell",
+		},
+		"capabilities": []string{"shell", "navigation", "workspace"},
+	}); err != nil {
+		return fmt.Errorf("write catalog entry %s: %w", posixManifestFileName, err)
+	}
+
+	if err := writeJSONCFile(filepath.Join(standaloneAppPath, posixManifestFileName), map[string]any{
+		"id":          "app-shell",
+		"slug":        "app-shell",
+		"type":        "app",
+		"name":        "App Shell",
+		"version":     "0.1.0",
+		"description": "Standalone registration for the primary shell surface.",
+		"source":      "standalone",
+		"runtime": map[string]any{
+			"kind": "route",
+			"path": "/v1/app-shell",
+		},
+		"capabilities": []string{"shell", "navigation", "standalone"},
+	}); err != nil {
+		return fmt.Errorf("write standalone entry %s: %w", posixManifestFileName, err)
+	}
+
 	departmentPath := filepath.Join(rootPath, "departments", slugDir("department", department.Slug))
 	teamPath := filepath.Join(departmentPath, "teams", slugDir("team", team.Slug))
 	projectPath := filepath.Join(rootPath, "projects", slugDir("project", project.Slug))
@@ -89,107 +150,110 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 		}
 	}
 
-	if err := writeJSONFile(filepath.Join(departmentPath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(departmentPath, posixSettingsFileName), map[string]any{
 		"id":   department.ID,
 		"name": department.Name,
 		"slug": department.Slug,
 		"type": "department",
 	}); err != nil {
-		return fmt.Errorf("write department settings.json: %w", err)
+		return fmt.Errorf("write department %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(departmentPath, "users.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(departmentPath, posixUsersFileName), map[string]any{
 		"owners": []map[string]string{{
 			"id":          admin.ID,
 			"email":       admin.Email,
 			"displayName": admin.DisplayName,
 		}},
 	}); err != nil {
-		return fmt.Errorf("write department users.json: %w", err)
+		return fmt.Errorf("write department %s: %w", posixUsersFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(teamPath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(teamPath, posixSettingsFileName), map[string]any{
 		"id":   team.ID,
 		"name": team.Name,
 		"slug": team.Slug,
 		"type": "team",
 	}); err != nil {
-		return fmt.Errorf("write team settings.json: %w", err)
+		return fmt.Errorf("write team %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(teamPath, "users.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(teamPath, posixUsersFileName), map[string]any{
 		"owners": []map[string]string{{
 			"id":          admin.ID,
 			"email":       admin.Email,
 			"displayName": admin.DisplayName,
 		}},
 	}); err != nil {
-		return fmt.Errorf("write team users.json: %w", err)
+		return fmt.Errorf("write team %s: %w", posixUsersFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(projectPath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(projectPath, posixSettingsFileName), map[string]any{
 		"id":   project.ID,
 		"name": project.Name,
 		"slug": project.Slug,
 		"type": "project",
 	}); err != nil {
-		return fmt.Errorf("write project settings.json: %w", err)
+		return fmt.Errorf("write project %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(projectPath, "home.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(projectPath, posixHomeFileName), map[string]any{
 		"type":  "project-home",
 		"title": project.Name,
 	}); err != nil {
-		return fmt.Errorf("write project home.json: %w", err)
+		return fmt.Errorf("write project %s: %w", posixHomeFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(projectPath, "acl.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(projectPath, posixACLFileName), map[string]any{
 		"version":  1,
 		"inherits": true,
 		"rules":    []any{},
 	}); err != nil {
-		return fmt.Errorf("write project acl.json: %w", err)
+		return fmt.Errorf("write project %s: %w", posixACLFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(usersPath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(usersPath, posixSettingsFileName), map[string]any{
 		"primaryAdminId": admin.ID,
 	}); err != nil {
-		return fmt.Errorf("write users settings.json: %w", err)
+		return fmt.Errorf("write users %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(usersPath, "data.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(usersPath, posixDataFileName), map[string]any{
 		"admins": []map[string]string{{
 			"id":          admin.ID,
 			"email":       admin.Email,
 			"displayName": admin.DisplayName,
 		}},
 	}); err != nil {
-		return fmt.Errorf("write users data.json: %w", err)
+		return fmt.Errorf("write users %s: %w", posixDataFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(personalHomePath, "settings.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(personalHomePath, posixSettingsFileName), map[string]any{
 		"type": "personal",
 		"name": personalName,
 		"slug": personalSlug,
+		"theme": map[string]any{
+			"presetId": "moku-midnight",
+		},
 	}); err != nil {
-		return fmt.Errorf("write personal settings.json: %w", err)
+		return fmt.Errorf("write personal %s: %w", posixSettingsFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(personalHomePath, "layout.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(personalHomePath, posixLayoutFileName), map[string]any{
 		"version": 1,
 		"type":    "personal-layout",
 		"home": map[string]any{
 			"defaultProjectSlug": project.Slug,
 		},
 	}); err != nil {
-		return fmt.Errorf("write personal layout.json: %w", err)
+		return fmt.Errorf("write personal %s: %w", posixLayoutFileName, err)
 	}
 
-	if err := writeJSONFile(filepath.Join(personalHomePath, "home.json"), map[string]any{
+	if err := writeCBORFile(filepath.Join(personalHomePath, posixHomeFileName), map[string]any{
 		"type":  "personal-home",
 		"title": personalHomeTitle(personalName),
 	}); err != nil {
-		return fmt.Errorf("write personal home.json: %w", err)
+		return fmt.Errorf("write personal %s: %w", posixHomeFileName, err)
 	}
 
 	return nil

Backend/internal/bootstrap/project_disk_folders.go

@@ -57,11 +57,11 @@ func (service *Service) createProjectFolderOnDisk(projectSlug, parentFolderID, n
 		return "", "", fmt.Errorf("create project hierarchy folder: %w", err)
 	}
 	folderID := uuid.NewString()
-	if err := writeJSONFile(filepath.Join(folderDir, "folder.json"), map[string]any{"id": folderID, "name": trimmedName, "slug": folderSlug, "type": "folder"}); err != nil {
-		return "", "", fmt.Errorf("write project folder.json: %w", err)
+	if err := writeCBORFile(filepath.Join(folderDir, posixFolderFileName), map[string]any{"id": folderID, "name": trimmedName, "slug": folderSlug, "type": "folder"}); err != nil {
+		return "", "", fmt.Errorf("write project %s: %w", posixFolderFileName, err)
 	}
-	if err := writeJSONFile(filepath.Join(folderDir, "acl.json"), map[string]any{"version": 1, "inherits": true, "rules": []any{}}); err != nil {
-		return "", "", fmt.Errorf("write project acl.json: %w", err)
+	if err := writeCBORFile(filepath.Join(folderDir, posixACLFileName), map[string]any{"version": 1, "inherits": true, "rules": []any{}}); err != nil {
+		return "", "", fmt.Errorf("write project %s: %w", posixACLFileName, err)
 	}
 	return filepath.ToSlash(filepath.Join(containerProjectionPath, folderName)), folderSlug, nil
 }
@@ -150,13 +150,13 @@ func (service *Service) renameProjectFolderOnDisk(projectSlug, folderID, name st
 			return "", "", fmt.Errorf("rename project folder: %w", err)
 		}
 	}
-	folderPayload := readJSONFileMap(filepath.Join(destinationDir, "folder.json"))
+	folderPayload := readStructuredFileMap(filepath.Join(destinationDir, posixFolderFileName))
 	folderMetadataID, _ := folderPayload["id"].(string)
 	if strings.TrimSpace(folderMetadataID) == "" {
 		folderMetadataID = uuid.NewString()
 	}
-	if err := writeJSONFile(filepath.Join(destinationDir, "folder.json"), map[string]any{"id": folderMetadataID, "name": trimmedName, "slug": folderSlug, "type": "folder"}); err != nil {
-		return "", "", fmt.Errorf("write renamed project folder.json: %w", err)
+	if err := writeCBORFile(filepath.Join(destinationDir, posixFolderFileName), map[string]any{"id": folderMetadataID, "name": trimmedName, "slug": folderSlug, "type": "folder"}); err != nil {
+		return "", "", fmt.Errorf("write renamed project %s: %w", posixFolderFileName, err)
 	}
 	return folderProjectionPath, renamedProjectionPath, nil
 }
@@ -210,7 +210,7 @@ func (service *Service) moveProjectFolderOnDisk(projectSlug, folderID, parentFol
 	if samePath(currentParentDir, parentDir) {
 		return folderProjectionPath, folderProjectionPath, nil
 	}
-	folderPayload := readJSONFileMap(filepath.Join(folderDir, "folder.json"))
+	folderPayload := readStructuredFileMap(filepath.Join(folderDir, posixFolderFileName))
 	folderMetadataID, _ := folderPayload["id"].(string)
 	if strings.TrimSpace(folderMetadataID) == "" {
 		folderMetadataID = uuid.NewString()
@@ -244,8 +244,8 @@ func (service *Service) moveProjectFolderOnDisk(projectSlug, folderID, parentFol
 	folderPayload["name"] = folderName
 	folderPayload["slug"] = folderSlug
 	folderPayload["type"] = "folder"
-	if err := writeJSONFile(filepath.Join(destinationDir, "folder.json"), folderPayload); err != nil {
-		return "", "", fmt.Errorf("write moved project folder.json: %w", err)
+	if err := writeCBORFile(filepath.Join(destinationDir, posixFolderFileName), folderPayload); err != nil {
+		return "", "", fmt.Errorf("write moved project %s: %w", posixFolderFileName, err)
 	}
 	movedProjectionPath := filepath.ToSlash(filepath.Join(parentChildrenProjectionPath, folderDirName))
 	return folderProjectionPath, movedProjectionPath, nil

Backend/internal/bootstrap/project_disk_helpers.go

@@ -9,6 +9,22 @@ import (
 	"path/filepath"
 	"strings"
 	"unicode"
+
+	"github.com/fxamacker/cbor/v2"
+	"github.com/tailscale/hujson"
+)
+
+const (
+	posixSettingsFileName = "settings.cbor"
+	posixLayoutFileName   = "layout.cbor"
+	posixHomeFileName     = "home.cbor"
+	posixUsersFileName    = "users.cbor"
+	posixACLFileName      = "acl.cbor"
+	posixFolderFileName   = "folder.cbor"
+	posixItemFileName     = "item.cbor"
+	posixDataFileName     = "data.cbor"
+	posixSchemaFileName   = "schema.json"
+	posixManifestFileName = "manifest.jsonc"
 )
 
 func samePath(left, right string) bool {
@@ -125,14 +141,93 @@ func writeJSONFile(path string, payload any) error {
 	return os.WriteFile(path, data, 0o644)
 }
 
-func readJSONFileMap(path string) map[string]any {
+func writeJSONCFile(path string, payload any) error {
+	parentDir := filepath.Dir(path)
+	if err := os.MkdirAll(parentDir, 0o755); err != nil {
+		return err
+	}
+	data, err := json.MarshalIndent(payload, "", "  ")
+	if err != nil {
+		return err
+	}
+	content := append([]byte("// This file is JSONC. Comments and trailing commas are allowed.\n"), data...)
+	content = append(content, '\n')
+	return os.WriteFile(path, content, 0o644)
+}
+
+func writeCBORFile(path string, payload any) error {
+	parentDir := filepath.Dir(path)
+	if err := os.MkdirAll(parentDir, 0o755); err != nil {
+		return err
+	}
+	data, err := cbor.Marshal(payload)
+	if err != nil {
+		return err
+	}
+	return os.WriteFile(path, data, 0o644)
+}
+
+func readStructuredFileMap(path string) map[string]any {
 	data, err := os.ReadFile(path)
 	if err != nil {
 		return map[string]any{}
 	}
-	var payload map[string]any
-	if err := json.Unmarshal(data, &payload); err != nil || payload == nil {
+	var payload any
+	switch strings.ToLower(filepath.Ext(path)) {
+	case ".cbor":
+		err = cbor.Unmarshal(data, &payload)
+	case ".json":
+		err = json.Unmarshal(data, &payload)
+	case ".jsonc":
+		payload, err = decodeJSONCToAny(data)
+	default:
 		return map[string]any{}
 	}
-	return payload
+	if err != nil || payload == nil {
+		return map[string]any{}
+	}
+	normalized, ok := normalizeStructuredValue(payload).(map[string]any)
+	if !ok || normalized == nil {
+		return map[string]any{}
+	}
+	return normalized
+}
+
+func decodeJSONCToAny(data []byte) (any, error) {
+	ast, err := hujson.Parse(data)
+	if err != nil {
+		return nil, err
+	}
+	ast.Standardize()
+	standardized := ast.Pack()
+	var payload any
+	if err := json.Unmarshal(standardized, &payload); err != nil {
+		return nil, err
+	}
+	return payload, nil
+}
+
+func normalizeStructuredValue(value any) any {
+	switch typed := value.(type) {
+	case map[string]any:
+		normalized := make(map[string]any, len(typed))
+		for key, child := range typed {
+			normalized[key] = normalizeStructuredValue(child)
+		}
+		return normalized
+	case map[any]any:
+		normalized := make(map[string]any, len(typed))
+		for key, child := range typed {
+			normalized[fmt.Sprint(key)] = normalizeStructuredValue(child)
+		}
+		return normalized
+	case []any:
+		normalized := make([]any, len(typed))
+		for index, child := range typed {
+			normalized[index] = normalizeStructuredValue(child)
+		}
+		return normalized
+	default:
+		return value
+	}
 }

Backend/internal/bootstrap/project_disk_items.go

@@ -58,14 +58,14 @@ func (service *Service) createProjectTreeItemOnDisk(projectSlug, parentFolderPat
 		return "", fmt.Errorf("create project item: %w", err)
 	}
 	itemID := uuid.NewString()
-	if err := writeJSONFile(filepath.Join(itemDir, "item.json"), map[string]any{"id": itemID, "name": trimmedName, "slug": itemSlug, "type": canonicalItemType}); err != nil {
-		return "", fmt.Errorf("write project item.json: %w", err)
+	if err := writeCBORFile(filepath.Join(itemDir, posixItemFileName), map[string]any{"id": itemID, "name": trimmedName, "slug": itemSlug, "type": canonicalItemType}); err != nil {
+		return "", fmt.Errorf("write project %s: %w", posixItemFileName, err)
 	}
-	if err := writeJSONFile(filepath.Join(itemDir, "schema.json"), defaultProjectTreeItemSchema(canonicalItemType)); err != nil {
-		return "", fmt.Errorf("write project schema.json: %w", err)
+	if err := writeJSONFile(filepath.Join(itemDir, posixSchemaFileName), defaultProjectTreeItemSchema(canonicalItemType)); err != nil {
+		return "", fmt.Errorf("write project %s: %w", posixSchemaFileName, err)
 	}
-	if err := writeJSONFile(filepath.Join(itemDir, "data.json"), defaultProjectTreeItemData(canonicalItemType, trimmedName)); err != nil {
-		return "", fmt.Errorf("write project data.json: %w", err)
+	if err := writeCBORFile(filepath.Join(itemDir, posixDataFileName), defaultProjectTreeItemData(canonicalItemType, trimmedName)); err != nil {
+		return "", fmt.Errorf("write project %s: %w", posixDataFileName, err)
 	}
 	return filepath.ToSlash(filepath.Join(containerProjectionPath, itemDirName)), nil
 }
@@ -140,7 +140,7 @@ func (service *Service) moveProjectTreeItemOnDisk(projectSlug, itemPath, parentF
 	}
 	currentParentDir := filepath.Dir(itemDir)
 	currentBase := filepath.Base(itemDir)
-	itemPayload := readJSONFileMap(filepath.Join(itemDir, "item.json"))
+	itemPayload := readStructuredFileMap(filepath.Join(itemDir, posixItemFileName))
 	itemID, _ := itemPayload["id"].(string)
 	if strings.TrimSpace(itemID) == "" {
 		itemID = uuid.NewString()
@@ -182,8 +182,8 @@ func (service *Service) moveProjectTreeItemOnDisk(projectSlug, itemPath, parentF
 	itemPayload["name"] = itemName
 	itemPayload["slug"] = itemSlug
 	itemPayload["type"] = canonicalItemType
-	if err := writeJSONFile(filepath.Join(destinationDir, "item.json"), itemPayload); err != nil {
-		return "", "", fmt.Errorf("write moved project item.json: %w", err)
+	if err := writeCBORFile(filepath.Join(destinationDir, posixItemFileName), itemPayload); err != nil {
+		return "", "", fmt.Errorf("write moved project %s: %w", posixItemFileName, err)
 	}
 	return itemProjectionPath, movedProjectionPath, nil
 }

Backend/internal/bootstrap/project_order.go

@@ -11,18 +11,26 @@ import (
 
 func (service *Service) readProjectFolderOrder(projectSlug, rootProjectionPath string) map[string][]string {
 	settingsPath := service.projectSettingsPath(projectSlug)
-	settingsPayload := readJSONFileMap(settingsPath)
+	settingsPayload := readStructuredFileMap(settingsPath)
 	folderOrderPayload, _ := settingsPayload["folderOrder"].(map[string]any)
-	if folderOrderPayload == nil { return map[string][]string{} }
+	if folderOrderPayload == nil {
+		return map[string][]string{}
+	}
 	scopePayload, _ := folderOrderPayload[projectFolderOrderScope(rootProjectionPath)].(map[string]any)
-	if scopePayload == nil { return map[string][]string{} }
+	if scopePayload == nil {
+		return map[string][]string{}
+	}
 	byParentPayload, _ := scopePayload["byParent"].(map[string]any)
-	if byParentPayload == nil { return map[string][]string{} }
+	if byParentPayload == nil {
+		return map[string][]string{}
+	}
 	order := make(map[string][]string, len(byParentPayload))
 	for key, raw := range byParentPayload {
 		for _, id := range stringSliceValue(raw) {
 			trimmedID := strings.TrimSpace(id)
-			if trimmedID == "" || slicesContains(order[key], trimmedID) { continue }
+			if trimmedID == "" || slicesContains(order[key], trimmedID) {
+				continue
+			}
 			order[key] = append(order[key], trimmedID)
 		}
 	}
@@ -31,37 +39,53 @@ func (service *Service) readProjectFolderOrder(projectSlug, rootProjectionPath s
 
 func (service *Service) writeProjectFolderOrder(projectSlug, rootProjectionPath string, folderOrder map[string][]string) error {
 	settingsPath := service.projectSettingsPath(projectSlug)
-	settingsPayload := readJSONFileMap(settingsPath)
-	if settingsPayload == nil { settingsPayload = map[string]any{} }
+	settingsPayload := readStructuredFileMap(settingsPath)
+	if settingsPayload == nil {
+		settingsPayload = map[string]any{}
+	}
 	folderOrderPayload, _ := settingsPayload["folderOrder"].(map[string]any)
-	if folderOrderPayload == nil { folderOrderPayload = map[string]any{} }
+	if folderOrderPayload == nil {
+		folderOrderPayload = map[string]any{}
+	}
 	scopeKey := projectFolderOrderScope(rootProjectionPath)
 	scopePayload, _ := folderOrderPayload[scopeKey].(map[string]any)
-	if scopePayload == nil { scopePayload = map[string]any{} }
+	if scopePayload == nil {
+		scopePayload = map[string]any{}
+	}
 	byParentPayload := map[string]any{}
 	for key, ids := range folderOrder {
-		if len(ids) == 0 { continue }
+		if len(ids) == 0 {
+			continue
+		}
 		copied := make([]string, 0, len(ids))
 		for _, id := range ids {
 			trimmedID := strings.TrimSpace(id)
-			if trimmedID == "" || slicesContains(copied, trimmedID) { continue }
+			if trimmedID == "" || slicesContains(copied, trimmedID) {
+				continue
+			}
 			copied = append(copied, trimmedID)
 		}
-		if len(copied) > 0 { byParentPayload[key] = copied }
+		if len(copied) > 0 {
+			byParentPayload[key] = copied
+		}
 	}
 	scopePayload["byParent"] = byParentPayload
 	folderOrderPayload[scopeKey] = scopePayload
 	settingsPayload["folderOrder"] = folderOrderPayload
-	if err := writeJSONFile(settingsPath, settingsPayload); err != nil { return fmt.Errorf("write project settings.json: %w", err) }
+	if err := writeCBORFile(settingsPath, settingsPayload); err != nil {
+		return fmt.Errorf("write project %s: %w", posixSettingsFileName, err)
+	}
 	return nil
 }
 
 func (service *Service) projectSettingsPath(projectSlug string) string {
-	return filepath.Join(strings.TrimSpace(service.posixRoot), "projects", slugDir("project", projectSlug), "settings.json")
+	return filepath.Join(strings.TrimSpace(service.posixRoot), "projects", slugDir("project", projectSlug), posixSettingsFileName)
 }
 
 func projectFolderOrderScope(rootProjectionPath string) string {
-	if strings.HasSuffix(rootProjectionPath, "/tree") { return projectFolderOrderTree }
+	if strings.HasSuffix(rootProjectionPath, "/tree") {
+		return projectFolderOrderTree
+	}
 	return projectFolderOrderHierarchy
 }
 
@@ -70,19 +94,33 @@ func applyProjectHierarchyFolderOrdering(folders []ProjectHierarchyFolderRecord,
 }
 
 func applyProjectHierarchyFolderOrderingForParent(folders []ProjectHierarchyFolderRecord, parentID string, folderOrder map[string][]string) []ProjectHierarchyFolderRecord {
-	if len(folders) == 0 { return folders }
+	if len(folders) == 0 {
+		return folders
+	}
 	nextFolders := make([]ProjectHierarchyFolderRecord, len(folders))
 	copy(nextFolders, folders)
-	for index := range nextFolders { nextFolders[index].Children = applyProjectHierarchyFolderOrderingForParent(nextFolders[index].Children, nextFolders[index].ID, folderOrder) }
+	for index := range nextFolders {
+		nextFolders[index].Children = applyProjectHierarchyFolderOrderingForParent(nextFolders[index].Children, nextFolders[index].ID, folderOrder)
+	}
 	orderIDs := folderOrder[projectFolderOrderParentKey(parentID)]
-	if len(orderIDs) == 0 { return nextFolders }
+	if len(orderIDs) == 0 {
+		return nextFolders
+	}
 	rankByID := make(map[string]int, len(orderIDs))
-	for index, id := range orderIDs { if _, exists := rankByID[id]; !exists { rankByID[id] = index } }
+	for index, id := range orderIDs {
+		if _, exists := rankByID[id]; !exists {
+			rankByID[id] = index
+		}
+	}
 	sort.SliceStable(nextFolders, func(left, right int) bool {
 		leftRank, leftOrdered := rankByID[nextFolders[left].ID]
 		rightRank, rightOrdered := rankByID[nextFolders[right].ID]
-		if leftOrdered && rightOrdered { return leftRank < rightRank }
-		if leftOrdered != rightOrdered { return leftOrdered }
+		if leftOrdered && rightOrdered {
+			return leftRank < rightRank
+		}
+		if leftOrdered != rightOrdered {
+			return leftOrdered
+		}
 		return false
 	})
 	return nextFolders
@@ -91,32 +129,47 @@ func applyProjectHierarchyFolderOrderingForParent(folders []ProjectHierarchyFold
 func removeFolderOrder(folderOrder map[string][]string, folderID string) {
 	removeFolderOrderReference(folderOrder, folderID)
 	trimmedFolderID := strings.TrimSpace(folderID)
-	if trimmedFolderID == "" { return }
+	if trimmedFolderID == "" {
+		return
+	}
 	delete(folderOrder, projectFolderOrderParentKey(trimmedFolderID))
 }
 
 func removeFolderOrderReference(folderOrder map[string][]string, folderID string) {
 	trimmedFolderID := strings.TrimSpace(folderID)
-	if trimmedFolderID == "" { return }
+	if trimmedFolderID == "" {
+		return
+	}
 	for key, ids := range folderOrder {
 		nextIDs := ids[:0]
 		for _, id := range ids {
-			if strings.TrimSpace(id) == trimmedFolderID { continue }
+			if strings.TrimSpace(id) == trimmedFolderID {
+				continue
+			}
 			nextIDs = append(nextIDs, id)
 		}
-		if len(nextIDs) == 0 { delete(folderOrder, key); continue }
+		if len(nextIDs) == 0 {
+			delete(folderOrder, key)
+			continue
+		}
 		folderOrder[key] = append([]string(nil), nextIDs...)
 	}
 }
 
 func insertFolderOrder(folderOrder map[string][]string, parentID, folderID string, index int) {
 	trimmedFolderID := strings.TrimSpace(folderID)
-	if trimmedFolderID == "" { return }
+	if trimmedFolderID == "" {
+		return
+	}
 	removeFolderOrderReference(folderOrder, trimmedFolderID)
 	parentKey := projectFolderOrderParentKey(parentID)
 	children := append([]string(nil), folderOrder[parentKey]...)
-	if index < 0 { index = 0 }
-	if index > len(children) { index = len(children) }
+	if index < 0 {
+		index = 0
+	}
+	if index > len(children) {
+		index = len(children)
+	}
 	children = slicesInsert(children, index, trimmedFolderID)
 	folderOrder[parentKey] = children
 }
@@ -126,17 +179,24 @@ func seedFolderOrderParent(folderOrder map[string][]string, folders []ProjectHie
 	trimmedParentID := strings.TrimSpace(parentID)
 	if trimmedParentID != "" {
 		parent, found := findProjectHierarchyFolder(folders, trimmedParentID)
-		if !found { return }
+		if !found {
+			return
+		}
 		children = parent.Children
 	}
 	parentKey := projectFolderOrderParentKey(trimmedParentID)
 	seeded := make([]string, 0, len(children))
 	for _, child := range children {
 		childID := strings.TrimSpace(child.ID)
-		if childID == "" || slicesContains(seeded, childID) { continue }
+		if childID == "" || slicesContains(seeded, childID) {
+			continue
+		}
 		seeded = append(seeded, childID)
 	}
-	if len(seeded) == 0 { delete(folderOrder, parentKey); return }
+	if len(seeded) == 0 {
+		delete(folderOrder, parentKey)
+		return
+	}
 	folderOrder[parentKey] = seeded
 }
 
@@ -146,23 +206,35 @@ func folderOrderChildren(folderOrder map[string][]string, parentID string) []str
 
 func projectFolderOrderParentKey(parentID string) string {
 	trimmedParentID := strings.TrimSpace(parentID)
-	if trimmedParentID == "" { return projectFolderOrderRootKey }
+	if trimmedParentID == "" {
+		return projectFolderOrderRootKey
+	}
 	return trimmedParentID
 }
 
 func stringSliceValue(value any) []string {
 	items, ok := value.([]any)
 	if !ok {
-		if typed, ok := value.([]string); ok { return typed }
+		if typed, ok := value.([]string); ok {
+			return typed
+		}
 		return nil
 	}
 	result := make([]string, 0, len(items))
-	for _, item := range items { if text, ok := item.(string); ok { result = append(result, text) } }
+	for _, item := range items {
+		if text, ok := item.(string); ok {
+			result = append(result, text)
+		}
+	}
 	return result
 }
 
 func slicesContains(values []string, value string) bool {
-	for _, existing := range values { if existing == value { return true } }
+	for _, existing := range values {
+		if existing == value {
+			return true
+		}
+	}
 	return false
 }
 
@@ -174,25 +246,35 @@ func slicesInsert(values []string, index int, value string) []string {
 }
 
 func buildProjectHierarchyFolderTree(rows []projectHierarchyFolderRow, rootParentPath string) []ProjectHierarchyFolderRecord {
-	if len(rows) == 0 { return nil }
+	if len(rows) == 0 {
+		return nil
+	}
 	nodesByPath := make(map[string]*ProjectHierarchyFolderRecord, len(rows))
 	childrenByParent := make(map[string][]string)
 	for _, row := range rows {
 		folderID := strings.TrimSpace(row.ID)
-		if folderID == "" { folderID = row.Path }
+		if folderID == "" {
+			folderID = row.Path
+		}
 		label := strings.TrimSpace(row.Label)
-		if label == "" { label = fallbackFolderLabel(row.Path) }
+		if label == "" {
+			label = fallbackFolderLabel(row.Path)
+		}
 		nodesByPath[row.Path] = &ProjectHierarchyFolderRecord{ID: folderID, Path: row.Path, Label: label, Children: []ProjectHierarchyFolderRecord{}}
 		childrenByParent[row.ParentPath] = append(childrenByParent[row.ParentPath], row.Path)
 	}
 	var build func(parentPath string) []ProjectHierarchyFolderRecord
 	build = func(parentPath string) []ProjectHierarchyFolderRecord {
 		childPaths := childrenByParent[parentPath]
-		if len(childPaths) == 0 { return nil }
+		if len(childPaths) == 0 {
+			return nil
+		}
 		folders := make([]ProjectHierarchyFolderRecord, 0, len(childPaths))
 		for _, childPath := range childPaths {
 			node := nodesByPath[childPath]
-			if node == nil { continue }
+			if node == nil {
+				continue
+			}
 			folder := ProjectHierarchyFolderRecord{ID: node.ID, Path: node.Path, Label: node.Label, Children: build(filepath.ToSlash(filepath.Join(childPath, "children")))}
 			folders = append(folders, folder)
 		}
@@ -202,15 +284,25 @@ func buildProjectHierarchyFolderTree(rows []projectHierarchyFolderRow, rootParen
 }
 
 func buildProjectTreeNodeTree(rows []projectTreeNodeRow, rootParentPath string) []ProjectTreeNodeRecord {
-	if len(rows) == 0 { return nil }
+	if len(rows) == 0 {
+		return nil
+	}
 	nodesByPath := make(map[string]*ProjectTreeNodeRecord, len(rows))
 	childrenByParent := make(map[string][]string)
 	for _, row := range rows {
 		nodeKind := normalizeProjectTreeNodeKind(row.Kind)
 		nodeID := strings.TrimSpace(row.ID)
-		if nodeID == "" { nodeID = row.Path }
+		if nodeID == "" {
+			nodeID = row.Path
+		}
 		label := strings.TrimSpace(row.Label)
-		if label == "" { if nodeKind == "item" { label = fallbackItemLabel(row.Path) } else { label = fallbackFolderLabel(row.Path) } }
+		if label == "" {
+			if nodeKind == "item" {
+				label = fallbackItemLabel(row.Path)
+			} else {
+				label = fallbackFolderLabel(row.Path)
+			}
+		}
 		nodesByPath[row.Path] = &ProjectTreeNodeRecord{ID: nodeID, Path: row.Path, Label: label, Kind: nodeKind, ItemType: normalizeProjectTreeItemType(row.ItemType), Children: []ProjectTreeNodeRecord{}}
 		parentKey := normalizeProjectTreeParentPath(nodeKind, row.ParentPath)
 		childrenByParent[parentKey] = append(childrenByParent[parentKey], row.Path)
@@ -218,13 +310,19 @@ func buildProjectTreeNodeTree(rows []projectTreeNodeRow, rootParentPath string)
 	var build func(parentPath string) []ProjectTreeNodeRecord
 	build = func(parentPath string) []ProjectTreeNodeRecord {
 		childPaths := childrenByParent[parentPath]
-		if len(childPaths) == 0 { return nil }
+		if len(childPaths) == 0 {
+			return nil
+		}
 		nodes := make([]ProjectTreeNodeRecord, 0, len(childPaths))
 		for _, childPath := range childPaths {
 			node := nodesByPath[childPath]
-			if node == nil { continue }
+			if node == nil {
+				continue
+			}
 			nextNode := ProjectTreeNodeRecord{ID: node.ID, Path: node.Path, Label: node.Label, Kind: node.Kind, ItemType: node.ItemType}
-			if node.Kind == "folder" { nextNode.Children = build(node.Path) }
+			if node.Kind == "folder" {
+				nextNode.Children = build(node.Path)
+			}
 			nodes = append(nodes, nextNode)
 		}
 		return nodes
@@ -233,7 +331,9 @@ func buildProjectTreeNodeTree(rows []projectTreeNodeRow, rootParentPath string)
 }
 
 func normalizeProjectTreeParentPath(kind, parentPath string) string {
-	if kind == "folder" && strings.HasSuffix(parentPath, "/children") { return filepath.ToSlash(filepath.Dir(parentPath)) }
+	if kind == "folder" && strings.HasSuffix(parentPath, "/children") {
+		return filepath.ToSlash(filepath.Dir(parentPath))
+	}
 	return parentPath
 }
 
@@ -253,19 +353,35 @@ func applyProjectTreeNodeOrdering(nodes []ProjectTreeNodeRecord, folderOrder map
 }
 
 func applyProjectTreeNodeOrderingForParent(nodes []ProjectTreeNodeRecord, parentID string, folderOrder map[string][]string) []ProjectTreeNodeRecord {
-	if len(nodes) == 0 { return nodes }
+	if len(nodes) == 0 {
+		return nodes
+	}
 	nextNodes := make([]ProjectTreeNodeRecord, len(nodes))
 	copy(nextNodes, nodes)
-	for index := range nextNodes { if nextNodes[index].Kind == "folder" { nextNodes[index].Children = applyProjectTreeNodeOrderingForParent(nextNodes[index].Children, nextNodes[index].ID, folderOrder) } }
+	for index := range nextNodes {
+		if nextNodes[index].Kind == "folder" {
+			nextNodes[index].Children = applyProjectTreeNodeOrderingForParent(nextNodes[index].Children, nextNodes[index].ID, folderOrder)
+		}
+	}
 	orderIDs := folderOrder[projectFolderOrderParentKey(parentID)]
-	if len(orderIDs) == 0 { return nextNodes }
+	if len(orderIDs) == 0 {
+		return nextNodes
+	}
 	rankByID := make(map[string]int, len(orderIDs))
-	for index, id := range orderIDs { if _, exists := rankByID[id]; !exists { rankByID[id] = index } }
+	for index, id := range orderIDs {
+		if _, exists := rankByID[id]; !exists {
+			rankByID[id] = index
+		}
+	}
 	sort.SliceStable(nextNodes, func(left, right int) bool {
 		leftRank, leftOrdered := rankByID[nextNodes[left].ID]
 		rightRank, rightOrdered := rankByID[nextNodes[right].ID]
-		if leftOrdered && rightOrdered { return leftRank < rightRank }
-		if leftOrdered != rightOrdered { return leftOrdered }
+		if leftOrdered && rightOrdered {
+			return leftRank < rightRank
+		}
+		if leftOrdered != rightOrdered {
+			return leftOrdered
+		}
 		return false
 	})
 	return nextNodes
@@ -273,39 +389,57 @@ func applyProjectTreeNodeOrderingForParent(nodes []ProjectTreeNodeRecord, parent
 
 func findProjectHierarchyFolder(folders []ProjectHierarchyFolderRecord, folderID string) (ProjectHierarchyFolderRecord, bool) {
 	for _, folder := range folders {
-		if folder.ID == folderID { return folder, true }
-		if child, ok := findProjectHierarchyFolder(folder.Children, folderID); ok { return child, true }
+		if folder.ID == folderID {
+			return folder, true
+		}
+		if child, ok := findProjectHierarchyFolder(folder.Children, folderID); ok {
+			return child, true
+		}
 	}
 	return ProjectHierarchyFolderRecord{}, false
 }
 
 func findProjectHierarchyFolderByPath(folders []ProjectHierarchyFolderRecord, folderPath string) (ProjectHierarchyFolderRecord, bool) {
 	for _, folder := range folders {
-		if folder.Path == folderPath { return folder, true }
-		if child, ok := findProjectHierarchyFolderByPath(folder.Children, folderPath); ok { return child, true }
+		if folder.Path == folderPath {
+			return folder, true
+		}
+		if child, ok := findProjectHierarchyFolderByPath(folder.Children, folderPath); ok {
+			return child, true
+		}
 	}
 	return ProjectHierarchyFolderRecord{}, false
 }
 
 func findProjectTreeNode(nodes []ProjectTreeNodeRecord, nodeID string) (ProjectTreeNodeRecord, bool) {
 	for _, node := range nodes {
-		if node.ID == nodeID { return node, true }
-		if child, ok := findProjectTreeNode(node.Children, nodeID); ok { return child, true }
+		if node.ID == nodeID {
+			return node, true
+		}
+		if child, ok := findProjectTreeNode(node.Children, nodeID); ok {
+			return child, true
+		}
 	}
 	return ProjectTreeNodeRecord{}, false
 }
 
 func findProjectTreeNodeByPath(nodes []ProjectTreeNodeRecord, nodePath string) (ProjectTreeNodeRecord, bool) {
 	for _, node := range nodes {
-		if node.Path == nodePath { return node, true }
-		if child, ok := findProjectTreeNodeByPath(node.Children, nodePath); ok { return child, true }
+		if node.Path == nodePath {
+			return node, true
+		}
+		if child, ok := findProjectTreeNodeByPath(node.Children, nodePath); ok {
+			return child, true
+		}
 	}
 	return ProjectTreeNodeRecord{}, false
 }
 
 func findProjectTreeFolderByPath(nodes []ProjectTreeNodeRecord, folderPath string) (ProjectTreeNodeRecord, bool) {
 	node, ok := findProjectTreeNodeByPath(nodes, folderPath)
-	if !ok || node.Kind != "folder" { return ProjectTreeNodeRecord{}, false }
+	if !ok || node.Kind != "folder" {
+		return ProjectTreeNodeRecord{}, false
+	}
 	return node, true
 }
 
@@ -314,16 +448,24 @@ func seedProjectTreeOrderParent(folderOrder map[string][]string, nodes []Project
 	trimmedParentID := strings.TrimSpace(parentID)
 	if trimmedParentID != "" {
 		parent, found := findProjectTreeNode(nodes, trimmedParentID)
-		if !found || parent.Kind != "folder" { return }
+		if !found || parent.Kind != "folder" {
+			return
+		}
 		children = parent.Children
 	}
 	parentKey := projectFolderOrderParentKey(parentID)
-	if len(folderOrder[parentKey]) > 0 { return }
+	if len(folderOrder[parentKey]) > 0 {
+		return
+	}
 	orderedIDs := make([]string, 0, len(children))
 	for _, child := range children {
 		trimmedChildID := strings.TrimSpace(child.ID)
-		if trimmedChildID == "" || slicesContains(orderedIDs, trimmedChildID) { continue }
+		if trimmedChildID == "" || slicesContains(orderedIDs, trimmedChildID) {
+			continue
+		}
 		orderedIDs = append(orderedIDs, trimmedChildID)
 	}
-	if len(orderedIDs) > 0 { folderOrder[parentKey] = orderedIDs }
+	if len(orderedIDs) > 0 {
+		folderOrder[parentKey] = orderedIDs
+	}
 }

Backend/internal/bootstrap/project_queries.go

@@ -232,7 +232,7 @@ func (service *Service) getProjectHierarchyFoldersByRootPath(
 			COALESCE(folder_meta.resource_name, directories.resource_name, '')
 		FROM posix_nodes AS directories
 		LEFT JOIN posix_nodes AS folder_meta
-		  ON folder_meta.path = directories.path || '/folder.json'
+		  ON folder_meta.path = directories.path || '/folder.cbor'
 		 AND folder_meta.node_kind = 'file'::posix_node_kind
 		WHERE directories.node_kind = 'directory'::posix_node_kind
 		  AND directories.logical_type = 'hierarchy_folder'
@@ -286,12 +286,11 @@ func (service *Service) getProjectTreeNodesByRootPath(
 			COALESCE(node_meta.content_json->>'type', directories.content_json->>'type', '')
 		FROM posix_nodes AS directories
 		LEFT JOIN posix_nodes AS node_meta
-		  ON node_meta.path = directories.path || CASE
-				WHEN directories.logical_type = 'hierarchy_folder' THEN '/folder.json'
-				WHEN directories.logical_type = 'item' THEN '/item.json'
-				ELSE ''
-			END
-		 AND node_meta.node_kind = 'file'::posix_node_kind
+		  ON node_meta.node_kind = 'file'::posix_node_kind
+		 AND (
+				(directories.logical_type = 'hierarchy_folder' AND node_meta.path = directories.path || '/folder.cbor')
+				OR (directories.logical_type = 'item' AND node_meta.path = directories.path || '/item.cbor')
+		 )
 		WHERE directories.node_kind = 'directory'::posix_node_kind
 		  AND directories.logical_type IN ('hierarchy_folder', 'item')
 		  AND directories.project_slug = $1

Backend/internal/bootstrap/service.go

@@ -318,6 +318,14 @@ func (service *Service) GetAdmin(ctx context.Context) (*AdminRecord, error) {
 		return nil, err
 	}
 
+	themePresetID, err := service.loadAdminThemePresetID(ctx, record.DisplayName)
+	if err != nil {
+		return nil, err
+	}
+	if themePresetID != "" {
+		record.ThemePresetID = themePresetID
+	}
+
 	return &record, nil
 }
 

Backend/internal/bootstrap/service_test.go

@@ -7,6 +7,9 @@ import (
 	"path/filepath"
 	"strings"
 	"testing"
+
+	"github.com/fxamacker/cbor/v2"
+	"github.com/tailscale/hujson"
 )
 
 type fakeRow struct {
@@ -104,25 +107,28 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 	}
 
 	requiredPaths := []string{
-		filepath.Join(rootPath, "settings.json"),
-		filepath.Join(rootPath, "layout.json"),
+		filepath.Join(rootPath, posixSettingsFileName),
+		filepath.Join(rootPath, posixLayoutFileName),
 		filepath.Join(rootPath, "catalog", "packs"),
 		filepath.Join(rootPath, "catalog", "standalone"),
-		filepath.Join(rootPath, "departments", "department-primary-department", "settings.json"),
-		filepath.Join(rootPath, "departments", "department-primary-department", "users.json"),
-		filepath.Join(rootPath, "departments", "department-primary-department", "teams", "team-primary-team", "settings.json"),
-		filepath.Join(rootPath, "departments", "department-primary-department", "teams", "team-primary-team", "users.json"),
-		filepath.Join(rootPath, "projects", "project-primary-project", "settings.json"),
-		filepath.Join(rootPath, "projects", "project-primary-project", "home.json"),
-		filepath.Join(rootPath, "projects", "project-primary-project", "acl.json"),
+		filepath.Join(rootPath, "catalog", "packs", "pack-core", posixManifestFileName),
+		filepath.Join(rootPath, "catalog", "packs", "pack-core", "entries", "app-shell", posixManifestFileName),
+		filepath.Join(rootPath, "catalog", "standalone", "app-shell", posixManifestFileName),
+		filepath.Join(rootPath, "departments", "department-primary-department", posixSettingsFileName),
+		filepath.Join(rootPath, "departments", "department-primary-department", posixUsersFileName),
+		filepath.Join(rootPath, "departments", "department-primary-department", "teams", "team-primary-team", posixSettingsFileName),
+		filepath.Join(rootPath, "departments", "department-primary-department", "teams", "team-primary-team", posixUsersFileName),
+		filepath.Join(rootPath, "projects", "project-primary-project", posixSettingsFileName),
+		filepath.Join(rootPath, "projects", "project-primary-project", posixHomeFileName),
+		filepath.Join(rootPath, "projects", "project-primary-project", posixACLFileName),
 		filepath.Join(rootPath, "projects", "project-primary-project", "children"),
 		filepath.Join(rootPath, "projects", "project-primary-project", "tree"),
-		filepath.Join(rootPath, "users", "settings.json"),
-		filepath.Join(rootPath, "users", "data.json"),
+		filepath.Join(rootPath, "users", posixSettingsFileName),
+		filepath.Join(rootPath, "users", posixDataFileName),
 		filepath.Join(rootPath, "users", "personals"),
-		filepath.Join(rootPath, "users", "personals", "personal-ronald", "settings.json"),
-		filepath.Join(rootPath, "users", "personals", "personal-ronald", "layout.json"),
-		filepath.Join(rootPath, "users", "personals", "personal-ronald", "home.json"),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", posixSettingsFileName),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", posixLayoutFileName),
+		filepath.Join(rootPath, "users", "personals", "personal-ronald", posixHomeFileName),
 		filepath.Join(rootPath, "users", "personals", "personal-ronald", "tree"),
 	}
 
@@ -132,10 +138,10 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 		}
 	}
 
-	settingsPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "settings.json"))
+	settingsPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, posixSettingsFileName))
 	installationPayload, ok := settingsPayload["installation"].(map[string]any)
 	if !ok {
-		t.Fatalf("settings.json missing installation object: %#v", settingsPayload)
+		t.Fatalf("%s missing installation object: %#v", posixSettingsFileName, settingsPayload)
 	}
 	if installationPayload["name"] != "MangoPig" {
 		t.Fatalf("expected installation name MangoPig, got %#v", installationPayload["name"])
@@ -144,31 +150,53 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 		t.Fatalf("expected installation to be bootstrapped, got %#v", installationPayload["isBootstrapped"])
 	}
 
-	layoutPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "layout.json"))
+	layoutPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, posixLayoutFileName))
 	homePayload, ok := layoutPayload["home"].(map[string]any)
 	if !ok {
-		t.Fatalf("layout.json missing home object: %#v", layoutPayload)
+		t.Fatalf("%s missing home object: %#v", posixLayoutFileName, layoutPayload)
 	}
 	if homePayload["defaultProjectSlug"] != "primary-project" {
 		t.Fatalf("expected default project slug primary-project, got %#v", homePayload["defaultProjectSlug"])
 	}
 
-	projectSettings := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "projects", "project-primary-project", "settings.json"))
+	packManifest := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "catalog", "packs", "pack-core", posixManifestFileName))
+	if packManifest["type"] != "pack" {
+		t.Fatalf("expected pack manifest type pack, got %#v", packManifest["type"])
+	}
+	if packManifest["slug"] != "core" {
+		t.Fatalf("expected pack manifest slug core, got %#v", packManifest["slug"])
+	}
+
+	entryManifest := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "catalog", "packs", "pack-core", "entries", "app-shell", posixManifestFileName))
+	runtimePayload, ok := entryManifest["runtime"].(map[string]any)
+	if !ok {
+		t.Fatalf("%s missing runtime object: %#v", posixManifestFileName, entryManifest)
+	}
+	if runtimePayload["path"] != "/v1/app-shell" {
+		t.Fatalf("expected app-shell runtime path /v1/app-shell, got %#v", runtimePayload["path"])
+	}
+
+	standaloneManifest := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "catalog", "standalone", "app-shell", posixManifestFileName))
+	if standaloneManifest["source"] != "standalone" {
+		t.Fatalf("expected standalone manifest source standalone, got %#v", standaloneManifest["source"])
+	}
+
+	projectSettings := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "projects", "project-primary-project", posixSettingsFileName))
 	if projectSettings["type"] != "project" {
 		t.Fatalf("expected project settings type project, got %#v", projectSettings["type"])
 	}
 
-	projectACL := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "projects", "project-primary-project", "acl.json"))
+	projectACL := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "projects", "project-primary-project", posixACLFileName))
 	if projectACL["inherits"] != true {
 		t.Fatalf("expected project acl to inherit by default, got %#v", projectACL["inherits"])
 	}
 
-	usersSettings := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "settings.json"))
+	usersSettings := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "users", posixSettingsFileName))
 	if usersSettings["primaryAdminId"] != "admin-1" {
 		t.Fatalf("expected primary admin id admin-1, got %#v", usersSettings["primaryAdminId"])
 	}
 
-	personalSettings := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", "settings.json"))
+	personalSettings := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", posixSettingsFileName))
 	if personalSettings["type"] != "personal" {
 		t.Fatalf("expected personal settings type personal, got %#v", personalSettings["type"])
 	}
@@ -178,8 +206,15 @@ func TestEnsureBootstrapPOSIXSkeletonInitializesEmptyRoot(t *testing.T) {
 	if personalSettings["slug"] != "ronald" {
 		t.Fatalf("expected personal slug ronald, got %#v", personalSettings["slug"])
 	}
+	personalTheme, ok := personalSettings["theme"].(map[string]any)
+	if !ok {
+		t.Fatalf("expected personal settings to contain theme object, got %#v", personalSettings)
+	}
+	if personalTheme["presetId"] != defaultThemePresetID {
+		t.Fatalf("expected personal theme preset %s, got %#v", defaultThemePresetID, personalTheme["presetId"])
+	}
 
-	personalHome := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", "home.json"))
+	personalHome := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, "users", "personals", "personal-ronald", posixHomeFileName))
 	if personalHome["type"] != "personal-home" {
 		t.Fatalf("expected personal home type personal-home, got %#v", personalHome["type"])
 	}
@@ -217,8 +252,8 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 
 	createdFolderPath := filepath.Join(rootPath, "projects", "project-primary-project", "children", "folder-design-system")
 	for _, path := range []string{
-		filepath.Join(createdFolderPath, "folder.json"),
-		filepath.Join(createdFolderPath, "acl.json"),
+		filepath.Join(createdFolderPath, posixFolderFileName),
+		filepath.Join(createdFolderPath, posixACLFileName),
 		filepath.Join(createdFolderPath, "children"),
 	} {
 		if _, err := os.Stat(path); err != nil {
@@ -226,7 +261,7 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 		}
 	}
 
-	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(createdFolderPath, "folder.json"))
+	folderPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(createdFolderPath, posixFolderFileName))
 	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
 		t.Fatalf("expected created folder to have stable id, got %#v", folderPayload["id"])
 	}
@@ -249,6 +284,39 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 	}
 }
 
+func TestPersonalSettingsPathForDisplayName(t *testing.T) {
+	path := personalSettingsPathForDisplayName(" Ronald ")
+	if path != "users/personals/personal-ronald/settings.cbor" {
+		t.Fatalf("unexpected personal settings path: %s", path)
+	}
+}
+
+func TestApplyThemePresetToSettingsPreservesExistingFields(t *testing.T) {
+	settings := map[string]any{
+		"type": "personal",
+		"slug": "ronald",
+		"theme": map[string]any{
+			"density": "comfortable",
+		},
+	}
+
+	updated := applyThemePresetToSettings(settings, "moku-default")
+
+	if updated["type"] != "personal" {
+		t.Fatalf("expected type personal, got %#v", updated["type"])
+	}
+	theme, ok := updated["theme"].(map[string]any)
+	if !ok {
+		t.Fatalf("expected theme object, got %#v", updated["theme"])
+	}
+	if theme["presetId"] != "moku-default" {
+		t.Fatalf("expected presetId moku-default, got %#v", theme["presetId"])
+	}
+	if theme["density"] != "comfortable" {
+		t.Fatalf("expected density to be preserved, got %#v", theme["density"])
+	}
+}
+
 func TestCreateProjectTreeFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
 	rootPath := filepath.Join(t.TempDir(), "POSIX")
 	service := NewService(nil, rootPath)
@@ -278,8 +346,8 @@ func TestCreateProjectTreeFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
 
 	createdFolderPath := filepath.Join(rootPath, "projects", "project-primary-project", "tree", "folder-docs")
 	for _, path := range []string{
-		filepath.Join(createdFolderPath, "folder.json"),
-		filepath.Join(createdFolderPath, "acl.json"),
+		filepath.Join(createdFolderPath, posixFolderFileName),
+		filepath.Join(createdFolderPath, posixACLFileName),
 		filepath.Join(createdFolderPath, "children"),
 	} {
 		if _, err := os.Stat(path); err != nil {
@@ -345,7 +413,7 @@ func TestRenameProjectHierarchyFolderOnDiskRenamesFolderShape(t *testing.T) {
 		t.Fatalf("expected nested child folder to move with renamed parent: %v", err)
 	}
 
-	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(renamedFolderPath, "folder.json"))
+	folderPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(renamedFolderPath, posixFolderFileName))
 	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
 		t.Fatalf("expected renamed folder to preserve stable id, got %#v", folderPayload["id"])
 	}
@@ -392,7 +460,7 @@ func TestRenameProjectTreeFolderOnDiskRenamesFolderShape(t *testing.T) {
 		t.Fatalf("unexpected renamed path: %s", renamedPath)
 	}
 
-	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(renamedPath), "folder.json"))
+	folderPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(renamedPath), posixFolderFileName))
 	if folderPayload["name"] != "Specifications" {
 		t.Fatalf("expected renamed folder name Specifications, got %#v", folderPayload["name"])
 	}
@@ -454,7 +522,7 @@ func TestMoveProjectHierarchyFolderOnDiskMovesFolderToNewParent(t *testing.T) {
 		t.Fatalf("expected nested child folder to move with moved parent: %v", err)
 	}
 
-	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(movedFolderPath, "folder.json"))
+	folderPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(movedFolderPath, posixFolderFileName))
 	if strings.TrimSpace(asStringForTest(folderPayload["id"])) == "" {
 		t.Fatalf("expected moved folder to preserve stable id, got %#v", folderPayload["id"])
 	}
@@ -505,7 +573,7 @@ func TestMoveProjectTreeFolderOnDiskMovesFolderToNewParent(t *testing.T) {
 		t.Fatalf("unexpected moved path: %s", movedPath)
 	}
 
-	folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(movedPath), "folder.json"))
+	folderPayload := readStructuredFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(movedPath), posixFolderFileName))
 	if folderPayload["name"] != "Docs" {
 		t.Fatalf("expected moved folder name Docs, got %#v", folderPayload["name"])
 	}
@@ -622,7 +690,7 @@ func asStringForTest(value any) string {
 	return text
 }
 
-func readJSONFileForTest[T any](t *testing.T, path string) T {
+func readStructuredFileForTest[T any](t *testing.T, path string) T {
 	t.Helper()
 
 	data, err := os.ReadFile(path)
@@ -630,9 +698,37 @@ func readJSONFileForTest[T any](t *testing.T, path string) T {
 		t.Fatalf("read %s: %v", path, err)
 	}
 
+	var raw any
+	switch strings.ToLower(filepath.Ext(path)) {
+	case ".cbor":
+		if err := cbor.Unmarshal(data, &raw); err != nil {
+			t.Fatalf("unmarshal %s: %v", path, err)
+		}
+	case ".json":
+		if err := json.Unmarshal(data, &raw); err != nil {
+			t.Fatalf("unmarshal %s: %v", path, err)
+		}
+	case ".jsonc":
+		ast, err := hujson.Parse(data)
+		if err != nil {
+			t.Fatalf("parse jsonc %s: %v", path, err)
+		}
+		ast.Standardize()
+		if err := json.Unmarshal(ast.Pack(), &raw); err != nil {
+			t.Fatalf("unmarshal standardized %s: %v", path, err)
+		}
+	default:
+		t.Fatalf("unsupported structured test file %s", path)
+	}
+
+	normalizedBytes, err := json.Marshal(normalizeStructuredValue(raw))
+	if err != nil {
+		t.Fatalf("normalize %s: %v", path, err)
+	}
+
 	var payload T
-	if err := json.Unmarshal(data, &payload); err != nil {
-		t.Fatalf("unmarshal %s: %v", path, err)
+	if err := json.Unmarshal(normalizedBytes, &payload); err != nil {
+		t.Fatalf("decode normalized %s: %v", path, err)
 	}
 
 	return payload

Backend/internal/bootstrap/settings_theme.go

@@ -0,0 +1,111 @@
+package bootstrap
+
+import (
+	"context"
+	"errors"
+	"fmt"
+	"path/filepath"
+	"strings"
+
+	"github.com/jackc/pgx/v5"
+)
+
+const defaultThemePresetID = "moku-midnight"
+
+func personalSettingsPathForDisplayName(displayName string) string {
+	personalName := strings.TrimSpace(displayName)
+	if personalName == "" {
+		personalName = defaultPersonalDisplayName
+	}
+
+	personalSlug := normalizePOSIXSlug(personalName)
+	return filepath.ToSlash(filepath.Join("users", "personals", slugDir("personal", personalSlug), posixSettingsFileName))
+}
+
+func extractThemePresetID(settings map[string]any) string {
+	theme, ok := settings["theme"].(map[string]any)
+	if !ok {
+		return ""
+	}
+
+	presetID, _ := theme["presetId"].(string)
+	return strings.TrimSpace(presetID)
+}
+
+func applyThemePresetToSettings(settings map[string]any, presetID string) map[string]any {
+	normalized := settings
+	if normalized == nil {
+		normalized = map[string]any{}
+	}
+
+	theme, ok := normalized["theme"].(map[string]any)
+	if !ok || theme == nil {
+		theme = map[string]any{}
+	}
+
+	theme["presetId"] = presetID
+	normalized["theme"] = theme
+	return normalized
+}
+
+func (service *Service) SaveThemePreset(ctx context.Context, input SaveThemePresetInput) (*AdminRecord, error) {
+	admin, err := service.GetAdmin(ctx)
+	if err != nil {
+		return nil, err
+	}
+	if admin == nil {
+		return nil, ErrAdminNotConfigured
+	}
+
+	presetID := strings.TrimSpace(input.PresetID)
+	if presetID == "" {
+		return nil, fmt.Errorf("theme preset id is required")
+	}
+
+	rootPath := strings.TrimSpace(service.posixRoot)
+	if rootPath == "" {
+		return nil, fmt.Errorf("posix root is not configured")
+	}
+
+	relativeSettingsPath := personalSettingsPathForDisplayName(admin.DisplayName)
+	absoluteSettingsPath := filepath.Join(rootPath, filepath.FromSlash(relativeSettingsPath))
+	settings := readStructuredFileMap(absoluteSettingsPath)
+	if len(settings) == 0 {
+		return nil, fmt.Errorf("personal settings file is missing")
+	}
+
+	updatedSettings := applyThemePresetToSettings(settings, presetID)
+	if err := writeCBORFile(absoluteSettingsPath, updatedSettings); err != nil {
+		return nil, fmt.Errorf("write personal %s: %w", posixSettingsFileName, err)
+	}
+
+	if err := service.rebuildProjection(ctx); err != nil {
+		return nil, err
+	}
+
+	return service.GetAdmin(ctx)
+}
+
+func (service *Service) loadAdminThemePresetID(ctx context.Context, displayName string) (string, error) {
+	path := personalSettingsPathForDisplayName(displayName)
+
+	var presetID *string
+	err := service.db.Pool.QueryRow(ctx, `
+		SELECT content_json->'theme'->>'presetId'
+		FROM posix_nodes
+		WHERE path = $1
+		LIMIT 1;
+	`, path).Scan(&presetID)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return "", nil
+		}
+		return "", err
+	}
+
+	if presetID == nil {
+		return "", nil
+	}
+
+	return strings.TrimSpace(*presetID), nil
+}

Backend/internal/httpx/api_routes.go

@@ -31,6 +31,7 @@ func (routes apiRoutes) Register(router chi.Router) {
 			bootstrapRouter.Post("/structure", routes.handleBootstrapStructureStep)
 		})
 		apiRouter.Get("/app-shell", routes.handleAppShellState)
+		apiRouter.Put("/settings/theme", routes.handleSaveThemePreset)
 		apiRouter.Get("/organizations", routes.handleOrganizations)
 		apiRouter.Get("/workspaces", routes.handleWorkspaces)
 		apiRouter.Route("/projects/{projectId}", func(projectRouter chi.Router) {

Backend/internal/httpx/api_settings_routes.go

@@ -0,0 +1,43 @@
+package httpx
+
+import (
+	"net/http"
+	"strings"
+
+	bootstrapservice "moku-backend/internal/bootstrap"
+)
+
+type saveThemePresetRequest struct {
+	PresetID string `json:"presetId"`
+}
+
+func (routes apiRoutes) handleSaveThemePreset(w http.ResponseWriter, r *http.Request) {
+	payload, ok := decodeBootstrapRequest[saveThemePresetRequest](w, r)
+	if !ok {
+		return
+	}
+
+	payload.PresetID = strings.TrimSpace(payload.PresetID)
+	if payload.PresetID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Theme preset ID is required.")
+		return
+	}
+
+	admin, err := routes.bootstrapService().SaveThemePreset(r.Context(), bootstrapservice.SaveThemePresetInput{
+		PresetID: payload.PresetID,
+	})
+	if err != nil {
+		routes.writeBootstrapPersistenceError(w, r, err)
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": map[string]any{
+			"presetId": payload.PresetID,
+			"admin":    admin,
+		},
+		"meta": map[string]any{
+			"resource": "settings-theme",
+		},
+	})
+}

Backend/internal/posixproj/projector_classify.go

@@ -28,8 +28,10 @@ func deriveScope(relPath string, rootScope Scope) Scope {
 func classifyPath(relPath string, isDir bool) (logicalType, fileRole string) {
 	parts := strings.Split(relPath, "/")
 	name := parts[len(parts)-1]
+	ext := strings.ToLower(filepath.Ext(name))
+	structuredRole := strings.TrimSuffix(name, filepath.Ext(name))
 	if !isDir {
-		fileRole = strings.TrimSuffix(name, filepath.Ext(name))
+		fileRole = structuredRole
 	}
 
 	hasChildrenAncestor := pathContainsSegment(parts, "children")
@@ -40,9 +42,9 @@ func classifyPath(relPath string, isDir bool) (logicalType, fileRole string) {
 	}
 
 	switch {
-	case relPath == "settings.json":
+	case !isDir && structuredRole == "settings" && len(parts) == 1 && ext == ".cbor":
 		return "tenant", "settings"
-	case relPath == "layout.json":
+	case !isDir && structuredRole == "layout" && len(parts) == 1 && ext == ".cbor":
 		return "tenant", "layout"
 	case len(parts) >= 1 && parts[0] == "catalog":
 		if isDir {
@@ -50,60 +52,110 @@ func classifyPath(relPath string, isDir bool) (logicalType, fileRole string) {
 				return "catalog", ""
 			}
 			if len(parts) >= 2 && parts[1] == "packs" {
-				if len(parts) == 2 { return "catalog_packs", "" }
-				if len(parts) == 3 { return "catalog_pack", "" }
-				if len(parts) >= 4 && parts[3] == "entries" { return "catalog_pack_entries", "" }
+				if len(parts) == 2 {
+					return "catalog_packs", ""
+				}
+				if len(parts) == 3 {
+					return "catalog_pack", ""
+				}
+				if len(parts) >= 4 && parts[3] == "entries" {
+					return "catalog_pack_entries", ""
+				}
 				return "catalog_entry", ""
 			}
 			if len(parts) >= 2 && parts[1] == "standalone" {
-				if len(parts) == 2 { return "catalog_standalone", "" }
+				if len(parts) == 2 {
+					return "catalog_standalone", ""
+				}
 				return "catalog_entry", ""
 			}
 		}
 		return "catalog", fileRole
 	case len(parts) >= 2 && parts[0] == "departments" && strings.HasPrefix(parts[1], "department-"):
 		if isDir {
-			if len(parts) == 2 { return "department", "" }
-			if len(parts) == 3 && parts[2] == "teams" { return "department_teams", "" }
-			if len(parts) >= 4 && strings.HasPrefix(parts[3], "team-") { return "team", "" }
+			if len(parts) == 2 {
+				return "department", ""
+			}
+			if len(parts) == 3 && parts[2] == "teams" {
+				return "department_teams", ""
+			}
+			if len(parts) >= 4 && strings.HasPrefix(parts[3], "team-") {
+				return "team", ""
+			}
+		}
+		if len(parts) >= 4 && strings.HasPrefix(parts[3], "team-") {
+			return "team", fileRole
 		}
-		if len(parts) >= 4 && strings.HasPrefix(parts[3], "team-") { return "team", fileRole }
 		return "department", fileRole
 	case len(parts) >= 2 && parts[0] == "projects" && strings.HasPrefix(parts[1], "project-"):
 		if isDir {
-			if strings.HasPrefix(name, "project-") { return "project", "" }
-			if name == "children" { return "project_children", "" }
-			if name == "tree" { return "project_tree", "" }
-			if hasChildrenAncestor && strings.HasPrefix(name, "folder-") { return "hierarchy_folder", "" }
-			if hasTreeAncestor && strings.HasPrefix(name, "folder-") { return "hierarchy_folder", "" }
-			if hasTreeAncestor && strings.HasPrefix(name, "item-") { return "item", "" }
+			if strings.HasPrefix(name, "project-") {
+				return "project", ""
+			}
+			if name == "children" {
+				return "project_children", ""
+			}
+			if name == "tree" {
+				return "project_tree", ""
+			}
+			if hasChildrenAncestor && strings.HasPrefix(name, "folder-") {
+				return "hierarchy_folder", ""
+			}
+			if hasTreeAncestor && strings.HasPrefix(name, "folder-") {
+				return "hierarchy_folder", ""
+			}
+			if hasTreeAncestor && strings.HasPrefix(name, "item-") {
+				return "item", ""
+			}
+		}
+		if hasChildrenAncestor && strings.HasPrefix(parentName, "folder-") {
+			return "hierarchy_folder", fileRole
 		}
-		if hasChildrenAncestor && strings.HasPrefix(parentName, "folder-") { return "hierarchy_folder", fileRole }
 		if hasTreeAncestor {
-			if strings.HasPrefix(parentName, "item-") { return "item", fileRole }
-			if strings.HasPrefix(parentName, "folder-") { return "hierarchy_folder", fileRole }
+			if strings.HasPrefix(parentName, "item-") {
+				return "item", fileRole
+			}
+			if strings.HasPrefix(parentName, "folder-") {
+				return "hierarchy_folder", fileRole
+			}
 		}
 		return "project", fileRole
 	case len(parts) >= 1 && parts[0] == "users":
 		if isDir {
-			if len(parts) == 1 { return "users", "" }
-			if len(parts) == 2 && parts[1] == "personals" { return "personals", "" }
-			if len(parts) >= 3 && parts[1] == "personals" && strings.HasPrefix(parts[2], "personal-") { return "personal", "" }
+			if len(parts) == 1 {
+				return "users", ""
+			}
+			if len(parts) == 2 && parts[1] == "personals" {
+				return "personals", ""
+			}
+			if len(parts) >= 3 && parts[1] == "personals" && strings.HasPrefix(parts[2], "personal-") {
+				return "personal", ""
+			}
 			if strings.Contains(relPath, "/tree/") || strings.HasSuffix(relPath, "/tree") {
-				if strings.HasPrefix(name, "folder-") { return "folder", "" }
-				if strings.HasPrefix(name, "item-") { return "item", "" }
+				if strings.HasPrefix(name, "folder-") {
+					return "folder", ""
+				}
+				if strings.HasPrefix(name, "item-") {
+					return "item", ""
+				}
 			}
 		}
 		if len(parts) >= 3 && parts[1] == "personals" && strings.HasPrefix(parts[2], "personal-") {
 			if strings.Contains(relPath, "/tree/") {
-				if strings.HasPrefix(parts[len(parts)-2], "item-") { return "item", fileRole }
-				if strings.HasPrefix(parts[len(parts)-2], "folder-") { return "folder", fileRole }
+				if strings.HasPrefix(parts[len(parts)-2], "item-") {
+					return "item", fileRole
+				}
+				if strings.HasPrefix(parts[len(parts)-2], "folder-") {
+					return "folder", fileRole
+				}
 			}
 			return "personal", fileRole
 		}
 		return "users", fileRole
 	default:
-		if isDir { return "directory", "" }
+		if isDir {
+			return "directory", ""
+		}
 		return "file", fileRole
 	}
 }

Backend/internal/posixproj/projector_scan.go

@@ -11,6 +11,13 @@ import (
 	"os"
 	"path/filepath"
 	"strings"
+
+	"github.com/fxamacker/cbor/v2"
+	"github.com/tailscale/hujson"
+)
+
+const (
+	settingsCBORPath = "settings.cbor"
 )
 
 func ScanRoot(root string) ([]Node, error) {
@@ -77,18 +84,21 @@ func ScanRoot(root string) ([]Node, error) {
 }
 
 func loadRootScope(rootPath string) (Scope, error) {
-	settingsPath := filepath.Join(rootPath, "settings.json")
+	settingsPath := filepath.Join(rootPath, settingsCBORPath)
 	content, err := os.ReadFile(settingsPath)
 	if err != nil {
 		if errorsIsNotExist(err) {
 			return Scope{}, nil
 		}
-		return Scope{}, fmt.Errorf("read root settings.json: %w", err)
+		return Scope{}, fmt.Errorf("read root %s: %w", filepath.Base(settingsPath), err)
 	}
 
-	var payload map[string]any
-	if err := json.Unmarshal(content, &payload); err != nil {
-		return Scope{}, fmt.Errorf("decode root settings.json: %w", err)
+	payload, err := decodeStructuredMap(settingsPath, content)
+	if err != nil {
+		return Scope{}, fmt.Errorf("decode root %s: %w", filepath.Base(settingsPath), err)
+	}
+	if len(payload) == 0 {
+		return Scope{}, nil
 	}
 
 	installation, _ := payload["installation"].(map[string]any)
@@ -138,9 +148,9 @@ func buildNode(rootPath, relPath string, entry fs.DirEntry, rootScope Scope) (No
 	node.SizeBytes = int64(len(content))
 	node.Checksum = hex.EncodeToString(hash[:])
 
-	if strings.EqualFold(filepath.Ext(entry.Name()), ".json") {
-		var payload map[string]any
-		if err := json.Unmarshal(content, &payload); err == nil {
+	if isStructuredProjectionFile(entry.Name()) {
+		payload, err := decodeStructuredMap(absPath, content)
+		if err == nil {
 			jsonContent, err := json.Marshal(payload)
 			if err != nil {
 				return Node{}, fmt.Errorf("remarshal POSIX file %s: %w", relPath, err)
@@ -171,6 +181,84 @@ func buildNode(rootPath, relPath string, entry fs.DirEntry, rootScope Scope) (No
 	return node, nil
 }
 
+func isStructuredProjectionFile(name string) bool {
+	switch strings.ToLower(filepath.Ext(name)) {
+	case ".json", ".jsonc", ".cbor":
+		return true
+	default:
+		return false
+	}
+}
+
+func decodeStructuredMap(path string, content []byte) (map[string]any, error) {
+	var payload any
+	switch strings.ToLower(filepath.Ext(path)) {
+	case ".cbor":
+		if err := cbor.Unmarshal(content, &payload); err != nil {
+			return nil, err
+		}
+	case ".json":
+		if err := json.Unmarshal(content, &payload); err != nil {
+			return nil, err
+		}
+	case ".jsonc":
+		decoded, err := decodeJSONCToAny(content)
+		if err != nil {
+			return nil, err
+		}
+		payload = decoded
+	default:
+		return nil, fmt.Errorf("unsupported structured file extension %q", filepath.Ext(path))
+	}
+	if payload == nil {
+		return map[string]any{}, nil
+	}
+	normalized, ok := normalizeStructuredValue(payload).(map[string]any)
+	if !ok || normalized == nil {
+		return map[string]any{}, nil
+	}
+	return normalized, nil
+}
+
+func decodeJSONCToAny(content []byte) (any, error) {
+	ast, err := hujson.Parse(content)
+	if err != nil {
+		return nil, err
+	}
+	ast.Standardize()
+	standardized := ast.Pack()
+	var payload any
+	if err := json.Unmarshal(standardized, &payload); err != nil {
+		return nil, err
+	}
+	return payload, nil
+}
+
+func normalizeStructuredValue(value any) any {
+	switch typed := value.(type) {
+	case map[string]any:
+		normalized := make(map[string]any, len(typed))
+		for key, child := range typed {
+			normalized[key] = normalizeStructuredValue(child)
+		}
+		return normalized
+	case map[any]any:
+		normalized := make(map[string]any, len(typed))
+		for key, child := range typed {
+			normalized[fmt.Sprint(key)] = normalizeStructuredValue(child)
+		}
+		return normalized
+	case []any:
+		normalized := make([]any, len(typed))
+		for index, child := range typed {
+			normalized[index] = normalizeStructuredValue(child)
+		}
+		return normalized
+	default:
+		return value
+	}
+}
+
 func summarizeNodes(nodes []Node) RebuildSummary {
 	summary := RebuildSummary{TotalNodes: len(nodes)}
 	for _, node := range nodes {

Backend/internal/posixproj/projector_test.go

@@ -7,6 +7,21 @@ import (
 	"os"
 	"path/filepath"
 	"testing"
+
+	"github.com/fxamacker/cbor/v2"
+)
+
+const (
+	testSettingsFileName = "settings.cbor"
+	testLayoutFileName   = "layout.cbor"
+	testHomeFileName     = "home.cbor"
+	testUsersFileName    = "users.cbor"
+	testACLFileName      = "acl.cbor"
+	testFolderFileName   = "folder.cbor"
+	testItemFileName     = "item.cbor"
+	testDataFileName     = "data.cbor"
+	testSchemaFileName   = "schema.json"
+	testManifestFileName = "manifest.jsonc"
 )
 
 func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
@@ -14,6 +29,8 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 
 	mustMkdirAll(t, filepath.Join(root, "catalog", "packs"))
 	mustMkdirAll(t, filepath.Join(root, "catalog", "standalone"))
+	mustMkdirAll(t, filepath.Join(root, "catalog", "packs", "pack-core", "entries", "app-shell"))
+	mustMkdirAll(t, filepath.Join(root, "catalog", "standalone", "app-shell"))
 	mustMkdirAll(t, filepath.Join(root, "departments", "department-primary-department", "teams", "team-primary-team"))
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "children"))
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "tree"))
@@ -22,7 +39,7 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap"))
 	mustMkdirAll(t, filepath.Join(root, "users", "personals"))
 
-	mustWriteJSON(t, filepath.Join(root, "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, testSettingsFileName), map[string]any{
 		"installation": map[string]any{
 			"id":             "installation-1",
 			"name":           "MangoPig",
@@ -34,81 +51,103 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 			"slug": "primary-organization",
 		},
 	})
-	mustWriteJSON(t, filepath.Join(root, "layout.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, testLayoutFileName), map[string]any{
 		"type": "tenant-layout",
 		"home": map[string]any{"defaultProjectSlug": "primary-project"},
 	})
-	mustWriteJSON(t, filepath.Join(root, "departments", "department-primary-department", "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "catalog", "packs", "pack-core", testManifestFileName), map[string]any{
+		"id":      "pack-core",
+		"slug":    "core",
+		"type":    "pack",
+		"name":    "Core Pack",
+		"entries": []map[string]any{{"slug": "app-shell", "path": "entries/app-shell"}},
+	})
+	mustWriteStructured(t, filepath.Join(root, "catalog", "packs", "pack-core", "entries", "app-shell", testManifestFileName), map[string]any{
+		"id":   "app-shell",
+		"slug": "app-shell",
+		"type": "app",
+		"runtime": map[string]any{
+			"kind": "route",
+			"path": "/v1/app-shell",
+		},
+	})
+	mustWriteStructured(t, filepath.Join(root, "catalog", "standalone", "app-shell", testManifestFileName), map[string]any{
+		"id":     "app-shell",
+		"slug":   "app-shell",
+		"type":   "app",
+		"source": "standalone",
+	})
+	mustWriteStructured(t, filepath.Join(root, "departments", "department-primary-department", testSettingsFileName), map[string]any{
 		"id":   "dept-1",
 		"name": "Primary Department",
 		"slug": "primary-department",
 		"type": "department",
 	})
-	mustWriteJSON(t, filepath.Join(root, "departments", "department-primary-department", "users.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "departments", "department-primary-department", testUsersFileName), map[string]any{
 		"users": []map[string]any{{"id": "admin-1"}},
 	})
-	mustWriteJSON(t, filepath.Join(root, "departments", "department-primary-department", "teams", "team-primary-team", "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "departments", "department-primary-department", "teams", "team-primary-team", testSettingsFileName), map[string]any{
 		"id":   "team-1",
 		"name": "Primary Team",
 		"slug": "primary-team",
 		"type": "team",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", testSettingsFileName), map[string]any{
 		"id":   "project-1",
 		"name": "Primary Project",
 		"slug": "primary-project",
 		"type": "project",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "home.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", testHomeFileName), map[string]any{
 		"type":    "project-home",
 		"project": "primary-project",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "acl.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", testACLFileName), map[string]any{
 		"inherits": true,
 		"rules":    []any{},
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "folder.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", testFolderFileName), map[string]any{
 		"name": "Design",
 		"slug": "design",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "acl.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", testACLFileName), map[string]any{
 		"inherits": true,
 		"rules":    []any{},
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", testSettingsFileName), map[string]any{
 		"id":   "project-2",
 		"name": "Web Project",
 		"slug": "web",
 		"type": "project",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "home.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", testHomeFileName), map[string]any{
 		"type":    "project-home",
 		"project": "web",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "acl.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", testACLFileName), map[string]any{
 		"inherits": true,
 		"rules":    []any{},
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "folder.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", testFolderFileName), map[string]any{
 		"name": "Docs",
 		"slug": "docs",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", "item.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", testItemFileName), map[string]any{
 		"id":   "item-1",
 		"name": "Roadmap",
 		"slug": "roadmap",
 		"type": "board",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", "schema.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", testSchemaFileName), map[string]any{
 		"type": "object",
 	})
-	mustWriteJSON(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", "data.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", testDataFileName), map[string]any{
 		"title": "Roadmap",
 	})
-	mustWriteJSON(t, filepath.Join(root, "users", "settings.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "users", testSettingsFileName), map[string]any{
 		"primaryAdminId": "admin-1",
 	})
-	mustWriteJSON(t, filepath.Join(root, "users", "data.json"), map[string]any{
+	mustWriteStructured(t, filepath.Join(root, "users", testDataFileName), map[string]any{
 		"users": []map[string]any{{"id": "admin-1", "email": "ronald@example.com"}},
 	})
 
@@ -133,7 +172,7 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("expected root organization slug primary-organization, got %q", rootNode.OrganizationSlug)
 	}
 
-	tenantSettings := index["settings.json"]
+	tenantSettings := index[testSettingsFileName]
 	if tenantSettings.LogicalType != "tenant" || tenantSettings.FileRole != "settings" {
 		t.Fatalf("unexpected tenant settings classification: %#v", tenantSettings)
 	}
@@ -141,7 +180,31 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("expected installation id installation-1, got %q", tenantSettings.InstallationID)
 	}
 
-	deptSettings := index["departments/department-primary-department/settings.json"]
+	packManifest := index[filepath.ToSlash(filepath.Join("catalog", "packs", "pack-core", testManifestFileName))]
+	if packManifest.LogicalType != "catalog" || packManifest.FileRole != "manifest" {
+		t.Fatalf("unexpected pack manifest classification: %#v", packManifest)
+	}
+	if packManifest.ResourceSlug != "core" {
+		t.Fatalf("expected pack manifest resource slug core, got %q", packManifest.ResourceSlug)
+	}
+
+	entryManifest := index[filepath.ToSlash(filepath.Join("catalog", "packs", "pack-core", "entries", "app-shell", testManifestFileName))]
+	if entryManifest.LogicalType != "catalog" || entryManifest.FileRole != "manifest" {
+		t.Fatalf("unexpected catalog entry manifest classification: %#v", entryManifest)
+	}
+	if entryManifest.ResourceID != "app-shell" {
+		t.Fatalf("expected catalog entry manifest resource id app-shell, got %q", entryManifest.ResourceID)
+	}
+
+	standaloneManifest := index[filepath.ToSlash(filepath.Join("catalog", "standalone", "app-shell", testManifestFileName))]
+	if standaloneManifest.LogicalType != "catalog" || standaloneManifest.FileRole != "manifest" {
+		t.Fatalf("unexpected standalone manifest classification: %#v", standaloneManifest)
+	}
+	if standaloneManifest.ResourceSlug != "app-shell" {
+		t.Fatalf("expected standalone manifest resource slug app-shell, got %q", standaloneManifest.ResourceSlug)
+	}
+
+	deptSettings := index[filepath.ToSlash(filepath.Join("departments", "department-primary-department", testSettingsFileName))]
 	if deptSettings.DepartmentSlug != "primary-department" {
 		t.Fatalf("expected department slug primary-department, got %q", deptSettings.DepartmentSlug)
 	}
@@ -149,12 +212,12 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("expected department resource id dept-1, got %q", deptSettings.ResourceID)
 	}
 
-	teamSettings := index["departments/department-primary-department/teams/team-primary-team/settings.json"]
+	teamSettings := index[filepath.ToSlash(filepath.Join("departments", "department-primary-department", "teams", "team-primary-team", testSettingsFileName))]
 	if teamSettings.TeamSlug != "primary-team" {
 		t.Fatalf("expected team slug primary-team, got %q", teamSettings.TeamSlug)
 	}
 
-	projectSettings := index["projects/project-primary-project/settings.json"]
+	projectSettings := index[filepath.ToSlash(filepath.Join("projects", "project-primary-project", testSettingsFileName))]
 	if projectSettings.ProjectSlug != "primary-project" {
 		t.Fatalf("expected project slug primary-project, got %q", projectSettings.ProjectSlug)
 	}
@@ -177,12 +240,12 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("unexpected hierarchy folder node: %#v", hierarchyFolder)
 	}
 
-	hierarchyFolderACL := index["projects/project-primary-project/children/folder-design/acl.json"]
+	hierarchyFolderACL := index[filepath.ToSlash(filepath.Join("projects", "project-primary-project", "children", "folder-design", testACLFileName))]
 	if hierarchyFolderACL.LogicalType != "hierarchy_folder" || hierarchyFolderACL.FileRole != "acl" {
 		t.Fatalf("unexpected hierarchy folder acl classification: %#v", hierarchyFolderACL)
 	}
 
-	childProjectSettings := index["projects/project-primary-project/children/folder-design/children/project-web/settings.json"]
+	childProjectSettings := index[filepath.ToSlash(filepath.Join("projects", "project-primary-project", "children", "folder-design", "children", "project-web", testSettingsFileName))]
 	if childProjectSettings.LogicalType != "project" || childProjectSettings.ProjectSlug != "web" {
 		t.Fatalf("unexpected child project classification: %#v", childProjectSettings)
 	}
@@ -192,12 +255,12 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("unexpected tree folder node: %#v", treeFolder)
 	}
 
-	treeFolderACL := index["projects/project-primary-project/tree/folder-docs/folder.json"]
+	treeFolderACL := index[filepath.ToSlash(filepath.Join("projects", "project-primary-project", "tree", "folder-docs", testFolderFileName))]
 	if treeFolderACL.LogicalType != "hierarchy_folder" || treeFolderACL.FileRole != "folder" {
 		t.Fatalf("unexpected tree folder file classification: %#v", treeFolderACL)
 	}
 
-	treeItem := index["projects/project-primary-project/tree/folder-docs/item-roadmap/item.json"]
+	treeItem := index[filepath.ToSlash(filepath.Join("projects", "project-primary-project", "tree", "folder-docs", "item-roadmap", testItemFileName))]
 	if treeItem.LogicalType != "item" || treeItem.FileRole != "item" {
 		t.Fatalf("unexpected tree item classification: %#v", treeItem)
 	}
@@ -205,12 +268,12 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 		t.Fatalf("expected tree item resource slug roadmap, got %#v", treeItem.ResourceSlug)
 	}
 
-	usersData := index["users/data.json"]
+	usersData := index[filepath.ToSlash(filepath.Join("users", testDataFileName))]
 	if usersData.LogicalType != "users" || usersData.FileRole != "data" {
 		t.Fatalf("unexpected users data classification: %#v", usersData)
 	}
 	if usersData.Checksum == "" || usersData.SizeBytes == 0 {
-		t.Fatalf("expected users/data.json checksum and size to be populated: %#v", usersData)
+		t.Fatalf("expected users/%s checksum and size to be populated: %#v", testDataFileName, usersData)
 	}
 }
 
@@ -221,13 +284,32 @@ func mustMkdirAll(t *testing.T, path string) {
 	}
 }
 
-func mustWriteJSON(t *testing.T, path string, payload any) {
+func mustWriteStructured(t *testing.T, path string, payload any) {
 	t.Helper()
-	bytes, err := json.MarshalIndent(payload, "", "  ")
-	if err != nil {
-		t.Fatalf("MarshalIndent(%q) error = %v", path, err)
+	var (
+		bytes []byte
+		err   error
+	)
+	switch filepath.Ext(path) {
+	case ".cbor":
+		bytes, err = cbor.Marshal(payload)
+	case ".json":
+		bytes, err = json.MarshalIndent(payload, "", "  ")
+		if err == nil {
+			bytes = append(bytes, '\n')
+		}
+	case ".jsonc":
+		bytes, err = json.MarshalIndent(payload, "", "  ")
+		if err == nil {
+			bytes = append([]byte("// Fixture JSONC with comments and trailing commas enabled.\n"), bytes...)
+			bytes = append(bytes[:len(bytes)-2], []byte(",\n}\n")...)
+		}
+	default:
+		t.Fatalf("unsupported structured fixture file %q", path)
+	}
+	if err != nil {
+		t.Fatalf("marshal %q error = %v", path, err)
 	}
-	bytes = append(bytes, '\n')
 	if err := os.WriteFile(path, bytes, 0o644); err != nil {
 		t.Fatalf("WriteFile(%q) error = %v", path, err)
 	}

Commands/Local/Dev/backend.just

@@ -1,30 +1,39 @@
 project_root := justfile_directory()
 backend_dir := project_root + "/Backend"
+common_sh := project_root + "/Commands/Local/scripts/common.sh"
+posix_root := project_root + "/POSIX"
 
 # Apply embedded database migrations.
 migrate-up:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{backend_dir}}' && go run ./cmd/migrate up
 
-# Roll back the most recent embedded database migration.
+# Roll back the most recent embedded database migration (confirmation required).
 migrate-down:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will roll back the most recent embedded database migration. Continue?"'
 	cd '{{backend_dir}}' && go run ./cmd/migrate down
 
-# Reset all embedded database migrations.
+# Reset all embedded database migrations (confirmation required).
 migrate-reset:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will reset all embedded database migrations. Continue?"'
 	cd '{{backend_dir}}' && go run ./cmd/migrate reset
 
-# Reset embedded database migrations and apply them again from scratch.
+# Reset embedded database migrations and apply them again from scratch (confirmation required).
 migrate-rebuild:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will reset all embedded database migrations and reapply them from scratch. Continue?"'
 	cd '{{backend_dir}}' && go run ./cmd/migrate reset && go run ./cmd/migrate up
 
 # Show the embedded database migration status.
 migrate-status:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{backend_dir}}' && go run ./cmd/migrate status
 
 # Rebuild the POSIX-to-DB projection from the current POSIX root.
 posix-rebuild:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{backend_dir}}' && go run ./cmd/posix rebuild
 
 # Format backend Go source files.
 fmt:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{backend_dir}}' && gofmt -w ./cmd ./db ./internal

Commands/Local/Dev/frontend.just

@@ -2,13 +2,17 @@ project_root := justfile_directory()
 local_compose := project_root + "/Docker/docker-compose.local.dev.yaml"
 frontend_dir := project_root + "/Frontend"
 node_modules_volume := "moku_work_frontend_node_modules"
+common_sh := project_root + "/Commands/Local/scripts/common.sh"
+posix_root := project_root + "/POSIX"
 
-# Recreate the frontend node_modules Docker volume.
+# Recreate the frontend node_modules Docker volume (confirmation required).
 node_modules:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will recreate the frontend node_modules Docker volume. Continue?"'
 	docker compose -f '{{local_compose}}' rm -sf frontend >/dev/null 2>&1 || true
 	docker volume rm -f '{{node_modules_volume}}' >/dev/null 2>&1 || true
 	docker compose -f '{{local_compose}}' up -d --remove-orphans --force-recreate frontend
 
 # Run the frontend TypeScript check.
 tsc:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{frontend_dir}}' && pnpm typecheck

Commands/Local/Dev/mod.just

@@ -18,7 +18,7 @@ start:
 # Alias for the main full local development flow.
 dev: up
 
-# Stop and remove the local development stack.
+# Stop and remove the local development stack (confirmation required).
 down:
 	bash '{{stack_runner}}' down
 
@@ -34,6 +34,6 @@ logs:
 restart:
 	bash '{{stack_runner}}' restart
 
-# Stop the local development stack and remove local images, volumes, and backend dev state.
+# Stop the local development stack and remove local images, volumes, backend dev state, and the local POSIX folder (confirmation required).
 clean:
 	bash '{{stack_runner}}' clean

Commands/Local/Dev/scripts/backend-stack.sh

@@ -7,6 +7,7 @@ action=${1:-up}
 
 script_dir=$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)
 project_root=$(cd -- "$script_dir/../../../.." && pwd)
+posix_root="$project_root/POSIX"
 backend_dir="$project_root/Backend"
 backend_bake="$backend_dir/docker-bake.hcl"
 env_dir="$project_root/Env"
@@ -15,11 +16,14 @@ runtime_dir="$backend_dir/tmp/dev"
 backend_image="moku/work-backend:dev"
 backend_go_pkg_volume="moku_work_backend_go_pkg"
 backend_go_build_volume="moku_work_backend_go_build"
+local_uid=$(id -u)
+local_gid=$(id -g)
 
 services=(web api worker)
 
 source "$script_dir/docker.sh"
 source "$script_dir/env.sh"
+source "$project_root/Commands/Local/scripts/common.sh"
 
 build_backend() {
 	cd "$backend_dir"
@@ -27,20 +31,20 @@ build_backend() {
 }
 
 up_backend() {
-	docker compose -f "$compose_file" up -d --remove-orphans --force-recreate "${services[@]}"
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" up -d --remove-orphans --force-recreate "${services[@]}"
 }
 
 down_backend() {
-	docker compose -f "$compose_file" stop "${services[@]}" >/dev/null 2>&1 || true
-	docker compose -f "$compose_file" rm -f "${services[@]}" >/dev/null 2>&1 || true
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" stop "${services[@]}" >/dev/null 2>&1 || true
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" rm -f "${services[@]}" >/dev/null 2>&1 || true
 }
 
 restart_backend() {
-	docker compose -f "$compose_file" restart "${services[@]}"
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" restart "${services[@]}"
 }
 
 follow_logs() {
-	docker compose -f "$compose_file" logs -f "${services[@]}"
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" logs -f "${services[@]}"
 }
 
 clean_runtime() {
@@ -50,34 +54,44 @@ clean_runtime() {
 case "$action" in
 	check)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
+		ensure_posix_root "$project_root" "$posix_root"
 		;;
 	build)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
+		ensure_posix_root "$project_root" "$posix_root"
 		build_backend
 		;;
 	up)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
 		up_backend
+		run_compose_api_migrations "$compose_file" "api"
 		;;
 	down)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
+		confirm_destructive_action 'This will stop and remove the local backend dev containers. Continue?'
 		down_backend
 		;;
 	restart)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
 		restart_backend
 		;;
 	logs)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
 		follow_logs
 		;;
 	clean)
 		ensure_docker 'docker is required for the local backend dev runtime. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
+		confirm_destructive_action 'This will remove the local backend dev containers, images, volumes, and runtime state. Continue?'
 		down_backend
 		remove_docker_image_if_present "$backend_image"
 		remove_docker_volume_if_present "$backend_go_pkg_volume"

Commands/Local/Dev/scripts/dev-stack.sh

@@ -7,12 +7,15 @@ action=${1:-up}
 
 script_dir=$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd)
 project_root=$(cd -- "$script_dir/../../../.." && pwd)
+posix_root="$project_root/POSIX"
 frontend_dir="$project_root/Frontend"
 frontend_bake="$frontend_dir/docker-bake.hcl"
 backend_dir="$project_root/Backend"
 backend_bake="$backend_dir/docker-bake.hcl"
 env_dir="$project_root/Env"
 compose_file="$project_root/Docker/docker-compose.local.dev.yaml"
+local_uid=$(id -u)
+local_gid=$(id -g)
 frontend_image="moku/work-frontend:dev"
 backend_image="moku/work-backend:dev"
 frontend_volume="moku_work_frontend_node_modules"
@@ -22,6 +25,7 @@ backend_runtime_dir="$backend_dir/tmp/dev"
 
 source "$script_dir/docker.sh"
 source "$script_dir/env.sh"
+source "$project_root/Commands/Local/scripts/common.sh"
 
 build_frontend() {
 	cd "$frontend_dir"
@@ -39,19 +43,19 @@ build_images() {
 }
 
 up_stack() {
-	docker compose -f "$compose_file" up -d --remove-orphans --force-recreate
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" up -d --remove-orphans --force-recreate
 }
 
 down_stack() {
-	docker compose -f "$compose_file" down --remove-orphans --volumes
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" down --remove-orphans --volumes
 }
 
 follow_logs() {
-	docker compose -f "$compose_file" logs -f
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" logs -f
 }
 
 clean_stack() {
-	docker compose -f "$compose_file" down --remove-orphans --volumes >/dev/null 2>&1 || true
+	LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" down --remove-orphans --volumes >/dev/null 2>&1 || true
 	remove_docker_image_if_present "$frontend_image"
 	remove_docker_image_if_present "$backend_image"
 	remove_docker_volume_if_present "$frontend_volume"
@@ -63,37 +67,47 @@ clean_stack() {
 start_stack() {
 	build_images
 	up_stack
+	run_compose_api_migrations "$compose_file" "api"
 }
 
 case "$action" in
 	build)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
+		ensure_posix_root "$project_root" "$posix_root"
 		build_images
 		;;
 	up|start|rebuild)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
 		start_stack
 		;;
 	down)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
+		confirm_destructive_action 'This will stop the local development stack and remove its containers and volumes. Continue?'
 		down_stack
 		;;
 	restart)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
 		ensure_local_env_file "$env_dir"
-		docker compose -f "$compose_file" restart
+		ensure_posix_root "$project_root" "$posix_root"
+		LOCAL_UID="$local_uid" LOCAL_GID="$local_gid" docker compose -f "$compose_file" restart
 		;;
 	logs)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
 		follow_logs
 		;;
 	clean)
 		ensure_docker 'docker is required for the local development stack. Install Docker first.'
 		ensure_local_env_file "$env_dir"
+		ensure_posix_root "$project_root" "$posix_root"
+		confirm_destructive_action 'This will remove the local development stack, local images, volumes, backend dev state, and the local POSIX folder. Continue?'
 		clean_stack
+		rm -rf "$posix_root"
 		;;
 	*)
 		printf 'Unsupported dev stack action: %s\n' "$action" >&2

Commands/Local/prod.just

@@ -5,40 +5,49 @@ local_compose := project_root + "/Docker/docker-compose.local.prod.yaml"
 proxy_image := "moku/work-proxy:local-prod"
 backend_api_image := "moku/work-backend:local-prod-api"
 backend_worker_image := "moku/work-backend:local-prod-worker"
+common_sh := project_root + "/Commands/Local/scripts/common.sh"
+posix_root := project_root + "/POSIX"
 
 # Build the local production proxy image locally.
 build:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{project_root}}' && docker buildx bake -f '{{proxy_bake}}' prod
 	cd '{{project_root}}' && docker buildx bake -f '{{backend_bake}}' prod-api prod-worker
 
 # Start the local production stack in the background using the current image.
 up:
-	docker compose -f '{{local_compose}}' up -d --remove-orphans --force-recreate
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' up -d --remove-orphans --force-recreate
 
 # Build first, then start the local production stack in the background.
 start: build up
 
 # Rebuild the local production proxy image locally.
 rebuild:
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
 	cd '{{project_root}}' && docker buildx bake -f '{{proxy_bake}}' --set '*.no-cache=true' prod
 	cd '{{project_root}}' && docker buildx bake -f '{{backend_bake}}' --set '*.no-cache=true' prod-api prod-worker
-	docker compose -f '{{local_compose}}' up -d --remove-orphans --force-recreate
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' up -d --remove-orphans --force-recreate
 
-# Stop and remove the local production stack.
+# Stop and remove the local production stack (confirmation required).
 down:
-	docker compose -f '{{local_compose}}' down --remove-orphans --volumes
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will stop the local production stack and remove its containers and volumes. Continue?"'
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' down --remove-orphans --volumes
 
 # Follow logs for the local production stack.
 logs:
-	docker compose -f '{{local_compose}}' logs -f
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' logs -f
 
 # Restart the local production stack.
 restart:
-	docker compose -f '{{local_compose}}' restart
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"'
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' restart
 
-# Stop the local production stack and remove local images.
+# Stop the local production stack and remove local images (confirmation required).
 clean:
-	docker compose -f '{{local_compose}}' down --remove-orphans --volumes
+	bash -c 'source "{{common_sh}}"; ensure_posix_root "{{project_root}}" "{{posix_root}}"; confirm_destructive_action "This will remove the local production stack, its volumes, and the local production images. Continue?"'
+	LOCAL_UID="$$(id -u)" LOCAL_GID="$$(id -g)" docker compose -f '{{local_compose}}' down --remove-orphans --volumes
 	docker image rm -f '{{proxy_image}}' >/dev/null 2>&1 || true
 	docker image rm -f '{{backend_api_image}}' >/dev/null 2>&1 || true
 	docker image rm -f '{{backend_worker_image}}' >/dev/null 2>&1 || true

Commands/Local/scripts/common.sh

@@ -0,0 +1,65 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+ensure_posix_root() {
+	local project_root=${1:?project root is required}
+	local posix_root=${2:-"$project_root/POSIX"}
+
+	mkdir -p "$posix_root"
+}
+
+confirm_destructive_action() {
+	local prompt=${1:-Are you sure you want to continue?}
+	local response_input=""
+
+	if [[ "${JUST_YES:-0}" == "1" ]]; then
+		return 0
+	fi
+
+	if [[ -t 0 ]]; then
+		printf '%s [y/N] ' "$prompt"
+		IFS= read -r response_input
+	elif [[ -r /dev/tty ]]; then
+		printf '%s [y/N] ' "$prompt" > /dev/tty
+		IFS= read -r response_input < /dev/tty
+	else
+		printf 'Refusing destructive action without interactive confirmation. Re-run with JUST_YES=1 to continue.\n' >&2
+		exit 1
+	fi
+
+	case "$response_input" in
+		y|Y|yes|YES|Yes)
+			return 0
+			;;
+		*)
+			printf 'Aborted.\n' >&2
+			exit 1
+			;;
+	esac
+}
+
+run_compose_api_migrations() {
+	local compose_file=${1:?compose file is required}
+	local service_name=${2:-api}
+	local max_attempts=${3:-20}
+	local sleep_seconds=${4:-2}
+	local attempt=1
+	local output=""
+
+	while (( attempt <= max_attempts )); do
+		if output=$(docker compose -f "$compose_file" exec -T "$service_name" sh -lc 'export PATH="$PATH:/usr/local/go/bin"; go run ./cmd/migrate up' 2>&1); then
+			printf '%s\n' "$output"
+			return 0
+		fi
+
+		if (( attempt == max_attempts )); then
+			printf 'Failed to apply database migrations automatically after %d attempts.\n' "$max_attempts" >&2
+			printf '%s\n' "$output" >&2
+			return 1
+		fi
+
+		sleep "$sleep_seconds"
+		attempt=$((attempt + 1))
+	done
+}

Docker/docker-compose.local.dev.yaml

@@ -1,12 +1,16 @@
 x-backend-service: &backend-service
   image: moku/work-backend:dev
   restart: unless-stopped
+  user: "${LOCAL_UID:-1000}:${LOCAL_GID:-1000}"
   env_file:
     - ../Env/.env.local
   environment:
     DATABASE_URL: postgres://moku:moku_dev_password@postgres:5432/moku?sslmode=disable
     VALKEY_URL: redis://valkey:6379/0
     POSIX_ROOT: /posix
+    HOME: /tmp/home
+    GOMODCACHE: /tmp/go/pkg/mod
+    GOCACHE: /tmp/go-build
   depends_on:
     postgres:
       condition: service_healthy
@@ -15,8 +19,8 @@ x-backend-service: &backend-service
   volumes:
     - ../Backend:/app
     - ../POSIX:/posix
-    - moku_work_backend_go_pkg:/go/pkg/mod
-    - moku_work_backend_go_build:/root/.cache/go-build
+    - moku_work_backend_go_pkg:/tmp/go/pkg/mod
+    - moku_work_backend_go_build:/tmp/go-build
 
 services:
   postgres:

Docker/docker-compose.local.prod.yaml

@@ -1,5 +1,6 @@
 x-backend-service: &backend-service
   restart: unless-stopped
+  user: "${LOCAL_UID:-1000}:${LOCAL_GID:-1000}"
   env_file:
     - ../Env/.env.local
   environment:

Documentation/POSIX-Structure.md

@@ -1,75 +1,81 @@
 # POSIX Structure
 
-[Filetree Link](https://tree.nathanfriend.com/?s=(%27optiUs!(%27fancy!Yue~fullPath!fbq~YailingSlash!Yue~rootDot!fbq)~R(%27R%27PJ%20or%20OrganizatiU%20%7Bqrver%7DM*46layout6cNlog7packs7*pack37A2*enYies75W5A_standbUe7WA6HwH30LZ2teamw5teamGL5Z6FwF30LKTC058T5C7XFG5LXKXTXC7XI7I05QG5BN2*8QG5BN6Z04_dN_pJw*pJGlayout2L*KI70%27)~vEiU!%271%27)*%20%200M52_*3-%3Cslug%3E4qttings5**69M*7%2F08VG*V259.jsUA5manifestBQ25*schema25*dCchildrenEersFprojectG305HdepartmentI*YeeJEUbKhome2L*42M%5CnNataQitemRsource!Tacl2UonVfolderW*app37X55YtrZusE_90balqsews0%01wqb_ZYXWVUTRQNMLKJIHGFECBA987654320*)
+Note: regenerate the external filetree link if you want the hosted visual tree to reflect the new `.cbor` and `.jsonc` paths.
 
 ``` markdown
 Personal or Organization (server)/
-├── settings.json
-├── layout.json
+├── settings.cbor
 ├── catalog/
 │   ├── packs/
 │   │   └── pack-<slug>/
-│   │       ├── manifest.json
+│   │       ├── manifest.jsonc
 │   │       └── entries/
 │   │           └── app-<slug>/
-│   │               └── manifest.json
+│   │               └── manifest.jsonc
 │   └── standalone/
 │       └── app-<slug>/
-│           └── manifest.json
+│           └── manifest.jsonc
 ├── departments/
 │   └── department-<slug>/
-│       ├── settings.json
-│       ├── users.json
+│       ├── settings.cbor
+│       ├── users.cbor
 │       └── teams/
 │           └── team-<slug>/
-│               ├── settings.json
-│               └── users.json
+│               ├── settings.cbor
+│               └── users.cbor
 ├── projects/
 │   └── project-<slug>/
-│       ├── settings.json
-│       ├── home.json
-│       ├── acl.json
+│       ├── settings.cbor
+│       ├── home.cbor
+│       ├── acl.cbor
 │       ├── children/
 │       │   └── folder-<slug>/
-│       │       ├── folder.json
-│       │       ├── acl.json
+│       │       ├── folder.cbor
+│       │       ├── acl.cbor
 │       │       └── children/
 │       │           └── project-<slug>/
-│       │               ├── settings.json
-│       │               ├── home.json
-│       │               ├── acl.json
+│       │               ├── settings.cbor
+│       │               ├── home.cbor
+│       │               ├── acl.cbor
 │       │               ├── children/
 │       │               └── tree/
 │       └── tree/
 │           ├── item-<slug>/
-│           │   ├── item.json
+│           │   ├── item.cbor
 │           │   ├── schema.json
-│           │   └── data.json
+│           │   └── data.cbor
 │           └── folder-<slug>/
-│               ├── folder.json
+│               ├── folder.cbor
 │               └── item-<slug>/
-│                   ├── item.json
+│                   ├── item.cbor
 │                   ├── schema.json
-│                   └── data.json
+│                   └── data.cbor
 └── users/
-    ├── settings.json
-    ├── data.json
+    ├── settings.cbor
+    ├── data.cbor
     └── personals/
         └── personal-<slug>/
-            ├── layout.json
-            ├── settings.json
-            ├── home.json
+            ├── layout.cbor
+            ├── settings.cbor
+            ├── home.cbor
             └── tree/
 ```
 
 ## File Responsibilities
 
-- `settings.json` — Metadata and presentation config for the thing, such as display name, icon, description, and simple settings.
-- `layout.json` — Layout configuration for the current server or personal space.
-- `home.json` — Home surface configuration, such as widgets, sections, and how they are arranged.
-- `folder.json` — Metadata for a folder node in a tree.
-- `item.json` — Instance metadata for a created item, including what it is and how it should behave.
+- `settings.cbor` — Machine-owned metadata and presentation config for the thing, such as display name, icon, description, and simple settings.
+- `layout.cbor` — Machine-owned layout configuration for the current server or personal space.
+- `home.cbor` — Machine-owned home surface configuration, such as widgets, sections, and how they are arranged.
+- `folder.cbor` — Machine-owned metadata for a folder node in a tree.
+- `item.cbor` — Machine-owned instance metadata for a created item, including what it is and how it should behave.
 - `schema.json` — The structure expected by that item's data.
-- `data.json` — The actual content or state data for that item.
-- `manifest.json` — Catalog definition metadata, including versioning, description, and capabilities for reusable apps or entries.
-- `users.json` — User membership or assignment data for departments and teams.
+- `data.cbor` — The machine-owned content or state data for that item.
+- `manifest.jsonc` — Human-facing catalog definition metadata, including versioning, description, capabilities, and comments for reusable apps or entries.
+- `users.cbor` — Machine-owned user membership or assignment data for departments and teams.
+- `acl.cbor` — Machine-owned access control data for projects and folders.
+
+## Format Rules
+
+- Use `*.jsonc` for catalog manifests that may be authored or reviewed by humans.
+- Use `*.cbor` for machine-owned POSIX state and metadata files where parse speed, compactness, and backupability matter more than direct editability.
+- Keep `schema.json` as JSON so it remains compatible with JSON Schema tooling and validation flows.

Documentation/TODO.md

@@ -63,11 +63,11 @@
 - [ ] POSIX-Lite-File-Persistence-Foundation
   - [ ] Mounted-Storage-Root-Config
   - [ ] Project-Folder-Creation-On-Backend
-  - [ ] moku.project.json
+  - [ ] manifest.jsonc
   - [ ] Item-Folder-Creation
-  - [ ] item.json
+  - [ ] item.cbor
   - [ ] schema.json
-  - [ ] data.json
+  - [ ] data.cbor
   - [ ] DB-To-Files-Write-Flow
 - [ ] User-and-Workspace-Domain-Readiness
   - [ ] Base-Workspace

Frontend/package.json

@@ -17,6 +17,7 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@solidjs/router": "^0.16.1",
 		"@solidjs/start": "2.0.0-alpha.2",
 		"@solidjs/vite-plugin-nitro-2": "^0.1.0",
 		"lucide-solid": "^0.542.0",

Frontend/pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@solidjs/router':
+        specifier: ^0.16.1
+        version: 0.16.1(solid-js@1.9.11)
       '@solidjs/start':
         specifier: 2.0.0-alpha.2
         version: 2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))
@@ -1210,6 +1213,11 @@ packages:
     peerDependencies:
       solid-js: '>=1.8.4'
 
+  '@solidjs/router@0.16.1':
+    resolution: {integrity: sha512-IhyjedgC6LRpw/8CPGGI89FrV+r0xTHzOl2c4CRyzYQ1bLepJxbVI1LLKvsavMWY5TRBRacV7hAeOhuTXkjiqg==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
   '@solidjs/start@2.0.0-alpha.2':
     resolution: {integrity: sha512-z56ATi3P07q8F5Io2I+RQrwjyWZtFZzpXN/J+8scf/gqrAW83LtgRkZFZjJaGH7i9WrHP+ep9F+ZiJ2gDHVBcw==}
     engines: {node: '>=22'}
@@ -4485,6 +4493,10 @@ snapshots:
     dependencies:
       solid-js: 1.9.11
 
+  '@solidjs/router@0.16.1(solid-js@1.9.11)':
+    dependencies:
+      solid-js: 1.9.11
+
   '@solidjs/start@2.0.0-alpha.2(crossws@0.4.4(srvx@0.11.8))(vite@7.3.1(@types/node@25.9.3)(jiti@2.6.1)(sass-embedded@1.100.0)(sass@1.101.0)(terser@5.46.0))':
     dependencies:
       '@babel/core': 7.29.0

Frontend/public/favicon/browserconfig.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/favicon/mstile-150x150.png"/>
+            <square310x310logo src="/favicon/mstile-310x310.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

Frontend/public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Moku Work",
+    "short_name": "Moku Work",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

Frontend/src/app.tsx

@@ -1,12 +1,17 @@
 // Path: Frontend/src/app.tsx
 
-import type { JSX } from "solid-js";
-import { AppShell } from "./components/app-shell/AppShell/AppShell";
+import { Suspense, type JSX } from "solid-js";
+import { Router } from "@solidjs/router";
+import { FileRoutes } from "@solidjs/start/router";
 import "./styles/main.scss";
 import "./styles/user-overrides.scss";
 
 const App = (): JSX.Element => {
-	return <AppShell />;
+	return (
+		<Router root={(props): JSX.Element => <Suspense>{props.children}</Suspense>}>
+			<FileRoutes />
+		</Router>
+	);
 };
 
 export default App;

Frontend/src/components/app-shell/AppShell/AppShell.module.scss

@@ -95,6 +95,8 @@
   min-width: 0;
   min-height: 0;
   position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
   z-index: 1;
   border-top: 1px solid var(--shell-frame-border);
@@ -103,6 +105,14 @@
   border-top-right-radius: 0;
 }
 
+.workspaceContent {
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+  scrollbar-gutter: stable;
+}
+
 .mobileWorkspaceView {
   min-width: 0;
   min-height: 0;

Frontend/src/components/app-shell/AppShell/AppShell.tsx

@@ -1,10 +1,11 @@
 // Path: Frontend/src/components/app-shell/AppShell/AppShell.tsx
 
-import { createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
+import { useLocation } from "@solidjs/router";
+import { createEffect, createSignal, onCleanup, onMount, Show, type JSX } from "solid-js";
 import { getDocumentTheme, setTheme, type Theme } from "../../../helper/themeRuntime";
 import { BootstrapWizard } from "../../bootstrap/BootstrapWizard/BootstrapWizard";
-import { WorkspaceHome } from "../../workspace-home/WorkspaceHome";
 import { AppShellDataProvider, useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceBreadcrumbSegments, getWorkspaceDocumentTitle } from "../data/workspace-routes";
 import { LeftRail } from "../../workspace-navigation/LeftRail/LeftRail";
 import { MobileBottomNav } from "../MobileBottomNav/MobileBottomNav";
 import { MobileWorkspaceBrowser } from "../../workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser";
@@ -19,7 +20,7 @@ import styles from "./AppShell.module.scss";
 type MobileWorkspaceView = "notifications" | "profile" | null;
 const MOBILE_VIEWPORT_QUERY = "(max-width: 48rem)";
 
-const AppShellContent = (): JSX.Element => {
+const AppShellContent = (props: { children: JSX.Element }): JSX.Element => {
 	const [themeState, setThemeState] = createSignal<Theme>("light");
 	const [isRailCollapsed, setIsRailCollapsed] = createSignal(false);
 	const [isSidebarCollapsed, setIsSidebarCollapsed] = createSignal(false);
@@ -27,6 +28,7 @@ const AppShellContent = (): JSX.Element => {
 	const [isMobileWorkspaceBrowserOpen, setIsMobileWorkspaceBrowserOpen] = createSignal(false);
 	const [activeMobileWorkspaceView, setActiveMobileWorkspaceView] = createSignal<MobileWorkspaceView>(null);
 	const appShellData = useAppShellData();
+	const location = useLocation();
 
 	onMount((): void => {
 		setThemeState(getDocumentTheme());
@@ -82,7 +84,25 @@ const AppShellContent = (): JSX.Element => {
 		setActiveMobileWorkspaceView(null);
 	};
 
-	const workspaceBreadcrumb = (): string => `${appShellData.activeServer().name} / ${appShellData.activeProject().name} / Home`;
+	const workspaceBreadcrumb = (): string =>
+		[
+			appShellData.activeServer().name,
+			...getWorkspaceBreadcrumbSegments(location.pathname, {
+				activeProjectName: appShellData.activeProject().name,
+				activeDepartmentName: appShellData.activeDepartment().name,
+				activeTeamName: appShellData.activeDepartment().teamName,
+			}),
+		].join(" / ");
+
+	createEffect((): void => {
+		if (typeof document === "undefined") {
+			return;
+		}
+
+		document.title = getWorkspaceDocumentTitle(location.pathname, {
+			activeProjectName: appShellData.activeProject().name,
+		});
+	});
 
 	return (
 		<div class={styles.shell} data-ui="app-shell" data-app-shell-status={appShellData.status()}>
@@ -136,7 +156,9 @@ const AppShellContent = (): JSX.Element => {
 											setIsSidebarCollapsed((collapsed) => !collapsed);
 										}}
 									/>
-									<WorkspaceHome />
+									<div class={styles.workspaceContent} data-slot="workspace-content">
+										{props.children}
+									</div>
 								</>
 							}
 						>
@@ -175,10 +197,10 @@ const AppShellContent = (): JSX.Element => {
 	);
 };
 
-export const AppShell = (): JSX.Element => {
+export const AppShell = (props: { children: JSX.Element }): JSX.Element => {
 	return (
 		<AppShellDataProvider>
-			<AppShellContent />
+			<AppShellContent>{props.children}</AppShellContent>
 		</AppShellDataProvider>
 	);
 };

Frontend/src/components/app-shell/ServerDock/ServerDock.tsx

@@ -1,13 +1,22 @@
 // Path: Frontend/src/components/app-shell/ServerDock/ServerDock.tsx
 
 import { For, Show, type JSX } from "solid-js";
+import { useNavigate } from "@solidjs/router";
 import { useAppShellData } from "../data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../data/workspace-routes";
 import styles from "./ServerDock.module.scss";
 
 export const ServerDock = (): JSX.Element => {
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeServer = () => appShellData.activeServer();
 
+	const handleAction = (actionId: string): void => {
+		if (actionId === "settings" || actionId === "server") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+	};
+
 	return (
 		<section class={styles.panel} aria-label="Server dock" data-ui="server-dock" data-server-kind={activeServer().kind}>
 			<div class={styles.identity} data-slot="server-dock-identity">
@@ -35,7 +44,15 @@ export const ServerDock = (): JSX.Element => {
 							const Icon = item.icon;
 
 							return (
-								<button type="button" class={styles.action} aria-label={item.label} title={item.label} data-slot="server-dock-action" data-action-id={item.id}>
+								<button
+									type="button"
+									class={styles.action}
+									aria-label={item.label}
+									title={item.label}
+									data-slot="server-dock-action"
+									data-action-id={item.id}
+									onClick={() => handleAction(item.id)}
+								>
 									<Icon size={16} strokeWidth={2} />
 									<span class={styles.actionLabel}>{item.label}</span>
 								</button>

Frontend/src/components/app-shell/data/app-shell.context.tsx

@@ -1,14 +1,8 @@
 // Path: Frontend/src/components/app-shell/data/app-shell.context.tsx
 
-import {
-	createContext,
-	createMemo,
-	createSignal,
-	onMount,
-	useContext,
-	type JSX,
-} from "solid-js";
+import { createContext, createMemo, createSignal, onMount, useContext, type JSX } from "solid-js";
 import { resolveAPIBase } from "../../../lib/api";
+import { applyThemePresetById, resolvePreferredThemePresetId } from "../../../helper/themeRuntime";
 import {
 	buildActiveDepartment,
 	buildActiveProject,
@@ -56,7 +50,13 @@ export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Elem
 				throw new Error(errorMessage || "Failed to load app shell state.");
 			}
 
-			setPayload(normalizeAppShellPayload(body.data));
+			const normalizedPayload = normalizeAppShellPayload(body.data);
+			const persistedThemePresetId = normalizedPayload.admin?.themePresetId?.trim();
+			if (persistedThemePresetId && persistedThemePresetId !== resolvePreferredThemePresetId()) {
+				await applyThemePresetById(persistedThemePresetId);
+			}
+
+			setPayload(normalizedPayload);
 			setStatus("success");
 		} catch (loadError) {
 			setStatus("error");
@@ -72,6 +72,7 @@ export const AppShellDataProvider = (props: { children: JSX.Element }): JSX.Elem
 		status,
 		error,
 		installation: createMemo(() => payload()?.installation),
+		admin: createMemo(() => payload()?.admin),
 		railItems: createMemo(() => buildRailItems(payload())),
 		activeServer: createMemo(() => buildActiveServer(payload())),
 		activeProject: createMemo(() => buildActiveProject(payload())),

Frontend/src/components/app-shell/data/app-shell.types.ts

@@ -30,6 +30,7 @@ export type AppShellAdmin = {
 	displayName: string;
 	isInstanceAdmin: boolean;
 	homeTitle: string;
+	themePresetId?: string;
 };
 
 export type AppShellOrganization = {
@@ -87,6 +88,7 @@ export type AppShellContextValue = {
 	status: Accessor<"idle" | "loading" | "success" | "error">;
 	error: Accessor<string>;
 	installation: Accessor<AppShellInstallation | undefined>;
+	admin: Accessor<AppShellAdmin | undefined>;
 	railItems: Accessor<readonly RailItem[]>;
 	activeServer: Accessor<ActiveServer>;
 	activeProject: Accessor<ActiveProject>;

Frontend/src/components/app-shell/data/shell.types.ts

@@ -103,10 +103,12 @@ export type SidebarItem = {
 
 export type WorkspaceStaticKind = "workspace" | "home" | "settings";
 
+export type WorkspaceStaticSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+
 export type WorkspaceItemTypeId = string;
 
 export type WorkspaceStaticItem = SidebarItem & {
-	contextKind: WorkspaceStaticKind;
+	contextKind: WorkspaceStaticSurfaceKind;
 };
 
 export type WorkspaceFolderNode = {

Frontend/src/components/app-shell/data/workspace-routes.ts

@@ -0,0 +1,120 @@
+// Path: Frontend/src/components/app-shell/data/workspace-routes.ts
+
+import type { WorkspaceStaticKind } from "./shell.types";
+import { buildPageTitle } from "../../../helper/pageTitle";
+
+export type WorkspaceSurfaceKind = Exclude<WorkspaceStaticKind, "workspace">;
+export type SettingsSectionKind = "account" | "workspace" | "server" | "theme" | "security" | "members";
+
+export type WorkspaceBreadcrumbContext = {
+	activeProjectName: string;
+	activeDepartmentName: string;
+	activeTeamName?: string;
+};
+
+export type WorkspaceTitleContext = {
+	activeProjectName: string;
+	appName?: string;
+};
+
+const workspaceSurfaceRoutes: Record<WorkspaceSurfaceKind, string> = {
+	home: "/workspace/home",
+	settings: "/settings",
+};
+
+export const getWorkspaceSurfaceRoute = (surface: WorkspaceSurfaceKind): string => workspaceSurfaceRoutes[surface];
+
+const settingsSectionRoutes: Record<SettingsSectionKind, string> = {
+	account: "/settings/account",
+	workspace: "/settings/workspace",
+	server: "/settings/server",
+	theme: "/settings/theme",
+	security: "/settings/security",
+	members: "/settings/members",
+};
+
+export const getSettingsSectionRoute = (section: SettingsSectionKind): string => settingsSectionRoutes[section];
+
+export const getWorkspaceSurfaceFromPathname = (pathname: string): WorkspaceSurfaceKind => {
+	if (pathname.startsWith(workspaceSurfaceRoutes.settings) || pathname.startsWith("/workspace/settings")) {
+		return "settings";
+	}
+
+	return "home";
+};
+
+export const getWorkspaceSurfaceBreadcrumbLabel = (pathname: string): string => {
+	const surface = getWorkspaceSurfaceFromPathname(pathname);
+	return surface === "settings" ? "Settings" : "Home";
+};
+
+const getSettingsSectionFromPathname = (pathname: string): SettingsSectionKind | null => {
+	const matchedEntry = (Object.entries(settingsSectionRoutes) as Array<[SettingsSectionKind, string]>).find(([, route]) => pathname.startsWith(route));
+
+	return matchedEntry?.[0] ?? null;
+};
+
+export const getWorkspaceBreadcrumbSegments = (
+	pathname: string,
+	context: WorkspaceBreadcrumbContext,
+): string[] => {
+	const settingsSection = getSettingsSectionFromPathname(pathname);
+
+	if (pathname === workspaceSurfaceRoutes.settings || pathname === "/workspace/settings") {
+		return ["Settings"];
+	}
+
+	if (settingsSection) {
+		switch (settingsSection) {
+			case "account":
+				return ["Users", "Settings"];
+			case "workspace":
+				return [context.activeProjectName, "Settings"];
+			case "server":
+				return ["Settings"];
+			case "theme":
+				return ["Personal", "Settings"];
+			case "security":
+				return ["Users", "Settings"];
+			case "members":
+				return [context.activeTeamName || context.activeDepartmentName || "Members", "Users"];
+		}
+	}
+
+	return [context.activeProjectName, getWorkspaceSurfaceBreadcrumbLabel(pathname)];
+};
+
+export const getWorkspaceDocumentTitle = (
+	pathname: string,
+	context: WorkspaceTitleContext,
+): string => {
+	const appName = context.appName?.trim() || undefined;
+	const settingsSection = getSettingsSectionFromPathname(pathname);
+
+	if (pathname === workspaceSurfaceRoutes.settings || pathname === "/workspace/settings") {
+		return buildPageTitle(appName, "Settings");
+	}
+
+	if (settingsSection) {
+		switch (settingsSection) {
+			case "account":
+				return buildPageTitle(appName, "Account Settings");
+			case "workspace":
+				return buildPageTitle(appName, "Workspace Settings");
+			case "server":
+				return buildPageTitle(appName, "Server Settings");
+			case "theme":
+				return buildPageTitle(appName, "Theme Settings");
+			case "security":
+				return buildPageTitle(appName, "Security Settings");
+			case "members":
+				return buildPageTitle(appName, "Members & Roles");
+		}
+	}
+
+	if (pathname.startsWith(workspaceSurfaceRoutes.home)) {
+		return buildPageTitle(appName, context.activeProjectName);
+	}
+
+	return buildPageTitle(appName);
+};

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss

@@ -0,0 +1,86 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.module.scss
+
+.viewport {
+	width: 100%;
+	max-width: min(72rem, 100%);
+	min-height: 100%;
+	padding: var(--space-5) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	align-content: start;
+}
+
+.hero,
+.panel {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	background: var(--color-surface-raised);
+	box-shadow: var(--shadow-sm);
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+}
+
+.hero {
+	border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
+	box-shadow:
+		0 10px 24px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+.backLink {
+	width: fit-content;
+	text-decoration: none;
+	color: color-mix(in srgb, var(--color-accent) 34%, var(--color-text-primary));
+	@include text-label;
+}
+
+.backLink:hover {
+	text-decoration: underline;
+}
+
+.title,
+.panelTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	line-height: 1.02;
+	letter-spacing: -0.02em;
+}
+
+.panelTitle {
+	@include text-title;
+	line-height: 1.12;
+}
+
+.description,
+.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.35rem;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
+	}
+
+	.hero,
+	.panel {
+		padding: var(--space-4);
+	}
+}

Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx

@@ -0,0 +1,32 @@
+// Path: Frontend/src/components/settings/SettingsDetailPage/SettingsDetailPage.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import styles from "./SettingsDetailPage.module.scss";
+
+type SettingsDetailPageProps = {
+	title: string;
+	description: string;
+	focus: readonly string[];
+};
+
+export const SettingsDetailPage = (props: SettingsDetailPageProps): JSX.Element => {
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<A class={styles.backLink} href="/settings">
+					Back to Settings
+				</A>
+				<h1 class={styles.title}>{props.title}</h1>
+				<p class={styles.description}>{props.description}</p>
+			</section>
+
+			<section class={styles.panel}>
+				<h2 class={styles.panelTitle}>Focus areas</h2>
+				<ul class={styles.focusList}>
+					<For each={props.focus}>{(item) => <li>{item}</li>}</For>
+				</ul>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss

@@ -0,0 +1,229 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.module.scss
+
+.viewport {
+	--settings-page-max-width: min(88rem, 100%);
+
+	min-height: 100%;
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-6);
+	padding-top: var(--space-5);
+	padding-right: var(--space-6);
+	padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom));
+	padding-left: var(--space-6);
+	align-content: start;
+}
+
+.hero {
+	display: grid;
+	gap: var(--space-4);
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.heroCopy,
+.card {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	box-shadow: var(--shadow-sm);
+}
+
+.heroCopy {
+	padding: var(--space-6);
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	background: var(--color-surface-raised);
+	border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-subtle));
+	box-shadow:
+		0 12px 28px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+	.eyebrow,
+	.sectionEyebrow {
+		margin: 0;
+		color: color-mix(in srgb, var(--color-accent) 42%, var(--color-text-tertiary));
+	@include text-label;
+}
+
+.title,
+.sectionTitle,
+.cardTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	max-width: 13ch;
+	text-wrap: balance;
+	letter-spacing: -0.025em;
+	line-height: 1.02;
+}
+
+	.description,
+	.sectionDescription,
+	.cardDescription,
+	.focusList {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.focusList {
+	padding-left: 1.1rem;
+	display: grid;
+	gap: 0.45rem;
+}
+
+.sectionStack {
+	width: 100%;
+	max-width: var(--settings-page-max-width);
+	display: grid;
+	gap: var(--space-5);
+	padding-inline: var(--space-6);
+	box-sizing: border-box;
+}
+
+.section {
+	display: grid;
+	gap: var(--space-4);
+}
+
+.sectionHeader {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.sectionTitle {
+	@include text-title;
+}
+
+.cardGrid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+
+.card {
+	padding: var(--space-5);
+	display: grid;
+	gap: var(--space-3);
+	align-items: start;
+	text-decoration: none;
+	color: inherit;
+	position: relative;
+	background: var(--color-surface-raised);
+	transition:
+		transform 120ms ease,
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card::before {
+	content: none;
+}
+
+.card::after {
+	content: none;
+}
+
+.card:hover {
+	transform: translateY(-1px);
+	border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-md);
+}
+
+.card:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
+	outline-offset: 2px;
+	border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border-strong));
+	box-shadow: var(--shadow-md);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	gap: var(--space-3);
+	position: relative;
+	z-index: 1;
+}
+
+.cardIconWrap {
+	width: 2.75rem;
+	height: 2.75rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-lg);
+	background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	color: var(--color-text-primary);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+		0 6px 14px color-mix(in srgb, var(--color-accent) 7%, transparent);
+}
+
+.cardBody {
+	display: grid;
+	gap: var(--space-2);
+	position: relative;
+	z-index: 1;
+}
+
+.cardTitle {
+	@include text-title;
+	line-height: 1.1;
+}
+
+.focusList li::marker {
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-secondary));
+}
+
+.card:nth-child(2n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #8b5cf6 14%, transparent), color-mix(in srgb, var(--color-accent-soft) 22%, transparent));
+	border-color: color-mix(in srgb, #8b5cf6 16%, var(--color-border-subtle));
+}
+
+.card:nth-child(3n) .cardIconWrap {
+	background: linear-gradient(180deg, color-mix(in srgb, #06b6d4 12%, transparent), color-mix(in srgb, var(--color-accent) 18%, transparent));
+	border-color: color-mix(in srgb, #06b6d4 14%, var(--color-border-subtle));
+}
+
+@media (max-width: 64rem) {
+	.cardGrid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding-top: var(--space-4);
+		padding-right: var(--space-4);
+		padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
+		padding-left: var(--space-4);
+	}
+
+	.hero,
+	.sectionStack {
+		padding-inline: var(--space-4);
+	}
+
+	.heroCopy,
+	.card {
+		padding: var(--space-4);
+	}
+
+	.cardHeader {
+		align-items: flex-start;
+	}
+
+	.title {
+		max-width: none;
+	}
+}

Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx

@@ -0,0 +1,95 @@
+// Path: Frontend/src/components/settings/SettingsWorkspace/SettingsWorkspace.tsx
+
+import { A } from "@solidjs/router";
+import { For, type JSX } from "solid-js";
+import { Bell, Home, Moon, Shield, Settings, User } from "../../../lib/icons";
+import { getSettingsSectionRoute } from "../../app-shell/data/workspace-routes";
+import styles from "./SettingsWorkspace.module.scss";
+
+const sections = [
+	{
+		title: "Account Settings",
+		description: "Profile, identity, and account preferences for the active user.",
+		icon: User,
+		href: getSettingsSectionRoute("account"),
+		focus: ["Profile", "Notifications", "Personal defaults"],
+	},
+	{
+		title: "Workspace Settings",
+		description: "Core workspace behavior mapped to the project-level `settings.cbor` surface.",
+		icon: Home,
+		href: getSettingsSectionRoute("workspace"),
+		focus: ["Navigation defaults", "Workspace behavior", "Content rules"],
+	},
+	{
+		title: "Server Settings",
+		description: "Organization and server-wide controls that should live above individual workspaces.",
+		icon: Settings,
+		href: getSettingsSectionRoute("server"),
+		focus: ["Server identity", "Policies", "Operational defaults"],
+	},
+	{
+		title: "Theme Settings",
+		description: "Theme preferences and presentation settings that should eventually map cleanly to POSIX-backed configuration.",
+		icon: Moon,
+		href: getSettingsSectionRoute("theme"),
+		focus: ["Theme preset", "Density", "Visual preferences"],
+	},
+	{
+		title: "Security Settings",
+		description: "Authentication, sessions, and access hardening for users and organizations.",
+		icon: Shield,
+		href: getSettingsSectionRoute("security"),
+		focus: ["Sessions", "Access controls", "Recovery"],
+	},
+	{
+		title: "Members & Roles",
+		description: "People, invitations, and organization-level permission management.",
+		icon: Bell,
+		href: getSettingsSectionRoute("members"),
+		focus: ["Members", "Roles", "Invitations"],
+	},
+] as const;
+
+export const SettingsWorkspace = (): JSX.Element => {
+	return (
+		<main class={styles.viewport} data-ui="workspace-settings-page">
+			<section class={styles.hero}>
+				<div class={styles.heroCopy}>
+					<h1 class={styles.title}>Settings</h1>
+				</div>
+			</section>
+
+			<section class={styles.sectionStack}>
+				<section class={styles.section}>
+					<div class={styles.cardGrid}>
+						<For each={sections}>
+							{(section) => {
+								const Icon = section.icon;
+
+								return (
+									<A class={styles.card} href={section.href}>
+										<div class={styles.cardHeader}>
+											<div class={styles.cardIconWrap}>
+												<Icon size={18} strokeWidth={2} />
+											</div>
+										</div>
+
+										<div class={styles.cardBody}>
+											<h3 class={styles.cardTitle}>{section.title}</h3>
+											<p class={styles.cardDescription}>{section.description}</p>
+
+											<ul class={styles.focusList}>
+												<For each={section.focus}>{(focus) => <li>{focus}</li>}</For>
+											</ul>
+										</div>
+									</A>
+								);
+							}}
+						</For>
+					</div>
+				</section>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.module.scss

@@ -0,0 +1,234 @@
+// Path: Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.module.scss
+
+.viewport {
+	width: 100%;
+	max-width: min(80rem, 100%);
+	min-height: 100%;
+	padding: var(--space-5) var(--space-6) calc(var(--space-7) + env(safe-area-inset-bottom));
+	box-sizing: border-box;
+	display: grid;
+	gap: var(--space-5);
+	align-content: start;
+}
+
+.hero,
+.card,
+.errorBanner {
+	border: 1px solid var(--color-border-subtle);
+	border-radius: var(--radius-xl);
+	background: var(--color-surface-raised);
+	box-shadow: var(--shadow-sm);
+}
+
+.hero {
+	padding: var(--space-6);
+	display: flex;
+	align-items: center;
+	gap: var(--space-4);
+	border-color: color-mix(in srgb, var(--color-accent) 20%, var(--color-border-subtle));
+	box-shadow:
+		0 10px 24px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-sm);
+}
+
+.heroIcon {
+	width: 3rem;
+	height: 3rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius-lg);
+	background: linear-gradient(
+		180deg,
+		color-mix(in srgb, var(--color-accent) 14%, transparent),
+		color-mix(in srgb, var(--color-accent-soft) 22%, transparent)
+	);
+	border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-border-subtle));
+	box-shadow:
+		inset 0 1px 0 color-mix(in srgb, white 8%, transparent),
+		0 6px 14px color-mix(in srgb, var(--color-accent) 7%, transparent);
+	color: var(--color-text-primary);
+	flex: 0 0 auto;
+}
+
+.heroCopy {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.title,
+.cardTitle {
+	margin: 0;
+	color: var(--color-text-primary);
+}
+
+.title {
+	@include text-display;
+	line-height: 1.02;
+	letter-spacing: -0.02em;
+}
+
+.description,
+.cardDescription,
+.errorBanner {
+	margin: 0;
+	color: var(--color-text-secondary);
+	@include text-body;
+}
+
+.errorBanner {
+	padding: var(--space-4) var(--space-5);
+	border-color: color-mix(in srgb, #ef4444 24%, var(--color-border-subtle));
+	color: color-mix(in srgb, #ef4444 64%, var(--color-text-primary));
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: var(--space-4);
+}
+
+.card {
+	padding: var(--space-4);
+	display: grid;
+	gap: var(--space-4);
+	text-align: left;
+	color: inherit;
+	cursor: pointer;
+	transition:
+		transform 120ms ease,
+		border-color 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.card:hover:not(:disabled) {
+	transform: translateY(-1px);
+	border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 8%, transparent),
+		var(--shadow-md);
+}
+
+.card:focus-visible {
+	outline: 2px solid color-mix(in srgb, var(--color-accent) 54%, transparent);
+	outline-offset: 2px;
+}
+
+.card:disabled {
+	cursor: default;
+}
+
+.cardSelected {
+	border-color: color-mix(in srgb, var(--color-accent) 32%, var(--color-border-strong));
+	box-shadow:
+		0 10px 22px color-mix(in srgb, var(--color-accent) 10%, transparent),
+		var(--shadow-md);
+}
+
+.preview {
+	border-radius: var(--radius-lg);
+	overflow: hidden;
+	border: 1px solid var(--color-border-subtle);
+	background: var(--color-surface);
+	min-height: 9.5rem;
+}
+
+.previewCanvas {
+	height: 100%;
+	min-height: 9.5rem;
+	padding: 0.8rem;
+	box-sizing: border-box;
+	display: grid;
+	grid-template-rows: auto 1fr;
+	gap: 0.75rem;
+}
+
+.previewTopbar {
+	height: 0.65rem;
+	border-radius: 999px;
+	opacity: 0.9;
+}
+
+.previewSurface {
+	border-radius: calc(var(--radius-lg) - 0.25rem);
+	padding: 0.9rem;
+	display: grid;
+	align-content: start;
+	gap: 0.55rem;
+	box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
+}
+
+.previewChip {
+	width: 2.8rem;
+	height: 0.55rem;
+	border-radius: 999px;
+	opacity: 0.95;
+}
+
+.previewLine,
+.previewLineShort {
+	height: 0.5rem;
+	border-radius: 999px;
+	background: color-mix(in srgb, var(--color-text-primary) 10%, transparent);
+}
+
+.previewLineShort {
+	width: 58%;
+}
+
+.cardBody {
+	display: grid;
+	gap: var(--space-2);
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--space-3);
+}
+
+.cardTitle {
+	@include text-title;
+	line-height: 1.1;
+}
+
+.badge {
+	padding: 0.25rem 0.55rem;
+	border-radius: 999px;
+	border: 1px solid color-mix(in srgb, var(--color-accent) 18%, var(--color-border-subtle));
+	background: color-mix(in srgb, var(--color-accent) 10%, transparent);
+	color: color-mix(in srgb, var(--color-accent) 44%, var(--color-text-primary));
+	@include text-label;
+	white-space: nowrap;
+}
+
+@media (max-width: 64rem) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+@media (max-width: 48rem) {
+	.viewport {
+		padding: var(--space-4) var(--space-4) calc(var(--space-8) + env(safe-area-inset-bottom));
+	}
+
+	.hero,
+	.card {
+		padding: var(--space-4);
+	}
+
+	.hero {
+		align-items: flex-start;
+	}
+
+	.title {
+		max-width: none;
+	}
+
+	.cardHeader {
+		align-items: flex-start;
+		flex-direction: column;
+	}
+}

Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.tsx

@@ -0,0 +1,129 @@
+// Path: Frontend/src/components/settings/ThemeSettingsPage/ThemeSettingsPage.tsx
+
+import { For, Show, createMemo, createSignal, type JSX } from "solid-js";
+import { resolveAPIBase } from "../../../lib/api";
+import { Moon } from "../../../lib/icons";
+import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { applyThemePresetById, resolvePreferredThemePresetId } from "../../../helper/themeRuntime";
+import { themePresetMetas } from "../../../theme/presets";
+import styles from "./ThemeSettingsPage.module.scss";
+
+type SaveThemeResponse = {
+	data?: {
+		presetId?: string;
+	};
+	error?: { message?: string } | string;
+	message?: string;
+};
+
+export const ThemeSettingsPage = (): JSX.Element => {
+	const appShell = useAppShellData();
+	const [savingPresetId, setSavingPresetId] = createSignal<string | null>(null);
+	const [error, setError] = createSignal("");
+
+	const activePresetId = createMemo(() => {
+		return appShell.admin()?.themePresetId?.trim() || resolvePreferredThemePresetId();
+	});
+
+	const savePreset = async (presetId: string): Promise<void> => {
+		if (savingPresetId() || presetId === activePresetId()) {
+			return;
+		}
+
+		setSavingPresetId(presetId);
+		setError("");
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/settings/theme`, {
+				method: "PUT",
+				headers: {
+					"Content-Type": "application/json",
+					Accept: "application/json",
+				},
+				body: JSON.stringify({ presetId }),
+			});
+
+			const body = (await response.json().catch(() => ({}))) as SaveThemeResponse;
+			const errorMessage =
+				typeof body.message === "string"
+					? body.message
+					: typeof body.error === "string"
+						? body.error
+						: body.error?.message;
+
+			if (!response.ok) {
+				throw new Error(errorMessage || "Failed to save theme preset.");
+			}
+
+			await applyThemePresetById(presetId);
+			await appShell.reload();
+		} catch (saveError) {
+			setError(saveError instanceof Error ? saveError.message : "Failed to save theme preset.");
+		} finally {
+			setSavingPresetId(null);
+		}
+	};
+
+	return (
+		<main class={styles.viewport}>
+			<section class={styles.hero}>
+				<div class={styles.heroIcon}>
+					<Moon size={18} strokeWidth={2} />
+				</div>
+				<div class={styles.heroCopy}>
+					<h1 class={styles.title}>Theme Settings</h1>
+					<p class={styles.description}>Pick the theme preset for your account.</p>
+				</div>
+			</section>
+
+			<Show when={error()}>
+				<div class={styles.errorBanner} role="alert">
+					{error()}
+				</div>
+			</Show>
+
+			<section class={styles.grid}>
+				<For each={themePresetMetas}>
+					{(preset) => {
+						const isSelected = () => activePresetId() === preset.id;
+						const isSaving = () => savingPresetId() === preset.id;
+
+						return (
+							<button
+								type="button"
+								classList={{
+									[styles.card]: true,
+									[styles.cardSelected]: isSelected(),
+								}}
+								onClick={() => void savePreset(preset.id)}
+								disabled={Boolean(savingPresetId())}
+								aria-pressed={isSelected()}
+							>
+								<div class={styles.preview} aria-hidden="true">
+									<div class={styles.previewCanvas} style={{ background: preset.preview.canvas }}>
+										<div class={styles.previewTopbar} style={{ background: preset.preview.accent }} />
+										<div class={styles.previewSurface} style={{ background: preset.preview.surface }}>
+											<div class={styles.previewChip} style={{ background: preset.preview.accent }} />
+											<div class={styles.previewLine} />
+											<div class={styles.previewLineShort} />
+										</div>
+									</div>
+								</div>
+
+								<div class={styles.cardBody}>
+									<div class={styles.cardHeader}>
+										<h2 class={styles.cardTitle}>{preset.name}</h2>
+										<Show when={isSelected() || isSaving()}>
+											<span class={styles.badge}>{isSaving() ? "Saving..." : "Current"}</span>
+										</Show>
+									</div>
+									<p class={styles.cardDescription}>{preset.description}</p>
+								</div>
+							</button>
+						);
+					}}
+				</For>
+			</section>
+		</main>
+	);
+};

Frontend/src/components/top-bar/TopBar/ProfileMenu.tsx

@@ -1,6 +1,8 @@
+import { useNavigate } from "@solidjs/router";
 import { For, type JSX } from "solid-js";
 import { User } from "../../../lib/icons";
 import { useAppShellData } from "../../app-shell/data/app-shell.context";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import { profileMenuSections } from "../../app-shell/data/shell.data";
 import styles from "./ProfileMenu.module.scss";
 
@@ -14,8 +16,17 @@ type ProfileMenuProps = {
 export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 	const variant = props.variant ?? "popover";
 	const appShellData = useAppShellData();
+	const navigate = useNavigate();
 	const activeUserProfile = () => appShellData.activeUserProfile();
 
+	const handleSelect = (actionId: string): void => {
+		if (actionId === "account-settings" || actionId === "security" || actionId === "theme-preferences") {
+			navigate(getWorkspaceSurfaceRoute("settings"));
+		}
+
+		props.onSelect();
+	};
+
 	return (
 		<div
 			id={props.id}
@@ -61,11 +72,11 @@ export const ProfileMenu = (props: ProfileMenuProps): JSX.Element => {
 											[styles.item]: true,
 											[styles.itemDanger]: item.tone === "danger",
 										}}
-										data-slot="profile-action"
-										data-action-id={item.id}
-										data-tone={item.tone ?? "default"}
-										onClick={props.onSelect}
-										>
+									data-slot="profile-action"
+									data-action-id={item.id}
+									data-tone={item.tone ?? "default"}
+									onClick={() => handleSelect(item.id)}
+									>
 											<span class={styles.itemIcon} aria-hidden="true">
 												<Icon size={16} strokeWidth={2} />
 											</span>

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx

@@ -1,8 +1,10 @@
 // Path: Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight } from "../../../lib/icons";
 import { createLongPressGesture } from "../../../helper/createLongPressGesture";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -72,8 +74,12 @@ export const StaticRow = (props: { item: SidebarItem }): JSX.Element => {
 export const WorkspaceStaticRow = (props: {
 	item: WorkspaceStaticItem;
 	onOpenActionSheet: (target: WorkspaceContextMenuTarget) => void;
+	onSelect: VoidFunction;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 	const longPress = createLongPressGesture({
 		onLongPress: () => {
 			props.onOpenActionSheet(target);
@@ -84,16 +90,20 @@ export const WorkspaceStaticRow = (props: {
 		<li
 			class={styles.treeListItem}
 			data-slot="mobile-workspace-static-item"
-			data-target-kind={target.kind}
-			onContextMenu={(event): void => {
-				event.preventDefault();
-				props.onOpenActionSheet(target);
-			}}
-			{...longPress}
-		>
-			<StaticRow item={props.item} />
-		</li>
-	);
+				data-target-kind={target.kind}
+				onContextMenu={(event): void => {
+					event.preventDefault();
+					props.onOpenActionSheet(target);
+				}}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+					props.onSelect();
+				}}
+				{...longPress}
+			>
+				<StaticRow item={{ ...props.item, active: isActive() }} />
+			</li>
+		);
 };
 
 export const WorkspaceTreeBranch = (props: {

Frontend/src/components/workspace-navigation/MobileWorkspaceBrowser/MobileWorkspaceBrowser.tsx

@@ -72,12 +72,14 @@ export const MobileWorkspaceBrowser = (props: MobileWorkspaceBrowserProps): JSX.
 					<div class={styles.sheetBody} data-slot="mobile-workspace-body">
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="workspace">
 							<span class={styles.sectionLabel}>Workspace</span>
-							<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
-								<For each={workspaceStaticItems}>
-									{(item): JSX.Element => <WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} />}
-								</For>
-							</ul>
-						</section>
+						<ul class={styles.treeList} data-slot="mobile-workspace-list" data-section-id="workspace">
+							<For each={workspaceStaticItems}>
+								{(item): JSX.Element => (
+									<WorkspaceStaticRow item={item} onOpenActionSheet={openActionSheet} onSelect={props.onClose} />
+								)}
+							</For>
+						</ul>
+					</section>
 
 						<section class={styles.sectionBlock} data-slot="mobile-workspace-section" data-section-id="items">
 							<span class={styles.sectionLabel}>Items</span>

Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx

@@ -1,7 +1,9 @@
 // Path: Frontend/src/components/workspace-navigation/WorkspaceSidebar/WorkspaceSidebar.parts.tsx
 
+import { useLocation, useNavigate } from "@solidjs/router";
 import { For, Show, type JSX } from "solid-js";
 import { ChevronRight, Folder } from "../../../lib/icons";
+import { getWorkspaceSurfaceRoute } from "../../app-shell/data/workspace-routes";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceTreeTarget,
@@ -66,8 +68,11 @@ export const WorkspaceHomeEntry = (props: {
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
 }): JSX.Element => {
+	const navigate = useNavigate();
+	const location = useLocation();
 	const Icon = props.item.icon;
 	const target = createWorkspaceStaticTarget(props.item);
+	const isActive = (): boolean => location.pathname === getWorkspaceSurfaceRoute(props.item.contextKind);
 
 	return (
 		<li>
@@ -75,14 +80,17 @@ export const WorkspaceHomeEntry = (props: {
 				type="button"
 				classList={{
 					[styles.navItem]: true,
-					[styles.navItemActive]: !!props.item.active,
+					[styles.navItemActive]: isActive(),
 				}}
-				aria-current={props.item.active ? "page" : undefined}
+				aria-current={isActive() ? "page" : undefined}
 				aria-label={props.item.label}
 				title={props.item.label}
 				data-slot="workspace-static-item"
 				data-target-kind={target.kind}
-				data-active={props.item.active ? "true" : "false"}
+				data-active={isActive() ? "true" : "false"}
+				onClick={(): void => {
+					navigate(getWorkspaceSurfaceRoute(props.item.contextKind));
+				}}
 				onContextMenu={(event): void => {
 					event.stopPropagation();
 					props.onOpenContextMenu(event, target);

Frontend/src/entry-server.tsx

@@ -34,7 +34,15 @@ const renderDocument = ({ assets, children, scripts }: DocumentRenderProps): JSX
 			<head>
 				<meta charset="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
+				<link rel="icon" type="image/x-icon" href="/favicon/favicon.ico" />
+				<link rel="icon" type="image/png" sizes="48x48" href="/favicon/favicon-48x48.png" />
+				<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+				<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+				<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+				<link rel="manifest" href="/favicon/site.webmanifest" />
+				<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
+				<meta name="msapplication-TileColor" content="#ffffff" />
+				<meta name="theme-color" content="#ffffff" />
 				<script innerHTML={themeBootstrapScript} />
 				{assets}
 			</head>

Frontend/src/helper/pageTitle.ts

@@ -0,0 +1,23 @@
+// Path: Frontend/src/helper/pageTitle.ts
+
+export const APP_PAGE_TITLE = "Moku Work";
+
+const normalizeTitleSegment = (segment: string | null | undefined | false): string | null => {
+	const value = typeof segment === "string" ? segment.trim() : "";
+	return value.length > 0 ? value : null;
+};
+
+export const buildPageTitle = (...segments: Array<string | null | undefined | false>): string => {
+	const normalizedSegments = segments.map(normalizeTitleSegment).filter((segment): segment is string => segment !== null);
+	return [APP_PAGE_TITLE, ...normalizedSegments].join(" · ");
+};
+
+export const setPageTitle = (...segments: Array<string | null | undefined | false>): string => {
+	const title = buildPageTitle(...segments);
+
+	if (typeof document !== "undefined") {
+		document.title = title;
+	}
+
+	return title;
+};

Frontend/src/helper/themeRuntime.ts

@@ -36,6 +36,29 @@ const persistThemePreset = (themeDefinition: ThemeDefinition): void => {
 	localStorage.setItem(THEME_PRESET_STORAGE_KEY, themeDefinition.id);
 };
 
+const fetchThemeDefinitionByPresetId = async (presetId: string): Promise<ThemeDefinition | null> => {
+	const themePath = resolveThemePresetPath(presetId) ?? defaultThemePresetPath;
+
+	const response = await fetch(themePath, {
+		headers: {
+			Accept: "application/json",
+		},
+	});
+
+	if (!response.ok) {
+		throw new Error(`Theme preset request failed with status ${response.status}.`);
+	}
+
+	const candidate = (await response.json()) as unknown;
+	const result = validateThemeDefinition(candidate);
+
+	if (!result.success) {
+		throw new Error(result.errors.join(" "));
+	}
+
+	return result.data;
+};
+
 const setDocumentThemeMode = (theme: Theme): void => {
 	const rootElement = getRootElement();
 
@@ -111,6 +134,21 @@ export const resolvePreferredThemePresetPath = (): string => {
 	return resolveThemePresetPath(presetId) ?? defaultThemePresetPath;
 };
 
+export const applyThemePresetById = async (presetId: string, theme: Theme = getDocumentTheme()): Promise<ThemeDefinition | null> => {
+	try {
+		const definition = await fetchThemeDefinitionByPresetId(presetId);
+		if (!definition) {
+			return null;
+		}
+
+		applyThemeDefinition(definition, theme);
+		return definition;
+	} catch (error) {
+		console.error("Failed to apply theme preset.", error);
+		return null;
+	}
+};
+
 export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null> => {
 	if (typeof window === "undefined") {
 		return null;
@@ -124,26 +162,7 @@ export const initializeThemeRuntime = async (): Promise<ThemeDefinition | null>
 	if (!themeInitializationPromise) {
 		themeInitializationPromise = (async (): Promise<ThemeDefinition | null> => {
 			try {
-				const response = await fetch(resolvePreferredThemePresetPath(), {
-					headers: {
-						Accept: "application/json",
-					},
-				});
-
-				if (!response.ok) {
-					throw new Error(`Theme preset request failed with status ${response.status}.`);
-				}
-
-				const candidate = (await response.json()) as unknown;
-				const result = validateThemeDefinition(candidate);
-
-				if (!result.success) {
-					throw new Error(result.errors.join(" "));
-				}
-
-				applyThemeDefinition(result.data, getDocumentTheme());
-
-				return result.data;
+				return await applyThemePresetById(resolvePreferredThemePresetId(), getDocumentTheme());
 			} catch (error) {
 				console.error("Failed to initialize theme runtime.", error);
 				return null;

Frontend/src/routes/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const IndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default IndexRoute;

Frontend/src/routes/settings.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const SettingsLayoutRoute = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default SettingsLayoutRoute;

Frontend/src/routes/settings/account.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/account.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsAccountRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Account Settings"
+			description="Manage the active user account, profile details, notifications, and personal defaults."
+			focus={["Profile", "Notifications", "Personal defaults"]}
+		/>
+	);
+};
+
+export default SettingsAccountRoute;

Frontend/src/routes/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings/index.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsWorkspace } from "../../components/settings/SettingsWorkspace/SettingsWorkspace";
+
+const SettingsIndexRoute = (): JSX.Element => {
+	return <SettingsWorkspace />;
+};
+
+export default SettingsIndexRoute;

Frontend/src/routes/settings/members.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/members.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsMembersRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Members & Roles"
+			description="Manage people, invitations, roles, and permission assignments across the organization structure."
+			focus={["Members", "Roles", "Invitations"]}
+		/>
+	);
+};
+
+export default SettingsMembersRoute;

Frontend/src/routes/settings/security.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/security.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsSecurityRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Security Settings"
+			description="Review sessions, access controls, and account recovery settings for users and organizations."
+			focus={["Sessions", "Access controls", "Recovery"]}
+		/>
+	);
+};
+
+export default SettingsSecurityRoute;

Frontend/src/routes/settings/server.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/server.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsServerRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Server Settings"
+			description="Manage server-wide controls, identity, and policy defaults that apply across workspaces."
+			focus={["Server identity", "Policies", "Operational defaults"]}
+		/>
+	);
+};
+
+export default SettingsServerRoute;

Frontend/src/routes/settings/theme.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/settings/theme.tsx
+
+import { type JSX } from "solid-js";
+import { ThemeSettingsPage } from "../../components/settings/ThemeSettingsPage/ThemeSettingsPage";
+
+const SettingsThemeRoute = (): JSX.Element => {
+	return <ThemeSettingsPage />;
+};
+
+export default SettingsThemeRoute;

Frontend/src/routes/settings/workspace.tsx

@@ -0,0 +1,16 @@
+// Path: Frontend/src/routes/settings/workspace.tsx
+
+import { type JSX } from "solid-js";
+import { SettingsDetailPage } from "../../components/settings/SettingsDetailPage/SettingsDetailPage";
+
+const SettingsWorkspaceRoute = (): JSX.Element => {
+	return (
+		<SettingsDetailPage
+			title="Workspace Settings"
+			description="Control workspace-level behavior, structure defaults, and the way content behaves inside this workspace."
+			focus={["Navigation defaults", "Workspace behavior", "Content rules"]}
+		/>
+	);
+};
+
+export default SettingsWorkspaceRoute;

Frontend/src/routes/workspace.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+import { AppShell } from "../components/app-shell/AppShell/AppShell";
+
+const WorkspaceLayout = (props: RouteSectionProps) => {
+	return <AppShell>{props.children}</AppShell>;
+};
+
+export default WorkspaceLayout;

Frontend/src/routes/workspace/home.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/home.tsx
+
+import { type JSX } from "solid-js";
+import { WorkspaceHome } from "../../components/workspace-home/WorkspaceHome";
+
+const WorkspaceHomeRoute = (): JSX.Element => {
+	return <WorkspaceHome />;
+};
+
+export default WorkspaceHomeRoute;

Frontend/src/routes/workspace/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceIndexRoute = (): JSX.Element => {
+	return <Navigate href="/workspace/home" />;
+};
+
+export default WorkspaceIndexRoute;

Frontend/src/routes/workspace/settings.tsx

@@ -0,0 +1,9 @@
+// Path: Frontend/src/routes/workspace/settings.tsx
+
+import type { RouteSectionProps } from "@solidjs/router";
+
+const WorkspaceSettingsLayoutRoute = (props: RouteSectionProps) => {
+	return props.children;
+};
+
+export default WorkspaceSettingsLayoutRoute;

Frontend/src/routes/workspace/settings/account.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/account.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsAccountRoute = (): JSX.Element => {
+	return <Navigate href="/settings/account" />;
+};
+
+export default WorkspaceSettingsAccountRoute;

Frontend/src/routes/workspace/settings/index.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/index.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsIndexRoute = (): JSX.Element => {
+	return <Navigate href="/settings" />;
+};
+
+export default WorkspaceSettingsIndexRoute;

Frontend/src/routes/workspace/settings/members.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/members.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsMembersRoute = (): JSX.Element => {
+	return <Navigate href="/settings/members" />;
+};
+
+export default WorkspaceSettingsMembersRoute;

Frontend/src/routes/workspace/settings/security.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/security.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsSecurityRoute = (): JSX.Element => {
+	return <Navigate href="/settings/security" />;
+};
+
+export default WorkspaceSettingsSecurityRoute;

Frontend/src/routes/workspace/settings/server.tsx

@@ -0,0 +1,10 @@
+// Path: Frontend/src/routes/workspace/settings/server.tsx
+
+import { Navigate } from "@solidjs/router";
+import { type JSX } from "solid-js";
+
+const WorkspaceSettingsServerRoute = (): JSX.Element => {
+	return <Navigate href="/settings/server" />;
+};
+
+export default WorkspaceSettingsServerRoute;