@pihanga2/shadcn 0.1.0

package/cards/navbarSearch/navbarSearch.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbarSearch.type.js","names":[],"sources":["../../../src/cards/navbarSearch/navbarSearch.type.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const NAVBAR_SEARCH_CARD = \"navbarSearch\";\nexport const NavbarSearch = createCardDeclaration<\n  NavbarSearchProps,\n  NavbarSearchEvents\n>(NAVBAR_SEARCH_CARD);\n\nexport const NAVBAR_SEARCH_ACTION = registerActions(NAVBAR_SEARCH_CARD, [\n  \"search_submit\",\n  \"search_items\",\n  \"search_focus\",\n]);\n\nexport const onNavbarSearchSubmit =\n  createOnAction<NavbarSearchEvent>(NAVBAR_SEARCH_ACTION.SEARCH_SUBMIT);\nexport const onNavbarSearchItems = createOnAction<NavbarSearchInputEvent>(\n  NAVBAR_SEARCH_ACTION.SEARCH_ITEMS,\n);\nexport const onNavbarSearchFocus = createOnAction<NavbarSearchFocusEvent>(\n  NAVBAR_SEARCH_ACTION.SEARCH_FOCUS,\n);\n\nexport type NavbarSearchProps = {\n  searchItems?: string[];\n  placeholder?: string;\n};\n\nexport type NavbarSearchEvent = {search: string};\nexport type NavbarSearchInputEvent = {search: string};\nexport type NavbarSearchFocusEvent = Record<string, never>;\n\nexport type NavbarSearchEvents = {\n  onSearchSubmit: NavbarSearchEvent;\n  onSearchItems?: NavbarSearchInputEvent;\n  onSearchFocus?: NavbarSearchFocusEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAqB,gBACrB,IAAe,EAG1B,CAAkB,GAEP,IAAuB,EAAgB,GAAoB;CACtE;CACA;CACA;AACF,CAAC,GAEY,IACX,EAAkC,EAAqB,aAAa,GACzD,IAAsB,EACjC,EAAqB,YACvB,GACa,IAAsB,EACjC,EAAqB,YACvB"}

package/cards/pageWithNavbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './pageWithNavbar.type';
+export declare const SdPageWithNavbar: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<{}, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/pageWithNavbar/index.js

@@ -0,0 +1,14 @@
+import { Component as e } from "./pageWithNavbar.component.js";
+import { PAGE_WITH_NAVBAR_ACTION as t, PAGE_WITH_NAVBAR_CARD as n, PageWithNavbar as r, onPageWithNavbarNavigateTo as i } from "./pageWithNavbar.type.js";
+import { actionTypesToEvents as a, createCardDeclaration as o, registerCardComponent as s } from "@pihanga2/core";
+//#region src/cards/pageWithNavbar/index.ts
+var c = "shad/pageWithNavbar", l = o(c);
+s({
+	name: c,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as PAGE_WITH_NAVBAR_ACTION, n as PAGE_WITH_NAVBAR_CARD, r as PageWithNavbar, l as SdPageWithNavbar, i as onPageWithNavbarNavigateTo };
+
+//# sourceMappingURL=index.js.map

package/cards/pageWithNavbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/pageWithNavbar/index.ts"],"sourcesContent":["import {\n  actionTypesToEvents,\n  createCardDeclaration,\n  registerCardComponent,\n} from \"@pihanga2/core\";\n\nimport {Component} from \"./pageWithNavbar.component\";\nimport {PAGE_WITH_NAVBAR_ACTION} from \"./pageWithNavbar.type\";\n\nexport * from \"./pageWithNavbar.type\";\n\nconst CARD_NAME = \"shad/pageWithNavbar\";\n\nexport const SdPageWithNavbar = createCardDeclaration(CARD_NAME);\n\nregisterCardComponent({\n  name: CARD_NAME,\n  component: Component,\n  events: actionTypesToEvents(PAGE_WITH_NAVBAR_ACTION),\n});\n"],"mappings":";;;;AAWA,IAAM,IAAY,uBAEL,IAAmB,EAAsB,CAAS;AAE/D,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAuB;AACrD,CAAC"}

package/cards/pageWithNavbar/pageWithNavbar.component.d.ts

@@ -0,0 +1,12 @@
+import { PiCardProps } from '@pihanga2/core';
+import { PageWithNavbarEvents, PageWithNavbarProps } from './pageWithNavbar.type';
+export type ShadStyle = {
+    shad?: {
+        window?: string;
+        page?: string;
+        header?: string;
+        main?: string;
+        footer?: string;
+    };
+};
+export declare const Component: (props: PiCardProps<PageWithNavbarProps<ShadStyle>, PageWithNavbarEvents>) => React.ReactNode;

package/cards/pageWithNavbar/pageWithNavbar.component.js

@@ -0,0 +1,153 @@
+import { Button as e } from "../../components/ui/button.js";
+import { getIconElement as t } from "../icons.js";
+import { Sheet as n, SheetContent as r, SheetTrigger as i } from "../../components/ui/sheet.js";
+import { SCREEN_SIZE_ORDER as a, SCREEN_SIZE_WIDTHS as o, ScreenSize as s } from "../types.js";
+/* empty css               */
+import { Card as c } from "@pihanga2/core";
+import { useEffect as l, useRef as u, useState as d } from "react";
+import f from "clsx";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Menu as h } from "lucide-react";
+//#region src/cards/pageWithNavbar/pageWithNavbar.component.tsx
+function g() {
+	let e = typeof window < "u" ? window.innerWidth : 0;
+	for (let t = a.length - 1; t >= 0; t--) {
+		let n = a[t];
+		if (e >= o[n]) return n;
+	}
+	return s.XS;
+}
+function _() {
+	let [e, t] = d(g);
+	return l(() => {
+		let e = () => t(g());
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), e;
+}
+function v(e) {
+	return typeof e == "object" && !!e;
+}
+function y(e, t) {
+	if (!e) return;
+	if (!v(e)) return e;
+	let n = a.indexOf(t);
+	for (let t = n; t >= 0; t--) {
+		let n = a[t];
+		if (Object.prototype.hasOwnProperty.call(e, n)) return e[n] ?? void 0;
+	}
+	return e.default ?? void 0;
+}
+var b = (a) => {
+	let { title: o, iconName: s, main: d, footer: g, navLinks: v = [], scrollResetKey: b, headerLeftCard: S, headerRightCard: C, style: w, onNavigateTo: T, cardName: E } = a, D = _(), O = w?.shad ?? {}, k = u(null);
+	l(() => {
+		k.current?.scrollTo({
+			top: 0,
+			behavior: "auto"
+		});
+	}, [b]);
+	let A = y(S, D), j = y(C, D), M = v.length > 0;
+	function N({ className: e }) {
+		let n = s ? t(s) : void 0;
+		return /* @__PURE__ */ m("div", {
+			className: f("title-section", e),
+			children: [n && /* @__PURE__ */ p(n, {
+				className: "title-icon",
+				"aria-hidden": !0
+			}), /* @__PURE__ */ p("span", {
+				className: "title-text",
+				children: o
+			})]
+		});
+	}
+	function P() {
+		return /* @__PURE__ */ m("nav", {
+			className: "nav-md",
+			"aria-label": "Main navigation",
+			children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
+				onClick: () => T({ id: t.id }),
+				variant: "link",
+				className: "nav-link",
+				children: t.title ?? x(t.id)
+			}, t.id))]
+		});
+	}
+	function F() {
+		return /* @__PURE__ */ m(n, { children: [/* @__PURE__ */ p(i, {
+			asChild: !0,
+			children: /* @__PURE__ */ p(e, {
+				variant: "outline",
+				size: "icon",
+				className: "shrink-0 md:hidden",
+				"aria-label": "Toggle navigation menu",
+				children: /* @__PURE__ */ p(h, {
+					className: "h-5 w-5",
+					"aria-hidden": !0
+				})
+			})
+		}), /* @__PURE__ */ p(r, {
+			side: "left",
+			children: /* @__PURE__ */ m("nav", {
+				className: "nav-sm",
+				"aria-label": "Mobile navigation",
+				children: [/* @__PURE__ */ p(N, {}), v.map((t) => /* @__PURE__ */ p(e, {
+					onClick: () => T({ id: t.id }),
+					variant: "link",
+					className: "nav-link",
+					children: t.title ?? x(t.id)
+				}, t.id))]
+			})
+		})] });
+	}
+	return /* @__PURE__ */ p("div", {
+		className: f("window", O.window),
+		"data-pihanga": E,
+		children: /* @__PURE__ */ m("div", {
+			className: f("page", O.page),
+			children: [
+				/* @__PURE__ */ m("header", {
+					className: f("header", O.header),
+					children: [
+						/* @__PURE__ */ p(P, {}),
+						M && /* @__PURE__ */ p(F, {}),
+						!M && /* @__PURE__ */ p("div", {
+							className: "md:hidden",
+							children: /* @__PURE__ */ p(N, {})
+						}),
+						/* @__PURE__ */ m("div", {
+							className: "header-actions",
+							children: [A && /* @__PURE__ */ p(c, {
+								cardName: A,
+								parentCard: E
+							}), j && /* @__PURE__ */ p(c, {
+								cardName: j,
+								parentCard: E
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ p("main", {
+					className: f("main", O.main),
+					ref: k,
+					children: /* @__PURE__ */ p(c, {
+						cardName: d,
+						parentCard: E
+					})
+				}),
+				g && /* @__PURE__ */ p("footer", {
+					className: f("footer", O.footer),
+					children: /* @__PURE__ */ p(c, {
+						cardName: g,
+						parentCard: E
+					})
+				})
+			]
+		})
+	});
+};
+function x(e) {
+	return e ? e.charAt(0).toLocaleUpperCase() + e.slice(1) : "";
+}
+//#endregion
+export { b as Component };
+
+//# sourceMappingURL=pageWithNavbar.component.js.map

package/cards/pageWithNavbar/pageWithNavbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageWithNavbar.component.js","names":[],"sources":["../../../src/cards/pageWithNavbar/pageWithNavbar.component.tsx"],"sourcesContent":["import {Menu} from \"lucide-react\";\nimport clsx from \"clsx\";\nimport {useEffect, useRef, useState} from \"react\";\n\nimport {Button} from \"@/components/ui/button\";\nimport {Sheet, SheetContent, SheetTrigger} from \"@/components/ui/sheet\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {getIconElement} from \"@/cards/icons\";\nimport {ScreenSize, SCREEN_SIZE_ORDER, SCREEN_SIZE_WIDTHS} from \"@/cards/types\";\nimport type {\n  PageWithNavbarEvents,\n  PageWithNavbarProps,\n  ResponsiveCardRef,\n} from \"./pageWithNavbar.type\";\nimport type {SizeMap} from \"@/cards/types\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\nimport \"./pageWithNavbar.css\";\n\n// ---------------------------------------------------------------------------\n// Style override type — consumers can extend this to add Tailwind class names\n// to any structural section of the layout.\n// ---------------------------------------------------------------------------\n\nexport type ShadStyle = {\n  shad?: {\n    window?: string;\n    page?: string;\n    header?: string;\n    main?: string;\n    footer?: string;\n  };\n};\n\n// ---------------------------------------------------------------------------\n// Screen-size hook\n// ---------------------------------------------------------------------------\n\nfunction getCurrentScreenSize(): ScreenSize {\n  const w = typeof window !== \"undefined\" ? window.innerWidth : 0;\n  // Walk breakpoints from largest to smallest\n  for (let i = SCREEN_SIZE_ORDER.length - 1; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (w >= SCREEN_SIZE_WIDTHS[size]) return size;\n  }\n  return ScreenSize.XS;\n}\n\nfunction useScreenSize(): ScreenSize {\n  const [size, setSize] = useState<ScreenSize>(getCurrentScreenSize);\n\n  useEffect(() => {\n    const handleResize = () => setSize(getCurrentScreenSize());\n    window.addEventListener(\"resize\", handleResize);\n    return () => window.removeEventListener(\"resize\", handleResize);\n  }, []);\n\n  return size;\n}\n\n// ---------------------------------------------------------------------------\n// Responsive card-ref resolution\n// ---------------------------------------------------------------------------\n\nfunction isSizeMap(ref: ResponsiveCardRef): ref is SizeMap<PiCardRef> {\n  return typeof ref === \"object\" && ref !== null;\n}\n\n/**\n * Resolve a {@link ResponsiveCardRef} to a concrete `PiCardRef` (or\n * `undefined`) for the given screen size.\n *\n * Uses a **mobile-first cascade**: the entry with the largest breakpoint\n * that is still ≤ `currentSize` wins; falls back to `default` otherwise.\n */\nfunction resolveCardRef(\n  ref: ResponsiveCardRef | undefined,\n  currentSize: ScreenSize,\n): PiCardRef | undefined {\n  if (!ref) return undefined;\n  if (!isSizeMap(ref)) return ref; // plain PiCardRef (string or PiCardDef)\n\n  // Cascade: find the highest breakpoint that is ≤ current size\n  const currentIdx = SCREEN_SIZE_ORDER.indexOf(currentSize);\n  for (let i = currentIdx; i >= 0; i--) {\n    const size = SCREEN_SIZE_ORDER[i];\n    if (Object.prototype.hasOwnProperty.call(ref, size)) {\n      const val = ref[size];\n      // null means \"explicitly hidden at this breakpoint\"\n      return val ?? undefined;\n    }\n  }\n  // Fall back to the default entry\n  return ref.default ?? undefined;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Component = (\n  props: PiCardProps<PageWithNavbarProps<ShadStyle>, PageWithNavbarEvents>,\n): React.ReactNode => {\n  const {\n    title,\n    iconName,\n    main,\n    footer,\n    navLinks = [],\n    scrollResetKey,\n    headerLeftCard,\n    headerRightCard,\n    style,\n    onNavigateTo,\n    cardName,\n  } = props;\n\n  const screenSize = useScreenSize();\n  const cl = style?.shad ?? {};\n  const mainRef = useRef<HTMLElement | null>(null);\n\n  // Scroll main back to top when the logical \"page\" changes\n  useEffect(() => {\n    mainRef.current?.scrollTo({top: 0, behavior: \"auto\"});\n  }, [scrollResetKey]);\n\n  const resolvedLeftCard = resolveCardRef(headerLeftCard, screenSize);\n  const resolvedRightCard = resolveCardRef(headerRightCard, screenSize);\n  const hasNavLinks = navLinks.length > 0;\n\n  // ------------------------------------------------------------------\n  // Sub-components\n  // ------------------------------------------------------------------\n\n  /** Title section: optional icon + text */\n  function TitleSection({className}: {className?: string}) {\n    const IconEl = iconName ? getIconElement(iconName) : undefined;\n    return (\n      <div className={clsx(\"title-section\", className)}>\n        {IconEl && <IconEl className=\"title-icon\" aria-hidden />}\n        <span className=\"title-text\">{title}</span>\n      </div>\n    );\n  }\n\n  /** Nav bar rendered on medium screens and above */\n  function NavMd() {\n    return (\n      <nav className=\"nav-md\" aria-label=\"Main navigation\">\n        <TitleSection />\n        {navLinks.map((el) => (\n          <Button\n            key={el.id}\n            onClick={() => onNavigateTo({id: el.id})}\n            variant=\"link\"\n            className=\"nav-link\"\n          >\n            {el.title ?? capitalize(el.id)}\n          </Button>\n        ))}\n      </nav>\n    );\n  }\n\n  /** Hamburger trigger that opens a slide-out sheet on small screens */\n  function NavSm() {\n    return (\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            className=\"shrink-0 md:hidden\"\n            aria-label=\"Toggle navigation menu\"\n          >\n            <Menu className=\"h-5 w-5\" aria-hidden />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav className=\"nav-sm\" aria-label=\"Mobile navigation\">\n            <TitleSection />\n            {navLinks.map((el) => (\n              <Button\n                key={el.id}\n                onClick={() => onNavigateTo({id: el.id})}\n                variant=\"link\"\n                className=\"nav-link\"\n              >\n                {el.title ?? capitalize(el.id)}\n              </Button>\n            ))}\n          </nav>\n        </SheetContent>\n      </Sheet>\n    );\n  }\n\n  // ------------------------------------------------------------------\n  // Layout\n  // ------------------------------------------------------------------\n\n  return (\n    <div className={clsx(\"window\", cl.window)} data-pihanga={cardName}>\n      <div className={clsx(\"page\", cl.page)}>\n        {/* ── Header ─────────────────────────────────────────────── */}\n        <header className={clsx(\"header\", cl.header)}>\n          {/* Medium+ nav (title + links) */}\n          <NavMd />\n\n          {/* Small-screen hamburger (only when there are nav links) */}\n          {hasNavLinks && <NavSm />}\n\n          {/* On small screens with no nav links, show the title inline.\n              Wrap in a plain div so md:hidden isn't overridden by the\n              .title-section CSS class that sets display:inline-flex. */}\n          {!hasNavLinks && (\n            <div className=\"md:hidden\">\n              <TitleSection />\n            </div>\n          )}\n\n          {/* Push action cards to the right */}\n          <div className=\"header-actions\">\n            {resolvedLeftCard && (\n              <Card cardName={resolvedLeftCard} parentCard={cardName} />\n            )}\n            {resolvedRightCard && (\n              <Card cardName={resolvedRightCard} parentCard={cardName} />\n            )}\n          </div>\n        </header>\n\n        {/* ── Main ───────────────────────────────────────────────── */}\n        <main className={clsx(\"main\", cl.main)} ref={mainRef}>\n          <Card cardName={main} parentCard={cardName} />\n        </main>\n\n        {/* ── Footer (optional) ──────────────────────────────────── */}\n        {footer && (\n          <footer className={clsx(\"footer\", cl.footer)}>\n            <Card cardName={footer} parentCard={cardName} />\n          </footer>\n        )}\n      </div>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction capitalize(str: string): string {\n  if (!str) return \"\";\n  return str.charAt(0).toLocaleUpperCase() + str.slice(1);\n}\n"],"mappings":";;;;;;;;;;;AAsCA,SAAS,IAAmC;CAC1C,IAAM,IAAI,OAAO,SAAW,MAAc,OAAO,aAAa;CAE9D,KAAK,IAAI,IAAI,EAAkB,SAAS,GAAG,KAAK,GAAG,KAAK;EACtD,IAAM,IAAO,EAAkB;EAC/B,IAAI,KAAK,EAAmB,IAAO,OAAO;CAC5C;CACA,OAAO,EAAW;AACpB;AAEA,SAAS,IAA4B;CACnC,IAAM,CAAC,GAAM,KAAW,EAAqB,CAAoB;CAQjE,OANA,QAAgB;EACd,IAAM,UAAqB,EAAQ,EAAqB,CAAC;EAEzD,OADA,OAAO,iBAAiB,UAAU,CAAY,SACjC,OAAO,oBAAoB,UAAU,CAAY;CAChE,GAAG,CAAC,CAAC,GAEE;AACT;AAMA,SAAS,EAAU,GAAmD;CACpE,OAAO,OAAO,KAAQ,cAAY;AACpC;AASA,SAAS,EACP,GACA,GACuB;CACvB,IAAI,CAAC,GAAK;CACV,IAAI,CAAC,EAAU,CAAG,GAAG,OAAO;CAG5B,IAAM,IAAa,EAAkB,QAAQ,CAAW;CACxD,KAAK,IAAI,IAAI,GAAY,KAAK,GAAG,KAAK;EACpC,IAAM,IAAO,EAAkB;EAC/B,IAAI,OAAO,UAAU,eAAe,KAAK,GAAK,CAAI,GAGhD,OAFY,EAAI,MAEF,KAAA;CAElB;CAEA,OAAO,EAAI,WAAW,KAAA;AACxB;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,aACA,SACA,WACA,cAAW,CAAC,GACZ,mBACA,mBACA,oBACA,UACA,iBACA,gBACE,GAEE,IAAa,EAAc,GAC3B,IAAK,GAAO,QAAQ,CAAC,GACrB,IAAU,EAA2B,IAAI;CAG/C,QAAgB;EACd,EAAQ,SAAS,SAAS;GAAC,KAAK;GAAG,UAAU;EAAM,CAAC;CACtD,GAAG,CAAC,CAAc,CAAC;CAEnB,IAAM,IAAmB,EAAe,GAAgB,CAAU,GAC5D,IAAoB,EAAe,GAAiB,CAAU,GAC9D,IAAc,EAAS,SAAS;CAOtC,SAAS,EAAa,EAAC,gBAAkC;EACvD,IAAM,IAAS,IAAW,EAAe,CAAQ,IAAI,KAAA;EACrD,OACE,kBAAC,OAAD;GAAK,WAAW,EAAK,iBAAiB,CAAS;aAA/C,CACG,KAAU,kBAAC,GAAD;IAAQ,WAAU;IAAa,eAAA;GAAa,CAAA,GACvD,kBAAC,QAAD;IAAM,WAAU;cAAc;GAAY,CAAA,CACvC;;CAET;CAGA,SAAS,IAAQ;EACf,OACE,kBAAC,OAAD;GAAK,WAAU;GAAS,cAAW;aAAnC,CACE,kBAAC,GAAD,CAAe,CAAA,GACd,EAAS,KAAK,MACb,kBAAC,GAAD;IAEE,eAAe,EAAa,EAAC,IAAI,EAAG,GAAE,CAAC;IACvC,SAAQ;IACR,WAAU;cAET,EAAG,SAAS,EAAW,EAAG,EAAE;GACvB,GAND,EAAG,EAMF,CACT,CACE;;CAET;CAGA,SAAS,IAAQ;EACf,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAc,SAAA;aACZ,kBAAC,GAAD;IACE,SAAQ;IACR,MAAK;IACL,WAAU;IACV,cAAW;cAEX,kBAAC,GAAD;KAAM,WAAU;KAAU,eAAA;IAAa,CAAA;GACjC,CAAA;EACI,CAAA,GACd,kBAAC,GAAD;GAAc,MAAK;aACjB,kBAAC,OAAD;IAAK,WAAU;IAAS,cAAW;cAAnC,CACE,kBAAC,GAAD,CAAe,CAAA,GACd,EAAS,KAAK,MACb,kBAAC,GAAD;KAEE,eAAe,EAAa,EAAC,IAAI,EAAG,GAAE,CAAC;KACvC,SAAQ;KACR,WAAU;eAET,EAAG,SAAS,EAAW,EAAG,EAAE;IACvB,GAND,EAAG,EAMF,CACT,CACE;;EACO,CAAA,CACT,EAAA,CAAA;CAEX;CAMA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,UAAU,EAAG,MAAM;EAAG,gBAAc;YACvD,kBAAC,OAAD;GAAK,WAAW,EAAK,QAAQ,EAAG,IAAI;aAApC;IAEE,kBAAC,UAAD;KAAQ,WAAW,EAAK,UAAU,EAAG,MAAM;eAA3C;MAEE,kBAAC,GAAD,CAAQ,CAAA;MAGP,KAAe,kBAAC,GAAD,CAAQ,CAAA;MAKvB,CAAC,KACA,kBAAC,OAAD;OAAK,WAAU;iBACb,kBAAC,GAAD,CAAe,CAAA;MACZ,CAAA;MAIP,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,KACC,kBAAC,GAAD;QAAM,UAAU;QAAkB,YAAY;OAAW,CAAA,GAE1D,KACC,kBAAC,GAAD;QAAM,UAAU;QAAmB,YAAY;OAAW,CAAA,CAEzD;;KACC;;IAGR,kBAAC,QAAD;KAAM,WAAW,EAAK,QAAQ,EAAG,IAAI;KAAG,KAAK;eAC3C,kBAAC,GAAD;MAAM,UAAU;MAAM,YAAY;KAAW,CAAA;IACzC,CAAA;IAGL,KACC,kBAAC,UAAD;KAAQ,WAAW,EAAK,UAAU,EAAG,MAAM;eACzC,kBAAC,GAAD;MAAM,UAAU;MAAQ,YAAY;KAAW,CAAA;IACzC,CAAA;GAEP;;CACF,CAAA;AAET;AAMA,SAAS,EAAW,GAAqB;CAEvC,OADK,IACE,EAAI,OAAO,CAAC,EAAE,kBAAkB,IAAI,EAAI,MAAM,CAAC,IADrC;AAEnB"}

package/cards/pageWithNavbar/pageWithNavbar.type.d.ts

@@ -0,0 +1,81 @@
+import { PiCardRef } from '@pihanga2/core';
+import { SizeMap } from '../types';
+export declare const PAGE_WITH_NAVBAR_CARD = "pageWithNavbar";
+export declare const PageWithNavbar: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PageWithNavbarProps<unknown>, S, PageWithNavbarEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PAGE_WITH_NAVBAR_ACTION: {
+    NAVIGATE_TO: string;
+};
+export declare const onPageWithNavbarNavigateTo: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PageWithNavbarNavigateToEvent>) => void;
+/**
+ * A card reference that can optionally vary by screen size.
+ *
+ * Pass a plain `PiCardRef` string to always show the same card, or a
+ * {@link SizeMap} to show different cards (or none) at each breakpoint.
+ *
+ * @example
+ * // Always show the same card
+ * headerRightCard: "myAccountCard"
+ *
+ * // Show on md and above only
+ * headerRightCard: { [ScreenSize.MD]: "myAccountCard" }
+ *
+ * // Different card per breakpoint
+ * headerLeftCard: {
+ *   [ScreenSize.XS]: "mobileSearchCard",
+ *   [ScreenSize.MD]: "desktopSearchCard",
+ * }
+ */
+export type ResponsiveCardRef = PiCardRef | SizeMap<PiCardRef>;
+export type PageWithNavbarProps<S = unknown> = {
+    /** Page title displayed in the header. */
+    title: string;
+    /**
+     * Name of an icon registered via {@link registerIcon} in `icons.ts`.
+     * When provided, the icon is rendered next to the title in the header.
+     */
+    iconName?: string;
+    /** The main content card. */
+    main: PiCardRef;
+    /**
+     * Optional footer card.
+     * When omitted the footer row is not rendered.
+     */
+    footer?: PiCardRef;
+    /**
+     * Navigation links rendered in the header nav bar.
+     * On small screens they are collapsed behind a hamburger menu.
+     */
+    navLinks?: NavLink[];
+    /**
+     * When this value changes the main content area scrolls back to the top.
+     * Set it to any string that is unique per logical "page load" — typically
+     * the URL or ID of the currently loaded resource (e.g. "foo.xml").
+     */
+    scrollResetKey?: string;
+    /**
+     * Optional card shown on the left side of the header actions area.
+     * Supports size-dependent rendering via {@link ResponsiveCardRef}.
+     */
+    headerLeftCard?: ResponsiveCardRef;
+    /**
+     * Optional card shown on the right side of the header actions area.
+     * Supports size-dependent rendering via {@link ResponsiveCardRef}.
+     */
+    headerRightCard?: ResponsiveCardRef;
+    /** Additional style overrides passed through to the component. */
+    style?: S;
+    /** Additional CSS class names applied to the outermost wrapper. */
+    className?: string;
+};
+export type NavLink = {
+    id: string;
+    title?: string;
+};
+export type PageWithNavbarNavigateToEvent = {
+    id: string;
+};
+export type PageWithNavbarEvents = {
+    onNavigateTo: PageWithNavbarNavigateToEvent;
+};

package/cards/pageWithNavbar/pageWithNavbar.type.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/pageWithNavbar/pageWithNavbar.type.ts
+var r = "pageWithNavbar", i = e(r), a = n(r, ["navigate_to"]), o = t(a.NAVIGATE_TO);
+//#endregion
+export { a as PAGE_WITH_NAVBAR_ACTION, r as PAGE_WITH_NAVBAR_CARD, i as PageWithNavbar, o as onPageWithNavbarNavigateTo };
+
+//# sourceMappingURL=pageWithNavbar.type.js.map

package/cards/pageWithNavbar/pageWithNavbar.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageWithNavbar.type.js","names":[],"sources":["../../../src/cards/pageWithNavbar/pageWithNavbar.type.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {SizeMap} from \"@/cards/types\";\n\nexport const PAGE_WITH_NAVBAR_CARD = \"pageWithNavbar\";\nexport const PageWithNavbar = createCardDeclaration<\n  PageWithNavbarProps,\n  PageWithNavbarEvents\n>(PAGE_WITH_NAVBAR_CARD);\n\nexport const PAGE_WITH_NAVBAR_ACTION = registerActions(PAGE_WITH_NAVBAR_CARD, [\n  \"navigate_to\",\n]);\n\nexport const onPageWithNavbarNavigateTo =\n  createOnAction<PageWithNavbarNavigateToEvent>(\n    PAGE_WITH_NAVBAR_ACTION.NAVIGATE_TO,\n  );\n\n/**\n * A card reference that can optionally vary by screen size.\n *\n * Pass a plain `PiCardRef` string to always show the same card, or a\n * {@link SizeMap} to show different cards (or none) at each breakpoint.\n *\n * @example\n * // Always show the same card\n * headerRightCard: \"myAccountCard\"\n *\n * // Show on md and above only\n * headerRightCard: { [ScreenSize.MD]: \"myAccountCard\" }\n *\n * // Different card per breakpoint\n * headerLeftCard: {\n *   [ScreenSize.XS]: \"mobileSearchCard\",\n *   [ScreenSize.MD]: \"desktopSearchCard\",\n * }\n */\nexport type ResponsiveCardRef = PiCardRef | SizeMap<PiCardRef>;\n\nexport type PageWithNavbarProps<S = unknown> = {\n  /** Page title displayed in the header. */\n  title: string;\n\n  /**\n   * Name of an icon registered via {@link registerIcon} in `icons.ts`.\n   * When provided, the icon is rendered next to the title in the header.\n   */\n  iconName?: string;\n\n  /** The main content card. */\n  main: PiCardRef;\n\n  /**\n   * Optional footer card.\n   * When omitted the footer row is not rendered.\n   */\n  footer?: PiCardRef;\n\n  /**\n   * Navigation links rendered in the header nav bar.\n   * On small screens they are collapsed behind a hamburger menu.\n   */\n  navLinks?: NavLink[];\n\n  /**\n   * When this value changes the main content area scrolls back to the top.\n   * Set it to any string that is unique per logical \"page load\" — typically\n   * the URL or ID of the currently loaded resource (e.g. \"foo.xml\").\n   */\n  scrollResetKey?: string;\n\n  /**\n   * Optional card shown on the left side of the header actions area.\n   * Supports size-dependent rendering via {@link ResponsiveCardRef}.\n   */\n  headerLeftCard?: ResponsiveCardRef;\n\n  /**\n   * Optional card shown on the right side of the header actions area.\n   * Supports size-dependent rendering via {@link ResponsiveCardRef}.\n   */\n  headerRightCard?: ResponsiveCardRef;\n\n  /** Additional style overrides passed through to the component. */\n  style?: S;\n\n  /** Additional CSS class names applied to the outermost wrapper. */\n  className?: string;\n};\n\nexport type NavLink = {\n  id: string;\n  title?: string;\n};\n\nexport type PageWithNavbarNavigateToEvent = {id: string};\n\nexport type PageWithNavbarEvents = {\n  onNavigateTo: PageWithNavbarNavigateToEvent;\n};\n"],"mappings":";;AAQA,IAAa,IAAwB,kBACxB,IAAiB,EAG5B,CAAqB,GAEV,IAA0B,EAAgB,GAAuB,CAC5E,aACF,CAAC,GAEY,IACX,EACE,EAAwB,WAC1B"}

package/cards/pasteTarget/index.d.ts

@@ -0,0 +1 @@
+export * from './pasteTarget.types';

package/cards/pasteTarget/index.js

@@ -0,0 +1,13 @@
+import { DEF_ERROR_COLOR as e, DEF_EVENT_DURATION_SECONDS as t, DEF_HEIGHT as n, DEF_OVERLAY_OPACITY as r, DEF_PASTE_FIRST_REMINDER as i, DEF_PASTE_TARGET_FILE_TYPES as a, DEF_SUCCESS_COLOR as o, PASTE_TARGET_ACTION as s, PASTE_TARGET_CARD as c, PasteTarget as l, onContentPasted as u, onPasteError as d } from "./pasteTarget.types.js";
+import { PasteTargetComponent as f } from "./pasteTarget.component.js";
+import { actionTypesToEvents as p, registerCardComponent as m } from "@pihanga2/core";
+//#region src/cards/pasteTarget/index.ts
+m({
+	name: c,
+	component: f,
+	events: p(s)
+});
+//#endregion
+export { e as DEF_ERROR_COLOR, t as DEF_EVENT_DURATION_SECONDS, n as DEF_HEIGHT, r as DEF_OVERLAY_OPACITY, i as DEF_PASTE_FIRST_REMINDER, a as DEF_PASTE_TARGET_FILE_TYPES, o as DEF_SUCCESS_COLOR, s as PASTE_TARGET_ACTION, c as PASTE_TARGET_CARD, l as PasteTarget, u as onContentPasted, d as onPasteError };
+
+//# sourceMappingURL=index.js.map

package/cards/pasteTarget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/pasteTarget/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {PasteTargetComponent} from \"./pasteTarget.component\";\nimport {PASTE_TARGET_ACTION, PASTE_TARGET_CARD} from \"./pasteTarget.types\";\n\nexport * from \"./pasteTarget.types\";\n\nregisterCardComponent({\n  name: PASTE_TARGET_CARD,\n  component: PasteTargetComponent,\n  events: actionTypesToEvents(PASTE_TARGET_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAmB;AACjD,CAAC"}

package/cards/pasteTarget/pasteTarget.component.d.ts

@@ -0,0 +1,4 @@
+import { PasteTargetEvents, PasteTargetProps } from './pasteTarget.types';
+import { PiCardProps } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const PasteTargetComponent: (props: PiCardProps<PasteTargetProps, PasteTargetEvents>) => React.ReactNode;

package/cards/pasteTarget/pasteTarget.component.js

@@ -0,0 +1,158 @@
+import { Button as e } from "../../components/ui/button.js";
+import { DEF_ERROR_COLOR as t, DEF_HEIGHT as n, DEF_OVERLAY_OPACITY as r, DEF_PASTE_FIRST_REMINDER as i, DEF_SUCCESS_COLOR as a } from "./pasteTarget.types.js";
+/* empty css            */
+import o, { useRef as s, useState as c } from "react";
+import l from "clsx";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/cards/pasteTarget/pasteTarget.component.tsx
+var p = (p) => {
+	let { title: m, description: h, pasteFirstReminder: g = i, withUpload: _, fileTypes: v, height: y = n, onPastedContent: b, successColor: x = a, errorColor: S = t, eventDurationSeconds: C = 1, eventOpacity: w = r, cardName: T, className: E, _cls: D } = p, [O, k] = c(0), [A, j] = c("gray"), M = o.useRef(null), N = s(null), P = s(null), [F, I] = c(!1), L = {
+		backgroundColor: A,
+		opacity: O
+	}, R = (e) => {
+		M.current && clearTimeout(M.current), e.preventDefault();
+		let t = e.clipboardData || window.clipboardData;
+		if (t) {
+			let e = t.items, n = [];
+			for (let r = 0; r < e.length; r++) {
+				let i = e[r], a = i.type, o = t.getData(i.type);
+				o == "" || o == "\n" || n.push({
+					mimeType: a,
+					content: o
+				});
+			}
+			b({ items: n }), j(x);
+		} else j(S);
+		k(w), N.current && N.current.blur(), M.current = setTimeout(() => {
+			k(0), M.current = null;
+		}, C * 1e3);
+	};
+	o.useEffect(() => () => {
+		let e = M.current;
+		e && clearTimeout(e);
+	}, []);
+	function z() {
+		return /* @__PURE__ */ d("textarea", {
+			onPaste: R,
+			onFocus: () => {
+				I(!0);
+			},
+			onBlur: () => I(!1),
+			style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				zIndex: 10,
+				resize: "none",
+				background: "transparent",
+				cursor: F ? "copy" : "pointer",
+				...L
+			},
+			readOnly: !0,
+			ref: N
+		});
+	}
+	function B() {
+		if (v?.length) return v.map((e) => {
+			let t = e.toLowerCase();
+			return t === "jpg" || t === "jpeg" ? ".jpg,.jpeg" : `.${t}`;
+		}).join(",");
+	}
+	function V(e) {
+		M.current && clearTimeout(M.current), j(e), k(w), M.current = setTimeout(() => {
+			k(0), M.current = null;
+		}, C * 1e3);
+	}
+	function H(e) {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", !t) return;
+		let n = new FileReader();
+		n.onload = (e) => {
+			let n = e.target?.result ?? "";
+			b({ items: [{
+				mimeType: t.type,
+				content: n
+			}] }), V(x);
+		}, n.onerror = () => {
+			V(S);
+		}, n.readAsDataURL(t);
+	}
+	function U(e) {
+		e.stopPropagation(), e.preventDefault(), P.current?.click();
+	}
+	function W() {
+		let t = !F && _ && /* @__PURE__ */ d(e, {
+			onClick: U,
+			style: {
+				position: "relative",
+				zIndex: 30,
+				pointerEvents: "auto"
+			},
+			children: "Upload"
+		});
+		return m ? /* @__PURE__ */ f("div", {
+			className: "paste-target-msg-title",
+			children: [/* @__PURE__ */ d("h2", { children: m }), t]
+		}) : /* @__PURE__ */ f("div", {
+			className: "paste-target-msg-title",
+			children: [
+				"Paste",
+				t && /* @__PURE__ */ f(u, { children: ["\xA0or\xA0", t] }),
+				"\xA0here"
+			]
+		});
+	}
+	return /* @__PURE__ */ f("div", {
+		className: l(D("root", E || "pihanga-paste-target"), F && "pihanga-paste-target-focused"),
+		"data-pihanga": T,
+		style: {
+			position: "relative",
+			height: y,
+			width: "100%"
+		},
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: "paste-target-label",
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					bottom: 0,
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "center",
+					alignItems: "center",
+					textAlign: "center",
+					pointerEvents: "none",
+					zIndex: 20
+				},
+				children: [
+					W(),
+					h && /* @__PURE__ */ d("span", {
+						className: "paste-target-msg-desc",
+						children: h
+					}),
+					/* @__PURE__ */ d("div", {
+						className: "paste-target-focus-reminder",
+						children: g
+					})
+				]
+			}),
+			z(),
+			_ && /* @__PURE__ */ d("input", {
+				type: "file",
+				ref: P,
+				accept: B(),
+				onChange: H,
+				style: { display: "none" }
+			})
+		]
+	});
+};
+//#endregion
+export { p as PasteTargetComponent };
+
+//# sourceMappingURL=pasteTarget.component.js.map

package/cards/pasteTarget/pasteTarget.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pasteTarget.component.js","names":[],"sources":["../../../src/cards/pasteTarget/pasteTarget.component.tsx"],"sourcesContent":["import {\n  DEF_ERROR_COLOR,\n  DEF_EVENT_DURATION_SECONDS,\n  DEF_HEIGHT,\n  DEF_OVERLAY_OPACITY,\n  DEF_PASTE_FIRST_REMINDER,\n  DEF_SUCCESS_COLOR,\n  PasteItem,\n  PasteTargetEvents,\n  PasteTargetProps,\n} from \"@/cards/pasteTarget/pasteTarget.types\";\nimport {PiCardProps} from \"@pihanga2/core\";\nimport React, {useRef, useState} from \"react\";\n\nimport \"./pasteTarget.css\";\nimport clsx from \"clsx\";\nimport {Button} from \"@/registry/ui/button\";\n\n// /* 3. Stretch the child to cover the parent entirely */\n// top: 0,\n// left: 0,\n// right: 0,\n// bottom: 0,\n\n// /* 4. Ensure the child is visually stacked above the parent's content */\n// z-index: 10,\n\n// /* Optional: Make the overlay visible (e.g., semi-transparent black) */\n// overlayOpacity: \"rgba(0, 0, 0, 0.5)\";\n// }\n\nexport const PasteTargetComponent = (\n  props: PiCardProps<PasteTargetProps, PasteTargetEvents>,\n): React.ReactNode => {\n  const {\n    title, //  = \"Paste content right here\",\n    description,\n    pasteFirstReminder = DEF_PASTE_FIRST_REMINDER,\n    withUpload,\n    fileTypes,\n\n    height = DEF_HEIGHT,\n\n    onPastedContent,\n\n    successColor = DEF_SUCCESS_COLOR,\n    errorColor = DEF_ERROR_COLOR,\n    eventDurationSeconds = DEF_EVENT_DURATION_SECONDS,\n    eventOpacity = DEF_OVERLAY_OPACITY,\n    cardName,\n    className,\n    _cls,\n  } = props;\n  const [overlayOpacity, setOverlayOpacity] = useState<number>(0);\n  const [overlayBackground, setOverlayBackground] = useState<string>(\"gray\");\n  const timerRef = React.useRef<number | null>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const fileInputRef = useRef<HTMLInputElement>(null);\n  const [isFocused, setIsFocused] = useState<boolean>(false);\n\n  const overlayStyle: React.CSSProperties = {\n    backgroundColor: overlayBackground,\n    opacity: overlayOpacity,\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLTextAreaElement>) => {\n    if (timerRef.current) {\n      clearTimeout(timerRef.current);\n    }\n\n    event.preventDefault();\n    const clipboardData =\n      event.clipboardData ||\n      (window as Window & {clipboardData?: DataTransfer}).clipboardData;\n\n    if (clipboardData) {\n      const pItems = clipboardData.items;\n      const items: PasteItem[] = [];\n      for (let i = 0; i < pItems.length; i++) {\n        const pi = pItems[i];\n        const mimeType = pi.type;\n        const content = clipboardData.getData(pi.type);\n        if (!(content == \"\" || content == \"\\n\")) {\n          items.push({mimeType, content});\n        }\n      }\n      onPastedContent({items});\n      setOverlayBackground(successColor);\n    } else {\n      setOverlayBackground(errorColor);\n    }\n    setOverlayOpacity(eventOpacity);\n    if (textareaRef.current) textareaRef.current.blur();\n\n    // Set a timeout to switch the color back after 'n' seconds\n    const newTimerId = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null; // Clear the ref after the timeout executes\n    }, eventDurationSeconds * 1000); // Convert seconds to milliseconds\n\n    // Save the new timer ID to the ref (unknown necessary type casting)\n    timerRef.current = newTimerId as unknown as number;\n  };\n\n  // Cleanup function to clear the timer when the component unmounts\n  React.useEffect(() => {\n    return () => {\n      const ref = timerRef.current;\n      if (ref) {\n        clearTimeout(ref);\n      }\n    };\n  }, []); // runs only on mount/unmount\n\n  function renderPasteHandler() {\n    return (\n      <textarea\n        onPaste={handlePaste}\n        onFocus={() => {\n          setIsFocused(true);\n        }}\n        onBlur={() => setIsFocused(false)}\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          zIndex: 10,\n          resize: \"none\",\n          background: \"transparent\",\n          cursor: isFocused ? \"copy\" : \"pointer\",\n          ...overlayStyle,\n        }}\n        // 🔑 CRUCIAL: Focus the element before pasting so it receives the paste event.\n        // autoFocus\n        readOnly\n        ref={textareaRef}\n      />\n    );\n  }\n\n  /** Map friendly file-type labels to accept= strings for the hidden input. */\n  function buildAccept(): string | undefined {\n    if (!fileTypes?.length) return undefined;\n    return fileTypes\n      .map((t) => {\n        const ext = t.toLowerCase();\n        if (ext === \"jpg\" || ext === \"jpeg\") return \".jpg,.jpeg\";\n        return `.${ext}`;\n      })\n      .join(\",\");\n  }\n\n  function flashOverlay(color: string) {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    setOverlayBackground(color);\n    setOverlayOpacity(eventOpacity);\n    const id = setTimeout(() => {\n      setOverlayOpacity(0);\n      timerRef.current = null;\n    }, eventDurationSeconds * 1000);\n    timerRef.current = id as unknown as number;\n  }\n\n  function handleFileChange(ev: React.ChangeEvent<HTMLInputElement>) {\n    const file = ev.target.files?.[0];\n    // Reset input so the same file can be re-selected later.\n    ev.target.value = \"\";\n    if (!file) return;\n\n    const reader = new FileReader();\n    reader.onload = (e) => {\n      const content = (e.target?.result as string) ?? \"\";\n      onPastedContent({items: [{mimeType: file.type, content}]});\n      flashOverlay(successColor);\n    };\n    reader.onerror = () => {\n      flashOverlay(errorColor);\n    };\n    reader.readAsDataURL(file);\n  }\n\n  function onUpload(ev: React.MouseEvent<HTMLButtonElement>) {\n    ev.stopPropagation();\n    ev.preventDefault();\n    fileInputRef.current?.click();\n  }\n\n  function renderTitle() {\n    const uploadBtn = !isFocused && withUpload && (\n      <Button\n        onClick={onUpload}\n        style={{position: \"relative\", zIndex: 30, pointerEvents: \"auto\"}}\n      >\n        Upload\n      </Button>\n    );\n\n    if (title) {\n      return (\n        <div className=\"paste-target-msg-title\">\n          <h2>{title}</h2>\n          {uploadBtn}\n        </div>\n      );\n    } else {\n      return (\n        <div className=\"paste-target-msg-title\">\n          Paste\n          {uploadBtn && (\n            <>\n              &nbsp;or&nbsp;\n              {uploadBtn}\n            </>\n          )}\n          &nbsp;here\n        </div>\n      );\n    }\n  }\n\n  const cn = _cls(\"root\", className || \"pihanga-paste-target\");\n\n  return (\n    <div\n      className={clsx(cn, isFocused && \"pihanga-paste-target-focused\")}\n      data-pihanga={cardName}\n      style={{position: \"relative\", height, width: \"100%\"}}\n    >\n      <div\n        className=\"paste-target-label\"\n        style={{\n          position: \"absolute\",\n          top: 0,\n          left: 0,\n          right: 0,\n          bottom: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          justifyContent: \"center\",\n          alignItems: \"center\",\n          textAlign: \"center\",\n          // zIndex must be above textarea (10) so the Upload button is clickable.\n          // pointer-events: none lets click/focus pass through to the textarea,\n          // EXCEPT on children that override with pointer-events: auto (the button).\n          pointerEvents: \"none\",\n          zIndex: 20,\n        }}\n      >\n        {renderTitle()}\n        {description && (\n          <span className=\"paste-target-msg-desc\">{description}</span>\n        )}\n        <div className=\"paste-target-focus-reminder\">{pasteFirstReminder}</div>\n      </div>\n      {renderPasteHandler()}\n      {/* Hidden file input — triggered programmatically by the Upload button */}\n      {withUpload && (\n        <input\n          type=\"file\"\n          ref={fileInputRef}\n          accept={buildAccept()}\n          onChange={handleFileChange}\n          style={{display: \"none\"}}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/cards/pasteTarget/pasteTarget.types.d.ts

@@ -0,0 +1,46 @@
+export declare const PASTE_TARGET_CARD = "paste-target";
+export declare const PasteTarget: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PasteTargetProps, S, PasteTargetEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PASTE_TARGET_ACTION: {
+    ERROR: string;
+    PASTED_CONTENT: string;
+};
+export declare const onContentPasted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & CloseEvent>) => void;
+export declare const onPasteError: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PasteTargetErrorEvent>) => void;
+export declare const DEF_HEIGHT = "120px";
+export declare const DEF_SUCCESS_COLOR = "lightgreen";
+export declare const DEF_ERROR_COLOR = "lightcoral";
+export declare const DEF_EVENT_DURATION_SECONDS = 1;
+export declare const DEF_OVERLAY_OPACITY = 0.5;
+export declare const DEF_PASTE_FIRST_REMINDER = "(Before pasting, click this box to get the focus)";
+export type PasteTargetProps = {
+    fileTypes?: string[];
+    title?: string;
+    description?: string;
+    pasteFirstReminder?: string;
+    withUpload?: boolean;
+    height?: string | number;
+    successColor?: string;
+    errorColor?: string;
+    eventDurationSeconds?: number;
+    eventOpacity?: number;
+    className?: string;
+};
+export declare const DEF_PASTE_TARGET_FILE_TYPES: string[];
+export type PasteItem = {
+    mimeType: string;
+    content: string;
+};
+export type PasteTargetPastedEvent = {
+    items: PasteItem[];
+};
+export type PasteTargetErrorEvent = {
+    error: string;
+};
+export type PasteTargetEvents = {
+    onPastedContent: PasteTargetPastedEvent;
+    onError: PasteTargetErrorEvent;
+};

package/cards/pasteTarget/pasteTarget.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/pasteTarget/pasteTarget.types.ts
+var r = "paste-target", i = e(r), a = n(r, ["pasted_content", "error"]), o = t(a.PASTED_CONTENT), s = t(a.ERROR), c = "120px", l = "lightgreen", u = "lightcoral", d = 1, f = .5, p = "(Before pasting, click this box to get the focus)", m = [
+	"JPG",
+	"PNG",
+	"GIF"
+];
+//#endregion
+export { u as DEF_ERROR_COLOR, d as DEF_EVENT_DURATION_SECONDS, c as DEF_HEIGHT, f as DEF_OVERLAY_OPACITY, p as DEF_PASTE_FIRST_REMINDER, m as DEF_PASTE_TARGET_FILE_TYPES, l as DEF_SUCCESS_COLOR, a as PASTE_TARGET_ACTION, r as PASTE_TARGET_CARD, i as PasteTarget, o as onContentPasted, s as onPasteError };
+
+//# sourceMappingURL=pasteTarget.types.js.map

package/cards/pasteTarget/pasteTarget.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pasteTarget.types.js","names":[],"sources":["../../../src/cards/pasteTarget/pasteTarget.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PASTE_TARGET_CARD = \"paste-target\";\nexport const PasteTarget = createCardDeclaration<\n  PasteTargetProps,\n  PasteTargetEvents\n>(PASTE_TARGET_CARD);\n\nexport const PASTE_TARGET_ACTION = registerActions(PASTE_TARGET_CARD, [\n  \"pasted_content\",\n  \"error\",\n]);\n\nexport const onContentPasted = createOnAction<CloseEvent>(\n  PASTE_TARGET_ACTION.PASTED_CONTENT,\n);\n\nexport const onPasteError = createOnAction<PasteTargetErrorEvent>(\n  PASTE_TARGET_ACTION.ERROR,\n);\n\nexport const DEF_HEIGHT = \"120px\";\nexport const DEF_SUCCESS_COLOR = \"lightgreen\";\nexport const DEF_ERROR_COLOR = \"lightcoral\";\nexport const DEF_EVENT_DURATION_SECONDS = 1;\nexport const DEF_OVERLAY_OPACITY = 0.5;\n\nexport const DEF_PASTE_FIRST_REMINDER =\n  \"(Before pasting, click this box to get the focus)\";\n\nexport type PasteTargetProps = {\n  fileTypes?: string[];\n  title?: string;\n  description?: string;\n  pasteFirstReminder?: string;\n  withUpload?: boolean;\n\n  height?: string | number;\n\n  successColor?: string;\n  errorColor?: string;\n  eventDurationSeconds?: number; // How long to show success/error overlay color\n  eventOpacity?: number; // Opacity of overlay on paste event\n\n  className?: string;\n};\n\nexport const DEF_PASTE_TARGET_FILE_TYPES = [\"JPG\", \"PNG\", \"GIF\"];\n\nexport type PasteItem = {\n  mimeType: string;\n  content: string;\n};\n\nexport type PasteTargetPastedEvent = {\n  items: PasteItem[];\n};\n\nexport type PasteTargetErrorEvent = {\n  error: string;\n};\n\nexport type PasteTargetEvents = {\n  onPastedContent: PasteTargetPastedEvent;\n  onError: PasteTargetErrorEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAoB,gBACpB,IAAc,EAGzB,CAAiB,GAEN,IAAsB,EAAgB,GAAmB,CACpE,kBACA,OACF,CAAC,GAEY,IAAkB,EAC7B,EAAoB,cACtB,GAEa,IAAe,EAC1B,EAAoB,KACtB,GAEa,IAAa,SACb,IAAoB,cACpB,IAAkB,cAClB,IAA6B,GAC7B,IAAsB,IAEtB,IACX,qDAmBW,IAA8B;CAAC;CAAO;CAAO;AAAK"}

package/cards/resizable/index.d.ts

@@ -0,0 +1 @@
+export * from './resizable.types';

package/cards/resizable/resizable.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { ResizableProps } from './resizable.types';
+export declare const ResizableComponent: (props: PiCardProps<ResizableProps>) => React.ReactNode;