From a9ee01fc138ca841ee7a3b7cc85db3ea3d04ce29 Mon Sep 17 00:00:00 2001
From: rcoenen <753704+rcoenen@users.noreply.github.com>
Date: Sat, 6 Jun 2026 06:28:46 -0400
Subject: [PATCH] fix: make fill hex editable and quiet local font probing

* fix: make fill hex editable and suppress premature local font warnings

- FillSection: replace read-only hex span with editable input for solid
  fills (matching existing stroke behavior); gradient/image fills and
  variable-bound fills keep the display span
- FontManager.findLocalFont: guard on localFontAccessState === 'granted'
  before calling queryLocalFonts(), eliminating SecurityError console
  warnings on load when the user hasn't yet granted font access
- .gitignore: add .opencode/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* style: apply oxfmt formatting to FillSection.vue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Danila Poyarkov <dev@dannote.net>
---
 .gitignore                                |  3 +++
 packages/core/src/text/fonts.ts           |  1 +
 src/components/properties/FillSection.vue | 27 ++++++++++++++++++++++-
 3 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 2fced0a71..0649c0c3e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,3 +48,6 @@ vue-stream-markdown/
 
 # Agent scratch space (reviews, test artifacts)
 scratch/
+
+# OpenCode
+.opencode/
diff --git a/packages/core/src/text/fonts.ts b/packages/core/src/text/fonts.ts
index e08728203..cada408ee 100644
--- a/packages/core/src/text/fonts.ts
+++ b/packages/core/src/text/fonts.ts
@@ -528,6 +528,7 @@ export class FontManager {
     options: FindLocalFontOptions = {}
   ): Promise<ArrayBuffer | null> {
     if (!IS_BROWSER || !window.queryLocalFonts) return null
+    if (this.localFontAccessState !== 'granted') return null
     try {
       const fonts = await window.queryLocalFonts()
       const match = chooseLocalFontMatch(fonts, family, style)
diff --git a/src/components/properties/FillSection.vue b/src/components/properties/FillSection.vue
index c7c978dc8..b40e359fc 100644
--- a/src/components/properties/FillSection.vue
+++ b/src/components/properties/FillSection.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { PropertyListRoot, useFillControls, useOkHCL, useI18n } from '@open-pencil/vue'
+import { PropertyListRoot, useFillControls, useOkHCL, useI18n, inputValue } from '@open-pencil/vue'
+import { colorToHexRaw, parseColor } from '@open-pencil/core/color'
 
 import FillPicker from '@/components/FillPicker.vue'
 import Tip from '@/components/ui/Tip.vue'
@@ -31,6 +32,19 @@ function updateFill(
   }
   update(index, fill)
 }
+
+function updateFillHex(
+  activeNode: SceneNode | null | undefined,
+  index: number,
+  fill: Fill,
+  hex: string,
+  update: (index: number, fill: Fill) => void
+) {
+  if (fill.type !== 'SOLID') return
+  const parsed = parseColor(hex.startsWith('#') ? hex : `#${hex}`)
+  if (!parsed) return
+  updateFill(activeNode, index, { ...fill, color: { ...parsed, a: fill.color.a } }, update)
+}
 </script>
 
 <template>
@@ -80,7 +94,18 @@ function updateFill(
           @update="updateFill(activeNode, i, $event, actions.update)"
         />
 
+        <input
+          v-if="
+            fill.type === 'SOLID' && !(activeNode && fillCtx.getBoundVariable(activeNode.id, i))
+          "
+          data-test-id="fill-hex-input"
+          class="min-w-0 flex-1 border-none bg-transparent font-mono text-xs text-surface outline-none"
+          :value="colorToHexRaw(fill.color)"
+          maxlength="6"
+          @change="updateFillHex(activeNode, i, fill, inputValue($event), actions.update)"
+        />
         <span
+          v-else
           class="min-w-0 flex-1 truncate font-mono text-xs"
           :class="
             activeNode && fillCtx.getBoundVariable(activeNode.id, i)