From 3afba919c4484b6ac2c72a1b303599e244a0b950 Mon Sep 17 00:00:00 2001
From: CC Worker <cc-worker@kevlarai.local>
Date: Sun, 31 May 2026 21:37:45 +0000
Subject: [PATCH 1/3] P4.2-W: replace console.log with logger in
 CCLiveTranscriptionShapeUtil

---
 src/debugConfig.ts                              |  1 +
 .../CCLiveTranscriptionShapeUtil.tsx            | 17 +++++++++--------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/debugConfig.ts b/src/debugConfig.ts
index b3d50b7..776cbb1 100644
--- a/src/debugConfig.ts
+++ b/src/debugConfig.ts
@@ -111,6 +111,7 @@ export type LogCategory =
   | 'user-context'
   | 'neo-user-context'
   | 'neo-institute-context'
+  | 'cc-live-transcription'
   | 'search-service';
 
 interface LogConfig {
diff --git a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx
index cdc2509..9f71860 100644
--- a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx
+++ b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx
@@ -6,6 +6,7 @@ import { TranscriptionManager } from '../cc-transcription/TranscriptionManager';
 import { ccShapeProps, getDefaultCCLiveTranscriptionProps } from '../cc-props';
 import { ccShapeMigrations } from '../cc-migrations';
 import { CC_BASE_STYLE_CONSTANTS } from '../cc-styles';
+import { logger } from '../../../../debugConfig';
 
 export interface TranscriptionSegment {
   id: string
@@ -207,11 +208,11 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
   }
 
   private toggleRecording(shape: CCLiveTranscriptionShape) {
-    console.log('🎤 Toggle recording clicked');
+    logger.debug('cc-live-transcription', '🎤 Toggle recording clicked');
     const { id } = shape;
     const { isRecording } = shape.props;
 
-    console.log('Current state:', { id, isRecording });
+    logger.debug('cc-live-transcription', 'Current state', { id, isRecording });
 
     // When starting new recording, preserve existing props but reset segments
     const newProps = !isRecording ? {
@@ -232,13 +233,13 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
     });
 
     const manager = TranscriptionManager.getManager(this.editor);
-    console.log('Got transcription manager');
+    logger.debug('cc-live-transcription', 'Got transcription manager');
 
     if (!isRecording) {
-      console.log('Starting transcription...');
+      logger.debug('cc-live-transcription', 'Starting transcription...');
       manager.startTranscription(id);
     } else {
-      console.log('Stopping transcription...');
+      logger.debug('cc-live-transcription', 'Stopping transcription...');
       manager.stopTranscription();
     }
   }
@@ -249,10 +250,10 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
     isConfirmed: boolean,
     metadata?: { start: string | number, end: string | number }
   ) {
-    console.log('📝 Updating text:', { id, text, isConfirmed, metadata });
+    logger.debug('cc-live-transcription', '📝 Updating text', { id, text, isConfirmed, metadata });
     const shape = this.editor.getShape<CCLiveTranscriptionShape>(id);
     if (!shape) {
-      console.warn('❌ Shape not found for updating text:', id);
+      logger.warn('cc-live-transcription', '❌ Shape not found for updating text', id);
       return;
     }
 
@@ -308,7 +309,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil<CCLiveTranscri
       });
     }
 
-    console.log('✅ Text updated');
+    logger.debug('cc-live-transcription', '✅ Text updated');
   }
 }
 

From 2a6359e2478b67a0bf866835b9ab7d1294789867 Mon Sep 17 00:00:00 2001
From: CC Worker <cc-worker@kevlarai.local>
Date: Sun, 31 May 2026 21:46:33 +0000
Subject: [PATCH 2/3] feat: extract static shape styles to CSS classes in
 CCBaseShapeUtil

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

diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
index 24a2e03..491c5b6 100644
--- a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
+++ b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
@@ -40,44 +40,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 +77,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 +87,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 d5a7464e15b5666c82723187bd07108fe3dfffa9 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 3/3] fix(logger): remove unused CC_BASE_STYLE_CONSTANTS import
 from CCBaseShapeUtil

---
 src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx
index 491c5b6..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 {