@bbearai/react 0.1.11 → 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 +82 -0
  2. package/dist/index.mjs +82 -0
  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,6 +1033,7 @@ 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: {
@@ -964,11 +1044,13 @@ function BugBearPanel({
964
1044
  left: panelPosition.x,
965
1045
  top: panelPosition.y,
966
1046
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1047
+ color: "#d4d4d8",
967
1048
  cursor: isDragging ? "grabbing" : void 0,
968
1049
  userSelect: isDragging ? "none" : void 0
969
1050
  },
970
1051
  onMouseDown: handleMouseDown,
971
1052
  children: [
1053
+ /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: BUGBEAR_CSS }),
972
1054
  collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
973
1055
  "button",
974
1056
  {
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,6 +1003,7 @@ 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: {
@@ -934,11 +1014,13 @@ function BugBearPanel({
934
1014
  left: panelPosition.x,
935
1015
  top: panelPosition.y,
936
1016
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
1017
+ color: "#d4d4d8",
937
1018
  cursor: isDragging ? "grabbing" : void 0,
938
1019
  userSelect: isDragging ? "none" : void 0
939
1020
  },
940
1021
  onMouseDown: handleMouseDown,
941
1022
  children: [
1023
+ /* @__PURE__ */ jsx2("style", { children: BUGBEAR_CSS }),
942
1024
  collapsed && /* @__PURE__ */ jsxs(
943
1025
  "button",
944
1026
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bbearai/react",
3
- "version": "0.1.11",
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",