@ifc-lite/viewer 1.17.4 → 1.17.6

package/src/store/slices/chatSlice.ts

@@ -13,6 +13,7 @@ import { coerceModelForEntitlement, DEFAULT_FREE_MODEL } from '../../lib/llm/mod
 import { extractCodeBlocks } from '../../lib/llm/code-extractor.js';
 import type { ScriptDiagnostic } from '../../lib/llm/script-diagnostics.js';
 import { formatDiagnosticsForPrompt, getPrimaryRootCause, groupDiagnosticsByRootCause } from '../../lib/llm/script-diagnostics.js';
+import { hasAnyApiKey as hasAnyApiKeyAtInit } from '../../services/api-keys.js';
 
 const MODEL_STORAGE_KEY = 'ifc-lite-chat-model';
 const MESSAGES_STORAGE_KEY = 'ifc-lite-chat-messages';
@@ -43,11 +44,9 @@ export interface ChatSlice {
   chatPendingRepairRequest: ChatRepairRequest | null;
   /** Auto-captured viewport screenshot (base64 data URL) to include with next LLM message */
   chatViewportScreenshot: string | null;
-  /** Clerk JWT for authenticated API calls (null for anonymous/free tier) */
-  chatAuthToken: string | null;
-  /** Whether the current user has a pro subscription */
-  chatHasPro: boolean;
-  /** Usage info from the server: credits (pro) or request count (free) */
+  /** Whether the user has at least one BYOK API key configured */
+  chatHasByokKey: boolean;
+  /** Usage info from the proxy: request count for free tier */
   chatUsage: ChatUsage | null;
   /** User ID used to scope persisted model preference (null for anonymous). */
   chatStorageUserId: string | null;
@@ -78,18 +77,10 @@ export interface ChatSlice {
   sendErrorFeedback: (code: string, error: string) => void;
   /** Store a viewport screenshot to include with the next LLM message */
   setChatViewportScreenshot: (dataUrl: string | null) => void;
-  /** Set the Clerk auth token (called by ClerkProvider wrapper when user signs in) */
-  setChatAuthToken: (token: string | null) => void;
-  /** Set whether user has pro subscription (called by ClerkProvider wrapper) */
-  setChatHasPro: (hasPro: boolean) => void;
+  /** Set whether user has at least one BYOK API key configured */
+  setChatHasByokKey: (hasByokKey: boolean) => void;
   /** Update usage info from server response headers */
   setChatUsage: (usage: ChatUsage | null) => void;
-  /** Switch the active chat user/session context. */
-  switchChatUserContext: (
-    userId: string | null,
-    hasPro: boolean,
-    options?: { clearPersistedCurrent?: boolean; restoreMessages?: boolean },
-  ) => void;
 }
 
 export interface ChatUsage {
@@ -279,7 +270,7 @@ export const createChatSlice: StateCreator<ChatSlice, [], [], ChatSlice> = (set,
   chatMessages: loadStoredMessages(null),
   chatStatus: 'idle',
   chatStreamingContent: '',
-  chatActiveModel: loadValidStoredModel(null, false),
+  chatActiveModel: loadValidStoredModel(null, hasAnyApiKeyAtInit()),
   chatAutoExecute: loadStoredAutoExecute(),
   chatError: null,
   chatAbortController: null,
@@ -287,8 +278,7 @@ export const createChatSlice: StateCreator<ChatSlice, [], [], ChatSlice> = (set,
   chatPendingPrompt: null,
   chatPendingRepairRequest: null,
   chatViewportScreenshot: null,
-  chatAuthToken: null,
-  chatHasPro: false,
+  chatHasByokKey: false,
   chatUsage: null,
   chatStorageUserId: null,
 
@@ -340,12 +330,15 @@ export const createChatSlice: StateCreator<ChatSlice, [], [], ChatSlice> = (set,
   setChatStreamingContent: (chatStreamingContent) => set({ chatStreamingContent }),
 
   setChatActiveModel: (chatActiveModel) => {
-    const nextModel = coerceModelForEntitlement(chatActiveModel, get().chatHasPro);
+    // Accept any model the user picks — the ChatPanel shows an inline key
+    // prompt if the selected BYOK model doesn't have a key yet, and guards
+    // the send path. Coercion only happens on init and when keys are removed
+    // (via setChatHasByokKey).
     try {
       const key = getModelStorageKey(get().chatStorageUserId);
-      localStorage.setItem(key, nextModel);
+      localStorage.setItem(key, chatActiveModel);
     } catch { /* ignore */ }
-    set({ chatActiveModel: nextModel });
+    set({ chatActiveModel });
   },
 
   setChatAutoExecute: (chatAutoExecute) => {
@@ -404,51 +397,17 @@ export const createChatSlice: StateCreator<ChatSlice, [], [], ChatSlice> = (set,
 
   setChatViewportScreenshot: (chatViewportScreenshot) => set({ chatViewportScreenshot }),
 
-  setChatAuthToken: (chatAuthToken) => set({ chatAuthToken }),
-
-  setChatHasPro: (chatHasPro) => {
-    const nextModel = coerceModelForEntitlement(get().chatActiveModel, chatHasPro);
+  setChatHasByokKey: (chatHasByokKey) => {
+    const nextModel = coerceModelForEntitlement(get().chatActiveModel, chatHasByokKey);
     try {
       const key = getModelStorageKey(get().chatStorageUserId);
       localStorage.setItem(key, nextModel);
     } catch { /* ignore */ }
-    set({ chatHasPro, chatActiveModel: nextModel });
+    set({ chatHasByokKey, chatActiveModel: nextModel });
   },
 
   setChatUsage: (chatUsage) => set({ chatUsage }),
 
-  switchChatUserContext: (chatStorageUserId, chatHasPro, options) => {
-    const state = get();
-    state.chatAbortController?.abort();
-    if (options?.clearPersistedCurrent) {
-      try {
-        localStorage.removeItem(getMessagesStorageKey(state.chatStorageUserId));
-      } catch { /* ignore */ }
-    }
-    const restoredModel = coerceModelForEntitlement(
-      loadStoredModel(chatStorageUserId, state.chatActiveModel),
-      chatHasPro,
-    );
-    const restoredMessages = options?.restoreMessages === false
-      ? []
-      : loadStoredMessages(chatStorageUserId);
-    set({
-      chatStorageUserId,
-      chatHasPro,
-      chatActiveModel: restoredModel,
-      chatMessages: restoredMessages,
-      chatStatus: 'idle',
-      chatStreamingContent: '',
-      chatError: null,
-      chatAbortController: null,
-      chatAttachments: [],
-      chatPendingPrompt: null,
-      chatPendingRepairRequest: null,
-      chatViewportScreenshot: null,
-      chatUsage: null,
-    });
-  },
-
   sendErrorFeedback: (code, error) => {
     const feedbackMessage: ChatMessage = {
       id: crypto.randomUUID(),

package/src/store/slices/sectionSlice.test.ts

@@ -47,6 +47,14 @@ describe('SectionSlice', () => {
       assert.strictEqual(state.sectionPlane.axis, 'side');
       assert.strictEqual(state.sectionPlane.position, 75);
     });
+
+    it('should auto-enable the clip so the axis change is immediately visible', () => {
+      // Simulate a user who disabled clipping, then picks a new axis — they
+      // almost certainly want to see the new cut, not stay in "Clip off".
+      state.sectionPlane.enabled = false;
+      state.setSectionPlaneAxis('front');
+      assert.strictEqual(state.sectionPlane.enabled, true);
+    });
   });
 
   describe('setSectionPlanePosition', () => {
@@ -74,6 +82,74 @@ describe('SectionSlice', () => {
       state.setSectionPlanePosition('50' as any);
       assert.strictEqual(state.sectionPlane.position, 50);
     });
+
+    it('should auto-enable the clip when the slider moves', () => {
+      // This is the fix for the "it jitters, doesn't cut" user report: moving
+      // the slider implicitly turns on clipping so the user doesn't have to
+      // hunt for the toggle.
+      state.sectionPlane.enabled = false;
+      state.setSectionPlanePosition(42);
+      assert.strictEqual(state.sectionPlane.enabled, true);
+      assert.strictEqual(state.sectionPlane.position, 42);
+    });
+  });
+
+  describe('setSectionPlaneEnabled', () => {
+    it('should set enabled to true explicitly', () => {
+      state.sectionPlane.enabled = false;
+      state.setSectionPlaneEnabled(true);
+      assert.strictEqual(state.sectionPlane.enabled, true);
+    });
+
+    it('should set enabled to false explicitly', () => {
+      state.setSectionPlaneEnabled(false);
+      assert.strictEqual(state.sectionPlane.enabled, false);
+    });
+  });
+
+  describe('setSectionShowCap', () => {
+    it('should toggle the showCap flag without touching clipping', () => {
+      assert.strictEqual(state.sectionPlane.showCap, true);
+      state.setSectionShowCap(false);
+      assert.strictEqual(state.sectionPlane.showCap, false);
+      // Clipping unchanged — cap is a visual-only add-on.
+      assert.strictEqual(state.sectionPlane.enabled, true);
+    });
+  });
+
+  describe('setSectionShowOutlines', () => {
+    it('should toggle the showOutlines flag independently of showCap and clipping', () => {
+      assert.strictEqual(state.sectionPlane.showOutlines, true);
+      state.setSectionShowOutlines(false);
+      assert.strictEqual(state.sectionPlane.showOutlines, false);
+      assert.strictEqual(state.sectionPlane.showCap, true);
+      assert.strictEqual(state.sectionPlane.enabled, true);
+    });
+
+    it('should set showOutlines back to true', () => {
+      state.setSectionShowOutlines(false);
+      state.setSectionShowOutlines(true);
+      assert.strictEqual(state.sectionPlane.showOutlines, true);
+    });
+  });
+
+  describe('setSectionCapStyle', () => {
+    it('should partially update the cap style without clobbering other fields', () => {
+      const before = state.sectionPlane.capStyle;
+      state.setSectionCapStyle({ pattern: 'concrete' });
+      assert.strictEqual(state.sectionPlane.capStyle.pattern, 'concrete');
+      assert.strictEqual(state.sectionPlane.capStyle.spacingPx, before.spacingPx);
+      assert.strictEqual(state.sectionPlane.capStyle.angleRad,  before.angleRad);
+    });
+
+    it('should accept custom fill and stroke colours', () => {
+      state.setSectionCapStyle({
+        fillColor:   [0.2, 0.3, 0.4, 1.0],
+        strokeColor: [0.9, 0.1, 0.1, 1.0],
+      });
+      assert.deepStrictEqual(state.sectionPlane.capStyle.fillColor,   [0.2, 0.3, 0.4, 1.0]);
+      assert.deepStrictEqual(state.sectionPlane.capStyle.strokeColor, [0.9, 0.1, 0.1, 1.0]);
+    });
   });
 
   describe('toggleSectionPlane', () => {
@@ -106,13 +182,13 @@ describe('SectionSlice', () => {
 
   describe('resetSectionPlane', () => {
     it('should reset to default values', () => {
-      // Modify state
-      state.sectionPlane = {
-        axis: 'side',
-        position: 25,
-        enabled: false,
-        flipped: true,
-      };
+      state.setSectionPlaneAxis('side');
+      state.setSectionPlanePosition(25);
+      state.setSectionPlaneEnabled(false);
+      state.flipSectionPlane();
+      state.setSectionShowCap(false);
+      state.setSectionShowOutlines(false);
+      state.setSectionCapStyle({ pattern: 'brick' });
 
       state.resetSectionPlane();
 
@@ -120,6 +196,10 @@ describe('SectionSlice', () => {
       assert.strictEqual(state.sectionPlane.position, SECTION_PLANE_DEFAULTS.POSITION);
       assert.strictEqual(state.sectionPlane.enabled, SECTION_PLANE_DEFAULTS.ENABLED);
       assert.strictEqual(state.sectionPlane.flipped, SECTION_PLANE_DEFAULTS.FLIPPED);
+      assert.strictEqual(state.sectionPlane.showCap, SECTION_PLANE_DEFAULTS.SHOW_CAP);
+      assert.strictEqual(state.sectionPlane.showOutlines, SECTION_PLANE_DEFAULTS.SHOW_OUTLINES);
+      // Default cap pattern restored.
+      assert.strictEqual(state.sectionPlane.capStyle.pattern, 'diagonal');
     });
   });
 });

package/src/store/slices/sectionSlice.ts

@@ -7,8 +7,103 @@
  */
 
 import type { StateCreator } from 'zustand';
-import type { SectionPlane, SectionPlaneAxis } from '../types.js';
-import { SECTION_PLANE_DEFAULTS } from '../constants.js';
+import type { SectionPlane, SectionPlaneAxis, SectionCapStyle, SectionCapHatchId } from '../types.js';
+import { SECTION_PLANE_DEFAULTS, SECTION_CAP_DEFAULTS } from '../constants.js';
+
+// ─── Persistence ─────────────────────────────────────────────────────────
+// Cap appearance (hatch pattern, colours, spacing, angle, whether the cap is
+// shown at all) persists across reloads via localStorage, so the user's
+// preferred cut surface survives closing and re-opening the app. Axis and
+// position are session-scoped because they only make sense relative to a
+// loaded model. See chatSlice.ts for the same direct-localStorage pattern
+// used elsewhere in the store.
+const CAP_STYLE_STORAGE_KEY     = 'ifc-lite:section-cap-style';
+const CAP_SHOW_STORAGE_KEY      = 'ifc-lite:section-cap-show';
+const OUTLINES_SHOW_STORAGE_KEY = 'ifc-lite:section-outlines-show';
+
+const HATCH_IDS: readonly SectionCapHatchId[] = [
+  'solid', 'diagonal', 'crossHatch', 'horizontal',
+  'vertical', 'concrete', 'brick', 'insulation',
+] as const;
+
+function isHatchId(v: unknown): v is SectionCapHatchId {
+  return typeof v === 'string' && (HATCH_IDS as readonly string[]).includes(v);
+}
+
+function isRgba(v: unknown): v is [number, number, number, number] {
+  return Array.isArray(v) && v.length === 4 && v.every((n) => typeof n === 'number' && Number.isFinite(n));
+}
+
+function loadCapStyle(): SectionCapStyle {
+  const fallback: SectionCapStyle = {
+    fillColor:   [...SECTION_CAP_DEFAULTS.FILL_COLOR],
+    strokeColor: [...SECTION_CAP_DEFAULTS.STROKE_COLOR],
+    pattern:     SECTION_CAP_DEFAULTS.PATTERN,
+    spacingPx:   SECTION_CAP_DEFAULTS.SPACING_PX,
+    angleRad:    SECTION_CAP_DEFAULTS.ANGLE_RAD,
+    widthPx:     SECTION_CAP_DEFAULTS.WIDTH_PX,
+    secondaryAngleRad: SECTION_CAP_DEFAULTS.SECONDARY_ANGLE_RAD,
+  };
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const raw = window.localStorage.getItem(CAP_STYLE_STORAGE_KEY);
+    if (!raw) return fallback;
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    return {
+      fillColor:   isRgba(parsed.fillColor)   ? parsed.fillColor   : fallback.fillColor,
+      strokeColor: isRgba(parsed.strokeColor) ? parsed.strokeColor : fallback.strokeColor,
+      pattern:     isHatchId(parsed.pattern)  ? parsed.pattern     : fallback.pattern,
+      spacingPx:   typeof parsed.spacingPx === 'number' && Number.isFinite(parsed.spacingPx)
+        ? Math.max(2, parsed.spacingPx) : fallback.spacingPx,
+      angleRad:    typeof parsed.angleRad === 'number' && Number.isFinite(parsed.angleRad)
+        ? parsed.angleRad : fallback.angleRad,
+      widthPx:     typeof parsed.widthPx === 'number' && Number.isFinite(parsed.widthPx)
+        ? Math.max(1, parsed.widthPx) : fallback.widthPx,
+      secondaryAngleRad: typeof parsed.secondaryAngleRad === 'number' && Number.isFinite(parsed.secondaryAngleRad)
+        ? parsed.secondaryAngleRad : fallback.secondaryAngleRad,
+    };
+  } catch (error) {
+    console.warn('[section] failed to load cap style from localStorage', error);
+    return fallback;
+  }
+}
+
+function saveCapStyle(style: SectionCapStyle): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(CAP_STYLE_STORAGE_KEY, JSON.stringify(style));
+  } catch (error) {
+    // Storage quota, private mode etc. — preference just doesn't persist this
+    // session; log so a missing setting is at least diagnosable in devtools.
+    console.warn('[section] failed to save cap style to localStorage', error);
+  }
+}
+
+function loadBoolean(key: string, fallback: boolean): boolean {
+  if (typeof window === 'undefined') return fallback;
+  try {
+    const raw = window.localStorage.getItem(key);
+    if (raw === 'true') return true;
+    if (raw === 'false') return false;
+  } catch (error) {
+    console.warn(`[section] failed to load preference '${key}' from localStorage`, error);
+  }
+  return fallback;
+}
+
+function saveBoolean(key: string, value: boolean): void {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(key, String(value));
+  } catch (error) {
+    console.warn(`[section] failed to save preference '${key}' to localStorage`, error);
+  }
+}
+
+const loadShowCap      = () => loadBoolean(CAP_SHOW_STORAGE_KEY,      SECTION_PLANE_DEFAULTS.SHOW_CAP);
+const saveShowCap      = (v: boolean) => saveBoolean(CAP_SHOW_STORAGE_KEY,      v);
+const loadShowOutlines = () => loadBoolean(OUTLINES_SHOW_STORAGE_KEY, SECTION_PLANE_DEFAULTS.SHOW_OUTLINES);
+const saveShowOutlines = (v: boolean) => saveBoolean(OUTLINES_SHOW_STORAGE_KEY, v);
 
 export interface SectionSlice {
   // State
@@ -18,15 +113,28 @@ export interface SectionSlice {
   setSectionPlaneAxis: (axis: SectionPlaneAxis) => void;
   setSectionPlanePosition: (position: number) => void;
   toggleSectionPlane: () => void;
+  setSectionPlaneEnabled: (enabled: boolean) => void;
   flipSectionPlane: () => void;
+  setSectionShowCap: (show: boolean) => void;
+  setSectionShowOutlines: (show: boolean) => void;
+  setSectionCapStyle: (style: Partial<SectionCapStyle>) => void;
   resetSectionPlane: () => void;
 }
 
+const getDefaultCapStyle = (): SectionCapStyle => loadCapStyle();
+
 const getDefaultSectionPlane = (): SectionPlane => ({
   axis: SECTION_PLANE_DEFAULTS.AXIS,
   position: SECTION_PLANE_DEFAULTS.POSITION,
   enabled: SECTION_PLANE_DEFAULTS.ENABLED,
   flipped: SECTION_PLANE_DEFAULTS.FLIPPED,
+  // showCap + showOutlines + capStyle come from localStorage so the
+  // user's preferred cut-surface appearance survives reloads; the axis,
+  // position, and enabled fields stay session-scoped because they only
+  // make sense for the currently loaded model.
+  showCap:      loadShowCap(),
+  showOutlines: loadShowOutlines(),
+  capStyle:     getDefaultCapStyle(),
 });
 
 export const createSectionSlice: StateCreator<SectionSlice, [], [], SectionSlice> = (set) => ({
@@ -35,14 +143,19 @@ export const createSectionSlice: StateCreator<SectionSlice, [], [], SectionSlice
 
   // Actions
   setSectionPlaneAxis: (axis) => set((state) => ({
-    sectionPlane: { ...state.sectionPlane, axis },
+    // Changing the axis implicitly means "I want to cut now" — enable the clip
+    // so users don't get stuck in a confusing no-op preview.
+    sectionPlane: { ...state.sectionPlane, axis, enabled: true },
   })),
 
   setSectionPlanePosition: (position) => set((state) => {
     // Clamp position to valid range [0, 100]
     const clampedPosition = Math.min(100, Math.max(0, Number(position) || 0));
     return {
-      sectionPlane: { ...state.sectionPlane, position: clampedPosition },
+      // Moving the slider also enables the cut — previously you had to press
+      // "Cutting" separately, which led to the "it just jitters, doesn't cut"
+      // feedback from users.
+      sectionPlane: { ...state.sectionPlane, position: clampedPosition, enabled: true },
     };
   }),
 
@@ -50,9 +163,42 @@ export const createSectionSlice: StateCreator<SectionSlice, [], [], SectionSlice
     sectionPlane: { ...state.sectionPlane, enabled: !state.sectionPlane.enabled },
   })),
 
+  setSectionPlaneEnabled: (enabled) => set((state) => ({
+    sectionPlane: { ...state.sectionPlane, enabled },
+  })),
+
   flipSectionPlane: () => set((state) => ({
     sectionPlane: { ...state.sectionPlane, flipped: !state.sectionPlane.flipped },
   })),
 
-  resetSectionPlane: () => set({ sectionPlane: getDefaultSectionPlane() }),
+  setSectionShowCap: (showCap) => set((state) => {
+    saveShowCap(showCap);
+    return { sectionPlane: { ...state.sectionPlane, showCap } };
+  }),
+
+  setSectionShowOutlines: (showOutlines) => set((state) => {
+    saveShowOutlines(showOutlines);
+    return { sectionPlane: { ...state.sectionPlane, showOutlines } };
+  }),
+
+  setSectionCapStyle: (style) => set((state) => {
+    const capStyle: SectionCapStyle = { ...state.sectionPlane.capStyle, ...style };
+    saveCapStyle(capStyle);
+    return { sectionPlane: { ...state.sectionPlane, capStyle } };
+  }),
+
+  resetSectionPlane: () => set(() => {
+    // Reset clears persisted cap style too — users asking for defaults expect
+    // the defaults to stick on the next reload.
+    try {
+      if (typeof window !== 'undefined') {
+        window.localStorage.removeItem(CAP_STYLE_STORAGE_KEY);
+        window.localStorage.removeItem(CAP_SHOW_STORAGE_KEY);
+        window.localStorage.removeItem(OUTLINES_SHOW_STORAGE_KEY);
+      }
+    } catch (error) {
+      console.warn('[section] failed to clear persisted cap preferences', error);
+    }
+    return { sectionPlane: getDefaultSectionPlane() };
+  }),
 });

package/src/store/slices/uiSlice.ts

@@ -10,12 +10,14 @@ import type { StateCreator } from 'zustand';
 import { UI_DEFAULTS } from '../constants.js';
 import type { ContactShadingQuality, SeparationLinesQuality } from '@ifc-lite/renderer';
 
+export type ThemeMode = 'light' | 'dark' | 'colorful';
+
 export interface UISlice {
   // State
   leftPanelCollapsed: boolean;
   rightPanelCollapsed: boolean;
   activeTool: string;
-  theme: 'light' | 'dark';
+  theme: ThemeMode;
   isMobile: boolean;
   hoverTooltipsEnabled: boolean;
   visualEnhancementsEnabled: boolean;
@@ -33,8 +35,10 @@ export interface UISlice {
   setLeftPanelCollapsed: (collapsed: boolean) => void;
   setRightPanelCollapsed: (collapsed: boolean) => void;
   setActiveTool: (tool: string) => void;
-  setTheme: (theme: 'light' | 'dark') => void;
+  setTheme: (theme: ThemeMode) => void;
   toggleTheme: () => void;
+  /** Shift+click secret: toggle colorful mode on/off */
+  toggleColorful: () => void;
   setIsMobile: (isMobile: boolean) => void;
   toggleHoverTooltips: () => void;
   setVisualEnhancementsEnabled: (enabled: boolean) => void;
@@ -49,6 +53,13 @@ export interface UISlice {
   setSeparationLinesRadius: (radius: number) => void;
 }
 
+/** Apply the correct CSS classes on <html> for the given theme */
+function applyThemeClasses(theme: ThemeMode) {
+  const el = document.documentElement;
+  el.classList.toggle('dark', theme === 'dark');
+  el.classList.toggle('colorful', theme === 'colorful');
+}
+
 export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get) => ({
   // Initial state
   leftPanelCollapsed: false,
@@ -74,14 +85,26 @@ export const createUISlice: StateCreator<UISlice, [], [], UISlice> = (set, get)
   setActiveTool: (activeTool) => set({ activeTool }),
 
   setTheme: (theme) => {
-    document.documentElement.classList.toggle('dark', theme === 'dark');
+    applyThemeClasses(theme);
     localStorage.setItem('ifc-lite-theme', theme);
     set({ theme });
   },
 
   toggleTheme: () => {
-    const newTheme = get().theme === 'dark' ? 'light' : 'dark';
-    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    // Normal toggle: dark ↔ light. If currently colorful, drop to dark.
+    const current = get().theme;
+    const newTheme = current === 'dark' ? 'light' : 'dark';
+    applyThemeClasses(newTheme);
+    localStorage.setItem('ifc-lite-theme', newTheme);
+    set({ theme: newTheme });
+  },
+
+  toggleColorful: () => {
+    // Shift+click secret: toggle colorful on/off
+    // Into colorful from any state. Out of colorful → light (the storm clears).
+    const current = get().theme;
+    const newTheme: ThemeMode = current === 'colorful' ? 'light' : 'colorful';
+    applyThemeClasses(newTheme);
     localStorage.setItem('ifc-lite-theme', newTheme);
     set({ theme: newTheme });
   },

package/src/store/types.ts

@@ -86,6 +86,12 @@ export interface EdgeLockState {
 /** Semantic axis names: down (Y), front (Z), side (X) for intuitive user experience */
 export type SectionPlaneAxis = 'down' | 'front' | 'side';
 
+// Re-export the renderer's canonical cap-styling types so the viewer store and
+// the WebGPU renderer share a single source of truth. Adding a new hatch
+// pattern only requires editing `packages/renderer/src/section-cap-style.ts`.
+export type { HatchPatternId as SectionCapHatchId, SectionCapStyle } from '@ifc-lite/renderer';
+import type { SectionCapStyle } from '@ifc-lite/renderer';
+
 export interface SectionPlane {
   axis: SectionPlaneAxis;
   /** 0-100 percentage of model bounds */
@@ -93,6 +99,17 @@ export interface SectionPlane {
   enabled: boolean;
   /** If true, show the opposite side of the cut */
   flipped: boolean;
+  /** Whether to render the filled, hatched cap surface at the plane. Defaults to true. */
+  showCap: boolean;
+  /**
+   * Whether to draw polygon outlines on top of the cut (the crisp black
+   * line the architect expects around each sliced element). Independent
+   * from `showCap` so users can have a hatched fill without outlines,
+   * or vice versa. Defaults to true.
+   */
+  showOutlines: boolean;
+  /** User-defined colour + hatch for the cut surface. */
+  capStyle: SectionCapStyle;
 }
 
 // ============================================================================
@@ -272,6 +289,13 @@ export interface NativeMetadataSnapshot {
   spatialTree: NativeMetadataSpatialNode | null;
 }
 
+export type ModelSourceFile = File | {
+  path: string;
+  name: string;
+  size: number;
+  modifiedMs?: number | null;
+};
+
 /** Complete model container for federation */
 export interface FederatedModel {
   /** Unique identifier (UUID generated on load) */
@@ -292,6 +316,8 @@ export interface FederatedModel {
   loadedAt: number;
   /** Original file size in bytes */
   fileSize: number;
+  /** Original source handle used for explicit reload/reposition operations. */
+  sourceFile?: ModelSourceFile;
   /**
    * ID offset for this model (from FederationRegistry)
    * All mesh expressIds are globalIds = originalExpressId + idOffset

package/src/utils/nativeSpatialDataStore.ts

@@ -4,6 +4,7 @@
 
 import {
   IfcTypeEnumFromString,
+  IfcTypeEnumToString,
   isBuildingLikeSpatialType,
   isStoreyLikeSpatialType,
   type SpatialHierarchy,
@@ -103,7 +104,9 @@ function buildEntityLookup() {
           return typeNameById.get(expressId) ?? 'Unknown';
         },
         getByType(type: string | number) {
-          const key = typeof type === 'string' ? type.toUpperCase() : String(type);
+          const key = typeof type === 'string'
+            ? type.toUpperCase()
+            : IfcTypeEnumToString(type).toUpperCase();
           return byType.get(key) ?? [];
         },
       };

package/src/utils/viewportUtils.ts

@@ -301,13 +301,18 @@ export function getRenderThrottleMs(meshCount: number): number {
 
 /**
  * Get clear color based on theme
- * @param theme - 'light' or 'dark'
+ * @param theme - 'light', 'dark', or 'colorful'
  * @returns RGBA clear color tuple
  */
-export function getThemeClearColor(theme: 'light' | 'dark'): [number, number, number, number] {
+export function getThemeClearColor(theme: 'light' | 'dark' | 'colorful'): [number, number, number, number] {
   if (theme === 'light') {
     return [0.96, 0.96, 0.97, 1]; // Light gray
   }
+  if (theme === 'colorful') {
+    // Transparent — the CSS gradient on the canvas element shows through.
+    // alphaMode:'premultiplied' + fragment alpha=1 keeps models fully opaque.
+    return [0, 0, 0, 0];
+  }
   return [0.102, 0.106, 0.149, 1]; // Tokyo Night storm (#1a1b26)
 }
 

package/src/vite-env.d.ts

@@ -13,10 +13,6 @@ interface ImportMetaEnv {
   readonly VITE_USE_SERVER?: string;
   /** Comma-separated free-tier model IDs */
   readonly VITE_LLM_FREE_MODELS?: string;
-  /** Comma-separated pro model IDs grouped by relative cost */
-  readonly VITE_LLM_PRO_MODELS_LOW?: string;
-  readonly VITE_LLM_PRO_MODELS_MEDIUM?: string;
-  readonly VITE_LLM_PRO_MODELS_HIGH?: string;
   /** Comma-separated model IDs that support image inputs */
   readonly VITE_LLM_IMAGE_MODELS?: string;
   /** Comma-separated model IDs that support file attachment context */