floaty-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 el_jijuna
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,198 @@
+# Floaty Widget
+
+A beautiful, draggable, and collapsible floating widget library built with React 19, TypeScript, and Vite.
+
+## Features
+
+✨ **Draggable Header** - Click and drag the header to move the component anywhere on the screen
+📍 **Pin/Unpin** - Lock the component in place with the pin button to prevent dragging
+🔽 **Expand/Collapse** - Smooth animations when toggling content visibility
+🎨 **Customizable** - Flexible styling with CSS variables and inline styles
+📱 **Responsive** - Works seamlessly on different screen sizes
+♿ **Accessible** - Built with ARIA labels and semantic HTML
+🚀 **Optimized** - Tree-shaking enabled, minimal bundle size
+
+## Installation
+
+```bash
+npm install floaty-widget
+```
+
+## Usage
+
+```tsx
+import { Floaty } from 'floaty-widget';
+import 'floaty-widget/dist/style.css';
+
+export function App() {
+  return (
+    <Floaty title="My Panel">
+      <p>Your content here</p>
+    </Floaty>
+  );
+}
+```
+
+## Props
+
+All props are optional.
+
+```tsx
+interface FloatyProps {
+  /** Content to display inside the floaty body */
+  children?: ReactNode;
+
+  /** Header title text */
+  title?: string;
+
+  /** Additional inline styles */
+  style?: CSSProperties;
+}
+```
+
+### Default Values
+
+- `children`: `'Content'`
+- `title`: `'Floaty'`
+- `style`: `{}`
+
+## Examples
+
+### Basic Usage
+
+```tsx
+<Floaty title="Dashboard">
+  <div>
+    <h3>Welcome!</h3>
+    <p>This is a floating panel.</p>
+  </div>
+</Floaty>
+```
+
+### With Custom Styling
+
+```tsx
+<Floaty
+  title="Settings"
+  style={{ width: '400px' }}
+>
+  <form>
+    {/* Your form content */}
+  </form>
+</Floaty>
+```
+
+### With Complex Content
+
+```tsx
+<Floaty title="User Info">
+  <div>
+    <img src="avatar.jpg" alt="User" />
+    <h4>John Doe</h4>
+    <p>john@example.com</p>
+    <button>View Profile</button>
+  </div>
+</Floaty>
+```
+
+## Features in Detail
+
+### 🖱️ Dragging
+
+Click and hold the header to drag the component around. The component will stay within viewport boundaries automatically.
+
+### 📍 Pin/Unpin
+
+Click the pin icon (📍) in the header to lock the component. When pinned (📌), the component cannot be dragged but can still be collapsed/expanded.
+
+### ➖ Expand/Collapse
+
+Click the chevron icon in the top-right to toggle content visibility. The animation is smooth with spring easing.
+
+## Styling
+
+The component uses CSS variables that you can customize:
+
+```css
+:root {
+  --primary-color: #4f46e5;
+  --primary-hover: #4338ca;
+  --border-color: #e5e7eb;
+  --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  --transition: all 0.3s ease;
+}
+```
+
+## Development
+
+### Setup
+
+```bash
+npm install
+```
+
+### Development Server
+
+```bash
+npm run dev
+```
+
+### Storybook
+
+```bash
+npm run storybook
+```
+
+Open [http://localhost:6006](http://localhost:6006) to view the component stories.
+
+### Build
+
+```bash
+npm run build
+```
+
+Generates:
+- ES module: `dist/floaty-widget.js`
+- UMD bundle: `dist/floaty-widget.umd.cjs`
+- CSS: `dist/style.css`
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Performance
+
+- **Optimized dragging** with global event listeners to prevent jank
+- **Tree-shaking enabled** for smaller bundle sizes
+- **CSS animations** for smooth expand/collapse transitions
+- **Viewport constraints** to prevent layout shifts
+
+## Accessibility
+
+- ♿ ARIA labels on interactive elements
+- ⌨️ Keyboard accessible buttons
+- 📱 Touch-friendly hit targets
+- 🎯 Semantic HTML structure
+
+## TypeScript Support
+
+Full TypeScript support with exported types:
+
+```tsx
+import { Floaty, FloatyProps } from 'floaty-widget';
+
+const MyComponent: React.FC<FloatyProps> = (props) => {
+  return <Floaty {...props} />;
+};
+```
+
+## License
+
+MIT © 2024
+
+---
+
+**Built with** ❤️ using React 19, TypeScript, and Vite

package/dist/floaty-widget.js

@@ -0,0 +1,384 @@
+import re, { useState as M, useRef as V, useEffect as te } from "react";
+var D = { exports: {} }, x = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var z;
+function ne() {
+  if (z) return x;
+  z = 1;
+  var s = Symbol.for("react.transitional.element"), h = Symbol.for("react.fragment");
+  function v(c, l, a) {
+    var E = null;
+    if (a !== void 0 && (E = "" + a), l.key !== void 0 && (E = "" + l.key), "key" in l) {
+      a = {};
+      for (var d in l)
+        d !== "key" && (a[d] = l[d]);
+    } else a = l;
+    return l = a.ref, {
+      $$typeof: s,
+      type: c,
+      key: E,
+      ref: l !== void 0 ? l : null,
+      props: a
+    };
+  }
+  return x.Fragment = h, x.jsx = v, x.jsxs = v, x;
+}
+var y = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var q;
+function oe() {
+  return q || (q = 1, process.env.NODE_ENV !== "production" && function() {
+    function s(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Q ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case b:
+          return "Fragment";
+        case S:
+          return "Profiler";
+        case T:
+          return "StrictMode";
+        case G:
+          return "Suspense";
+        case J:
+          return "SuspenseList";
+        case Z:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case g:
+            return "Portal";
+          case j:
+            return e.displayName || "Context";
+          case O:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case B:
+            var r = e.render;
+            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case H:
+            return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
+          case A:
+            r = e._payload, e = e._init;
+            try {
+              return s(e(r));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function h(e) {
+      return "" + e;
+    }
+    function v(e) {
+      try {
+        h(e);
+        var r = !1;
+      } catch {
+        r = !0;
+      }
+      if (r) {
+        r = console;
+        var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t.call(
+          r,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          n
+        ), h(e);
+      }
+    }
+    function c(e) {
+      if (e === b) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === A)
+        return "<...>";
+      try {
+        var r = s(e);
+        return r ? "<" + r + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function l() {
+      var e = C.A;
+      return e === null ? null : e.getOwner();
+    }
+    function a() {
+      return Error("react-stack-top-frame");
+    }
+    function E(e) {
+      if (I.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function d(e, r) {
+      function t() {
+        L || (L = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          r
+        ));
+      }
+      t.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: t,
+        configurable: !0
+      });
+    }
+    function P() {
+      var e = s(this.type);
+      return F[e] || (F[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function R(e, r, t, n, w, Y) {
+      var o = t.ref;
+      return e = {
+        $$typeof: p,
+        type: e,
+        key: r,
+        props: t,
+        _owner: n
+      }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: P
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: w
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: Y
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function f(e, r, t, n, w, Y) {
+      var o = r.children;
+      if (o !== void 0)
+        if (n)
+          if (K(o)) {
+            for (n = 0; n < o.length; n++)
+              k(o[n]);
+            Object.freeze && Object.freeze(o);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else k(o);
+      if (I.call(r, "key")) {
+        o = s(e);
+        var _ = Object.keys(r).filter(function(ee) {
+          return ee !== "key";
+        });
+        n = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", X[o + n] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          n,
+          o,
+          _,
+          o
+        ), X[o + n] = !0);
+      }
+      if (o = null, t !== void 0 && (v(t), o = "" + t), E(r) && (v(r.key), o = "" + r.key), "key" in r) {
+        t = {};
+        for (var $ in r)
+          $ !== "key" && (t[$] = r[$]);
+      } else t = r;
+      return o && d(
+        t,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), R(
+        e,
+        o,
+        t,
+        l(),
+        w,
+        Y
+      );
+    }
+    function k(e) {
+      m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === A && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function m(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === p;
+    }
+    var u = re, p = Symbol.for("react.transitional.element"), g = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), T = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), O = Symbol.for("react.consumer"), j = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), G = Symbol.for("react.suspense"), J = Symbol.for("react.suspense_list"), H = Symbol.for("react.memo"), A = Symbol.for("react.lazy"), Z = Symbol.for("react.activity"), Q = Symbol.for("react.client.reference"), C = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, K = Array.isArray, N = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    u = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var L, F = {}, W = u.react_stack_bottom_frame.bind(
+      u,
+      a
+    )(), U = N(c(a)), X = {};
+    y.Fragment = b, y.jsx = function(e, r, t) {
+      var n = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        t,
+        !1,
+        n ? Error("react-stack-top-frame") : W,
+        n ? N(c(e)) : U
+      );
+    }, y.jsxs = function(e, r, t) {
+      var n = 1e4 > C.recentlyCreatedOwnerStacks++;
+      return f(
+        e,
+        r,
+        t,
+        !0,
+        n ? Error("react-stack-top-frame") : W,
+        n ? N(c(e)) : U
+      );
+    };
+  }()), y;
+}
+process.env.NODE_ENV === "production" ? D.exports = ne() : D.exports = oe();
+var i = D.exports;
+const ae = ({ pinned: s }) => /* @__PURE__ */ i.jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: s ? /* @__PURE__ */ i.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m3-13h-2v4h-2v-4h-2v2h4v2h-4v2h6v-6" }) : /* @__PURE__ */ i.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m3.5-9h-7v2h7v-2" })
+  }
+), se = ({ collapsed: s }) => /* @__PURE__ */ i.jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: `chevron ${s ? "collapsed" : ""}`,
+    children: /* @__PURE__ */ i.jsx("polyline", { points: "6 9 12 15 18 9" })
+  }
+), ie = ({
+  children: s = "Content",
+  title: h = "Floaty",
+  style: v = {}
+}) => {
+  const [c, l] = M(!1), [a, E] = M(!1), [d, P] = M({ x: 100, y: 100 }), R = V(null), f = V({ isDragging: !1, offsetX: 0, offsetY: 0 }), k = (m) => {
+    var p;
+    if (a) return;
+    const u = (p = R.current) == null ? void 0 : p.getBoundingClientRect();
+    u && (f.current = {
+      isDragging: !0,
+      offsetX: m.clientX - u.left,
+      offsetY: m.clientY - u.top
+    });
+  };
+  return te(() => {
+    const m = (p) => {
+      var j;
+      if (!f.current.isDragging) return;
+      const g = (j = R.current) == null ? void 0 : j.getBoundingClientRect();
+      if (!g) return;
+      let b = p.clientX - f.current.offsetX, T = p.clientY - f.current.offsetY;
+      const S = window.innerWidth - g.width, O = window.innerHeight - g.height;
+      b = Math.max(0, Math.min(b, S)), T = Math.max(0, Math.min(T, O)), P({
+        x: b,
+        y: T
+      });
+    }, u = () => {
+      f.current.isDragging = !1;
+    };
+    return globalThis.addEventListener("mousemove", m), globalThis.addEventListener("mouseup", u), () => {
+      globalThis.removeEventListener("mousemove", m), globalThis.removeEventListener("mouseup", u);
+    };
+  }, []), /* @__PURE__ */ i.jsxs(
+    "div",
+    {
+      ref: R,
+      className: `floaty ${a ? "pinned" : ""} ${c ? "collapsed" : ""} ${f.current.isDragging ? "dragging" : ""}`,
+      style: {
+        transform: `translate(${d.x}px, ${d.y}px)`,
+        ...v
+      },
+      children: [
+        /* @__PURE__ */ i.jsxs(
+          "header",
+          {
+            className: `floaty-header ${a ? "pinned" : ""}`,
+            onMouseDown: k,
+            children: [
+              /* @__PURE__ */ i.jsx(
+                "button",
+                {
+                  className: "floaty-button floaty-button--pin",
+                  onClick: () => E(!a),
+                  title: a ? "Unpin" : "Pin",
+                  "aria-label": a ? "Unpin floaty" : "Pin floaty",
+                  children: /* @__PURE__ */ i.jsx(ae, { pinned: a })
+                }
+              ),
+              /* @__PURE__ */ i.jsx("span", { className: "floaty-title", children: h }),
+              /* @__PURE__ */ i.jsx(
+                "button",
+                {
+                  className: "floaty-button floaty-button--expand",
+                  onClick: () => l(!c),
+                  title: c ? "Expand" : "Collapse",
+                  "aria-label": c ? "Expand floaty" : "Collapse floaty",
+                  children: /* @__PURE__ */ i.jsx(se, { collapsed: c })
+                }
+              )
+            ]
+          }
+        ),
+        !c && /* @__PURE__ */ i.jsx("div", { className: "floaty-body", children: s })
+      ]
+    }
+  );
+};
+export {
+  ie as Floaty
+};

package/dist/floaty-widget.umd.cjs

@@ -0,0 +1,22 @@
+(function(E,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],u):(E=typeof globalThis<"u"?globalThis:E||self,u(E.FloatyWidget={},E.React))})(this,function(E,u){"use strict";var O={exports:{}},T={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var F;function G(){if(F)return T;F=1;var l=Symbol.for("react.transitional.element"),R=Symbol.for("react.fragment");function h(c,i,a){var b=null;if(a!==void 0&&(b=""+a),i.key!==void 0&&(b=""+i.key),"key"in i){a={};for(var m in i)m!=="key"&&(a[m]=i[m])}else a=i;return i=a.ref,{$$typeof:l,type:c,key:b,ref:i!==void 0?i:null,props:a}}return T.Fragment=R,T.jsx=h,T.jsxs=h,T}var y={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var W;function J(){return W||(W=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ne?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case _:return"Fragment";case C:return"Profiler";case j:return"StrictMode";case K:return"Suspense";case ee:return"SuspenseList";case re:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case k:return"Portal";case S:return e.displayName||"Context";case N:return(e._context.displayName||"Context")+".Consumer";case q:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case te:return t=e.displayName||null,t!==null?t:l(e.type)||"Memo";case Y:t=e._payload,e=e._init;try{return l(e(t))}catch{}}return null}function R(e){return""+e}function h(e){try{R(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),R(e)}}function c(e){if(e===_)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===Y)return"<...>";try{var t=l(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function i(){var e=M.A;return e===null?null:e.getOwner()}function a(){return Error("react-stack-top-frame")}function b(e){if(U.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function m(e,t){function r(){X||(X=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function A(){var e=l(this.type);return $[e]||($[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function x(e,t,r,n,P,I){var o=r.ref;return e={$$typeof:v,type:e,key:t,props:r,_owner:n},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:A}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,t,r,n,P,I){var o=t.children;if(o!==void 0)if(n)if(oe(o)){for(n=0;n<o.length;n++)w(o[n]);Object.freeze&&Object.freeze(o)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else w(o);if(U.call(t,"key")){o=l(e);var g=Object.keys(t).filter(function(ae){return ae!=="key"});n=0<g.length?"{key: someKey, "+g.join(": ..., ")+": ...}":"{key: someKey}",B[o+n]||(g=0<g.length?"{"+g.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,n,o,g,o),B[o+n]=!0)}if(o=null,r!==void 0&&(h(r),o=""+r),b(t)&&(h(t.key),o=""+t.key),"key"in t){r={};for(var L in t)L!=="key"&&(r[L]=t[L])}else r=t;return o&&m(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),x(e,o,r,i(),P,I)}function w(e){p(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===Y&&(e._payload.status==="fulfilled"?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e=="object"&&e!==null&&e.$$typeof===v}var f=u,v=Symbol.for("react.transitional.element"),k=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),C=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),S=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),K=Symbol.for("react.suspense"),ee=Symbol.for("react.suspense_list"),te=Symbol.for("react.memo"),Y=Symbol.for("react.lazy"),re=Symbol.for("react.activity"),ne=Symbol.for("react.client.reference"),M=f.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,oe=Array.isArray,D=console.createTask?console.createTask:function(){return null};f={react_stack_bottom_frame:function(e){return e()}};var X,$={},V=f.react_stack_bottom_frame.bind(f,a)(),z=D(c(a)),B={};y.Fragment=_,y.jsx=function(e,t,r){var n=1e4>M.recentlyCreatedOwnerStacks++;return d(e,t,r,!1,n?Error("react-stack-top-frame"):V,n?D(c(e)):z)},y.jsxs=function(e,t,r){var n=1e4>M.recentlyCreatedOwnerStacks++;return d(e,t,r,!0,n?Error("react-stack-top-frame"):V,n?D(c(e)):z)}}()),y}process.env.NODE_ENV==="production"?O.exports=G():O.exports=J();var s=O.exports;const H=({pinned:l})=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:l?s.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m3-13h-2v4h-2v-4h-2v2h4v2h-4v2h6v-6"}):s.jsx("path",{d:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8m3.5-9h-7v2h7v-2"})}),Z=({collapsed:l})=>s.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:`chevron ${l?"collapsed":""}`,children:s.jsx("polyline",{points:"6 9 12 15 18 9"})}),Q=({children:l="Content",title:R="Floaty",style:h={}})=>{const[c,i]=u.useState(!1),[a,b]=u.useState(!1),[m,A]=u.useState({x:100,y:100}),x=u.useRef(null),d=u.useRef({isDragging:!1,offsetX:0,offsetY:0}),w=p=>{var v;if(a)return;const f=(v=x.current)==null?void 0:v.getBoundingClientRect();f&&(d.current={isDragging:!0,offsetX:p.clientX-f.left,offsetY:p.clientY-f.top})};return u.useEffect(()=>{const p=v=>{var S;if(!d.current.isDragging)return;const k=(S=x.current)==null?void 0:S.getBoundingClientRect();if(!k)return;let _=v.clientX-d.current.offsetX,j=v.clientY-d.current.offsetY;const C=window.innerWidth-k.width,N=window.innerHeight-k.height;_=Math.max(0,Math.min(_,C)),j=Math.max(0,Math.min(j,N)),A({x:_,y:j})},f=()=>{d.current.isDragging=!1};return globalThis.addEventListener("mousemove",p),globalThis.addEventListener("mouseup",f),()=>{globalThis.removeEventListener("mousemove",p),globalThis.removeEventListener("mouseup",f)}},[]),s.jsxs("div",{ref:x,className:`floaty ${a?"pinned":""} ${c?"collapsed":""} ${d.current.isDragging?"dragging":""}`,style:{transform:`translate(${m.x}px, ${m.y}px)`,...h},children:[s.jsxs("header",{className:`floaty-header ${a?"pinned":""}`,onMouseDown:w,children:[s.jsx("button",{className:"floaty-button floaty-button--pin",onClick:()=>b(!a),title:a?"Unpin":"Pin","aria-label":a?"Unpin floaty":"Pin floaty",children:s.jsx(H,{pinned:a})}),s.jsx("span",{className:"floaty-title",children:R}),s.jsx("button",{className:"floaty-button floaty-button--expand",onClick:()=>i(!c),title:c?"Expand":"Collapse","aria-label":c?"Expand floaty":"Collapse floaty",children:s.jsx(Z,{collapsed:c})})]}),!c&&s.jsx("div",{className:"floaty-body",children:l})]})};E.Floaty=Q,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});

package/dist/style.css

@@ -0,0 +1 @@
+.floaty{--primary-color: #4f46e5;--primary-hover: #4338ca;--border-color: #e5e7eb;--shadow: 0 10px 25px rgba(0, 0, 0, .1);--transition: all .3s ease;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;position:fixed;width:320px;background:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow);z-index:1000;-webkit-user-select:none;user-select:none;font-family:var(--font-family)}.floaty:not(.dragging){transition:var(--transition)}.floaty.dragging{box-shadow:0 20px 35px #0003;opacity:.95}.floaty.pinned{opacity:1;border-color:var(--primary-color)}.floaty.collapsed{min-width:auto}.floaty-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-hover) 100%);color:#fff;font-weight:600;font-size:14px;border-radius:7px 7px 0 0;cursor:grab;transition:border-radius .3s ease;-webkit-user-select:none;user-select:none}.floaty.collapsed .floaty-header{border-radius:7px}.floaty-header:active{cursor:grabbing}.floaty-header.pinned{background:linear-gradient(135deg,#10b981,#059669)}.floaty-button{background:none;border:none;color:#fff;cursor:pointer;padding:4px 8px;border-radius:4px;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0}.floaty-button svg{width:16px;height:16px;stroke:currentColor;fill:none}.floaty-button:hover{background:#fff3;transform:scale(1.1)}.floaty-button:active{transform:scale(.95)}.floaty-button--pin{order:-1}.floaty-button--expand{order:1;margin-left:auto}.floaty-title{flex:1;text-align:center;order:0}.floaty-body{padding:16px;background:#f9fafb;border-radius:0 0 7px 7px;font-size:14px;line-height:1.6;color:#374151;max-height:500px;overflow:hidden;opacity:1;transform-origin:top;animation:expandIn .3s cubic-bezier(.34,1.56,.64,1)}.floaty.collapsed .floaty-body{animation:collapseOut .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes expandIn{0%{opacity:0;max-height:0;transform:scaleY(.8)}to{opacity:1;max-height:500px;transform:scaleY(1)}}@keyframes collapseOut{0%{opacity:1;max-height:500px;transform:scaleY(1)}to{opacity:0;max-height:0;transform:scaleY(.8)}}.chevron{display:inline-flex;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.chevron.collapsed{transform:rotate(180deg)}@media (max-width: 480px){.floaty{min-width:200px}.floaty-header{padding:10px 12px;font-size:13px}.floaty-body{padding:12px;max-height:300px}}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "floaty-widget",
+  "version": "0.1.0",
+  "description": "A floating component with drag, collapse/expand, and pin functionality",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^10.3.4",
+    "@storybook/react": "^10.3.4",
+    "@storybook/react-vite": "^10.3.4",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "storybook": "^10.3.4"
+  }
+}