@1sat/sweep-ui 0.0.39 → 0.0.40

package/dist/components/asset-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"asset-preview.d.ts","sourceRoot":"","sources":["../../src/components/asset-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAoFnE,wBAAgB,cAAc,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,eAAe,GACf,EAAE;IACF,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,eAAe,EAAE,OAAO,CAAA;CACxB,kDA0FA;AAED,wBAAgB,eAAe,CAAC,EAC/B,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,aAAa,EACb,OAAO,EACP,MAAM,EACN,MAAM,EACN,eAAe,GACf,EAAE;IACF,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,eAAe,EAAE,OAAO,CAAA;CACxB,kDA0IA;AAgED,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,eAAe,GACf,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,eAAe,EAAE,OAAO,CAAA;CACxB,kDAuCA;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,EAAE,CAAA;CAAE,kDAkCnE;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,EAAE,CAAA;CAAE,kDAgBpE;AAED,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,aAAa,EAAE,CAAA;CAAE,kDAkB3D"}
+{"version":3,"file":"asset-preview.d.ts","sourceRoot":"","sources":["../../src/components/asset-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAEhD,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAwFnE,wBAAgB,cAAc,CAAC,EAC9B,OAAO,EACP,QAAQ,EACR,WAAW,EACX,mBAAmB,EACnB,OAAO,EACP,MAAM,EACN,eAAe,GACf,EAAE;IACF,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,mBAAmB,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,eAAe,EAAE,OAAO,CAAA;CACxB,kDA0FA;AAED,wBAAgB,eAAe,CAAC,EAC/B,QAAQ,EACR,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,aAAa,EACb,OAAO,EACP,MAAM,EACN,MAAM,EACN,eAAe,GACf,EAAE;IACF,QAAQ,EAAE,eAAe,EAAE,CAAA;IAC3B,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;IAC7B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,eAAe,EAAE,OAAO,CAAA;CACxB,kDA0IA;AAgED,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,eAAe,GACf,EAAE;IACF,MAAM,EAAE,YAAY,EAAE,CAAA;IACtB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,eAAe,EAAE,OAAO,CAAA;CACxB,kDAuCA;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,EAAE,CAAA;CAAE,kDAkCnE;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,aAAa,EAAE,CAAA;CAAE,kDAgBpE;AAED,wBAAgB,UAAU,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,aAAa,EAAE,CAAA;CAAE,kDAkB3D"}

package/dist/index.js

@@ -520,7 +520,7 @@ function OrdinalCard({
   const isImage = isImageType(ct);
   const subtype = ct.includes("/") ? ct.split("/")[1] : ct;
   return /* @__PURE__ */ jsxs("div", {
-    className: `relative p-2 rounded-lg border cursor-pointer transition-all ${isSelected ? "border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30" : "border-border/50 hover:border-border bg-black/20"}`,
+    className: `relative p-2 rounded-lg border cursor-pointer transition-all overflow-hidden ${isSelected ? "border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30" : "border-border/50 hover:border-border bg-muted/30"}`,
     onClick: onToggle,
     children: [
       /* @__PURE__ */ jsx4("div", {
@@ -531,7 +531,7 @@ function OrdinalCard({
         })
       }),
       /* @__PURE__ */ jsx4("div", {
-        className: "w-full aspect-square mb-1.5 rounded overflow-hidden bg-black/30 flex items-center justify-center",
+        className: "w-full aspect-square mb-1.5 rounded overflow-hidden bg-muted/40 flex items-center justify-center",
         children: !ordinal.contentUrl ? /* @__PURE__ */ jsx4("span", {
           className: "text-muted-foreground text-lg",
           children: "◆"
@@ -548,28 +548,35 @@ function OrdinalCard({
           loading: "lazy"
         })
       }),
-      subtype && /* @__PURE__ */ jsx4("div", {
-        className: "mb-1",
-        children: /* @__PURE__ */ jsx4("span", {
-          className: "px-1 py-0.5 text-[9px] rounded bg-blue-500/20 text-blue-400 truncate",
-          children: subtype
-        })
-      }),
-      ordinal.name ? /* @__PURE__ */ jsx4("a", {
-        href: ordinal.contentUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "text-[10px] text-foreground truncate font-medium hover:text-blue-400",
-        title: ordinal.name,
-        children: ordinal.name
-      }) : /* @__PURE__ */ jsxs("a", {
-        href: ordinal.contentUrl,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "text-[9px] text-muted-foreground truncate font-mono hover:text-blue-400",
+      /* @__PURE__ */ jsxs("div", {
+        className: "min-h-[2rem] flex flex-col justify-end",
         children: [
-          ordinal.outpoint.substring(0, 8),
-          "..."
+          subtype && /* @__PURE__ */ jsx4("div", {
+            className: "mb-1",
+            children: /* @__PURE__ */ jsx4("span", {
+              className: "inline-block max-w-full px-1 py-0.5 text-[9px] rounded bg-blue-500/20 text-blue-400 truncate",
+              children: subtype
+            })
+          }),
+          ordinal.name ? /* @__PURE__ */ jsx4("a", {
+            href: ordinal.contentUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "block text-[10px] text-foreground truncate font-medium hover:text-blue-400",
+            title: ordinal.name,
+            onClick: (e) => e.stopPropagation(),
+            children: ordinal.name
+          }) : /* @__PURE__ */ jsxs("a", {
+            href: ordinal.contentUrl,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "block text-[9px] text-muted-foreground truncate font-mono hover:text-blue-400",
+            onClick: (e) => e.stopPropagation(),
+            children: [
+              ordinal.outpoint.substring(0, 8),
+              "..."
+            ]
+          })
         ]
       })
     ]
@@ -783,7 +790,7 @@ function OrdinalsSection({
         ]
       }),
       /* @__PURE__ */ jsx4("div", {
-        className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 mb-3",
+        className: "grid grid-cols-3 sm:grid-cols-4 gap-2 mb-3",
         children: pageItems.map((ord) => /* @__PURE__ */ jsx4(OrdinalCard, {
           ordinal: ord,
           isSelected: selectedOrdinals.has(ord.outpoint),
@@ -876,7 +883,7 @@ function TokenRow({
   walletConnected
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    className: `flex items-center justify-between p-3 rounded-lg border ${tb.isActive ? "bg-black/20 border-purple-500/10" : "bg-black/10 border-muted/20 opacity-60"}`,
+    className: `flex items-center justify-between p-3 rounded-lg border ${tb.isActive ? "bg-muted/30 border-purple-500/10" : "bg-muted/20 border-muted/20 opacity-60"}`,
     children: [
       /* @__PURE__ */ jsxs("div", {
         className: "flex items-center gap-3",
@@ -1322,7 +1329,7 @@ function OpnsSection({
           const isSelected = selectedOpns.has(item.outpoint);
           const displayName = resolvedNames.get(item.outpoint) ?? item.outpoint.substring(0, 8) + "...";
           return /* @__PURE__ */ jsxs3("div", {
-            className: `flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? "border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30" : "border border-border/50 hover:border-border bg-black/20"}`,
+            className: `flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? "border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30" : "border border-border/50 hover:border-border bg-muted/30"}`,
             onClick: () => onToggle(item.outpoint),
             children: [
               /* @__PURE__ */ jsx6("div", {
@@ -1506,7 +1513,7 @@ function Tabs({
 function TabsList({ className, ...props }) {
   return /* @__PURE__ */ jsx8("div", {
     "data-slot": "tabs-list",
-    className: cn("inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground", className),
+    className: cn("inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground overflow-x-auto scrollbar-none", className),
     ...props
   });
 }
@@ -1520,7 +1527,7 @@ function TabsTrigger({
   return /* @__PURE__ */ jsx8("button", {
     "data-slot": "tabs-trigger",
     "data-active": isActive ? "" : undefined,
-    className: cn("inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50", isActive && "bg-background text-foreground shadow-sm", className),
+    className: cn("inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50", isActive && "bg-background text-foreground shadow-sm", className),
     onClick: () => context.onValueChange(value),
     ...props
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1sat/sweep-ui",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Sweep UI components for migrating legacy BSV assets",
   "type": "module",
   "main": "./src/index.ts",
@@ -29,9 +29,9 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@1sat/actions": "0.0.105",
+    "@1sat/actions": "0.0.109",
     "@1sat/client": "0.0.24",
-    "@1sat/connect": "0.0.41",
+    "@1sat/connect": "0.0.45",
     "@1sat/types": "0.0.18",
     "@1sat/utils": "0.0.15",
     "bitcoin-backup": "^0.0.11",

package/src/components/asset-preview.tsx

@@ -23,7 +23,7 @@ function OrdinalCard({
 
 	return (
 		<div
-			className={`relative p-2 rounded-lg border cursor-pointer transition-all ${isSelected ? 'border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30' : 'border-border/50 hover:border-border bg-black/20'}`}
+			className={`relative p-2 rounded-lg border cursor-pointer transition-all overflow-hidden ${isSelected ? 'border-blue-500 bg-blue-500/10 ring-1 ring-blue-500/30' : 'border-border/50 hover:border-border bg-muted/30'}`}
 			onClick={onToggle}
 		>
 			<div className="absolute top-1.5 right-1.5 z-10">
@@ -33,7 +33,7 @@ function OrdinalCard({
 					{isSelected && '\u2713'}
 				</div>
 			</div>
-			<div className="w-full aspect-square mb-1.5 rounded overflow-hidden bg-black/30 flex items-center justify-center">
+			<div className="w-full aspect-square mb-1.5 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
 				{!ordinal.contentUrl ? (
 					<span className="text-muted-foreground text-lg">{'\u25C6'}</span>
 				) : isImage ? (
@@ -53,33 +53,37 @@ function OrdinalCard({
 					/>
 				)}
 			</div>
-			{subtype && (
-				<div className="mb-1">
-					<span className="px-1 py-0.5 text-[9px] rounded bg-blue-500/20 text-blue-400 truncate">
-						{subtype}
-					</span>
-				</div>
-			)}
-			{ordinal.name ? (
-				<a
-					href={ordinal.contentUrl}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="text-[10px] text-foreground truncate font-medium hover:text-blue-400"
-					title={ordinal.name}
-				>
-					{ordinal.name}
-				</a>
-			) : (
-				<a
-					href={ordinal.contentUrl}
-					target="_blank"
-					rel="noopener noreferrer"
-					className="text-[9px] text-muted-foreground truncate font-mono hover:text-blue-400"
-				>
-					{ordinal.outpoint.substring(0, 8)}...
-				</a>
-			)}
+			<div className="min-h-[2rem] flex flex-col justify-end">
+				{subtype && (
+					<div className="mb-1">
+						<span className="inline-block max-w-full px-1 py-0.5 text-[9px] rounded bg-blue-500/20 text-blue-400 truncate">
+							{subtype}
+						</span>
+					</div>
+				)}
+				{ordinal.name ? (
+					<a
+						href={ordinal.contentUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="block text-[10px] text-foreground truncate font-medium hover:text-blue-400"
+						title={ordinal.name}
+						onClick={(e) => e.stopPropagation()}
+					>
+						{ordinal.name}
+					</a>
+				) : (
+					<a
+						href={ordinal.contentUrl}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="block text-[9px] text-muted-foreground truncate font-mono hover:text-blue-400"
+						onClick={(e) => e.stopPropagation()}
+					>
+						{ordinal.outpoint.substring(0, 8)}...
+					</a>
+				)}
+			</div>
 		</div>
 	)
 }
@@ -259,7 +263,7 @@ export function OrdinalsSection({
 					</Button>
 				</div>
 			</div>
-			<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 mb-3">
+			<div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mb-3">
 				{pageItems.map((ord) => (
 					<OrdinalCard
 						key={ord.outpoint}
@@ -363,7 +367,7 @@ function TokenRow({
 }) {
 	return (
 		<div
-			className={`flex items-center justify-between p-3 rounded-lg border ${tb.isActive ? 'bg-black/20 border-purple-500/10' : 'bg-black/10 border-muted/20 opacity-60'}`}
+			className={`flex items-center justify-between p-3 rounded-lg border ${tb.isActive ? 'bg-muted/30 border-purple-500/10' : 'bg-muted/20 border-muted/20 opacity-60'}`}
 		>
 			<div className="flex items-center gap-3">
 				<img

package/src/components/opns-section.tsx

@@ -136,7 +136,7 @@ export function OpnsSection({
 					return (
 						<div
 							key={item.outpoint}
-							className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? 'border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30' : 'border border-border/50 hover:border-border bg-black/20'}`}
+							className={`flex items-center gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all ${isSelected ? 'border border-orange-500 bg-orange-500/10 ring-1 ring-orange-500/30' : 'border border-border/50 hover:border-border bg-muted/30'}`}
 							onClick={() => onToggle(item.outpoint)}
 						>
 							<div

package/src/components/ui/tabs.tsx

@@ -41,7 +41,7 @@ function TabsList({ className, ...props }: React.ComponentProps<'div'>) {
 		<div
 			data-slot="tabs-list"
 			className={cn(
-				'inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground',
+				'inline-flex h-9 items-center justify-start gap-1 rounded-lg bg-muted p-1 text-muted-foreground overflow-x-auto scrollbar-none',
 				className,
 			)}
 			{...props}
@@ -61,7 +61,7 @@ function TabsTrigger({
 			data-slot="tabs-trigger"
 			data-active={isActive ? '' : undefined}
 			className={cn(
-				'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
+				'inline-flex shrink-0 items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
 				isActive && 'bg-background text-foreground shadow-sm',
 				className,
 			)}