d2d-feedbackkit 0.1.0 → 0.1.1

package/README.md

@@ -64,6 +64,12 @@ const locator = createFeedbackLocator({
   appKey: "host-app",
   appName: "Host App",
   showFloatingButton: false,
+  enableVideoRecording: false,
+  theme: {
+    primary: "45 96% 53%",
+    primaryForeground: "30 70% 8%",
+    ring: "45 96% 53%",
+  },
   submitFeedback: async (input) => {
     const response = await fetch("https://feedbackkit.d2d.cloud/api/submissions", {
       method: "POST",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "d2d-feedbackkit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "description": "SolidJS feedback widget, source locator, and integration helpers.",
   "license": "UNLICENSED",

package/src/solid.tsx

@@ -37,10 +37,11 @@ import type {
   FeedbackLocatorHotkey,
   FeedbackLocatorPoint,
   FeedbackLocatorSourceMetadata,
+  FeedbackLocatorTheme,
 } from "./types";
 import { createShortcutResolver } from "./shortcuts";
 
-type FeedbackLocatorRootProps = {
+export type FeedbackLocatorRootProps = {
   locator: FeedbackLocator;
   open?: boolean;
   defaultOpen?: boolean;
@@ -48,6 +49,8 @@ type FeedbackLocatorRootProps = {
   onClose?: (reason: FeedbackLocatorCloseReason) => void;
   onSubmitted?: (result: FeedbackLocatorHostedSubmitResult) => void;
   showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
 };
 
 type FeedbackLocatorMode = "idle" | "selecting" | "annotating" | "submitting";
@@ -1309,6 +1312,17 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   const snapshot = () => selected();
   const selectionRect = () => hoverRect();
   const currentTextDraft = () => textDraft();
+  const isVideoRecordingEnabled = () =>
+    (props.enableVideoRecording ?? props.locator.config.enableVideoRecording) === true;
+  const themeStyle = (): JSX.CSSProperties => {
+    const theme = props.theme ?? props.locator.config.theme;
+
+    return {
+      ...(theme?.primary ? { "--primary": theme.primary } : {}),
+      ...(theme?.primaryForeground ? { "--primary-foreground": theme.primaryForeground } : {}),
+      ...(theme?.ring ? { "--ring": theme.ring } : {}),
+    };
+  };
   const canvasCursor = () => {
     if (tool() === "select") {
       return isMovingAnnotation() ? "grabbing" : "grab";
@@ -1322,7 +1336,7 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
   };
 
   return (
-    <div data-feedback-locator-ui="true">
+    <div data-feedback-locator-ui="true" style={themeStyle()}>
       <Show
         when={
           mode() === "idle" &&
@@ -1615,70 +1629,72 @@ export const FeedbackLocatorRoot: Component<FeedbackLocatorRootProps> = (props)
                       </Show>
                     </div>
 
-                    <div>
-                      <label class="mb-2 block text-sm font-medium">Video-opname</label>
-                      <div class="space-y-2 rounded-md border bg-background p-3">
-                        <div class="flex flex-wrap items-center gap-2">
-                          <Show
-                            when={recordingState() === "recording"}
-                            fallback={
-                              <button
-                                type="button"
-                                class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted disabled:opacity-60"
-                                disabled={mode() === "submitting" || !supportsScreenRecording()}
-                                onClick={startRecording}
-                              >
-                                <Video class="h-4 w-4" />
-                                Neem video op
-                              </button>
-                            }
-                          >
-                            <button
-                              type="button"
-                              class="inline-flex h-9 items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 text-sm font-medium transition hover:bg-destructive/15"
-                              disabled={mode() === "submitting"}
-                              onClick={stopRecording}
-                            >
-                              <StopCircle class="h-4 w-4" />
-                              Stop opname
-                            </button>
-                          </Show>
-
-                          <Show when={recordingBlob()}>
-                            {(blob) => (
-                              <>
-                                <a
-                                  class="inline-flex h-9 max-w-full items-center gap-2 truncate rounded-md border px-3 text-sm underline-offset-4 hover:bg-muted hover:underline"
-                                  href={recordingUrl() ?? undefined}
-                                  target="_blank"
-                                  rel="noreferrer"
-                                >
-                                  <Video class="h-4 w-4 shrink-0" />
-                                  <span class="truncate">
-                                    screen-recording.webm ({formatBytes(blob().size)},{" "}
-                                    {formatDuration(recordingDurationMs())})
-                                  </span>
-                                </a>
+                    <Show when={isVideoRecordingEnabled()}>
+                      <div>
+                        <label class="mb-2 block text-sm font-medium">Video-opname</label>
+                        <div class="space-y-2 rounded-md border bg-background p-3">
+                          <div class="flex flex-wrap items-center gap-2">
+                            <Show
+                              when={recordingState() === "recording"}
+                              fallback={
                                 <button
                                   type="button"
-                                  class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted"
-                                  disabled={mode() === "submitting"}
-                                  onClick={clearRecording}
+                                  class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted disabled:opacity-60"
+                                  disabled={mode() === "submitting" || !supportsScreenRecording()}
+                                  onClick={startRecording}
                                 >
-                                  <Trash2 class="h-4 w-4" />
-                                  Wissen
+                                  <Video class="h-4 w-4" />
+                                  Neem video op
                                 </button>
-                              </>
-                            )}
+                              }
+                            >
+                              <button
+                                type="button"
+                                class="inline-flex h-9 items-center gap-2 rounded-md border border-destructive/40 bg-destructive/10 px-3 text-sm font-medium transition hover:bg-destructive/15"
+                                disabled={mode() === "submitting"}
+                                onClick={stopRecording}
+                              >
+                                <StopCircle class="h-4 w-4" />
+                                Stop opname
+                              </button>
+                            </Show>
+
+                            <Show when={recordingBlob()}>
+                              {(blob) => (
+                                <>
+                                  <a
+                                    class="inline-flex h-9 max-w-full items-center gap-2 truncate rounded-md border px-3 text-sm underline-offset-4 hover:bg-muted hover:underline"
+                                    href={recordingUrl() ?? undefined}
+                                    target="_blank"
+                                    rel="noreferrer"
+                                  >
+                                    <Video class="h-4 w-4 shrink-0" />
+                                    <span class="truncate">
+                                      screen-recording.webm ({formatBytes(blob().size)},{" "}
+                                      {formatDuration(recordingDurationMs())})
+                                    </span>
+                                  </a>
+                                  <button
+                                    type="button"
+                                    class="inline-flex h-9 items-center gap-2 rounded-md border px-3 text-sm font-medium transition hover:bg-muted"
+                                    disabled={mode() === "submitting"}
+                                    onClick={clearRecording}
+                                  >
+                                    <Trash2 class="h-4 w-4" />
+                                    Wissen
+                                  </button>
+                                </>
+                              )}
+                            </Show>
+                          </div>
+                          <Show when={!supportsScreenRecording()}>
+                            <div class="text-xs text-muted-foreground">
+                              Video-opname is niet beschikbaar in deze browser.
+                            </div>
                           </Show>
                         </div>
-                        <Show when={!supportsScreenRecording()}>
-                          <div class="text-xs text-muted-foreground">
-                            Video-opname is niet beschikbaar in deze browser.
-                          </div>
-                        </Show>
                       </div>
-                    </div>
+                    </Show>
 
                     <Accordion title="Broncontext" defaultOpen>
                       <div class="space-y-1">

package/src/types.ts

@@ -191,6 +191,12 @@ export type FeedbackLocatorSourceCollector = (
   target: HTMLElement,
 ) => FeedbackLocatorSourceMetadata | null;
 
+export type FeedbackLocatorTheme = {
+  primary?: string;
+  primaryForeground?: string;
+  ring?: string;
+};
+
 export type FeedbackLocatorConfig = {
   appKey: string;
   appName: string;
@@ -209,6 +215,8 @@ export type FeedbackLocatorConfig = {
   contextProviders?: FeedbackLocatorContextProvider[];
   hotkey?: FeedbackLocatorHotkey;
   showFloatingButton?: boolean;
+  enableVideoRecording?: boolean;
+  theme?: FeedbackLocatorTheme;
   sourceCollector?: FeedbackLocatorSourceCollector;
 };
 
@@ -219,6 +227,8 @@ export type FeedbackLocator = {
       | "contextProviders"
       | "hotkey"
       | "showFloatingButton"
+      | "enableVideoRecording"
+      | "theme"
       | "sourceCollector"
       | "startAgentSession"
       | "startCodexThread"