@bbearai/react 0.1.10 → 0.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +92 -8
  2. package/dist/index.mjs +92 -8
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -306,6 +306,85 @@ var templateInfo = {
306
306
  var STORAGE_KEY = "bugbear-panel-position";
307
307
  var PANEL_WIDTH = 320;
308
308
  var PANEL_HEIGHT_ESTIMATE = 500;
309
+ var BUGBEAR_CSS = `
310
+ /* Preflight Reset */
311
+ [data-bugbear],[data-bugbear] *,[data-bugbear] *::before,[data-bugbear] *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#27272a}
312
+ [data-bugbear]{color:#d4d4d8;font-size:0.875rem;line-height:1.25rem}
313
+ [data-bugbear] button,[data-bugbear] input,[data-bugbear] textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
314
+ [data-bugbear] button{cursor:pointer;background-color:transparent}
315
+ [data-bugbear] svg{display:block}
316
+ /* Layout */
317
+ [data-bugbear] .flex{display:flex}[data-bugbear] .inline-flex{display:inline-flex}[data-bugbear] .grid{display:grid}
318
+ [data-bugbear] .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
319
+ [data-bugbear] .flex-1{flex:1 1 0%}[data-bugbear] .flex-col{flex-direction:column}[data-bugbear] .flex-wrap{flex-wrap:wrap}[data-bugbear] .flex-shrink-0{flex-shrink:0}
320
+ [data-bugbear] .items-center{align-items:center}[data-bugbear] .items-start{align-items:flex-start}
321
+ [data-bugbear] .justify-center{justify-content:center}[data-bugbear] .justify-between{justify-content:space-between}
322
+ [data-bugbear] .gap-1{gap:.25rem}[data-bugbear] .gap-1\\.5{gap:.375rem}[data-bugbear] .gap-2{gap:.5rem}[data-bugbear] .gap-3{gap:.75rem}[data-bugbear] .gap-6{gap:1.5rem}
323
+ /* Spacing */
324
+ [data-bugbear] .p-1{padding:.25rem}[data-bugbear] .p-2{padding:.5rem}[data-bugbear] .p-2\\.5{padding:.625rem}[data-bugbear] .p-3{padding:.75rem}[data-bugbear] .p-4{padding:1rem}
325
+ [data-bugbear] .px-1{padding-left:.25rem;padding-right:.25rem}[data-bugbear] .px-1\\.5{padding-left:.375rem;padding-right:.375rem}[data-bugbear] .px-2{padding-left:.5rem;padding-right:.5rem}[data-bugbear] .px-3{padding-left:.75rem;padding-right:.75rem}[data-bugbear] .px-4{padding-left:1rem;padding-right:1rem}
326
+ [data-bugbear] .py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}[data-bugbear] .py-1{padding-top:.25rem;padding-bottom:.25rem}[data-bugbear] .py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}[data-bugbear] .py-2{padding-top:.5rem;padding-bottom:.5rem}[data-bugbear] .py-3{padding-top:.75rem;padding-bottom:.75rem}[data-bugbear] .py-4{padding-top:1rem;padding-bottom:1rem}[data-bugbear] .py-6{padding-top:1.5rem;padding-bottom:1.5rem}[data-bugbear] .py-8{padding-top:2rem;padding-bottom:2rem}
327
+ [data-bugbear] .pt-3{padding-top:.75rem}[data-bugbear] .pt-4{padding-top:1rem}[data-bugbear] .pb-3{padding-bottom:.75rem}
328
+ [data-bugbear] .mb-1{margin-bottom:.25rem}[data-bugbear] .mb-1\\.5{margin-bottom:.375rem}[data-bugbear] .mb-2{margin-bottom:.5rem}[data-bugbear] .mb-3{margin-bottom:.75rem}[data-bugbear] .mb-4{margin-bottom:1rem}
329
+ [data-bugbear] .ml-1{margin-left:.25rem}[data-bugbear] .ml-4{margin-left:1rem}[data-bugbear] .ml-7{margin-left:1.75rem}[data-bugbear] .ml-14{margin-left:3.5rem}[data-bugbear] .ml-16{margin-left:4rem}
330
+ [data-bugbear] .mr-6{margin-right:1.5rem}
331
+ [data-bugbear] .mt-0\\.5{margin-top:.125rem}[data-bugbear] .mt-1{margin-top:.25rem}[data-bugbear] .mt-1\\.5{margin-top:.375rem}[data-bugbear] .mt-2{margin-top:.5rem}[data-bugbear] .mt-3{margin-top:.75rem}[data-bugbear] .mt-4{margin-top:1rem}
332
+ [data-bugbear] .mx-auto{margin-left:auto;margin-right:auto}
333
+ [data-bugbear] .space-y-1\\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}[data-bugbear] .space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}[data-bugbear] .space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
334
+ /* Sizing */
335
+ [data-bugbear] .w-2{width:.5rem}[data-bugbear] .w-5{width:1.25rem}[data-bugbear] .w-12{width:3rem}[data-bugbear] .w-16{width:4rem}[data-bugbear] .w-72{width:18rem}[data-bugbear] .w-80{width:20rem}[data-bugbear] .w-full{width:100%}
336
+ [data-bugbear] .h-1\\.5{height:.375rem}[data-bugbear] .h-2{height:.5rem}[data-bugbear] .h-5{height:1.25rem}[data-bugbear] .h-16{height:4rem}[data-bugbear] .h-\\[18px\\]{height:18px}[data-bugbear] .h-full{height:100%}
337
+ [data-bugbear] .min-w-0{min-width:0}[data-bugbear] .min-w-\\[18px\\]{min-width:18px}
338
+ [data-bugbear] .max-h-32{max-height:8rem}[data-bugbear] .max-h-96{max-height:24rem}
339
+ /* Typography */
340
+ [data-bugbear] .text-\\[10px\\]{font-size:10px}[data-bugbear] .text-xs{font-size:.75rem;line-height:1rem}[data-bugbear] .text-sm{font-size:.875rem;line-height:1.25rem}[data-bugbear] .text-lg{font-size:1.125rem;line-height:1.75rem}[data-bugbear] .text-2xl{font-size:1.5rem;line-height:2rem}[data-bugbear] .text-3xl{font-size:1.875rem;line-height:2.25rem}[data-bugbear] .text-4xl{font-size:2.25rem;line-height:2.5rem}[data-bugbear] .text-5xl{font-size:3rem;line-height:1}
341
+ [data-bugbear] .font-normal{font-weight:400}[data-bugbear] .font-medium{font-weight:500}[data-bugbear] .font-semibold{font-weight:600}[data-bugbear] .font-bold{font-weight:700}
342
+ [data-bugbear] .font-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}[data-bugbear] .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}
343
+ [data-bugbear] .leading-tight{line-height:1.25}[data-bugbear] .tracking-wide{letter-spacing:.025em}[data-bugbear] .uppercase{text-transform:uppercase}
344
+ [data-bugbear] .text-left{text-align:left}[data-bugbear] .text-center{text-align:center}
345
+ [data-bugbear] .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-bugbear] .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
346
+ /* Text Colors */
347
+ [data-bugbear] .text-white{color:#fff}[data-bugbear] .text-zinc-100{color:#f4f4f5}[data-bugbear] .text-zinc-300{color:#d4d4d8}[data-bugbear] .text-zinc-400{color:#a1a1aa}[data-bugbear] .text-zinc-500{color:#71717a}[data-bugbear] .text-zinc-600{color:#52525b}
348
+ [data-bugbear] .text-blue-300{color:#93c5fd}[data-bugbear] .text-blue-400{color:#60a5fa}[data-bugbear] .text-green-300{color:#86efac}[data-bugbear] .text-green-400{color:#4ade80}[data-bugbear] .text-red-400{color:#f87171}[data-bugbear] .text-yellow-400{color:#facc15}[data-bugbear] .text-amber-300{color:#fcd34d}[data-bugbear] .text-amber-400{color:#fbbf24}
349
+ /* Background Colors */
350
+ [data-bugbear] .bg-white{background-color:#fff}[data-bugbear] .bg-zinc-700{background-color:#3f3f46}[data-bugbear] .bg-zinc-800{background-color:#27272a}[data-bugbear] .bg-zinc-900{background-color:#18181b}[data-bugbear] .bg-zinc-950{background-color:#09090b}
351
+ [data-bugbear] .bg-blue-500{background-color:#3b82f6}[data-bugbear] .bg-green-400{background-color:#4ade80}[data-bugbear] .bg-green-500{background-color:#22c55e}[data-bugbear] .bg-green-600{background-color:#16a34a}[data-bugbear] .bg-red-600{background-color:#dc2626}[data-bugbear] .bg-yellow-500{background-color:#eab308}
352
+ [data-bugbear] .bg-black\\/50{background-color:rgba(0,0,0,.5)}[data-bugbear] .bg-blue-900\\/20{background-color:rgba(30,58,138,.2)}[data-bugbear] .bg-blue-900\\/50{background-color:rgba(30,58,138,.5)}[data-bugbear] .bg-blue-950\\/30{background-color:rgba(23,37,84,.3)}[data-bugbear] .bg-green-900\\/20{background-color:rgba(20,83,45,.2)}[data-bugbear] .bg-green-900\\/30{background-color:rgba(20,83,45,.3)}[data-bugbear] .bg-red-900\\/30{background-color:rgba(127,29,29,.3)}[data-bugbear] .bg-yellow-900\\/30{background-color:rgba(113,63,18,.3)}[data-bugbear] .bg-amber-900\\/20{background-color:rgba(120,53,15,.2)}
353
+ /* Border Colors */
354
+ [data-bugbear] .border-transparent{border-color:transparent}[data-bugbear] .border-zinc-600{border-color:#52525b}[data-bugbear] .border-zinc-700{border-color:#3f3f46}[data-bugbear] .border-zinc-800{border-color:#27272a}[data-bugbear] .border-blue-500{border-color:#3b82f6}[data-bugbear] .border-blue-800{border-color:#1e40af}[data-bugbear] .border-blue-900{border-color:#1e3a8a}[data-bugbear] .border-green-800{border-color:#166534}[data-bugbear] .border-amber-800{border-color:#92400e}
355
+ /* Border Width */
356
+ [data-bugbear] .border{border-width:1px}[data-bugbear] .border-b{border-bottom-width:1px}[data-bugbear] .border-t{border-top-width:1px}[data-bugbear] .border-b-2{border-bottom-width:2px}
357
+ /* Border Radius */
358
+ [data-bugbear] .rounded{border-radius:.25rem}[data-bugbear] .rounded-lg{border-radius:.5rem}[data-bugbear] .rounded-xl{border-radius:.75rem}[data-bugbear] .rounded-full{border-radius:9999px}
359
+ /* Effects */
360
+ [data-bugbear] .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3)}[data-bugbear] .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.3),0 8px 10px -6px rgba(0,0,0,.3)}[data-bugbear] .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
361
+ [data-bugbear] .overflow-hidden{overflow:hidden}[data-bugbear] .overflow-y-auto{overflow-y:auto}[data-bugbear] .opacity-75{opacity:.75}[data-bugbear] .resize-none{resize:none}
362
+ /* Position */
363
+ [data-bugbear] .relative{position:relative}[data-bugbear] .absolute{position:absolute}[data-bugbear] .fixed{position:fixed}[data-bugbear] .inset-0{inset:0}[data-bugbear] .top-1\\.5{top:.375rem}[data-bugbear] .top-2{top:.5rem}[data-bugbear] .z-50{z-index:50}
364
+ /* Transitions */
365
+ [data-bugbear] .transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
366
+ [data-bugbear] .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
367
+ [data-bugbear] .duration-300{transition-duration:300ms}
368
+ /* Divide */
369
+ [data-bugbear] .divide-y>:not([hidden])~:not([hidden]){border-top-width:1px}[data-bugbear] .divide-zinc-800>:not([hidden])~:not([hidden]){border-color:#27272a}
370
+ /* Animation */
371
+ [data-bugbear] .animate-pulse{animation:bb-pulse 2s cubic-bezier(.4,0,.6,1) infinite}[data-bugbear] .animate-ping{animation:bb-ping 1s cubic-bezier(0,0,.2,1) infinite}
372
+ @keyframes bb-pulse{50%{opacity:.5}}@keyframes bb-ping{75%,100%{transform:scale(2);opacity:0}}
373
+ /* Misc */
374
+ [data-bugbear] .list-disc{list-style-type:disc}
375
+ /* Hover States */
376
+ [data-bugbear] .hover\\:bg-zinc-700:hover{background-color:#3f3f46}[data-bugbear] .hover\\:bg-zinc-800:hover{background-color:#27272a}[data-bugbear] .hover\\:bg-blue-600:hover{background-color:#2563eb}[data-bugbear] .hover\\:bg-blue-900\\/30:hover{background-color:rgba(30,58,138,.3)}[data-bugbear] .hover\\:bg-green-700:hover{background-color:#15803d}[data-bugbear] .hover\\:bg-red-700:hover{background-color:#b91c1c}[data-bugbear] .hover\\:bg-red-800\\/30:hover{background-color:rgba(153,27,27,.3)}[data-bugbear] .hover\\:bg-yellow-600:hover{background-color:#ca8a04}[data-bugbear] .hover\\:bg-yellow-800\\/30:hover{background-color:rgba(133,77,14,.3)}
377
+ [data-bugbear] .hover\\:text-white:hover{color:#fff}[data-bugbear] .hover\\:text-zinc-200:hover{color:#e4e4e7}[data-bugbear] .hover\\:text-zinc-300:hover{color:#d4d4d8}[data-bugbear] .hover\\:text-zinc-400:hover{color:#a1a1aa}[data-bugbear] .hover\\:text-blue-300:hover{color:#93c5fd}[data-bugbear] .hover\\:text-red-500:hover{color:#ef4444}
378
+ [data-bugbear] .hover\\:border-blue-800:hover{border-color:#1e40af}[data-bugbear] .hover\\:border-yellow-800:hover{border-color:#854d0e}
379
+ /* Focus States */
380
+ [data-bugbear] .focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
381
+ [data-bugbear] .focus\\:ring-2:focus{box-shadow:0 0 0 2px var(--bb-ring-color,#3b82f6)}[data-bugbear] .focus\\:ring-blue-500:focus{--bb-ring-color:#3b82f6}[data-bugbear] .focus\\:ring-yellow-500:focus{--bb-ring-color:#eab308}
382
+ [data-bugbear] .focus\\:border-blue-500:focus{border-color:#3b82f6}[data-bugbear] .focus\\:border-transparent:focus{border-color:transparent}
383
+ /* Placeholder */
384
+ [data-bugbear] .placeholder\\:text-zinc-500::placeholder{color:#71717a}
385
+ /* Disabled */
386
+ [data-bugbear] .disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}[data-bugbear] .disabled\\:opacity-50:disabled{opacity:.5}
387
+ `;
309
388
  function getDefaultPosition(position) {
310
389
  if (typeof window === "undefined") return { x: 0, y: 0 };
311
390
  const padding = 16;
@@ -954,19 +1033,24 @@ function BugBearPanel({
954
1033
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
955
1034
  "div",
956
1035
  {
1036
+ "data-bugbear": true,
957
1037
  ref: panelRef,
958
1038
  className: "fixed font-sans",
959
1039
  style: {
960
1040
  zIndex: 2147483647,
961
1041
  // Max z-index to stay above all modals
1042
+ position: "fixed",
1043
+ isolation: "isolate",
962
1044
  left: panelPosition.x,
963
1045
  top: panelPosition.y,
964
1046
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1047
+ color: "#d4d4d8",
965
1048
  cursor: isDragging ? "grabbing" : void 0,
966
1049
  userSelect: isDragging ? "none" : void 0
967
1050
  },
968
1051
  onMouseDown: handleMouseDown,
969
1052
  children: [
1053
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: BUGBEAR_CSS }),
970
1054
  collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
971
1055
  "button",
972
1056
  {
@@ -974,7 +1058,7 @@ function BugBearPanel({
974
1058
  "data-drag-handle": true,
975
1059
  onDoubleClick: handleDoubleClick,
976
1060
  className: "flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors",
977
- style: { cursor: draggable ? "grab" : "pointer" },
1061
+ style: { cursor: draggable ? "grab" : "pointer", backgroundColor: "#3b82f6", color: "#ffffff" },
978
1062
  children: [
979
1063
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BugBearIcon, { size: 24 }),
980
1064
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-medium", children: "BugBear" }),
@@ -982,14 +1066,14 @@ function BugBearPanel({
982
1066
  ]
983
1067
  }
984
1068
  ),
985
- !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
1069
+ !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", style: { backgroundColor: "#18181b", border: "1px solid #27272a", borderRadius: "0.75rem", overflow: "hidden", boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)" }, children: [
986
1070
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
987
1071
  "div",
988
1072
  {
989
1073
  "data-drag-handle": true,
990
1074
  onDoubleClick: handleDoubleClick,
991
1075
  className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800",
992
- style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
1076
+ style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default", backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a", padding: "0.75rem 1rem" },
993
1077
  children: [
994
1078
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
995
1079
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BugBearIcon, { size: 28 }),
@@ -1022,7 +1106,7 @@ function BugBearPanel({
1022
1106
  ]
1023
1107
  }
1024
1108
  ),
1025
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
1109
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex border-b border-zinc-800 bg-zinc-900", style: { backgroundColor: "#18181b", borderBottom: "1px solid #27272a" }, children: [
1026
1110
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
1027
1111
  "button",
1028
1112
  {
@@ -1065,7 +1149,7 @@ function BugBearPanel({
1065
1149
  }
1066
1150
  )
1067
1151
  ] }),
1068
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
1152
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-4 max-h-96 overflow-y-auto", style: { backgroundColor: "#18181b", color: "#d4d4d8", padding: "1rem" }, children: [
1069
1153
  activeTab === "tests" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: assignments.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "text-center py-8", children: [
1070
1154
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-4xl", children: "\u2705" }),
1071
1155
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
@@ -2061,8 +2145,8 @@ function BugBearPanel({
2061
2145
  )
2062
2146
  ] }) })
2063
2147
  ] }),
2064
- showProfileOverlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
2065
- /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
2148
+ showProfileOverlay && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", style: { backgroundColor: "#18181b" }, children: [
2149
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", style: { backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a" }, children: [
2066
2150
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
2067
2151
  "button",
2068
2152
  {
@@ -2220,7 +2304,7 @@ function BugBearPanel({
2220
2304
  ] })
2221
2305
  ) })
2222
2306
  ] }),
2223
- /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", children: activeTab === "messages" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2307
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", style: { backgroundColor: "#09090b", borderTop: "1px solid #27272a", color: "#71717a" }, children: activeTab === "messages" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
2224
2308
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
2225
2309
  threads.length,
2226
2310
  " thread",
package/dist/index.mjs CHANGED
@@ -276,6 +276,85 @@ var templateInfo = {
276
276
  var STORAGE_KEY = "bugbear-panel-position";
277
277
  var PANEL_WIDTH = 320;
278
278
  var PANEL_HEIGHT_ESTIMATE = 500;
279
+ var BUGBEAR_CSS = `
280
+ /* Preflight Reset */
281
+ [data-bugbear],[data-bugbear] *,[data-bugbear] *::before,[data-bugbear] *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#27272a}
282
+ [data-bugbear]{color:#d4d4d8;font-size:0.875rem;line-height:1.25rem}
283
+ [data-bugbear] button,[data-bugbear] input,[data-bugbear] textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}
284
+ [data-bugbear] button{cursor:pointer;background-color:transparent}
285
+ [data-bugbear] svg{display:block}
286
+ /* Layout */
287
+ [data-bugbear] .flex{display:flex}[data-bugbear] .inline-flex{display:inline-flex}[data-bugbear] .grid{display:grid}
288
+ [data-bugbear] .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
289
+ [data-bugbear] .flex-1{flex:1 1 0%}[data-bugbear] .flex-col{flex-direction:column}[data-bugbear] .flex-wrap{flex-wrap:wrap}[data-bugbear] .flex-shrink-0{flex-shrink:0}
290
+ [data-bugbear] .items-center{align-items:center}[data-bugbear] .items-start{align-items:flex-start}
291
+ [data-bugbear] .justify-center{justify-content:center}[data-bugbear] .justify-between{justify-content:space-between}
292
+ [data-bugbear] .gap-1{gap:.25rem}[data-bugbear] .gap-1\\.5{gap:.375rem}[data-bugbear] .gap-2{gap:.5rem}[data-bugbear] .gap-3{gap:.75rem}[data-bugbear] .gap-6{gap:1.5rem}
293
+ /* Spacing */
294
+ [data-bugbear] .p-1{padding:.25rem}[data-bugbear] .p-2{padding:.5rem}[data-bugbear] .p-2\\.5{padding:.625rem}[data-bugbear] .p-3{padding:.75rem}[data-bugbear] .p-4{padding:1rem}
295
+ [data-bugbear] .px-1{padding-left:.25rem;padding-right:.25rem}[data-bugbear] .px-1\\.5{padding-left:.375rem;padding-right:.375rem}[data-bugbear] .px-2{padding-left:.5rem;padding-right:.5rem}[data-bugbear] .px-3{padding-left:.75rem;padding-right:.75rem}[data-bugbear] .px-4{padding-left:1rem;padding-right:1rem}
296
+ [data-bugbear] .py-0\\.5{padding-top:.125rem;padding-bottom:.125rem}[data-bugbear] .py-1{padding-top:.25rem;padding-bottom:.25rem}[data-bugbear] .py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}[data-bugbear] .py-2{padding-top:.5rem;padding-bottom:.5rem}[data-bugbear] .py-3{padding-top:.75rem;padding-bottom:.75rem}[data-bugbear] .py-4{padding-top:1rem;padding-bottom:1rem}[data-bugbear] .py-6{padding-top:1.5rem;padding-bottom:1.5rem}[data-bugbear] .py-8{padding-top:2rem;padding-bottom:2rem}
297
+ [data-bugbear] .pt-3{padding-top:.75rem}[data-bugbear] .pt-4{padding-top:1rem}[data-bugbear] .pb-3{padding-bottom:.75rem}
298
+ [data-bugbear] .mb-1{margin-bottom:.25rem}[data-bugbear] .mb-1\\.5{margin-bottom:.375rem}[data-bugbear] .mb-2{margin-bottom:.5rem}[data-bugbear] .mb-3{margin-bottom:.75rem}[data-bugbear] .mb-4{margin-bottom:1rem}
299
+ [data-bugbear] .ml-1{margin-left:.25rem}[data-bugbear] .ml-4{margin-left:1rem}[data-bugbear] .ml-7{margin-left:1.75rem}[data-bugbear] .ml-14{margin-left:3.5rem}[data-bugbear] .ml-16{margin-left:4rem}
300
+ [data-bugbear] .mr-6{margin-right:1.5rem}
301
+ [data-bugbear] .mt-0\\.5{margin-top:.125rem}[data-bugbear] .mt-1{margin-top:.25rem}[data-bugbear] .mt-1\\.5{margin-top:.375rem}[data-bugbear] .mt-2{margin-top:.5rem}[data-bugbear] .mt-3{margin-top:.75rem}[data-bugbear] .mt-4{margin-top:1rem}
302
+ [data-bugbear] .mx-auto{margin-left:auto;margin-right:auto}
303
+ [data-bugbear] .space-y-1\\.5>:not([hidden])~:not([hidden]){margin-top:.375rem}[data-bugbear] .space-y-2>:not([hidden])~:not([hidden]){margin-top:.5rem}[data-bugbear] .space-y-3>:not([hidden])~:not([hidden]){margin-top:.75rem}
304
+ /* Sizing */
305
+ [data-bugbear] .w-2{width:.5rem}[data-bugbear] .w-5{width:1.25rem}[data-bugbear] .w-12{width:3rem}[data-bugbear] .w-16{width:4rem}[data-bugbear] .w-72{width:18rem}[data-bugbear] .w-80{width:20rem}[data-bugbear] .w-full{width:100%}
306
+ [data-bugbear] .h-1\\.5{height:.375rem}[data-bugbear] .h-2{height:.5rem}[data-bugbear] .h-5{height:1.25rem}[data-bugbear] .h-16{height:4rem}[data-bugbear] .h-\\[18px\\]{height:18px}[data-bugbear] .h-full{height:100%}
307
+ [data-bugbear] .min-w-0{min-width:0}[data-bugbear] .min-w-\\[18px\\]{min-width:18px}
308
+ [data-bugbear] .max-h-32{max-height:8rem}[data-bugbear] .max-h-96{max-height:24rem}
309
+ /* Typography */
310
+ [data-bugbear] .text-\\[10px\\]{font-size:10px}[data-bugbear] .text-xs{font-size:.75rem;line-height:1rem}[data-bugbear] .text-sm{font-size:.875rem;line-height:1.25rem}[data-bugbear] .text-lg{font-size:1.125rem;line-height:1.75rem}[data-bugbear] .text-2xl{font-size:1.5rem;line-height:2rem}[data-bugbear] .text-3xl{font-size:1.875rem;line-height:2.25rem}[data-bugbear] .text-4xl{font-size:2.25rem;line-height:2.5rem}[data-bugbear] .text-5xl{font-size:3rem;line-height:1}
311
+ [data-bugbear] .font-normal{font-weight:400}[data-bugbear] .font-medium{font-weight:500}[data-bugbear] .font-semibold{font-weight:600}[data-bugbear] .font-bold{font-weight:700}
312
+ [data-bugbear] .font-sans{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}[data-bugbear] .font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,monospace}
313
+ [data-bugbear] .leading-tight{line-height:1.25}[data-bugbear] .tracking-wide{letter-spacing:.025em}[data-bugbear] .uppercase{text-transform:uppercase}
314
+ [data-bugbear] .text-left{text-align:left}[data-bugbear] .text-center{text-align:center}
315
+ [data-bugbear] .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-bugbear] .line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
316
+ /* Text Colors */
317
+ [data-bugbear] .text-white{color:#fff}[data-bugbear] .text-zinc-100{color:#f4f4f5}[data-bugbear] .text-zinc-300{color:#d4d4d8}[data-bugbear] .text-zinc-400{color:#a1a1aa}[data-bugbear] .text-zinc-500{color:#71717a}[data-bugbear] .text-zinc-600{color:#52525b}
318
+ [data-bugbear] .text-blue-300{color:#93c5fd}[data-bugbear] .text-blue-400{color:#60a5fa}[data-bugbear] .text-green-300{color:#86efac}[data-bugbear] .text-green-400{color:#4ade80}[data-bugbear] .text-red-400{color:#f87171}[data-bugbear] .text-yellow-400{color:#facc15}[data-bugbear] .text-amber-300{color:#fcd34d}[data-bugbear] .text-amber-400{color:#fbbf24}
319
+ /* Background Colors */
320
+ [data-bugbear] .bg-white{background-color:#fff}[data-bugbear] .bg-zinc-700{background-color:#3f3f46}[data-bugbear] .bg-zinc-800{background-color:#27272a}[data-bugbear] .bg-zinc-900{background-color:#18181b}[data-bugbear] .bg-zinc-950{background-color:#09090b}
321
+ [data-bugbear] .bg-blue-500{background-color:#3b82f6}[data-bugbear] .bg-green-400{background-color:#4ade80}[data-bugbear] .bg-green-500{background-color:#22c55e}[data-bugbear] .bg-green-600{background-color:#16a34a}[data-bugbear] .bg-red-600{background-color:#dc2626}[data-bugbear] .bg-yellow-500{background-color:#eab308}
322
+ [data-bugbear] .bg-black\\/50{background-color:rgba(0,0,0,.5)}[data-bugbear] .bg-blue-900\\/20{background-color:rgba(30,58,138,.2)}[data-bugbear] .bg-blue-900\\/50{background-color:rgba(30,58,138,.5)}[data-bugbear] .bg-blue-950\\/30{background-color:rgba(23,37,84,.3)}[data-bugbear] .bg-green-900\\/20{background-color:rgba(20,83,45,.2)}[data-bugbear] .bg-green-900\\/30{background-color:rgba(20,83,45,.3)}[data-bugbear] .bg-red-900\\/30{background-color:rgba(127,29,29,.3)}[data-bugbear] .bg-yellow-900\\/30{background-color:rgba(113,63,18,.3)}[data-bugbear] .bg-amber-900\\/20{background-color:rgba(120,53,15,.2)}
323
+ /* Border Colors */
324
+ [data-bugbear] .border-transparent{border-color:transparent}[data-bugbear] .border-zinc-600{border-color:#52525b}[data-bugbear] .border-zinc-700{border-color:#3f3f46}[data-bugbear] .border-zinc-800{border-color:#27272a}[data-bugbear] .border-blue-500{border-color:#3b82f6}[data-bugbear] .border-blue-800{border-color:#1e40af}[data-bugbear] .border-blue-900{border-color:#1e3a8a}[data-bugbear] .border-green-800{border-color:#166534}[data-bugbear] .border-amber-800{border-color:#92400e}
325
+ /* Border Width */
326
+ [data-bugbear] .border{border-width:1px}[data-bugbear] .border-b{border-bottom-width:1px}[data-bugbear] .border-t{border-top-width:1px}[data-bugbear] .border-b-2{border-bottom-width:2px}
327
+ /* Border Radius */
328
+ [data-bugbear] .rounded{border-radius:.25rem}[data-bugbear] .rounded-lg{border-radius:.5rem}[data-bugbear] .rounded-xl{border-radius:.75rem}[data-bugbear] .rounded-full{border-radius:9999px}
329
+ /* Effects */
330
+ [data-bugbear] .shadow-lg{box-shadow:0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -4px rgba(0,0,0,.3)}[data-bugbear] .shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.3),0 8px 10px -6px rgba(0,0,0,.3)}[data-bugbear] .shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.5)}
331
+ [data-bugbear] .overflow-hidden{overflow:hidden}[data-bugbear] .overflow-y-auto{overflow-y:auto}[data-bugbear] .opacity-75{opacity:.75}[data-bugbear] .resize-none{resize:none}
332
+ /* Position */
333
+ [data-bugbear] .relative{position:relative}[data-bugbear] .absolute{position:absolute}[data-bugbear] .fixed{position:fixed}[data-bugbear] .inset-0{inset:0}[data-bugbear] .top-1\\.5{top:.375rem}[data-bugbear] .top-2{top:.5rem}[data-bugbear] .z-50{z-index:50}
334
+ /* Transitions */
335
+ [data-bugbear] .transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
336
+ [data-bugbear] .transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
337
+ [data-bugbear] .duration-300{transition-duration:300ms}
338
+ /* Divide */
339
+ [data-bugbear] .divide-y>:not([hidden])~:not([hidden]){border-top-width:1px}[data-bugbear] .divide-zinc-800>:not([hidden])~:not([hidden]){border-color:#27272a}
340
+ /* Animation */
341
+ [data-bugbear] .animate-pulse{animation:bb-pulse 2s cubic-bezier(.4,0,.6,1) infinite}[data-bugbear] .animate-ping{animation:bb-ping 1s cubic-bezier(0,0,.2,1) infinite}
342
+ @keyframes bb-pulse{50%{opacity:.5}}@keyframes bb-ping{75%,100%{transform:scale(2);opacity:0}}
343
+ /* Misc */
344
+ [data-bugbear] .list-disc{list-style-type:disc}
345
+ /* Hover States */
346
+ [data-bugbear] .hover\\:bg-zinc-700:hover{background-color:#3f3f46}[data-bugbear] .hover\\:bg-zinc-800:hover{background-color:#27272a}[data-bugbear] .hover\\:bg-blue-600:hover{background-color:#2563eb}[data-bugbear] .hover\\:bg-blue-900\\/30:hover{background-color:rgba(30,58,138,.3)}[data-bugbear] .hover\\:bg-green-700:hover{background-color:#15803d}[data-bugbear] .hover\\:bg-red-700:hover{background-color:#b91c1c}[data-bugbear] .hover\\:bg-red-800\\/30:hover{background-color:rgba(153,27,27,.3)}[data-bugbear] .hover\\:bg-yellow-600:hover{background-color:#ca8a04}[data-bugbear] .hover\\:bg-yellow-800\\/30:hover{background-color:rgba(133,77,14,.3)}
347
+ [data-bugbear] .hover\\:text-white:hover{color:#fff}[data-bugbear] .hover\\:text-zinc-200:hover{color:#e4e4e7}[data-bugbear] .hover\\:text-zinc-300:hover{color:#d4d4d8}[data-bugbear] .hover\\:text-zinc-400:hover{color:#a1a1aa}[data-bugbear] .hover\\:text-blue-300:hover{color:#93c5fd}[data-bugbear] .hover\\:text-red-500:hover{color:#ef4444}
348
+ [data-bugbear] .hover\\:border-blue-800:hover{border-color:#1e40af}[data-bugbear] .hover\\:border-yellow-800:hover{border-color:#854d0e}
349
+ /* Focus States */
350
+ [data-bugbear] .focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}
351
+ [data-bugbear] .focus\\:ring-2:focus{box-shadow:0 0 0 2px var(--bb-ring-color,#3b82f6)}[data-bugbear] .focus\\:ring-blue-500:focus{--bb-ring-color:#3b82f6}[data-bugbear] .focus\\:ring-yellow-500:focus{--bb-ring-color:#eab308}
352
+ [data-bugbear] .focus\\:border-blue-500:focus{border-color:#3b82f6}[data-bugbear] .focus\\:border-transparent:focus{border-color:transparent}
353
+ /* Placeholder */
354
+ [data-bugbear] .placeholder\\:text-zinc-500::placeholder{color:#71717a}
355
+ /* Disabled */
356
+ [data-bugbear] .disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}[data-bugbear] .disabled\\:opacity-50:disabled{opacity:.5}
357
+ `;
279
358
  function getDefaultPosition(position) {
280
359
  if (typeof window === "undefined") return { x: 0, y: 0 };
281
360
  const padding = 16;
@@ -924,19 +1003,24 @@ function BugBearPanel({
924
1003
  /* @__PURE__ */ jsxs(
925
1004
  "div",
926
1005
  {
1006
+ "data-bugbear": true,
927
1007
  ref: panelRef,
928
1008
  className: "fixed font-sans",
929
1009
  style: {
930
1010
  zIndex: 2147483647,
931
1011
  // Max z-index to stay above all modals
1012
+ position: "fixed",
1013
+ isolation: "isolate",
932
1014
  left: panelPosition.x,
933
1015
  top: panelPosition.y,
934
1016
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1017
+ color: "#d4d4d8",
935
1018
  cursor: isDragging ? "grabbing" : void 0,
936
1019
  userSelect: isDragging ? "none" : void 0
937
1020
  },
938
1021
  onMouseDown: handleMouseDown,
939
1022
  children: [
1023
+ /* @__PURE__ */ jsx2("style", { children: BUGBEAR_CSS }),
940
1024
  collapsed && /* @__PURE__ */ jsxs(
941
1025
  "button",
942
1026
  {
@@ -944,7 +1028,7 @@ function BugBearPanel({
944
1028
  "data-drag-handle": true,
945
1029
  onDoubleClick: handleDoubleClick,
946
1030
  className: "flex items-center gap-2 px-3 py-2 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition-colors",
947
- style: { cursor: draggable ? "grab" : "pointer" },
1031
+ style: { cursor: draggable ? "grab" : "pointer", backgroundColor: "#3b82f6", color: "#ffffff" },
948
1032
  children: [
949
1033
  /* @__PURE__ */ jsx2(BugBearIcon, { size: 24 }),
950
1034
  /* @__PURE__ */ jsx2("span", { className: "font-medium", children: "BugBear" }),
@@ -952,14 +1036,14 @@ function BugBearPanel({
952
1036
  ]
953
1037
  }
954
1038
  ),
955
- !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", children: [
1039
+ !collapsed && /* @__PURE__ */ jsxs("div", { className: "w-80 bg-zinc-900 rounded-xl shadow-2xl border border-zinc-800 overflow-hidden", style: { backgroundColor: "#18181b", border: "1px solid #27272a", borderRadius: "0.75rem", overflow: "hidden", boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)" }, children: [
956
1040
  /* @__PURE__ */ jsxs(
957
1041
  "div",
958
1042
  {
959
1043
  "data-drag-handle": true,
960
1044
  onDoubleClick: handleDoubleClick,
961
1045
  className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800",
962
- style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default" },
1046
+ style: { cursor: draggable ? isDragging ? "grabbing" : "grab" : "default", backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a", padding: "0.75rem 1rem" },
963
1047
  children: [
964
1048
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
965
1049
  /* @__PURE__ */ jsx2(BugBearIcon, { size: 28 }),
@@ -992,7 +1076,7 @@ function BugBearPanel({
992
1076
  ]
993
1077
  }
994
1078
  ),
995
- /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", children: [
1079
+ /* @__PURE__ */ jsxs("div", { className: "flex border-b border-zinc-800 bg-zinc-900", style: { backgroundColor: "#18181b", borderBottom: "1px solid #27272a" }, children: [
996
1080
  /* @__PURE__ */ jsxs(
997
1081
  "button",
998
1082
  {
@@ -1035,7 +1119,7 @@ function BugBearPanel({
1035
1119
  }
1036
1120
  )
1037
1121
  ] }),
1038
- /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", children: [
1122
+ /* @__PURE__ */ jsxs("div", { className: "p-4 max-h-96 overflow-y-auto", style: { backgroundColor: "#18181b", color: "#d4d4d8", padding: "1rem" }, children: [
1039
1123
  activeTab === "tests" && /* @__PURE__ */ jsx2("div", { children: assignments.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "text-center py-8", children: [
1040
1124
  /* @__PURE__ */ jsx2("span", { className: "text-4xl", children: "\u2705" }),
1041
1125
  /* @__PURE__ */ jsx2("p", { className: "text-zinc-400 mt-2 font-medium", children: "All caught up!" }),
@@ -2031,8 +2115,8 @@ function BugBearPanel({
2031
2115
  )
2032
2116
  ] }) })
2033
2117
  ] }),
2034
- showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", children: [
2035
- /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", children: [
2118
+ showProfileOverlay && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-zinc-900 z-50 flex flex-col rounded-xl overflow-hidden", style: { backgroundColor: "#18181b" }, children: [
2119
+ /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 text-white px-4 py-3 flex items-center justify-between border-b border-zinc-800", style: { backgroundColor: "#09090b", color: "#ffffff", borderBottom: "1px solid #27272a" }, children: [
2036
2120
  /* @__PURE__ */ jsx2(
2037
2121
  "button",
2038
2122
  {
@@ -2190,7 +2274,7 @@ function BugBearPanel({
2190
2274
  ] })
2191
2275
  ) })
2192
2276
  ] }),
2193
- /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2277
+ /* @__PURE__ */ jsx2("div", { className: "px-4 py-2 bg-zinc-950 border-t border-zinc-800 flex items-center justify-between text-xs text-zinc-500", style: { backgroundColor: "#09090b", borderTop: "1px solid #27272a", color: "#71717a" }, children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [
2194
2278
  /* @__PURE__ */ jsxs("span", { children: [
2195
2279
  threads.length,
2196
2280
  " thread",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbearai/react",
3
- "version": "0.1.10",
3
+ "version": "0.1.12",
4
4
  "description": "BugBear React components for web apps",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",