@operato/property-panel 10.0.0-beta.6 → 10.0.0-beta.60

package/dist/src/property-panel/threed/property-scene3d.js

@@ -3,49 +3,74 @@
  */
 import { __decorate } from "tslib";
 import '@operato/input/ox-input-color.js';
+import '@operato/i18n/ox-i18n.js';
 import './property-material3d.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { PropertyGridStyles } from '@operato/styles/property-grid-styles.js';
 import { AbstractProperty } from '../abstract-property.js';
-const LIGHTING_PRESETS = {
-    Neutral: {
-        hemiIntensity: 0.6,
-        dirLightEnabled: true,
-        dirLightColor: '#ffffff',
-        dirLightIntensity: 0.5
+/**
+ * Environment별 기본 조명 프로파일.
+ * Environment 드롭다운에서 선택 시 sky 값과 함께 이 조명 필드들이 자동 적용된다.
+ * Light Mood(아래)는 이 위에 얹는 오버라이드 역할.
+ */
+const ENVIRONMENT_DEFAULTS = {
+    // 실내
+    studio: {
+        hemiSkyColor: '#ffffff', hemiGroundColor: '#888888', hemiIntensity: 3.0,
+        dirLightEnabled: true, dirLightColor: '#ffffff', dirLightIntensity: 2.0,
+        dirLightFollowCamera: true
+    },
+    warehouse: {
+        hemiSkyColor: '#e0e4ea', hemiGroundColor: '#707880', hemiIntensity: 2.5,
+        dirLightEnabled: true, dirLightColor: '#f8fafc', dirLightIntensity: 1.8,
+        dirLightFollowCamera: true
+    },
+    factory: {
+        hemiSkyColor: '#d8dce2', hemiGroundColor: '#606870', hemiIntensity: 2.0,
+        dirLightEnabled: true, dirLightColor: '#e8eef2', dirLightIntensity: 2.0,
+        dirLightFollowCamera: true
     },
-    Studio: {
-        hemiIntensity: 0.5,
-        dirLightEnabled: true,
-        dirLightColor: '#ffffff',
-        dirLightIntensity: 0.6
+    office: {
+        hemiSkyColor: '#ffffff', hemiGroundColor: '#aaaaaa', hemiIntensity: 3.0,
+        dirLightEnabled: true, dirLightColor: '#ffffff', dirLightIntensity: 1.5,
+        dirLightFollowCamera: true
     },
-    Bright: {
-        hemiIntensity: 0.8,
-        dirLightEnabled: true,
-        dirLightColor: '#ffffff',
-        dirLightIntensity: 0.7
+    home: {
+        hemiSkyColor: '#ffe8c8', hemiGroundColor: '#7a5a40', hemiIntensity: 2.0,
+        dirLightEnabled: true, dirLightColor: '#ffd8a0', dirLightIntensity: 1.5,
+        dirLightFollowCamera: true
     },
-    Warm: {
-        hemiIntensity: 0.5,
-        dirLightEnabled: true,
-        dirLightColor: '#ffcc88',
-        dirLightIntensity: 0.4
+    // 실외 (날씨)
+    sunny: {
+        hemiSkyColor: '#87ceeb', hemiGroundColor: '#8b7355', hemiIntensity: 2.0,
+        dirLightEnabled: true, dirLightColor: '#fff4cf', dirLightIntensity: 3.0,
+        dirLightFollowCamera: false, dirLightAzimuth: 135, dirLightElevation: 60
     },
-    Cool: {
-        hemiIntensity: 0.5,
-        dirLightEnabled: true,
-        dirLightColor: '#cce0ff',
-        dirLightIntensity: 0.4
+    cloudy: {
+        hemiSkyColor: '#c8cbd0', hemiGroundColor: '#9ba1a8', hemiIntensity: 3.0,
+        dirLightEnabled: true, dirLightColor: '#e8e8e8', dirLightIntensity: 0.6,
+        dirLightFollowCamera: false, dirLightAzimuth: 120, dirLightElevation: 50
     },
-    Flat: {
-        hemiIntensity: 0.8,
-        dirLightEnabled: false,
-        dirLightColor: '#ffffff',
-        dirLightIntensity: 0
+    rainy: {
+        hemiSkyColor: '#8a909a', hemiGroundColor: '#4a4f55', hemiIntensity: 1.5,
+        dirLightEnabled: true, dirLightColor: '#b8c0c8', dirLightIntensity: 0.3,
+        dirLightFollowCamera: false, dirLightAzimuth: 110, dirLightElevation: 40
     }
 };
+/**
+ * Light Mood 프리셋 — Environment 기본값 위에 얹는 분위기 오버라이드.
+ * Environment(지금 씬이 어디에 있는가)와 독립적으로 작동하며 sky는 건드리지 않는다.
+ * 원자 조명 필드(hemi/dir)만 세팅.
+ */
+const LIGHTING_PRESETS = {
+    Bright: { hemiIntensity: 3.0, dirLightEnabled: true, dirLightColor: '#ffffff', dirLightIntensity: 2.5 },
+    Dim: { hemiIntensity: 0.5, dirLightEnabled: true, dirLightColor: '#fff5e0', dirLightIntensity: 0.5 },
+    Warm: { hemiIntensity: 1.5, dirLightEnabled: true, dirLightColor: '#ffaa55', dirLightIntensity: 2.0 },
+    Cool: { hemiIntensity: 1.5, dirLightEnabled: true, dirLightColor: '#88bbff', dirLightIntensity: 2.0 },
+    Dramatic: { hemiIntensity: 0.3, dirLightEnabled: true, dirLightColor: '#ffffff', dirLightIntensity: 3.0 },
+    Flat: { hemiIntensity: 3.0, dirLightEnabled: false, dirLightColor: '#ffffff', dirLightIntensity: 0 }
+};
 /**
  * Scene-level 3D settings for model-layer.
  * Includes 3D mode, camera, renderer, lighting, presets, and floor configuration.
@@ -58,19 +83,112 @@ export class PropertyScene3D extends AbstractProperty {
     render() {
         const value = this.value || {};
         return html `
-      ${this._renderMode(value)} ${this._renderBookmarks(value)} ${this._renderRenderer(value)}
-      ${this._renderSky(value)}
+      ${this._renderMode(value)} ${this._renderPlacement(value)}
+      ${this._renderCamera(value)}
+      ${this._renderRenderer(value)} ${this._renderSky(value)}
       ${this._renderHemisphereLight(value)} ${this._renderKeyLight(value)} ${this._renderLightingPresets()}
       ${this._renderFloor(value)}
     `;
     }
+    /**
+     * Camera 초기 설정 — Initial View(뷰 프리셋), FOV/Near/Far, 현재 카메라 저장 버튼.
+     * 사용자가 씬을 3D로 돌려본 후 "이 각도가 마음에 든다" 싶으면
+     * Save Current View로 현재 viewport의 position을 모델에 기록 → 다음 로드 시 같은 각도로 시작.
+     */
+    _renderCamera(value) {
+        var _a, _b, _c;
+        const views = [
+            { value: 'perspective', label: 'Perspective' },
+            { value: 'top', label: 'Top' },
+            { value: 'front', label: 'Front' },
+            { value: 'back', label: 'Back' },
+            { value: 'right', label: 'Right' },
+            { value: 'left', label: 'Left' }
+        ];
+        const currentView = value.initialCameraView || 'perspective';
+        const fov = Number((_a = value.fov) !== null && _a !== void 0 ? _a : 45);
+        const near = Number((_b = value.near) !== null && _b !== void 0 ? _b : 0.1);
+        const far = Number((_c = value.far) !== null && _c !== void 0 ? _c : 20000);
+        return html `
+      <fieldset>
+        <legend>Camera</legend>
+        <div class="property-grid">
+          <label>Initial View</label>
+          <select value-key="initialCameraView">
+            ${views.map(v => html `<option value=${v.value} ?selected=${currentView === v.value}>${v.label}</option>`)}
+          </select>
+
+          <label>FOV</label>
+          <input type="number" value-key="fov" step="1" min="1" max="170" .value=${String(fov)} />
+
+          <label>Near</label>
+          <input type="number" value-key="near" step="0.1" min="0.01" .value=${String(near)} />
+
+          <label>Far</label>
+          <input type="number" value-key="far" step="100" min="1" .value=${String(far)} />
+        </div>
+
+        <div class="camera-actions">
+          <button type="button" @click=${this._onSaveCameraView}>Save Current View</button>
+        </div>
+      </fieldset>
+    `;
+    }
+    /**
+     * 현재 3D viewport의 카메라 상태를 모델에 저장한다.
+     * scene의 getCameraState를 호출하여 view/cameraX/cameraY/cameraZ를 얻어 property-change로 전파.
+     */
+    _onSaveCameraView() {
+        var _a, _b, _c;
+        const cap = (_c = (_b = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.rootContainer) === null || _b === void 0 ? void 0 : _b.model_layer) === null || _c === void 0 ? void 0 : _c._threeCapability;
+        if (!(cap === null || cap === void 0 ? void 0 : cap.getCameraState))
+            return;
+        const state = cap.getCameraState();
+        if (!state)
+            return;
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                initialCameraView: state.view,
+                cameraX: state.cameraX,
+                cameraY: state.cameraY,
+                cameraZ: state.cameraZ
+            }
+        }));
+    }
+    /**
+     * Scene placement 모드 선택 — zPos 해석과 볼륨 origin 방향을 씬 전체에 일관 적용.
+     *   floor   : zPos=바닥 높이, 볼륨이 위로 쌓임 (공장/창고/건축)
+     *   space   : zPos=볼륨 중심 Y, 바닥 개념 없음 (우주/추상/전시)
+     *   inverted: zPos=천장, 볼륨이 아래로 매달림 (천장 설비, 베타)
+     */
+    _renderPlacement(value) {
+        const options = [
+            { value: 'floor', label: 'Floor (default)' },
+            { value: 'space', label: 'Space' },
+            { value: 'inverted', label: 'Inverted (beta)' }
+        ];
+        const current = value.placement || 'floor';
+        return html `
+      <fieldset>
+        <legend>Placement</legend>
+        <div class="property-grid">
+          <label>Mode</label>
+          <select value-key="placement">
+            ${options.map(o => html `<option value=${o.value} ?selected=${current === o.value}>${o.label}</option>`)}
+          </select>
+        </div>
+      </fieldset>
+    `;
+    }
     _renderMode(value) {
         return html `
       <fieldset>
         <legend>3D Mode</legend>
         <div class="property-grid">
           <input id="cb-threed" type="checkbox" value-key="threed" .checked=${!!value.threed} />
-          <label for="cb-threed">Enable 3D</label>
+          <label for="cb-threed"><ox-i18n msgid="label.start-in-3d">Start in 3D</ox-i18n></label>
 
           <label>Viewer Auto</label>
           <select value-key="cameraAutoPlay">
@@ -82,87 +200,21 @@ export class PropertyScene3D extends AbstractProperty {
                   ${o.label}
                 </option>`)}
           </select>
+
+          <input
+            id="cb-floor-constraint"
+            type="checkbox"
+            value-key="cameraFloorConstraint"
+            .checked=${!!value.cameraFloorConstraint}
+          />
+          <label for="cb-floor-constraint"><ox-i18n msgid="label.keep-above-ground">Keep Above Ground</ox-i18n></label>
         </div>
       </fieldset>
     `;
     }
-    _renderBookmarks(value) {
-        const bookmarks = value.cameraBookmarks || [];
-        return html `
-      <fieldset>
-        <legend>Bookmarks</legend>
-        <div class="property-grid">
-          <div class="bookmark-slots">
-        ${[1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => {
-            const filled = !!bookmarks[i];
-            return html `
-            <div
-              class="bookmark-slot ${filled ? 'filled' : ''}"
-              title=${filled ? 'Click: Go / Long-click: Overwrite / Right-click: Delete' : 'Long-click: Save current camera'}
-              @click=${(e) => { if (filled) {
-                this._bookmarkAction('navigate', i);
-                const t = e.currentTarget;
-                t.classList.add('saved');
-                setTimeout(() => t.classList.remove('saved'), 300);
-            } }}
-              @contextmenu=${(e) => { e.preventDefault(); if (filled)
-                this._bookmarkAction('clear', i); }}
-              @mousedown=${(e) => this._onBookmarkMouseDown(e, i)}
-              @mouseup=${() => this._onBookmarkMouseUp()}
-              @mouseleave=${() => this._onBookmarkMouseUp()}
-            >${i}</div>
-          `;
-        })}
-          </div>
-        </div>
-      </fieldset>
-    `;
-    }
-    _onBookmarkMouseDown(e, index) {
-        if (e.button !== 0)
-            return;
-        const target = e.currentTarget;
-        this._pressTarget = target;
-        // 롱클릭 시작: filling 애니메이션
-        target.classList.add('saving');
-        this._longPressTimer = setTimeout(() => {
-            this._longPressTimer = undefined;
-            target.classList.remove('saving');
-            this._bookmarkAction('save', index);
-            // 저장 완료 피드백
-            target.classList.add('saved');
-            setTimeout(() => target.classList.remove('saved'), 300);
-        }, 600);
-    }
-    _onBookmarkMouseUp() {
-        if (this._longPressTimer) {
-            clearTimeout(this._longPressTimer);
-            this._longPressTimer = undefined;
-        }
-        if (this._pressTarget) {
-            this._pressTarget.classList.remove('saving');
-            this._pressTarget = undefined;
-        }
-    }
-    _bookmarkAction(action, index) {
-        var _a;
-        const root = (_a = this.scene) === null || _a === void 0 ? void 0 : _a.root;
-        const cap = root === null || root === void 0 ? void 0 : root._threeCapability;
-        if (!cap)
-            return;
-        if (action === 'save') {
-            cap.saveCameraToSlot(index);
-        }
-        else if (action === 'navigate') {
-            cap.animateToSlot(index);
-        }
-        else if (action === 'clear') {
-            cap.bookmarkManager.clearSlot(index);
-            root.set('cameraBookmarks', cap.bookmarkManager.exportSlots());
-        }
-        this.requestUpdate();
-    }
     _renderRenderer(value) {
+        var _a;
+        const exposure = Number((_a = value.exposure) !== null && _a !== void 0 ? _a : 1.2);
         return html `
       <fieldset>
         <legend>Renderer</legend>
@@ -180,27 +232,62 @@ export class PropertyScene3D extends AbstractProperty {
                   ${o.label}
                 </option>`)}
           </select>
+
+          <label>Exposure</label>
+          <div class="range-with-value">
+            <input
+              type="range"
+              min="0.3"
+              max="2.5"
+              step="0.05"
+              value-key="exposure"
+              .value=${String(exposure)}
+            />
+            <span>${exposure.toFixed(2)}</span>
+          </div>
         </div>
       </fieldset>
     `;
     }
+    /**
+     * Environment 드롭다운 — 씬의 공간적 맥락을 정의.
+     * 선택 시 sky 값과 함께 ENVIRONMENT_DEFAULTS의 기본 조명까지 한 번에 적용한다.
+     * "원클릭 전체 look" — 사용자가 원하면 Light Mood/원자 컨트롤로 위에 얹어 조정.
+     */
     _renderSky(value) {
-        const skyOptions = [
-            { value: '', label: 'None' },
-            { value: 'color', label: 'Color' },
-            { value: 'studio', label: 'Studio' },
-            { value: 'warehouse', label: 'Warehouse' },
-            { value: 'factory', label: 'Factory' },
-            { value: 'office', label: 'Office' },
-            { value: 'home', label: 'Home' },
+        const envOptions = [
+            { value: '', label: 'None', group: 'basic' },
+            { value: 'color', label: 'Color', group: 'basic' },
+            { value: 'studio', label: 'Studio', group: 'indoor' },
+            { value: 'warehouse', label: 'Warehouse', group: 'indoor' },
+            { value: 'factory', label: 'Factory', group: 'indoor' },
+            { value: 'office', label: 'Office', group: 'indoor' },
+            { value: 'home', label: 'Home', group: 'indoor' },
+            { value: 'sunny', label: 'Sunny', group: 'outdoor' },
+            { value: 'cloudy', label: 'Cloudy', group: 'outdoor' },
+            { value: 'rainy', label: 'Rainy', group: 'outdoor' }
         ];
         return html `
       <fieldset>
-        <legend>Sky</legend>
+        <legend>Environment</legend>
         <div class="property-grid">
           <label>Preset</label>
-          <select value-key="sky">
-            ${skyOptions.map(o => html `<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`)}
+          <select @change=${this._onEnvironmentChange}>
+            <optgroup label="Basic">
+              ${envOptions
+            .filter(o => o.group === 'basic')
+            .map(o => html `<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`)}
+            </optgroup>
+            <optgroup label="Indoor">
+              ${envOptions
+            .filter(o => o.group === 'indoor')
+            .map(o => html `<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`)}
+            </optgroup>
+            <optgroup label="Outdoor">
+              ${envOptions
+            .filter(o => o.group === 'outdoor')
+            .map(o => html `<option value=${o.value} ?selected=${(value.sky || '') === o.value}>${o.label}</option>`)}
+            </optgroup>
           </select>
 
           ${value.sky === 'color'
@@ -213,12 +300,36 @@ export class PropertyScene3D extends AbstractProperty {
       </fieldset>
     `;
     }
+    /**
+     * Environment 선택 핸들러 — sky 필드만 바꾸는 게 아니라 ENVIRONMENT_DEFAULTS에
+     * 정의된 hemi/dir 기본 조명까지 한 번의 property-change로 함께 적용한다.
+     */
+    _onEnvironmentChange(e) {
+        const select = e.target;
+        const sky = select.value;
+        const detail = { sky };
+        const defaults = ENVIRONMENT_DEFAULTS[sky];
+        if (defaults) {
+            Object.assign(detail, defaults);
+        }
+        this.dispatchEvent(new CustomEvent('property-change', {
+            bubbles: true,
+            composed: true,
+            detail
+        }));
+    }
     _renderHemisphereLight(value) {
         var _a, _b;
         return html `
       <fieldset>
         <legend>Hemisphere Light</legend>
         <div class="property-grid">
+          <label>Sky</label>
+          <ox-input-color value-key="hemiSkyColor" .value=${value.hemiSkyColor || '#ffffff'}></ox-input-color>
+
+          <label>Ground</label>
+          <ox-input-color value-key="hemiGroundColor" .value=${value.hemiGroundColor || '#444444'}></ox-input-color>
+
           <label>Intensity</label>
           <div class="range-with-value">
             <input
@@ -236,7 +347,9 @@ export class PropertyScene3D extends AbstractProperty {
     `;
     }
     _renderKeyLight(value) {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const followCamera = value.dirLightFollowCamera !== false;
+        const shadowEnabled = value.dirShadowEnabled !== false;
         return html `
       <fieldset>
         <legend>Key Light</legend>
@@ -264,22 +377,102 @@ export class PropertyScene3D extends AbstractProperty {
             />
             <span>${((_b = value.dirLightIntensity) !== null && _b !== void 0 ? _b : 0.5).toFixed(1)}</span>
           </div>
+
+          <input
+            id="cb-dirlight-follow"
+            type="checkbox"
+            value-key="dirLightFollowCamera"
+            .checked=${followCamera}
+          />
+          <label for="cb-dirlight-follow">Follow Camera</label>
+
+          ${!followCamera
+            ? html `
+                <label>Azimuth</label>
+                <div class="range-with-value">
+                  <input
+                    type="range"
+                    min="0"
+                    max="360"
+                    step="5"
+                    value-key="dirLightAzimuth"
+                    .value=${String((_c = value.dirLightAzimuth) !== null && _c !== void 0 ? _c : 30)}
+                  />
+                  <span>${Math.round(((_d = value.dirLightAzimuth) !== null && _d !== void 0 ? _d : 30))}°</span>
+                </div>
+
+                <label>Elevation</label>
+                <div class="range-with-value">
+                  <input
+                    type="range"
+                    min="0"
+                    max="90"
+                    step="5"
+                    value-key="dirLightElevation"
+                    .value=${String((_e = value.dirLightElevation) !== null && _e !== void 0 ? _e : 45)}
+                  />
+                  <span>${Math.round(((_f = value.dirLightElevation) !== null && _f !== void 0 ? _f : 45))}°</span>
+                </div>
+              `
+            : ''}
+
+          <input
+            id="cb-dirlight-shadow"
+            type="checkbox"
+            value-key="dirShadowEnabled"
+            .checked=${shadowEnabled}
+          />
+          <label for="cb-dirlight-shadow">Cast Shadow</label>
+
+          ${shadowEnabled
+            ? html `
+                <label>Shadow Bias</label>
+                <div class="range-with-value">
+                  <input
+                    type="range"
+                    min="-0.01"
+                    max="0.01"
+                    step="0.0001"
+                    value-key="dirShadowBias"
+                    .value=${String((_g = value.dirShadowBias) !== null && _g !== void 0 ? _g : -0.0005)}
+                  />
+                  <span>${((_h = value.dirShadowBias) !== null && _h !== void 0 ? _h : -0.0005).toFixed(4)}</span>
+                </div>
+              `
+            : ''}
         </div>
       </fieldset>
     `;
     }
+    /**
+     * Light Mood — Environment가 설정한 기본 조명 위에 얹는 분위기 오버라이드.
+     * sky는 건드리지 않고 hemi/dir 값만 적용. Environment와 독립적으로 조합 가능.
+     */
     _renderLightingPresets() {
         return html `
       <fieldset>
-        <legend>Lighting Presets</legend>
+        <legend>Light Mood</legend>
         <div class="property-grid">
-          <div class="preset-buttons">
-            ${Object.entries(LIGHTING_PRESETS).map(([name, values]) => html `<button @click=${() => this._applyLightingPreset(values)}>${name}</button>`)}
-          </div>
+          <label>Apply</label>
+          <select @change=${this._onPresetChange}>
+            <option value="" selected>Select...</option>
+            ${Object.keys(LIGHTING_PRESETS).map(name => html `<option value=${name}>${name}</option>`)}
+          </select>
         </div>
       </fieldset>
     `;
     }
+    _onPresetChange(e) {
+        const select = e.target;
+        const name = select.value;
+        if (!name)
+            return;
+        const preset = LIGHTING_PRESETS[name];
+        if (preset)
+            this._applyLightingPreset(preset);
+        // 동일 preset을 다시 선택할 수 있도록 초기값으로 리셋
+        select.value = '';
+    }
     _renderFloor(value) {
         return html `
       <property-material3d
@@ -309,30 +502,6 @@ export class PropertyScene3D extends AbstractProperty {
 PropertyScene3D.styles = [
     PropertyGridStyles,
     css `
-      .preset-buttons {
-        grid-column: 1 / -1;
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        padding: 2px 0;
-      }
-
-      .preset-buttons button {
-        flex: 1;
-        min-width: 60px;
-        padding: 4px 6px;
-        border: 1px solid var(--md-sys-color-outline, #ccc);
-        border-radius: 4px;
-        background: var(--md-sys-color-surface, #fff);
-        color: var(--md-sys-color-on-surface, #333);
-        font-size: 11px;
-        cursor: pointer;
-      }
-
-      .preset-buttons button:hover {
-        background: var(--md-sys-color-primary-container, #e0e0e0);
-      }
-
       .range-with-value {
         grid-column: 9 / -1;
         display: flex;
@@ -354,62 +523,24 @@ PropertyScene3D.styles = [
         color: var(--md-sys-color-on-secondary-container);
       }
 
-      .bookmark-slots {
-        grid-column: 1 / -1;
-        display: grid;
-        grid-template-columns: repeat(9, 1fr);
-        gap: 2px;
-        padding: 4px 0 0;
-      }
-
-      .bookmark-slot {
+      .camera-actions {
         display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 24px;
-        border-radius: 3px;
-        font-size: 11px;
-        font-weight: 600;
-        cursor: pointer;
-        color: var(--md-sys-color-outline, #999);
-        background: var(--md-sys-color-surface-variant, #f0f0f0);
-        border: 1px solid transparent;
-        user-select: none;
-        transition: all 0.12s ease;
-      }
-
-      .bookmark-slot:hover {
-        background: var(--md-sys-color-secondary-container, #e0e0e0);
-      }
-
-      .bookmark-slot.filled {
-        color: var(--md-sys-color-primary, #6750A4);
-        background: var(--md-sys-color-primary-container, #EADDFF);
-        border-color: var(--md-sys-color-primary, #6750A4);
-        font-weight: 700;
-      }
-
-      .bookmark-slot:active {
-        transform: scale(0.9);
-      }
-
-      .bookmark-slot.saving {
-        animation: bookmark-fill 0.6s linear forwards;
-      }
-
-      @keyframes bookmark-fill {
-        from { box-shadow: inset 24px 0 0 0 transparent; }
-        to { box-shadow: inset 24px 0 0 0 var(--md-sys-color-primary-container, #EADDFF); }
+        justify-content: flex-end;
+        margin-top: 6px;
       }
 
-      .bookmark-slot.saved {
-        animation: bookmark-saved 0.3s ease;
+      .camera-actions button {
+        font-size: 12px;
+        padding: 4px 10px;
+        border: 1px solid var(--md-sys-color-outline, #c4c7c5);
+        border-radius: 4px;
+        background: var(--md-sys-color-surface, #fff);
+        color: var(--md-sys-color-on-surface, #1c1b1f);
+        cursor: pointer;
       }
 
-      @keyframes bookmark-saved {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.2); }
-        100% { transform: scale(1); }
+      .camera-actions button:hover {
+        background: var(--md-sys-color-surface-variant, #e7e0ec);
       }
     `
 ];