@pindoba/core-attachment 0.0.0-alpha-20260426220647

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright 2025 Eduardo Lopes
+
+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/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { AttachmentAnchor, AttachmentApi, AttachmentBaseProps, AttachmentClasses, AttachmentConfig, AttachmentContentProps, AttachmentPassThrough, AttachmentRootProps, AttachmentShape, AttachmentSlotPassThrough, ConnectAttachmentOptions, ElementAttributes, HeadlessAttachment, Placement, PositionState } from "./src/types.js";
+import { attachmentDefaults, connectAttachment } from "./src/connect-attachment.js";
+import { createAttachment } from "./src/create-attachment.js";
+import { getAttachmentPositionStyleString, getAttachmentPositionStyles } from "./src/position-styles.js";
+export { type AttachmentAnchor, type AttachmentApi, type AttachmentBaseProps, type AttachmentClasses, type AttachmentConfig, type AttachmentContentProps, type AttachmentPassThrough, type AttachmentRootProps, type AttachmentShape, type AttachmentSlotPassThrough, type ConnectAttachmentOptions, type ElementAttributes, type HeadlessAttachment, type Placement, type PositionState, attachmentDefaults, connectAttachment, createAttachment, getAttachmentPositionStyleString, getAttachmentPositionStyles };

package/dist/index.js

@@ -0,0 +1,4 @@
+import { attachmentDefaults, connectAttachment } from "./src/connect-attachment.js";
+import { getAttachmentPositionStyleString, getAttachmentPositionStyles } from "./src/position-styles.js";
+import { createAttachment } from "./src/create-attachment.js";
+export { attachmentDefaults, connectAttachment, createAttachment, getAttachmentPositionStyleString, getAttachmentPositionStyles };

package/dist/src/connect-attachment.d.ts

@@ -0,0 +1,19 @@
+import { AttachmentApi, ConnectAttachmentOptions } from "./types.js";
+
+//#region src/connect-attachment.d.ts
+declare const attachmentDefaults: {
+  readonly placement: "top-end";
+  readonly anchor: "corner";
+  readonly shape: "rect";
+  readonly hugCorners: false;
+  readonly offset: 0;
+  readonly offsetX: 0;
+  readonly offsetY: 0;
+  readonly flip: false;
+  readonly shift: false;
+  readonly padding: 0;
+};
+declare function connectAttachment(options?: ConnectAttachmentOptions): AttachmentApi;
+//#endregion
+export { attachmentDefaults, connectAttachment };
+//# sourceMappingURL=connect-attachment.d.ts.map

package/dist/src/connect-attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-attachment.d.ts","names":[],"sources":["../../src/connect-attachment.ts"],"mappings":";;;cAQa,kBAAA;EAAA;;;;;;;;;;;iBA+BG,iBAAA,CACd,OAAA,GAAS,wBAAA,GACR,aAAA"}

package/dist/src/connect-attachment.js

@@ -0,0 +1,55 @@
+import { css } from "@pindoba/styled-system/css";
+import { attachmentStyles } from "@pindoba/styles-attachment";
+//#region src/connect-attachment.ts
+const attachmentDefaults = {
+	placement: "top-end",
+	anchor: "corner",
+	shape: "rect",
+	hugCorners: false,
+	offset: 0,
+	offsetX: 0,
+	offsetY: 0,
+	flip: false,
+	shift: false,
+	padding: 0
+};
+const classes = attachmentStyles.raw();
+function connectAttachment(options = {}) {
+	const { placement = attachmentDefaults.placement, anchor = attachmentDefaults.anchor, shape = attachmentDefaults.shape, hugCorners = attachmentDefaults.hugCorners, offset = attachmentDefaults.offset, offsetX = attachmentDefaults.offsetX, offsetY = attachmentDefaults.offsetY, padding = attachmentDefaults.padding, passThrough, class: className } = options;
+	const flip = options.flip ?? anchor === "outside";
+	const shift = options.shift ?? anchor === "outside";
+	const rootClass = css(classes.root, passThrough?.root?.style, className);
+	const contentClass = css(classes.content, passThrough?.content?.style);
+	return {
+		rootProps: {
+			"data-component": "attachment",
+			...passThrough?.root?.props,
+			class: rootClass
+		},
+		contentProps: {
+			"data-component": "attachment-content",
+			...passThrough?.content?.props,
+			class: contentClass
+		},
+		classes: {
+			root: rootClass,
+			content: contentClass
+		},
+		config: {
+			placement,
+			anchor,
+			shape,
+			hugCorners,
+			offset,
+			offsetX,
+			offsetY,
+			flip,
+			shift,
+			padding
+		}
+	};
+}
+//#endregion
+export { attachmentDefaults, connectAttachment };
+
+//# sourceMappingURL=connect-attachment.js.map

package/dist/src/connect-attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connect-attachment.js","names":[],"sources":["../../src/connect-attachment.ts"],"sourcesContent":["import { css } from \"@pindoba/styled-system/css\";\nimport { attachmentStyles } from \"@pindoba/styles-attachment\";\nimport type {\n  AttachmentApi,\n  ConnectAttachmentOptions,\n  AttachmentConfig,\n} from \"./types.js\";\n\nexport const attachmentDefaults = {\n  placement: \"top-end\",\n  anchor: \"corner\",\n  shape: \"rect\",\n  hugCorners: false,\n  offset: 0,\n  offsetX: 0,\n  offsetY: 0,\n  // flip/shift default to false for \"corner\" (intentional placement) and true\n  // for \"outside\" (popover-like). Resolved per-call in connectAttachment.\n  flip: false,\n  shift: false,\n  padding: 0,\n} as const satisfies Required<\n  Pick<\n    AttachmentConfig,\n    | \"placement\"\n    | \"anchor\"\n    | \"shape\"\n    | \"hugCorners\"\n    | \"offset\"\n    | \"offsetX\"\n    | \"offsetY\"\n    | \"flip\"\n    | \"shift\"\n    | \"padding\"\n  >\n>;\n\nconst classes = attachmentStyles.raw();\n\nexport function connectAttachment(\n  options: ConnectAttachmentOptions = {},\n): AttachmentApi {\n  const {\n    placement = attachmentDefaults.placement,\n    anchor = attachmentDefaults.anchor,\n    shape = attachmentDefaults.shape,\n    hugCorners = attachmentDefaults.hugCorners,\n    offset = attachmentDefaults.offset,\n    offsetX = attachmentDefaults.offsetX,\n    offsetY = attachmentDefaults.offsetY,\n    padding = attachmentDefaults.padding,\n    passThrough,\n    class: className,\n  } = options;\n\n  // Corner anchoring is an intentional placement (badges, status dots, stamps)\n  // — flipping/shifting would silently move the indicator to a different corner\n  // when space is tight, which is jarring. Outside anchoring is popover-like\n  // and benefits from staying inside the viewport, so it keeps flip/shift on.\n  const flip = options.flip ?? anchor === \"outside\";\n  const shift = options.shift ?? anchor === \"outside\";\n\n  const rootClass = css(classes.root, passThrough?.root?.style, className);\n  const contentClass = css(classes.content, passThrough?.content?.style);\n\n  return {\n    rootProps: {\n      \"data-component\": \"attachment\",\n      ...passThrough?.root?.props,\n      class: rootClass,\n    },\n    contentProps: {\n      \"data-component\": \"attachment-content\",\n      ...passThrough?.content?.props,\n      class: contentClass,\n    },\n    classes: {\n      root: rootClass,\n      content: contentClass,\n    },\n    config: {\n      placement,\n      anchor,\n      shape,\n      hugCorners,\n      offset,\n      offsetX,\n      offsetY,\n      flip,\n      shift,\n      padding,\n    },\n  };\n}\n"],"mappings":";;;AAQA,MAAa,qBAAqB;CAChC,WAAW;CACX,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,QAAQ;CACR,SAAS;CACT,SAAS;CAGT,MAAM;CACN,OAAO;CACP,SAAS;CACV;AAgBD,MAAM,UAAU,iBAAiB,KAAK;AAEtC,SAAgB,kBACd,UAAoC,EAAE,EACvB;CACf,MAAM,EACJ,YAAY,mBAAmB,WAC/B,SAAS,mBAAmB,QAC5B,QAAQ,mBAAmB,OAC3B,aAAa,mBAAmB,YAChC,SAAS,mBAAmB,QAC5B,UAAU,mBAAmB,SAC7B,UAAU,mBAAmB,SAC7B,UAAU,mBAAmB,SAC7B,aACA,OAAO,cACL;CAMJ,MAAM,OAAO,QAAQ,QAAQ,WAAW;CACxC,MAAM,QAAQ,QAAQ,SAAS,WAAW;CAE1C,MAAM,YAAY,IAAI,QAAQ,MAAM,aAAa,MAAM,OAAO,UAAU;CACxE,MAAM,eAAe,IAAI,QAAQ,SAAS,aAAa,SAAS,MAAM;AAEtE,QAAO;EACL,WAAW;GACT,kBAAkB;GAClB,GAAG,aAAa,MAAM;GACtB,OAAO;GACR;EACD,cAAc;GACZ,kBAAkB;GAClB,GAAG,aAAa,SAAS;GACzB,OAAO;GACR;EACD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACD,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF"}

package/dist/src/create-attachment.d.ts

@@ -0,0 +1,7 @@
+import { AttachmentConfig, HeadlessAttachment } from "./types.js";
+
+//#region src/create-attachment.d.ts
+declare function createAttachment(config?: AttachmentConfig): HeadlessAttachment;
+//#endregion
+export { createAttachment };
+//# sourceMappingURL=create-attachment.d.ts.map

package/dist/src/create-attachment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-attachment.d.ts","names":[],"sources":["../../src/create-attachment.ts"],"mappings":";;;iBA0DgB,gBAAA,CACd,MAAA,GAAQ,gBAAA,GACP,kBAAA"}

package/dist/src/create-attachment.js

@@ -0,0 +1,142 @@
+import { getAttachmentPositionStyles } from "./position-styles.js";
+import { atom } from "nanostores";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+//#region src/create-attachment.ts
+const DEFAULT_PLACEMENT = "top-end";
+const CORNER_BY_PLACEMENT = {
+	top: {
+		start: "border-top-left-radius",
+		end: "border-top-right-radius"
+	},
+	bottom: {
+		start: "border-bottom-left-radius",
+		end: "border-bottom-right-radius"
+	},
+	right: {
+		start: "border-top-right-radius",
+		end: "border-bottom-right-radius"
+	},
+	left: {
+		start: "border-top-left-radius",
+		end: "border-bottom-left-radius"
+	}
+};
+function readCornerRadius(el, side, align) {
+	const raw = getComputedStyle(el).getPropertyValue(CORNER_BY_PLACEMENT[side][align]);
+	const px = parseFloat(raw);
+	return Number.isFinite(px) && px > 0 ? px : 0;
+}
+function createAttachment(config = {}) {
+	const placement = config.placement ?? DEFAULT_PLACEMENT;
+	const anchor = config.anchor ?? "corner";
+	const shape = config.shape ?? "rect";
+	const hugCorners = config.hugCorners ?? false;
+	const offsetValue = config.offset ?? 0;
+	const offsetX = config.offsetX ?? 0;
+	const offsetY = config.offsetY ?? 0;
+	const padding = config.padding ?? 0;
+	const useFlip = config.flip ?? true;
+	const useShift = config.shift ?? true;
+	const $positionState = atom({
+		x: 0,
+		y: 0,
+		isPositioned: false
+	});
+	let targetElement = null;
+	let contentElement = null;
+	let cleanupAutoUpdate = null;
+	const anchorOffset = offset(({ rects, placement: p }) => {
+		const [side, align] = p.split("-");
+		const vertical = side === "top" || side === "bottom";
+		const mainDim = vertical ? rects.floating.height : rects.floating.width;
+		const crossDim = vertical ? rects.floating.width : rects.floating.height;
+		if (anchor === "outside") return {
+			mainAxis: offsetValue,
+			crossAxis: 0
+		};
+		let arcMain = 0;
+		let arcCross = 0;
+		if (align) {
+			let r = 0;
+			if (shape === "circle") r = Math.min(rects.reference.width, rects.reference.height) / 2;
+			else if (hugCorners && targetElement) r = readCornerRadius(targetElement, side, align);
+			const cap = Math.min(rects.reference.width / 2, rects.reference.height / 2);
+			r = Math.min(r, cap);
+			if (r > 0) {
+				const correction = r * (1 - 1 / Math.SQRT2);
+				arcMain = -correction;
+				arcCross = align === "end" ? -correction : correction;
+			}
+		}
+		return {
+			mainAxis: -mainDim / 2 + offsetValue + arcMain,
+			crossAxis: (align === "end" ? crossDim / 2 : align === "start" ? -crossDim / 2 : 0) + arcCross
+		};
+	});
+	function updatePosition() {
+		if (!targetElement || !contentElement) return Promise.resolve();
+		const middleware = [anchorOffset];
+		if (useFlip) middleware.push(flip({ padding }));
+		if (useShift) middleware.push(shift({ padding }));
+		return computePosition(targetElement, contentElement, {
+			placement,
+			strategy: "absolute",
+			middleware
+		}).then(({ x, y }) => {
+			$positionState.set({
+				x: x + offsetX,
+				y: y + offsetY,
+				isPositioned: true
+			});
+		});
+	}
+	function startAutoUpdate() {
+		if (!targetElement || !contentElement) return;
+		cleanupAutoUpdate = autoUpdate(targetElement, contentElement, updatePosition);
+	}
+	function stopAutoUpdate() {
+		if (cleanupAutoUpdate) {
+			cleanupAutoUpdate();
+			cleanupAutoUpdate = null;
+		}
+	}
+	$positionState.subscribe((state) => {
+		if (!contentElement) return;
+		const styles = getAttachmentPositionStyles(state);
+		Object.assign(contentElement.style, styles);
+	});
+	function maybeStart() {
+		stopAutoUpdate();
+		if (targetElement && contentElement) {
+			$positionState.set({
+				x: 0,
+				y: 0,
+				isPositioned: false
+			});
+			startAutoUpdate();
+		}
+	}
+	function setTargetElement(el) {
+		targetElement = el;
+		maybeStart();
+	}
+	function setContentElement(el) {
+		contentElement = el;
+		maybeStart();
+	}
+	function destroy() {
+		stopAutoUpdate();
+		targetElement = null;
+		contentElement = null;
+	}
+	return {
+		$positionState,
+		setTargetElement,
+		setContentElement,
+		destroy
+	};
+}
+//#endregion
+export { createAttachment };
+
+//# sourceMappingURL=create-attachment.js.map

package/dist/src/create-attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-attachment.js","names":["offsetMiddleware","flipMiddleware","shiftMiddleware"],"sources":["../../src/create-attachment.ts"],"sourcesContent":["import { atom } from \"nanostores\";\nimport {\n  computePosition,\n  autoUpdate,\n  flip as flipMiddleware,\n  offset as offsetMiddleware,\n  shift as shiftMiddleware,\n  type ComputePositionReturn,\n  type Middleware,\n} from \"@floating-ui/dom\";\nimport { getAttachmentPositionStyles } from \"./position-styles.js\";\nimport type {\n  AttachmentConfig,\n  HeadlessAttachment,\n  PositionState,\n} from \"./types.js\";\n\nconst DEFAULT_PLACEMENT = \"top-end\" as const;\n\ntype Side = \"top\" | \"right\" | \"bottom\" | \"left\";\ntype Align = \"start\" | \"end\";\ntype CornerProperty =\n  | \"border-top-left-radius\"\n  | \"border-top-right-radius\"\n  | \"border-bottom-left-radius\"\n  | \"border-bottom-right-radius\";\n\n// Map (side, alignment) → which target corner determines the arc the\n// attachment should hug. e.g. right-end is the bottom-right corner.\nconst CORNER_BY_PLACEMENT: Record<Side, Record<Align, CornerProperty>> = {\n  top: {\n    start: \"border-top-left-radius\",\n    end: \"border-top-right-radius\",\n  },\n  bottom: {\n    start: \"border-bottom-left-radius\",\n    end: \"border-bottom-right-radius\",\n  },\n  right: {\n    start: \"border-top-right-radius\",\n    end: \"border-bottom-right-radius\",\n  },\n  left: {\n    start: \"border-top-left-radius\",\n    end: \"border-bottom-left-radius\",\n  },\n};\n\nfunction readCornerRadius(el: HTMLElement, side: Side, align: Align): number {\n  const raw = getComputedStyle(el).getPropertyValue(\n    CORNER_BY_PLACEMENT[side][align],\n  );\n  // Computed style returns \"0px\" / \"8px\" / \"8px 4px\" (elliptical). Take the\n  // first component — the horizontal radius — which controls the diagonal arc.\n  const px = parseFloat(raw);\n  return Number.isFinite(px) && px > 0 ? px : 0;\n}\n\nexport function createAttachment(\n  config: AttachmentConfig = {},\n): HeadlessAttachment {\n  const placement = config.placement ?? DEFAULT_PLACEMENT;\n  const anchor = config.anchor ?? \"corner\";\n  const shape = config.shape ?? \"rect\";\n  const hugCorners = config.hugCorners ?? false;\n  const offsetValue = config.offset ?? 0;\n  const offsetX = config.offsetX ?? 0;\n  const offsetY = config.offsetY ?? 0;\n  const padding = config.padding ?? 0;\n  const useFlip = config.flip ?? true;\n  const useShift = config.shift ?? true;\n\n  const $positionState = atom<PositionState>({\n    x: 0,\n    y: 0,\n    isPositioned: false,\n  });\n\n  let targetElement: HTMLElement | null = null;\n  let contentElement: HTMLElement | null = null;\n  let cleanupAutoUpdate: (() => void) | null = null;\n\n  // For \"corner\" anchoring, pull the attachment back by half its own size so\n  // its center sits on the target's edge/corner (badge/stamp/dot convention).\n  // For \"outside\", fall back to Floating UI's flush-outside default.\n  const anchorOffset: Middleware = offsetMiddleware(\n    ({ rects, placement: p }) => {\n      const [side, align] = p.split(\"-\") as [\n        \"top\" | \"right\" | \"bottom\" | \"left\",\n        \"start\" | \"end\" | undefined,\n      ];\n      const vertical = side === \"top\" || side === \"bottom\";\n      const mainDim = vertical ? rects.floating.height : rects.floating.width;\n      const crossDim = vertical ? rects.floating.width : rects.floating.height;\n\n      if (anchor === \"outside\") {\n        return { mainAxis: offsetValue, crossAxis: 0 };\n      }\n\n      // Diagonal placement on a curved corner: the arc at 45° sits at r/√2\n      // from the corner along each axis, whereas the bounding-box corner sits\n      // at r. Pull inward by r·(1 − 1/√2) so the attachment hugs the arc.\n      // - shape=\"circle\" always applies, with r = min(w,h)/2 (works for masked\n      //   images / SVGs without a CSS radius).\n      // - hugCorners reads the target's actual computed border-radius for the\n      //   placement corner. Opt-in because it shifts the visual baseline for\n      //   anything tuned against \"dot center on the bounding-rect corner\".\n      let arcMain = 0;\n      let arcCross = 0;\n      if (align) {\n        let r = 0;\n        if (shape === \"circle\") {\n          r = Math.min(rects.reference.width, rects.reference.height) / 2;\n        } else if (hugCorners && targetElement) {\n          r = readCornerRadius(targetElement, side, align);\n        }\n        const cap = Math.min(\n          rects.reference.width / 2,\n          rects.reference.height / 2,\n        );\n        r = Math.min(r, cap);\n        if (r > 0) {\n          const correction = r * (1 - 1 / Math.SQRT2);\n          arcMain = -correction;\n          arcCross = align === \"end\" ? -correction : correction;\n        }\n      }\n\n      return {\n        mainAxis: -mainDim / 2 + offsetValue + arcMain,\n        crossAxis:\n          (align === \"end\"\n            ? crossDim / 2\n            : align === \"start\"\n              ? -crossDim / 2\n              : 0) + arcCross,\n      };\n    },\n  );\n\n  function updatePosition(): Promise<void> {\n    if (!targetElement || !contentElement) return Promise.resolve();\n\n    const middleware: Middleware[] = [anchorOffset];\n    if (useFlip) middleware.push(flipMiddleware({ padding }));\n    if (useShift) middleware.push(shiftMiddleware({ padding }));\n\n    return computePosition(targetElement, contentElement, {\n      placement,\n      strategy: \"absolute\",\n      middleware,\n    }).then(({ x, y }: ComputePositionReturn) => {\n      $positionState.set({\n        x: x + offsetX,\n        y: y + offsetY,\n        isPositioned: true,\n      });\n    });\n  }\n\n  function startAutoUpdate() {\n    if (!targetElement || !contentElement) return;\n    cleanupAutoUpdate = autoUpdate(\n      targetElement,\n      contentElement,\n      updatePosition,\n    );\n  }\n\n  function stopAutoUpdate() {\n    if (cleanupAutoUpdate) {\n      cleanupAutoUpdate();\n      cleanupAutoUpdate = null;\n    }\n  }\n\n  $positionState.subscribe((state) => {\n    if (!contentElement) return;\n    const styles = getAttachmentPositionStyles(state);\n    Object.assign(contentElement.style, styles);\n  });\n\n  function maybeStart() {\n    stopAutoUpdate();\n    if (targetElement && contentElement) {\n      $positionState.set({ x: 0, y: 0, isPositioned: false });\n      startAutoUpdate();\n    }\n  }\n\n  function setTargetElement(el: HTMLElement | null) {\n    targetElement = el;\n    maybeStart();\n  }\n\n  function setContentElement(el: HTMLElement | null) {\n    contentElement = el;\n    maybeStart();\n  }\n\n  function destroy() {\n    stopAutoUpdate();\n    targetElement = null;\n    contentElement = null;\n  }\n\n  return {\n    $positionState,\n    setTargetElement,\n    setContentElement,\n    destroy,\n  };\n}\n"],"mappings":"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"}

package/dist/src/position-styles.d.ts

@@ -0,0 +1,8 @@
+import { PositionState } from "./types.js";
+
+//#region src/position-styles.d.ts
+declare function getAttachmentPositionStyles(state: PositionState): Record<string, string>;
+declare function getAttachmentPositionStyleString(state: PositionState): string;
+//#endregion
+export { getAttachmentPositionStyleString, getAttachmentPositionStyles };
+//# sourceMappingURL=position-styles.d.ts.map

package/dist/src/position-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-styles.d.ts","names":[],"sources":["../../src/position-styles.ts"],"mappings":";;;iBAEgB,2BAAA,CACd,KAAA,EAAO,aAAA,GACN,MAAA;AAAA,iBAYa,gCAAA,CAAiC,KAAA,EAAO,aAAA"}

package/dist/src/position-styles.js

@@ -0,0 +1,20 @@
+//#region src/position-styles.ts
+function getAttachmentPositionStyles(state) {
+	return {
+		position: "absolute",
+		margin: "0",
+		left: `${state.x}px`,
+		top: `${state.y}px`,
+		visibility: state.isPositioned ? "visible" : "hidden",
+		opacity: state.isPositioned ? "1" : "0",
+		transform: state.isPositioned ? "scale(1)" : "scale(0.85)"
+	};
+}
+function getAttachmentPositionStyleString(state) {
+	const styles = getAttachmentPositionStyles(state);
+	return Object.entries(styles).map(([k, v]) => `${k}: ${v}`).join("; ");
+}
+//#endregion
+export { getAttachmentPositionStyleString, getAttachmentPositionStyles };
+
+//# sourceMappingURL=position-styles.js.map

package/dist/src/position-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-styles.js","names":[],"sources":["../../src/position-styles.ts"],"sourcesContent":["import type { PositionState } from \"./types.js\";\n\nexport function getAttachmentPositionStyles(\n  state: PositionState,\n): Record<string, string> {\n  return {\n    position: \"absolute\",\n    margin: \"0\",\n    left: `${state.x}px`,\n    top: `${state.y}px`,\n    visibility: state.isPositioned ? \"visible\" : \"hidden\",\n    opacity: state.isPositioned ? \"1\" : \"0\",\n    transform: state.isPositioned ? \"scale(1)\" : \"scale(0.85)\",\n  };\n}\n\nexport function getAttachmentPositionStyleString(state: PositionState): string {\n  const styles = getAttachmentPositionStyles(state);\n  return Object.entries(styles)\n    .map(([k, v]) => `${k}: ${v}`)\n    .join(\"; \");\n}\n"],"mappings":";AAEA,SAAgB,4BACd,OACwB;AACxB,QAAO;EACL,UAAU;EACV,QAAQ;EACR,MAAM,GAAG,MAAM,EAAE;EACjB,KAAK,GAAG,MAAM,EAAE;EAChB,YAAY,MAAM,eAAe,YAAY;EAC7C,SAAS,MAAM,eAAe,MAAM;EACpC,WAAW,MAAM,eAAe,aAAa;EAC9C;;AAGH,SAAgB,iCAAiC,OAA8B;CAC7E,MAAM,SAAS,4BAA4B,MAAM;AACjD,QAAO,OAAO,QAAQ,OAAO,CAC1B,KAAK,CAAC,GAAG,OAAO,GAAG,EAAE,IAAI,IAAI,CAC7B,KAAK,KAAK"}

package/dist/src/types.d.ts

@@ -0,0 +1,112 @@
+import * as _$nanostores from "nanostores";
+import { Placement } from "@floating-ui/dom";
+import { SystemStyleObject } from "@pindoba/styled-system/types";
+
+//#region src/types.d.ts
+type ElementAttributes = Partial<Record<string, unknown>>;
+interface AttachmentSlotPassThrough<T = ElementAttributes> {
+  style?: SystemStyleObject;
+  props?: T;
+}
+interface AttachmentPassThrough<RootElementAttributes = ElementAttributes, ContentElementAttributes = ElementAttributes> {
+  root?: AttachmentSlotPassThrough<RootElementAttributes>;
+  content?: AttachmentSlotPassThrough<ContentElementAttributes>;
+}
+interface PositionState {
+  x: number;
+  y: number;
+  isPositioned: boolean;
+}
+/**
+ * How the attachment is anchored to the target.
+ * - "corner" (default): the attachment's center sits on the target's corner/edge —
+ *   the natural fit for badges, dots, stamps that should overlap half in / half out.
+ * - "outside": the attachment sits fully outside the target, flush against its edge
+ *   (standard Floating UI popover/tooltip behavior).
+ */
+type AttachmentAnchor = "corner" | "outside";
+/**
+ * Silhouette of the target element. "rect" uses the bounding-box corner;
+ * "circle" pulls the attachment inward along the arc so diagonal placements
+ * hug a circular target instead of floating off its bounding corner.
+ */
+type AttachmentShape = "rect" | "circle";
+interface AttachmentConfig {
+  /** Floating UI placement. Default: "top-end". */
+  placement?: Placement;
+  /** Where the attachment sits relative to the target bounds. Default: "corner". */
+  anchor?: AttachmentAnchor;
+  /** Silhouette of the target. Default: "rect". */
+  shape?: AttachmentShape;
+  /**
+   * Pull the attachment inward along the diagonal so it hugs the target's
+   * rounded corner instead of sitting on the bounding-box corner. Reads the
+   * target's computed `border-*-radius` for the placement corner. Default:
+   * false. Ignored when `shape="circle"` (which always hugs the arc).
+   */
+  hugCorners?: boolean;
+  /** Extra px nudge along the placement axes, stacked on top of the anchor. Default: 0. */
+  offset?: number;
+  /** Extra px nudge on the horizontal axis, applied after all positioning. Default: 0. */
+  offsetX?: number;
+  /** Extra px nudge on the vertical axis, applied after all positioning. Default: 0. */
+  offsetY?: number;
+  /**
+   * Flip to the opposite side when overflowing the viewport.
+   * Default: `false` for `anchor="corner"` (a corner indicator should stay on
+   * its requested corner), `true` for `anchor="outside"` (popover-like).
+   */
+  flip?: boolean;
+  /**
+   * Shift along the alignment axis to stay within the viewport.
+   * Default: `false` for `anchor="corner"`, `true` for `anchor="outside"`.
+   */
+  shift?: boolean;
+  /** Padding (px) used by flip/shift middleware for viewport boundary. Default: 0. */
+  padding?: number;
+}
+interface HeadlessAttachment {
+  $positionState: _$nanostores.WritableAtom<PositionState>;
+  setTargetElement: (el: HTMLElement | null) => void;
+  setContentElement: (el: HTMLElement | null) => void;
+  destroy: () => void;
+}
+interface AttachmentBaseProps<RootElementAttributes = ElementAttributes, ContentElementAttributes = ElementAttributes> {
+  placement?: Placement;
+  anchor?: AttachmentAnchor;
+  shape?: AttachmentShape;
+  hugCorners?: boolean;
+  offset?: number;
+  offsetX?: number;
+  offsetY?: number;
+  flip?: boolean;
+  shift?: boolean;
+  padding?: number;
+  passThrough?: AttachmentPassThrough<RootElementAttributes, ContentElementAttributes>;
+}
+type ConnectAttachmentOptions = AttachmentBaseProps<object, object> & {
+  class?: unknown;
+};
+interface AttachmentRootProps {
+  class: string;
+  "data-component": "attachment";
+  [key: string]: unknown;
+}
+interface AttachmentContentProps {
+  class: string;
+  "data-component": "attachment-content";
+  [key: string]: unknown;
+}
+interface AttachmentClasses {
+  root: string;
+  content: string;
+}
+interface AttachmentApi {
+  rootProps: AttachmentRootProps;
+  contentProps: AttachmentContentProps;
+  classes: AttachmentClasses;
+  config: Required<Pick<AttachmentConfig, "placement" | "anchor" | "shape" | "hugCorners" | "offset" | "offsetX" | "offsetY" | "flip" | "shift" | "padding">>;
+}
+//#endregion
+export { AttachmentAnchor, AttachmentApi, AttachmentBaseProps, AttachmentClasses, AttachmentConfig, AttachmentContentProps, AttachmentPassThrough, AttachmentRootProps, AttachmentShape, AttachmentSlotPassThrough, ConnectAttachmentOptions, ElementAttributes, HeadlessAttachment, type Placement, PositionState };
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../src/types.ts"],"mappings":";;;;;KAKY,iBAAA,GAAoB,OAAA,CAAQ,MAAA;AAAA,UAEvB,yBAAA,KAA8B,iBAAA;EAC7C,KAAA,GAAQ,iBAAA;EACR,KAAA,GAAQ,CAAA;AAAA;AAAA,UAGO,qBAAA,yBACS,iBAAA,6BACG,iBAAA;EAE3B,IAAA,GAAO,yBAAA,CAA0B,qBAAA;EACjC,OAAA,GAAU,yBAAA,CAA0B,wBAAA;AAAA;AAAA,UAGrB,aAAA;EACf,CAAA;EACA,CAAA;EACA,YAAA;AAAA;;;;;;;;KAUU,gBAAA;;AArBZ;;;;KA4BY,eAAA;AAAA,UAEK,gBAAA;EA1BR;EA4BP,SAAA,GAAY,SAAA;EA3BF;EA6BV,MAAA,GAAS,gBAAA;EA7B0B;EA+BnC,KAAA,GAAQ,eAAA;EAnCgB;;;;;;EA0CxB,UAAA;EAtCU;EAwCV,MAAA;EAxC4D;EA0C5D,OAAA;EAvCe;EAyCf,OAAA;;;;;;EAMA,IAAA;EA5CY;AAUd;;;EAuCE,KAAA;EAvC0B;EAyC1B,OAAA;AAAA;AAAA,UAGe,kBAAA;EACf,cAAA,EAA+D,YAAA,CAA1B,YAAA,CAAa,aAAA;EAClD,gBAAA,GAAmB,EAAA,EAAI,WAAA;EACvB,iBAAA,GAAoB,EAAA,EAAI,WAAA;EACxB,OAAA;AAAA;AAAA,UAGe,mBAAA,yBACS,iBAAA,6BACG,iBAAA;EAE3B,SAAA,GAAY,SAAA;EACZ,MAAA,GAAS,gBAAA;EACT,KAAA,GAAQ,eAAA;EACR,UAAA;EACA,MAAA;EACA,OAAA;EACA,OAAA;EACA,IAAA;EACA,KAAA;EACA,OAAA;EACA,WAAA,GAAc,qBAAA,CACZ,qBAAA,EACA,wBAAA;AAAA;AAAA,KAIQ,wBAAA,GAA2B,mBAAA;EACrC,KAAA;AAAA;AAAA,UAGe,mBAAA;EACf,KAAA;EACA,gBAAA;EAAA,CACC,GAAA;AAAA;AAAA,UAGc,sBAAA;EACf,KAAA;EACA,gBAAA;EAAA,CACC,GAAA;AAAA;AAAA,UAGc,iBAAA;EACf,IAAA;EACA,OAAA;AAAA;AAAA,UAGe,aAAA;EACf,SAAA,EAAW,mBAAA;EACX,YAAA,EAAc,sBAAA;EACd,OAAA,EAAS,iBAAA;EACT,MAAA,EAAQ,QAAA,CACN,IAAA,CACE,gBAAA;AAAA"}

package/dist/src/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@pindoba/core-attachment",
+  "version": "0.0.0-alpha-20260426220647",
+  "type": "module",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./*": {
+      "types": "./dist/src/*.d.ts",
+      "import": "./dist/src/*.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@floating-ui/dom": "^1.7.6",
+    "nanostores": "^1.3.0",
+    "@pindoba/styled-system": "0.0.0-alpha-20260426220647",
+    "@pindoba/styles-attachment": "0.0.0-alpha-20260426220647"
+  },
+  "devDependencies": {
+    "tsdown": "^0.21.10",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "clean": "rm -rf dist && rm -rf node_modules && rm -rf .turbo"
+  }
+}