From 55da04a3f75a66c73d18617e8eaccc50a8a934e1 Mon Sep 17 00:00:00 2001
From: CC Worker <cc-worker@kevlarai.local>
Date: Sun, 31 May 2026 21:47:43 +0000
Subject: [PATCH 1/2] refactor(shape-css): move static shape styles to CSS
 classes and drop unused constants import

---
 src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx  | 64 ++++---------------
 .../ui-overrides/components/shared/panel.css  | 60 +++++++++++++++++
 2 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
index 24a2e03..80e29d5 100644
--- a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
+++ b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { BaseBoxShapeUtil, HTMLContainer, toDomPrecision } from '@tldraw/tldraw'
 import { CCBaseShape } from './cc-types'
-import { CC_BASE_STYLE_CONSTANTS } from './cc-styles'
 import { logger } from '../../../debugConfig'
 
 export interface ToolbarItem {
@@ -40,44 +39,32 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
 
   component(shape: T) {
     const {
-      props: { w, h, isLocked },
+      props: { w, h, isLocked, headerColor },
     } = shape
     const toolbarItems = this.getToolbarItems(shape)
     
     return (
       <HTMLContainer
         id={shape.id}
+        className="cc-shape-container"
         style={{
           width: toDomPrecision(w),
           height: toDomPrecision(h),
-          backgroundColor: shape.props.headerColor,
-          borderRadius: CC_BASE_STYLE_CONSTANTS.CONTAINER.borderRadius,
-          boxShadow: CC_BASE_STYLE_CONSTANTS.CONTAINER.boxShadow,
-          overflow: 'hidden',
-          position: 'relative',
-        }}
+          '--shape-header-color': headerColor,
+        } as React.CSSProperties}
       >
         {/* Header */}
         <div
-          style={{
-            backgroundColor: shape.props.headerColor,
-            padding: CC_BASE_STYLE_CONSTANTS.HEADER.padding,
-            height: CC_BASE_STYLE_CONSTANTS.HEADER.height,
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            cursor: isLocked ? 'not-allowed' : 'move',
-            pointerEvents: 'all',
-            position: 'relative',
-            zIndex: 1,
-          }}
+          className="cc-shape-header"
+          style={{ cursor: isLocked ? 'not-allowed' : 'move' }}
         >
-          <span style={{ color: 'white', fontWeight: 'bold' }}>{shape.props.title}</span>
-          <div style={{ display: 'flex', gap: '4px', alignItems: 'center', pointerEvents: 'all' }}>
+          <span className="shape-title">{shape.props.title}</span>
+          <div className="cc-shape-toolbar">
             {toolbarItems.map((item) => (
               <button
                 key={item.id}
                 title={item.label}
+                style={{ opacity: item.isActive ? 1 : 0.7 }}
                 onClick={(e) => {
                   logger.info('cc-base-shape-util', 'toolbar item clicked', item.id)
                   e.preventDefault()
@@ -89,25 +76,6 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
                   e.preventDefault()
                   e.stopPropagation()
                 }}
-                style={{
-                  background: 'transparent',
-                  border: 'none',
-                  padding: '4px',
-                  cursor: 'pointer',
-                  color: 'white',
-                  opacity: item.isActive ? 1 : 0.7,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  pointerEvents: 'all',
-                  fontSize: '16px',
-                  width: '24px',
-                  height: '24px',
-                  zIndex: 100,
-                  userSelect: 'none',
-                  position: 'relative',
-                  touchAction: 'none',
-                }}
               >
                 <div style={{ pointerEvents: 'none' }}>
                   {item.icon}
@@ -118,17 +86,9 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
           </div>
         </div>
         {/* Content */}
-        <div 
-          style={{
-            position: 'absolute',
-            top: CC_BASE_STYLE_CONSTANTS.HEADER.height,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            overflow: 'auto',
-            padding: CC_BASE_STYLE_CONSTANTS.CONTENT.padding,
-            backgroundColor: shape.props.backgroundColor,
-          }}
+        <div
+          className="cc-shape-content"
+          style={{ backgroundColor: shape.props.backgroundColor }}
         >
           {this.renderContent(shape)}
         </div>
diff --git a/src/utils/tldraw/ui-overrides/components/shared/panel.css b/src/utils/tldraw/ui-overrides/components/shared/panel.css
index 920ae0e..b341777 100644
--- a/src/utils/tldraw/ui-overrides/components/shared/panel.css
+++ b/src/utils/tldraw/ui-overrides/components/shared/panel.css
@@ -268,4 +268,64 @@
   text-align: center;
   color: var(--color-text-2);
   padding: 16px;
+}
+
+/* CC Base Shape Styles */
+.cc-shape-container {
+  overflow: hidden;
+  position: relative;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px var(--color-muted-1);
+}
+
+.cc-shape-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: not-allowed;
+  position: relative;
+  z-index: 1;
+  background: var(--shape-header-color, var(--color-muted));
+  padding: 8px;
+  height: 32px;
+}
+
+.cc-shape-header .shape-title {
+  color: white;
+  font-weight: bold;
+}
+
+.cc-shape-toolbar {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+
+.cc-shape-toolbar button {
+  background: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: white;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  width: 24px;
+  height: 24px;
+  z-index: 100;
+  user-select: none;
+  position: relative;
+  touch-action: none;
+}
+
+.cc-shape-content {
+  position: absolute;
+  top: 32px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  padding: 8px;
 }
\ No newline at end of file

From 061cd2274881bc396a734e2a75715b84703d60a7 Mon Sep 17 00:00:00 2001
From: CC Worker <cc-worker@kevlarai.local>
Date: Sun, 31 May 2026 22:10:08 +0000
Subject: [PATCH 2/2] fix(shape-css): add pointer-events:all to header/toolbar;
 fix hardcoded white on lock icon

- .cc-shape-header and .cc-shape-toolbar button were missing pointer-events:all,
  causing toolbar buttons to be unclickable inside tldraw canvas
- Replace color:'white' on lock indicator with var(--cc-text-inverse)
---
 src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx              | 2 +-
 src/utils/tldraw/ui-overrides/components/shared/panel.css | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
index 80e29d5..0aa5a06 100644
--- a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
+++ b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
@@ -82,7 +82,7 @@ export abstract class CCBaseShapeUtil<T extends CCBaseShape> extends BaseBoxShap
                 </div>
               </button>
             ))}
-            {isLocked && <span style={{ color: 'white' }}>🔒</span>}
+            {isLocked && <span style={{ color: 'var(--cc-text-inverse)' }}>🔒</span>}
           </div>
         </div>
         {/* Content */}
diff --git a/src/utils/tldraw/ui-overrides/components/shared/panel.css b/src/utils/tldraw/ui-overrides/components/shared/panel.css
index b341777..2b8e360 100644
--- a/src/utils/tldraw/ui-overrides/components/shared/panel.css
+++ b/src/utils/tldraw/ui-overrides/components/shared/panel.css
@@ -283,6 +283,7 @@
   justify-content: space-between;
   align-items: center;
   cursor: not-allowed;
+  pointer-events: all;
   position: relative;
   z-index: 1;
   background: var(--shape-header-color, var(--color-muted));
@@ -311,6 +312,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  pointer-events: all;
   font-size: 16px;
   width: 24px;
   height: 24px;