ExaDev
diff --git a/‎packages/html/src/jsx.d.ts‎
Lines changed: 42 additions & 0 deletions b/‎packages/html/src/jsx.d.ts‎
Lines changed: 42 additions & 0 deletions
diff --git a/‎packages/patterns/voice-note-simple.tsx‎
Lines changed: 109 additions & 0 deletions b/‎packages/patterns/voice-note-simple.tsx‎
Lines changed: 109 additions & 0 deletions
diff --git a/‎packages/patterns/voice-note.tsx‎
Lines changed: 191 additions & 0 deletions b/‎packages/patterns/voice-note.tsx‎
Lines changed: 191 additions & 0 deletions
@@ -2906,6 +2906,8 @@ interface CTDraggableElement extends CTHTMLElement {}
 interface CTPlaidLinkElement extends CTHTMLElement {}
 interface CTCharmElement extends CTHTMLElement {}
 interface CTIFrameElement extends CTHTMLElement {}
+interface CTVoiceInputElement extends CTHTMLElement {}
+interface CTAudioVisualizerElement extends CTHTMLElement {}
 
 interface CTDraggableAttributes<T> extends CTHTMLAttributes<T> {
   "key"?: number;
@@ -2941,6 +2943,38 @@ interface CTCharmAttributes<T> extends CTHTMLAttributes<T> {
   "space-name"?: string;
 }
 
+interface CTVoiceInputAttributes<T> extends CTHTMLAttributes<T> {
+  "$transcription"?: CellLike<any>;
+  "recordingMode"?: "hold" | "toggle";
+  "autoTranscribe"?: boolean;
+  "maxDuration"?: number;
+  "showWaveform"?: boolean;
+  "disabled"?: boolean;
+  "barCount"?: number;
+  "barWidth"?: number;
+  "barGap"?: number;
+  "minHeight"?: number;
+  "maxHeight"?: number;
+  "visualizerColor"?: string;
+  "smoothing"?: number;
+  "onct-transcription-complete"?: EventHandler<any>;
+  "onct-transcription-error"?: EventHandler<any>;
+  "onct-recording-start"?: EventHandler<any>;
+  "onct-recording-stop"?: EventHandler<any>;
+  "onct-error"?: EventHandler<any>;
+  "onct-change"?: EventHandler<any>;
+}
+
+interface CTAudioVisualizerAttributes<T> extends CTHTMLAttributes<T> {
+  "barCount"?: number;
+  "barWidth"?: number;
+  "barGap"?: number;
+  "minHeight"?: number;
+  "maxHeight"?: number;
+  "color"?: string;
+  "smoothing"?: number;
+}
+
 interface CTChatAttributes<T> extends CTHTMLAttributes<T> {
   "$messages"?: CellLike<any>;
   "pending"?: boolean;
@@ -3889,6 +3923,14 @@ declare global {
         CTCharmAttributes<CTCharmElement>,
         CTCharmElement
       >;
+      "ct-voice-input": CTDOM.DetailedHTMLProps<
+        CTVoiceInputAttributes<CTVoiceInputElement>,
+        CTVoiceInputElement
+      >;
+      "ct-audio-visualizer": CTDOM.DetailedHTMLProps<
+        CTAudioVisualizerAttributes<CTAudioVisualizerElement>,
+        CTAudioVisualizerElement
+      >;
       "ct-fragment": CTDOM.DetailedHTMLProps<
         CTHTMLAttributes<CTFragmentElement>,
         CTFragmentElement
 
@@ -0,0 +1,109 @@
+/// <cts-enable />
+import {
+  Cell,
+  cell,
+  computed,
+  type Default,
+  NAME,
+  recipe,
+  UI,
+} from "commontools";
+
+// Type definition for transcription data (from ct-voice-input component)
+interface TranscriptionChunk {
+  timestamp: [number, number];
+  text: string;
+}
+
+interface TranscriptionData {
+  id: string;
+  text: string;
+  chunks?: TranscriptionChunk[];
+  audioData?: string;
+  duration: number;
+  timestamp: number;
+}
+
+type Input = {
+  title?: Cell<Default<string, "Voice Note Test">>;
+};
+
+type Output = {
+  transcription: Default<TranscriptionData | null, null>;
+};
+
+const VoiceNoteSimple = recipe<Input, Output>(
+  "Voice Note Simple",
+  ({ title }) => {
+    const transcription = cell<TranscriptionData | null>(null);
+    const hasTranscription = computed(() => transcription.get() !== null);
+    const transcriptionText = computed(() => transcription.get()?.text || "");
+    const transcriptionDuration = computed(
+      () => transcription.get()?.duration || 0,
+    );
+    const transcriptionTimestamp = computed(
+      () => transcription.get()?.timestamp || Date.now(),
+    );
+
+    return {
+      [NAME]: title,
+      [UI]: (
+        <ct-screen>
+          <div slot="header">
+            <ct-input
+              $value={title}
+              placeholder="Voice Note Test"
+            />
+          </div>
+
+          <ct-vstack gap="3" style="padding: 1rem; max-width: 600px;">
+            <ct-card>
+              <div style={{ padding: "1rem" }}>
+                <h3 style={{ marginTop: 0 }}>Voice Input Component Test</h3>
+                <p style={{ color: "var(--ct-color-gray-600)" }}>
+                  Hold the microphone button to record. Release to transcribe.
+                </p>
+
+                <ct-voice-input
+                  $transcription={transcription}
+                  recordingMode="hold"
+                  autoTranscribe
+                  maxDuration={60}
+                  showWaveform
+                />
+              </div>
+            </ct-card>
+
+            {hasTranscription && (
+              <ct-card>
+                <div style={{ padding: "1rem" }}>
+                  <h3 style={{ marginTop: 0 }}>Latest Transcription</h3>
+                  <p style={{ margin: "1rem 0" }}>{transcriptionText}</p>
+                  <div
+                    style={{
+                      display: "flex",
+                      gap: "1rem",
+                      fontSize: "0.875rem",
+                      color: "var(--ct-color-gray-600)",
+                    }}
+                  >
+                    <span>
+                      Duration: {transcriptionDuration.toFixed(1)}s
+                    </span>
+                    <span>
+                      Recorded:{" "}
+                      {new Date(transcriptionTimestamp).toLocaleTimeString()}
+                    </span>
+                  </div>
+                </div>
+              </ct-card>
+            )}
+          </ct-vstack>
+        </ct-screen>
+      ),
+      transcription,
+    };
+  },
+);
+
+export default VoiceNoteSimple;
@@ -0,0 +1,191 @@
+/// <cts-enable />
+import {
+  Cell,
+  cell,
+  computed,
+  type Default,
+  handler,
+  NAME,
+  recipe,
+  UI,
+} from "commontools";
+
+// Type definition for transcription data (from ct-voice-input component)
+interface TranscriptionChunk {
+  timestamp: [number, number];
+  text: string;
+}
+
+interface TranscriptionData {
+  id: string;
+  text: string;
+  chunks?: TranscriptionChunk[];
+  audioData?: string;
+  duration: number;
+  timestamp: number;
+}
+
+type Input = {
+  title?: Cell<Default<string, "Voice Note">>;
+};
+
+type Output = {
+  transcription: Default<TranscriptionData | null, null>;
+  notes: Default<TranscriptionData[], []>;
+};
+
+const handleTranscriptionComplete = handler<
+  { detail: { transcription: TranscriptionData } },
+  { notes: Cell<TranscriptionData[]> }
+>(({ detail }, { notes }) => {
+  // Add the transcription to our notes list
+  notes.push(detail.transcription);
+});
+
+const handleDeleteNote = handler<
+  undefined,
+  { noteId: string; notes: Cell<TranscriptionData[]> }
+>((_, { noteId, notes }) => {
+  const currentNotes = notes.get();
+  const filtered = currentNotes.filter((note) => note.id !== noteId);
+  notes.set(filtered);
+});
+
+const VoiceNote = recipe<Input, Output>(
+  "Voice Note",
+  ({ title }) => {
+    const transcription = cell<TranscriptionData | null>(null);
+    const notes = cell<TranscriptionData[]>([]);
+
+    // Computed values for type-safe JSX access
+    const hasTranscription = computed(() => transcription.get() !== null);
+    const transcriptionText = computed(() => transcription.get()?.text || "");
+    const transcriptionDuration = computed(
+      () => transcription.get()?.duration || 0,
+    );
+    const notesCount = computed(() => notes.get().length);
+    const hasNotes = computed(() => notes.get().length > 0);
+
+    return {
+      [NAME]: title,
+      [UI]: (
+        <ct-screen>
+          <div slot="header">
+            <ct-input
+              $value={title}
+              placeholder="Voice Note"
+              readonly
+            />
+          </div>
+
+          <ct-vstack gap="3">
+            <ct-card>
+              <div style={{ padding: "1rem" }}>
+                <h3 style={{ marginTop: 0 }}>Record a Voice Note</h3>
+                <p style={{ color: "var(--ct-color-gray-600)" }}>
+                  Hold the microphone button to record. Release to transcribe.
+                </p>
+
+                <ct-voice-input
+                  $transcription={transcription}
+                  recordingMode="hold"
+                  autoTranscribe
+                  maxDuration={120}
+                  showWaveform
+                  onct-transcription-complete={handleTranscriptionComplete({
+                    notes,
+                  })}
+                />
+
+                {hasTranscription && (
+                  <div
+                    style={{
+                      marginTop: "1rem",
+                      padding: "1rem",
+                      backgroundColor: "var(--ct-color-blue-50)",
+                      borderRadius: "0.375rem",
+                    }}
+                  >
+                    <strong>Latest Transcription:</strong>
+                    <p>{transcriptionText}</p>
+                    <small style={{ color: "var(--ct-color-gray-600)" }}>
+                      Duration: {transcriptionDuration.toFixed(1)}s
+                    </small>
+                  </div>
+                )}
+              </div>
+            </ct-card>
+
+            <ct-card>
+              <div style={{ padding: "1rem" }}>
+                <h3 style={{ marginTop: 0 }}>
+                  Saved Notes ({notesCount})
+                </h3>
+
+                {!hasNotes
+                  ? (
+                    <p style={{ color: "var(--ct-color-gray-500)" }}>
+                      No voice notes yet. Record one above!
+                    </p>
+                  )
+                  : (
+                    <ct-vstack gap="2">
+                      {notes.map((note) => (
+                        <div
+                          style={{
+                            padding: "0.75rem",
+                            border: "1px solid var(--ct-color-gray-200)",
+                            borderRadius: "0.375rem",
+                            position: "relative",
+                          }}
+                        >
+                          <div
+                            style={{
+                              display: "flex",
+                              justifyContent: "space-between",
+                              alignItems: "flex-start",
+                              gap: "0.5rem",
+                            }}
+                          >
+                            <div style={{ flex: 1 }}>
+                              <p style={{ margin: "0 0 0.5rem 0" }}>
+                                {note.text}
+                              </p>
+                              <small
+                                style={{
+                                  color: "var(--ct-color-gray-600)",
+                                  display: "block",
+                                }}
+                              >
+                                {new Date(note.timestamp).toLocaleString()} ·
+                                {" "}
+                                {note.duration.toFixed(1)}s
+                              </small>
+                            </div>
+                            <ct-button
+                              variant="ghost"
+                              size="sm"
+                              onClick={handleDeleteNote({
+                                noteId: note.id,
+                                notes,
+                              })}
+                            >
+                              ×
+                            </ct-button>
+                          </div>
+                        </div>
+                      ))}
+                    </ct-vstack>
+                  )}
+              </div>
+            </ct-card>
+          </ct-vstack>
+        </ct-screen>
+      ),
+      transcription,
+      notes,
+    };
+  },
+);
+
+export default VoiceNote;