@page-speed/agent-everywhere 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +12 -0
- package/dist/index.cjs +836 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +195 -2
- package/dist/index.d.ts +195 -2
- package/dist/index.js +832 -4
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -9949,6 +9949,831 @@ function AudioPlayer({
|
|
|
9949
9949
|
}) })
|
|
9950
9950
|
] });
|
|
9951
9951
|
}
|
|
9952
|
+
function BrandFacebook({ className }) {
|
|
9953
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" }) });
|
|
9954
|
+
}
|
|
9955
|
+
function BrandInstagram({ className }) {
|
|
9956
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" }) });
|
|
9957
|
+
}
|
|
9958
|
+
function BrandX({ className }) {
|
|
9959
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932zM17.61 20.644h2.039L6.486 3.24H4.298z" }) });
|
|
9960
|
+
}
|
|
9961
|
+
function BrandLinkedin({ className }) {
|
|
9962
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z" }) });
|
|
9963
|
+
}
|
|
9964
|
+
function BrandYoutube({ className }) {
|
|
9965
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" }) });
|
|
9966
|
+
}
|
|
9967
|
+
function BrandGithub({ className }) {
|
|
9968
|
+
return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12z" }) });
|
|
9969
|
+
}
|
|
9970
|
+
var ICON_MAP = {
|
|
9971
|
+
globe: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { "aria-hidden": "true", className: c }),
|
|
9972
|
+
facebook: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandFacebook, { className: c }),
|
|
9973
|
+
instagram: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandInstagram, { className: c }),
|
|
9974
|
+
twitter: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandX, { className: c }),
|
|
9975
|
+
x: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandX, { className: c }),
|
|
9976
|
+
linkedin: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandLinkedin, { className: c }),
|
|
9977
|
+
youtube: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandYoutube, { className: c }),
|
|
9978
|
+
github: (c) => /* @__PURE__ */ jsxRuntime.jsx(BrandGithub, { className: c }),
|
|
9979
|
+
mail: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { "aria-hidden": "true", className: c }),
|
|
9980
|
+
email: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Mail, { "aria-hidden": "true", className: c }),
|
|
9981
|
+
phone: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Phone, { "aria-hidden": "true", className: c }),
|
|
9982
|
+
link: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { "aria-hidden": "true", className: c }),
|
|
9983
|
+
url: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { "aria-hidden": "true", className: c }),
|
|
9984
|
+
image: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { "aria-hidden": "true", className: c }),
|
|
9985
|
+
photo: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { "aria-hidden": "true", className: c }),
|
|
9986
|
+
video: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Video, { "aria-hidden": "true", className: c }),
|
|
9987
|
+
star: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Star, { "aria-hidden": "true", className: c }),
|
|
9988
|
+
heart: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heart, { "aria-hidden": "true", className: c }),
|
|
9989
|
+
check: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { "aria-hidden": "true", className: c }),
|
|
9990
|
+
settings: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { "aria-hidden": "true", className: c }),
|
|
9991
|
+
user: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: c }),
|
|
9992
|
+
account: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { "aria-hidden": "true", className: c }),
|
|
9993
|
+
calendar: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { "aria-hidden": "true", className: c }),
|
|
9994
|
+
"map-pin": (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { "aria-hidden": "true", className: c }),
|
|
9995
|
+
mappin: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { "aria-hidden": "true", className: c }),
|
|
9996
|
+
location: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MapPin, { "aria-hidden": "true", className: c }),
|
|
9997
|
+
music: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Music, { "aria-hidden": "true", className: c }),
|
|
9998
|
+
camera: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { "aria-hidden": "true", className: c }),
|
|
9999
|
+
message: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { "aria-hidden": "true", className: c }),
|
|
10000
|
+
chat: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageCircle, { "aria-hidden": "true", className: c }),
|
|
10001
|
+
cart: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShoppingCart, { "aria-hidden": "true", className: c }),
|
|
10002
|
+
shop: (c) => /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShoppingCart, { "aria-hidden": "true", className: c })
|
|
10003
|
+
};
|
|
10004
|
+
function resolveIconName(name, className = "size-5 shrink-0") {
|
|
10005
|
+
if (!name) return null;
|
|
10006
|
+
const render = ICON_MAP[name.trim().toLowerCase()];
|
|
10007
|
+
return render ? render(className) : null;
|
|
10008
|
+
}
|
|
10009
|
+
var DEFAULT_OPEN_GRAPH_ENDPOINT = "/api/opengraph";
|
|
10010
|
+
function firstString(...values) {
|
|
10011
|
+
for (const value of values) {
|
|
10012
|
+
if (typeof value === "string" && value.trim()) {
|
|
10013
|
+
return value.trim();
|
|
10014
|
+
}
|
|
10015
|
+
}
|
|
10016
|
+
return null;
|
|
10017
|
+
}
|
|
10018
|
+
function imageUrlFromOpenGraph(image) {
|
|
10019
|
+
if (!image) return null;
|
|
10020
|
+
if (typeof image === "string") return firstString(image);
|
|
10021
|
+
return firstString(image.url);
|
|
10022
|
+
}
|
|
10023
|
+
function domainFromUrl(url) {
|
|
10024
|
+
try {
|
|
10025
|
+
return new URL(url).hostname.replace(/^www\./, "");
|
|
10026
|
+
} catch {
|
|
10027
|
+
return url;
|
|
10028
|
+
}
|
|
10029
|
+
}
|
|
10030
|
+
function normalizeUrlForPreview(input) {
|
|
10031
|
+
const trimmed = input.trim();
|
|
10032
|
+
if (!trimmed) return "";
|
|
10033
|
+
return /^https?:\/\//i.test(trimmed) ? trimmed : `https://${trimmed}`;
|
|
10034
|
+
}
|
|
10035
|
+
function buildEndpointUrl(endpoint, url) {
|
|
10036
|
+
const separator = endpoint.includes("?") ? "&" : "?";
|
|
10037
|
+
return `${endpoint}${separator}url=${encodeURIComponent(url)}`;
|
|
10038
|
+
}
|
|
10039
|
+
function getErrorMessage(body) {
|
|
10040
|
+
if (body && typeof body === "object" && "error" in body && typeof body.error === "string") {
|
|
10041
|
+
return body.error;
|
|
10042
|
+
}
|
|
10043
|
+
return "Could not load a preview for that link.";
|
|
10044
|
+
}
|
|
10045
|
+
function extractLinkPreview(data, fallbackUrl = "") {
|
|
10046
|
+
const hybridGraph = data.hybridGraph;
|
|
10047
|
+
const openGraph = data.openGraph;
|
|
10048
|
+
const htmlInferred = data.htmlInferred;
|
|
10049
|
+
const url = firstString(
|
|
10050
|
+
data.finalUrl,
|
|
10051
|
+
data.url,
|
|
10052
|
+
data.normalizedUrl,
|
|
10053
|
+
data.requestedUrl,
|
|
10054
|
+
openGraph?.url,
|
|
10055
|
+
hybridGraph?.url,
|
|
10056
|
+
htmlInferred?.url
|
|
10057
|
+
) ?? normalizeUrlForPreview(fallbackUrl);
|
|
10058
|
+
return {
|
|
10059
|
+
url,
|
|
10060
|
+
domain: domainFromUrl(url),
|
|
10061
|
+
title: firstString(hybridGraph?.title, openGraph?.title, htmlInferred?.title),
|
|
10062
|
+
description: firstString(
|
|
10063
|
+
hybridGraph?.description,
|
|
10064
|
+
openGraph?.description,
|
|
10065
|
+
htmlInferred?.description
|
|
10066
|
+
),
|
|
10067
|
+
image: firstString(
|
|
10068
|
+
hybridGraph?.image,
|
|
10069
|
+
imageUrlFromOpenGraph(openGraph?.image ?? null),
|
|
10070
|
+
htmlInferred?.image,
|
|
10071
|
+
htmlInferred?.images?.[0]
|
|
10072
|
+
),
|
|
10073
|
+
favicon: firstString(hybridGraph?.favicon, htmlInferred?.favicon),
|
|
10074
|
+
siteName: firstString(
|
|
10075
|
+
htmlInferred?.site_name,
|
|
10076
|
+
openGraph?.site_name,
|
|
10077
|
+
hybridGraph?.site_name
|
|
10078
|
+
)
|
|
10079
|
+
};
|
|
10080
|
+
}
|
|
10081
|
+
async function fetchOpenGraphPreview(url, endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT) {
|
|
10082
|
+
const response = await fetch(buildEndpointUrl(endpoint, url), {
|
|
10083
|
+
headers: { Accept: "application/json" }
|
|
10084
|
+
});
|
|
10085
|
+
let body = null;
|
|
10086
|
+
try {
|
|
10087
|
+
body = await response.json();
|
|
10088
|
+
} catch {
|
|
10089
|
+
body = null;
|
|
10090
|
+
}
|
|
10091
|
+
if (!response.ok) {
|
|
10092
|
+
throw new Error(getErrorMessage(body));
|
|
10093
|
+
}
|
|
10094
|
+
return body;
|
|
10095
|
+
}
|
|
10096
|
+
function LinkInput({
|
|
10097
|
+
label = "Add a link",
|
|
10098
|
+
icon,
|
|
10099
|
+
iconName,
|
|
10100
|
+
placeholder = "Paste or type a URL...",
|
|
10101
|
+
defaultUrl = "",
|
|
10102
|
+
defaultValue = null,
|
|
10103
|
+
value,
|
|
10104
|
+
defaultExpanded = false,
|
|
10105
|
+
expanded: controlledExpanded,
|
|
10106
|
+
disabled = false,
|
|
10107
|
+
endpoint = DEFAULT_OPEN_GRAPH_ENDPOINT,
|
|
10108
|
+
fetcher,
|
|
10109
|
+
onSubmit,
|
|
10110
|
+
onValueChange,
|
|
10111
|
+
onClear,
|
|
10112
|
+
onExpandedChange,
|
|
10113
|
+
className
|
|
10114
|
+
}) {
|
|
10115
|
+
const [uncontrolledExpanded, setUncontrolledExpanded] = React4.useState(defaultExpanded);
|
|
10116
|
+
const [url, setUrl] = React4.useState(defaultUrl || defaultValue?.url || "");
|
|
10117
|
+
const [submittedUrl, setSubmittedUrl] = React4.useState(
|
|
10118
|
+
defaultUrl || defaultValue?.url || ""
|
|
10119
|
+
);
|
|
10120
|
+
const [status, setStatus] = React4.useState("idle");
|
|
10121
|
+
const [error, setError] = React4.useState(null);
|
|
10122
|
+
const [internalPreview, setInternalPreview] = React4.useState(
|
|
10123
|
+
defaultValue
|
|
10124
|
+
);
|
|
10125
|
+
const inputRef = React4.useRef(null);
|
|
10126
|
+
const reactId = React4.useId();
|
|
10127
|
+
const inputId = `link-input-${reactId}`;
|
|
10128
|
+
const errorId = `link-input-error-${reactId}`;
|
|
10129
|
+
const isExpanded = controlledExpanded === void 0 ? uncontrolledExpanded : controlledExpanded;
|
|
10130
|
+
const isPreviewControlled = value !== void 0;
|
|
10131
|
+
const preview = (isPreviewControlled ? value : internalPreview) ?? null;
|
|
10132
|
+
const isLoading = status === "loading";
|
|
10133
|
+
const hasPreview = preview !== null;
|
|
10134
|
+
const resolvedIcon = icon ?? resolveIconName(iconName, "size-5") ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { "aria-hidden": true, className: "size-5" });
|
|
10135
|
+
const resolvedFetcher = React4.useCallback(
|
|
10136
|
+
(nextUrl) => fetcher?.(nextUrl) ?? fetchOpenGraphPreview(nextUrl, endpoint),
|
|
10137
|
+
[endpoint, fetcher]
|
|
10138
|
+
);
|
|
10139
|
+
const setExpanded = React4.useCallback(
|
|
10140
|
+
(next) => {
|
|
10141
|
+
if (controlledExpanded === void 0) {
|
|
10142
|
+
setUncontrolledExpanded(next);
|
|
10143
|
+
}
|
|
10144
|
+
onExpandedChange?.(next);
|
|
10145
|
+
},
|
|
10146
|
+
[controlledExpanded, onExpandedChange]
|
|
10147
|
+
);
|
|
10148
|
+
React4.useEffect(() => {
|
|
10149
|
+
if (value !== void 0) {
|
|
10150
|
+
const nextUrl = value?.url ?? "";
|
|
10151
|
+
setSubmittedUrl(nextUrl);
|
|
10152
|
+
if (!isExpanded) setUrl(nextUrl);
|
|
10153
|
+
}
|
|
10154
|
+
}, [isExpanded, value]);
|
|
10155
|
+
React4.useEffect(() => {
|
|
10156
|
+
if (!isExpanded) return;
|
|
10157
|
+
const timeout = window.setTimeout(() => inputRef.current?.focus(), 60);
|
|
10158
|
+
return () => window.clearTimeout(timeout);
|
|
10159
|
+
}, [isExpanded]);
|
|
10160
|
+
async function handleSubmit(event) {
|
|
10161
|
+
event?.preventDefault();
|
|
10162
|
+
const nextUrl = url.trim();
|
|
10163
|
+
if (!nextUrl || isLoading || disabled) return;
|
|
10164
|
+
setStatus("loading");
|
|
10165
|
+
setError(null);
|
|
10166
|
+
try {
|
|
10167
|
+
const data = await resolvedFetcher(nextUrl);
|
|
10168
|
+
const nextPreview = extractLinkPreview(data, nextUrl);
|
|
10169
|
+
if (!isPreviewControlled) {
|
|
10170
|
+
setInternalPreview(nextPreview);
|
|
10171
|
+
}
|
|
10172
|
+
setUrl(nextPreview.url);
|
|
10173
|
+
setSubmittedUrl(nextPreview.url);
|
|
10174
|
+
setStatus("idle");
|
|
10175
|
+
setExpanded(false);
|
|
10176
|
+
onValueChange?.(nextPreview, data);
|
|
10177
|
+
onSubmit?.(data, nextPreview);
|
|
10178
|
+
} catch (submitError) {
|
|
10179
|
+
setStatus("error");
|
|
10180
|
+
setError(
|
|
10181
|
+
submitError instanceof Error ? submitError.message : "Something went wrong."
|
|
10182
|
+
);
|
|
10183
|
+
}
|
|
10184
|
+
}
|
|
10185
|
+
function handleEdit() {
|
|
10186
|
+
if (disabled) return;
|
|
10187
|
+
setUrl(submittedUrl);
|
|
10188
|
+
setStatus("idle");
|
|
10189
|
+
setError(null);
|
|
10190
|
+
setExpanded(true);
|
|
10191
|
+
}
|
|
10192
|
+
function handleClose() {
|
|
10193
|
+
setUrl(submittedUrl);
|
|
10194
|
+
setStatus("idle");
|
|
10195
|
+
setError(null);
|
|
10196
|
+
setExpanded(false);
|
|
10197
|
+
}
|
|
10198
|
+
function handleDelete() {
|
|
10199
|
+
if (disabled) return;
|
|
10200
|
+
if (!isPreviewControlled) {
|
|
10201
|
+
setInternalPreview(null);
|
|
10202
|
+
}
|
|
10203
|
+
setUrl("");
|
|
10204
|
+
setSubmittedUrl("");
|
|
10205
|
+
setStatus("idle");
|
|
10206
|
+
setError(null);
|
|
10207
|
+
setExpanded(false);
|
|
10208
|
+
onValueChange?.(null, null);
|
|
10209
|
+
onClear?.();
|
|
10210
|
+
}
|
|
10211
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10212
|
+
"div",
|
|
10213
|
+
{
|
|
10214
|
+
"data-state": isExpanded ? "editing" : hasPreview ? "filled" : "idle",
|
|
10215
|
+
className: cn(
|
|
10216
|
+
"group/link-input overflow-hidden rounded-xl border bg-card text-card-foreground transition-colors",
|
|
10217
|
+
isExpanded || hasPreview ? "border-foreground/80 shadow-sm" : "border-border hover:border-foreground/30",
|
|
10218
|
+
disabled && "opacity-60",
|
|
10219
|
+
className
|
|
10220
|
+
),
|
|
10221
|
+
children: [
|
|
10222
|
+
isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex w-full flex-col gap-3 px-4 py-3.5", children: [
|
|
10223
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
|
|
10224
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label }),
|
|
10225
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10226
|
+
"button",
|
|
10227
|
+
{
|
|
10228
|
+
type: "button",
|
|
10229
|
+
onClick: handleClose,
|
|
10230
|
+
"aria-label": "Close link input",
|
|
10231
|
+
className: "absolute right-2.5 top-2.5 flex size-6 items-center justify-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60",
|
|
10232
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-4" })
|
|
10233
|
+
}
|
|
10234
|
+
)
|
|
10235
|
+
] }) : hasPreview ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10236
|
+
LinkInputPreview,
|
|
10237
|
+
{
|
|
10238
|
+
preview,
|
|
10239
|
+
onEdit: handleEdit,
|
|
10240
|
+
onDelete: handleDelete,
|
|
10241
|
+
disabled
|
|
10242
|
+
}
|
|
10243
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10244
|
+
"button",
|
|
10245
|
+
{
|
|
10246
|
+
type: "button",
|
|
10247
|
+
onClick: () => setExpanded(true),
|
|
10248
|
+
"aria-expanded": false,
|
|
10249
|
+
disabled,
|
|
10250
|
+
className: "flex w-full flex-col gap-3 px-4 py-3.5 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed",
|
|
10251
|
+
children: [
|
|
10252
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-5 items-center justify-center text-muted-foreground [&_svg]:size-5", children: resolvedIcon }),
|
|
10253
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 text-sm font-medium leading-5 text-foreground", children: label })
|
|
10254
|
+
]
|
|
10255
|
+
}
|
|
10256
|
+
),
|
|
10257
|
+
isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-4 pb-4 pt-3", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
|
|
10258
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
10259
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10260
|
+
Input,
|
|
10261
|
+
{
|
|
10262
|
+
ref: inputRef,
|
|
10263
|
+
id: inputId,
|
|
10264
|
+
type: "text",
|
|
10265
|
+
inputMode: "url",
|
|
10266
|
+
autoComplete: "off",
|
|
10267
|
+
spellCheck: false,
|
|
10268
|
+
value: url,
|
|
10269
|
+
disabled: disabled || isLoading,
|
|
10270
|
+
"aria-invalid": status === "error",
|
|
10271
|
+
"aria-describedby": status === "error" ? errorId : void 0,
|
|
10272
|
+
onChange: (event) => {
|
|
10273
|
+
setUrl(event.target.value);
|
|
10274
|
+
if (status === "error") {
|
|
10275
|
+
setStatus("idle");
|
|
10276
|
+
setError(null);
|
|
10277
|
+
}
|
|
10278
|
+
},
|
|
10279
|
+
placeholder,
|
|
10280
|
+
className: cn(
|
|
10281
|
+
"h-10 rounded-lg bg-background pr-[5.25rem] text-sm shadow-sm placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40",
|
|
10282
|
+
status === "error" && "border-destructive/60"
|
|
10283
|
+
)
|
|
10284
|
+
}
|
|
10285
|
+
),
|
|
10286
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-1.5 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10287
|
+
Button,
|
|
10288
|
+
{
|
|
10289
|
+
type: "submit",
|
|
10290
|
+
size: "sm",
|
|
10291
|
+
disabled: !url.trim() || isLoading || disabled,
|
|
10292
|
+
className: "h-7 gap-1 px-2",
|
|
10293
|
+
children: [
|
|
10294
|
+
isLoading ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { "aria-hidden": true, className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CornerDownLeft, { "aria-hidden": true, className: "size-3.5" }),
|
|
10295
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs", children: isLoading ? "Loading" : "Enter" })
|
|
10296
|
+
]
|
|
10297
|
+
}
|
|
10298
|
+
) })
|
|
10299
|
+
] }),
|
|
10300
|
+
status === "error" && error ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, role: "alert", className: "px-0.5 text-xs text-destructive", children: error }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "px-0.5 text-xs text-muted-foreground", children: [
|
|
10301
|
+
"Press",
|
|
10302
|
+
" ",
|
|
10303
|
+
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "rounded border border-border bg-muted px-1 font-sans text-[0.65rem] text-muted-foreground", children: "Enter" }),
|
|
10304
|
+
" ",
|
|
10305
|
+
"to fetch a preview."
|
|
10306
|
+
] })
|
|
10307
|
+
] }) })
|
|
10308
|
+
]
|
|
10309
|
+
}
|
|
10310
|
+
);
|
|
10311
|
+
}
|
|
10312
|
+
function LinkInputPreview({
|
|
10313
|
+
preview,
|
|
10314
|
+
onEdit,
|
|
10315
|
+
onDelete,
|
|
10316
|
+
disabled
|
|
10317
|
+
}) {
|
|
10318
|
+
const [imageError, setImageError] = React4.useState(false);
|
|
10319
|
+
const [faviconError, setFaviconError] = React4.useState(false);
|
|
10320
|
+
const showImage = Boolean(preview.image) && !imageError;
|
|
10321
|
+
const showFavicon = Boolean(preview.favicon) && !faviconError;
|
|
10322
|
+
const title = preview.title || preview.siteName || preview.domain || "Untitled link";
|
|
10323
|
+
React4.useEffect(() => {
|
|
10324
|
+
setImageError(false);
|
|
10325
|
+
setFaviconError(false);
|
|
10326
|
+
}, [preview.favicon, preview.image]);
|
|
10327
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch gap-3 p-3", children: [
|
|
10328
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10329
|
+
"a",
|
|
10330
|
+
{
|
|
10331
|
+
href: preview.url || "#",
|
|
10332
|
+
target: "_blank",
|
|
10333
|
+
rel: "noopener noreferrer",
|
|
10334
|
+
className: "relative flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
|
|
10335
|
+
children: showImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10336
|
+
"img",
|
|
10337
|
+
{
|
|
10338
|
+
src: preview.image,
|
|
10339
|
+
alt: "",
|
|
10340
|
+
crossOrigin: "anonymous",
|
|
10341
|
+
onError: () => setImageError(true),
|
|
10342
|
+
className: "size-full object-cover"
|
|
10343
|
+
}
|
|
10344
|
+
) : showFavicon ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10345
|
+
"img",
|
|
10346
|
+
{
|
|
10347
|
+
src: preview.favicon,
|
|
10348
|
+
alt: "",
|
|
10349
|
+
crossOrigin: "anonymous",
|
|
10350
|
+
onError: () => setFaviconError(true),
|
|
10351
|
+
className: "size-7"
|
|
10352
|
+
}
|
|
10353
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { "aria-hidden": true, className: "size-7 text-muted-foreground" })
|
|
10354
|
+
}
|
|
10355
|
+
),
|
|
10356
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center py-0.5", children: [
|
|
10357
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
10358
|
+
showFavicon && showImage ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10359
|
+
"img",
|
|
10360
|
+
{
|
|
10361
|
+
src: preview.favicon,
|
|
10362
|
+
alt: "",
|
|
10363
|
+
crossOrigin: "anonymous",
|
|
10364
|
+
onError: () => setFaviconError(true),
|
|
10365
|
+
className: "size-3.5 shrink-0 rounded-sm"
|
|
10366
|
+
}
|
|
10367
|
+
) : null,
|
|
10368
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-xs font-medium text-muted-foreground", children: preview.domain || preview.siteName })
|
|
10369
|
+
] }),
|
|
10370
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10371
|
+
"a",
|
|
10372
|
+
{
|
|
10373
|
+
href: preview.url || "#",
|
|
10374
|
+
target: "_blank",
|
|
10375
|
+
rel: "noopener noreferrer",
|
|
10376
|
+
className: "mt-0.5 line-clamp-1 text-sm font-semibold text-foreground outline-none hover:underline focus-visible:underline",
|
|
10377
|
+
children: title
|
|
10378
|
+
}
|
|
10379
|
+
),
|
|
10380
|
+
preview.description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 line-clamp-2 text-xs leading-4 text-muted-foreground", children: preview.description }) : null
|
|
10381
|
+
] }),
|
|
10382
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-col items-center gap-1", children: [
|
|
10383
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10384
|
+
Button,
|
|
10385
|
+
{
|
|
10386
|
+
type: "button",
|
|
10387
|
+
size: "icon",
|
|
10388
|
+
variant: "ghost",
|
|
10389
|
+
onClick: onEdit,
|
|
10390
|
+
disabled,
|
|
10391
|
+
"aria-label": "Edit link",
|
|
10392
|
+
className: "size-7 rounded-full",
|
|
10393
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "size-3.5" })
|
|
10394
|
+
}
|
|
10395
|
+
),
|
|
10396
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10397
|
+
Button,
|
|
10398
|
+
{
|
|
10399
|
+
type: "button",
|
|
10400
|
+
size: "icon",
|
|
10401
|
+
variant: "ghost",
|
|
10402
|
+
onClick: onDelete,
|
|
10403
|
+
disabled,
|
|
10404
|
+
"aria-label": "Delete link",
|
|
10405
|
+
className: "size-7 rounded-full",
|
|
10406
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "size-3.5" })
|
|
10407
|
+
}
|
|
10408
|
+
)
|
|
10409
|
+
] })
|
|
10410
|
+
] });
|
|
10411
|
+
}
|
|
10412
|
+
function LinkInputGroup({
|
|
10413
|
+
options,
|
|
10414
|
+
onSubmit,
|
|
10415
|
+
onValueChange,
|
|
10416
|
+
onClear,
|
|
10417
|
+
className
|
|
10418
|
+
}) {
|
|
10419
|
+
const [openId, setOpenId] = React4.useState(null);
|
|
10420
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", className), children: options.map(({ id, ...option }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
10421
|
+
LinkInput,
|
|
10422
|
+
{
|
|
10423
|
+
...option,
|
|
10424
|
+
expanded: openId === id,
|
|
10425
|
+
onExpandedChange: (next) => setOpenId((currentId) => {
|
|
10426
|
+
if (next) return id;
|
|
10427
|
+
return currentId === id ? null : currentId;
|
|
10428
|
+
}),
|
|
10429
|
+
onSubmit: (data, preview) => {
|
|
10430
|
+
setOpenId(null);
|
|
10431
|
+
onSubmit?.(id, data, preview);
|
|
10432
|
+
},
|
|
10433
|
+
onValueChange: (preview, data) => {
|
|
10434
|
+
onValueChange?.(id, preview, data);
|
|
10435
|
+
},
|
|
10436
|
+
onClear: () => onClear?.(id)
|
|
10437
|
+
},
|
|
10438
|
+
id
|
|
10439
|
+
)) });
|
|
10440
|
+
}
|
|
10441
|
+
var getDimensionStyle = (width, height) => {
|
|
10442
|
+
const style = {};
|
|
10443
|
+
if (width) style.width = typeof width === "number" ? `${width}px` : width;
|
|
10444
|
+
if (height) style.height = typeof height === "number" ? `${height}px` : height;
|
|
10445
|
+
return style;
|
|
10446
|
+
};
|
|
10447
|
+
var getThumbnailSizing = (thumbnailHeight) => ({
|
|
10448
|
+
heightClass: typeof thumbnailHeight === "number" ? "" : thumbnailHeight,
|
|
10449
|
+
heightStyle: typeof thumbnailHeight === "number" ? { height: `${thumbnailHeight}px` } : void 0
|
|
10450
|
+
});
|
|
10451
|
+
function MediaFallback() {
|
|
10452
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full min-h-28 w-full items-center justify-center bg-muted text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "size-7", "aria-hidden": "true" }) });
|
|
10453
|
+
}
|
|
10454
|
+
function MediaOptionItem({
|
|
10455
|
+
option,
|
|
10456
|
+
isChecked,
|
|
10457
|
+
onToggle,
|
|
10458
|
+
thumbnailHeight
|
|
10459
|
+
}) {
|
|
10460
|
+
const {
|
|
10461
|
+
value,
|
|
10462
|
+
label,
|
|
10463
|
+
subtitle,
|
|
10464
|
+
mediaUrl,
|
|
10465
|
+
mediaType,
|
|
10466
|
+
thumbnailUrl,
|
|
10467
|
+
width,
|
|
10468
|
+
height,
|
|
10469
|
+
disabled
|
|
10470
|
+
} = option;
|
|
10471
|
+
const videoRef = React4.useRef(null);
|
|
10472
|
+
const [playing, setPlaying] = React4.useState(false);
|
|
10473
|
+
const [mediaError, setMediaError] = React4.useState(!mediaUrl);
|
|
10474
|
+
const sizeStyle = getDimensionStyle(width, height);
|
|
10475
|
+
const { heightClass, heightStyle } = getThumbnailSizing(thumbnailHeight);
|
|
10476
|
+
const handleMouseEnter = () => {
|
|
10477
|
+
if (mediaType === "video" && videoRef.current && !disabled) {
|
|
10478
|
+
videoRef.current.play().then(() => setPlaying(true)).catch(() => {
|
|
10479
|
+
});
|
|
10480
|
+
}
|
|
10481
|
+
};
|
|
10482
|
+
const handleMouseLeave = () => {
|
|
10483
|
+
if (mediaType === "video" && videoRef.current) {
|
|
10484
|
+
videoRef.current.pause();
|
|
10485
|
+
setPlaying(false);
|
|
10486
|
+
}
|
|
10487
|
+
};
|
|
10488
|
+
const handleVideoClick = (e) => {
|
|
10489
|
+
e.stopPropagation();
|
|
10490
|
+
if (mediaType !== "video" || !videoRef.current || disabled) return;
|
|
10491
|
+
if (playing) {
|
|
10492
|
+
videoRef.current.pause();
|
|
10493
|
+
setPlaying(false);
|
|
10494
|
+
return;
|
|
10495
|
+
}
|
|
10496
|
+
videoRef.current.play().then(() => setPlaying(true)).catch(() => {
|
|
10497
|
+
});
|
|
10498
|
+
};
|
|
10499
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10500
|
+
"label",
|
|
10501
|
+
{
|
|
10502
|
+
className: cn(
|
|
10503
|
+
"group block h-full",
|
|
10504
|
+
disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
|
|
10505
|
+
),
|
|
10506
|
+
style: sizeStyle,
|
|
10507
|
+
children: [
|
|
10508
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10509
|
+
"input",
|
|
10510
|
+
{
|
|
10511
|
+
type: "checkbox",
|
|
10512
|
+
className: "peer sr-only",
|
|
10513
|
+
checked: isChecked,
|
|
10514
|
+
disabled,
|
|
10515
|
+
onChange: () => onToggle(value)
|
|
10516
|
+
}
|
|
10517
|
+
),
|
|
10518
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10519
|
+
"span",
|
|
10520
|
+
{
|
|
10521
|
+
className: cn(
|
|
10522
|
+
"relative flex h-full flex-col overflow-hidden rounded-lg border bg-card text-card-foreground shadow-xs transition-all duration-200 ease-in-out",
|
|
10523
|
+
"border-input hover:border-border hover:shadow-sm",
|
|
10524
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
|
|
10525
|
+
isChecked && "border-primary shadow-sm ring-1 ring-primary/30 hover:border-primary",
|
|
10526
|
+
disabled && "pointer-events-none"
|
|
10527
|
+
),
|
|
10528
|
+
children: [
|
|
10529
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10530
|
+
"span",
|
|
10531
|
+
{
|
|
10532
|
+
className: cn("relative block overflow-hidden bg-muted", heightClass),
|
|
10533
|
+
style: heightStyle,
|
|
10534
|
+
onMouseEnter: handleMouseEnter,
|
|
10535
|
+
onMouseLeave: handleMouseLeave,
|
|
10536
|
+
children: [
|
|
10537
|
+
mediaError ? /* @__PURE__ */ jsxRuntime.jsx(MediaFallback, {}) : mediaType === "image" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
10538
|
+
"img",
|
|
10539
|
+
{
|
|
10540
|
+
src: mediaUrl,
|
|
10541
|
+
alt: label,
|
|
10542
|
+
className: "h-full w-full object-cover transition-transform duration-300 ease-out group-hover:scale-[1.015]",
|
|
10543
|
+
onError: () => setMediaError(true)
|
|
10544
|
+
}
|
|
10545
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
10546
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10547
|
+
"video",
|
|
10548
|
+
{
|
|
10549
|
+
ref: videoRef,
|
|
10550
|
+
src: mediaUrl,
|
|
10551
|
+
poster: thumbnailUrl,
|
|
10552
|
+
muted: true,
|
|
10553
|
+
loop: true,
|
|
10554
|
+
playsInline: true,
|
|
10555
|
+
preload: "metadata",
|
|
10556
|
+
onClick: handleVideoClick,
|
|
10557
|
+
onError: () => setMediaError(true),
|
|
10558
|
+
className: cn(
|
|
10559
|
+
"h-full w-full object-cover transition duration-300 ease-out group-hover:scale-[1.015]",
|
|
10560
|
+
playing ? "grayscale-0" : "grayscale"
|
|
10561
|
+
)
|
|
10562
|
+
}
|
|
10563
|
+
),
|
|
10564
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10565
|
+
"span",
|
|
10566
|
+
{
|
|
10567
|
+
className: cn(
|
|
10568
|
+
"absolute bottom-2 left-2 flex size-7 items-center justify-center rounded-full bg-background/85 text-foreground shadow-xs backdrop-blur",
|
|
10569
|
+
playing && "opacity-0"
|
|
10570
|
+
),
|
|
10571
|
+
"aria-hidden": "true",
|
|
10572
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Play, { className: "ml-0.5 size-3.5 fill-current" })
|
|
10573
|
+
}
|
|
10574
|
+
)
|
|
10575
|
+
] }),
|
|
10576
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10577
|
+
"span",
|
|
10578
|
+
{
|
|
10579
|
+
className: cn(
|
|
10580
|
+
"absolute right-3 top-3 flex size-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-xs transition-all duration-200",
|
|
10581
|
+
isChecked ? "scale-100 opacity-100 ring-2 ring-white ring-offset-2" : "scale-75 opacity-0"
|
|
10582
|
+
),
|
|
10583
|
+
"aria-hidden": "true",
|
|
10584
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-3.5 stroke-[2.5]" })
|
|
10585
|
+
}
|
|
10586
|
+
)
|
|
10587
|
+
]
|
|
10588
|
+
}
|
|
10589
|
+
),
|
|
10590
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10591
|
+
"span",
|
|
10592
|
+
{
|
|
10593
|
+
className: cn(
|
|
10594
|
+
"flex min-h-[82px] flex-col gap-1 border-t border-border bg-card px-3 py-3 text-card-foreground",
|
|
10595
|
+
isChecked && "bg-primary text-primary-foreground"
|
|
10596
|
+
),
|
|
10597
|
+
children: [
|
|
10598
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-1 text-sm font-semibold leading-5", children: label }),
|
|
10599
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "line-clamp-2 text-sm leading-5", children: subtitle })
|
|
10600
|
+
]
|
|
10601
|
+
}
|
|
10602
|
+
)
|
|
10603
|
+
]
|
|
10604
|
+
}
|
|
10605
|
+
)
|
|
10606
|
+
]
|
|
10607
|
+
}
|
|
10608
|
+
);
|
|
10609
|
+
}
|
|
10610
|
+
function MediaCheckboxes({
|
|
10611
|
+
options,
|
|
10612
|
+
selectedValues,
|
|
10613
|
+
defaultSelectedValues,
|
|
10614
|
+
onSelect,
|
|
10615
|
+
minSelection = 0,
|
|
10616
|
+
maxSelection,
|
|
10617
|
+
className,
|
|
10618
|
+
thumbnailHeight = "h-48"
|
|
10619
|
+
}) {
|
|
10620
|
+
const isControlled = Array.isArray(selectedValues);
|
|
10621
|
+
const [internal, setInternal] = React4.useState(
|
|
10622
|
+
defaultSelectedValues ?? []
|
|
10623
|
+
);
|
|
10624
|
+
const current = isControlled ? selectedValues : internal;
|
|
10625
|
+
const max = maxSelection ?? options.length;
|
|
10626
|
+
const toggleOption = React4.useCallback(
|
|
10627
|
+
(value) => {
|
|
10628
|
+
const isSelected = current.includes(value);
|
|
10629
|
+
let updated;
|
|
10630
|
+
if (isSelected) {
|
|
10631
|
+
updated = current.filter((v) => v !== value);
|
|
10632
|
+
if (updated.length < minSelection) return;
|
|
10633
|
+
} else if (max === 1) {
|
|
10634
|
+
updated = [value];
|
|
10635
|
+
} else {
|
|
10636
|
+
if (current.length >= max) return;
|
|
10637
|
+
updated = [...current, value];
|
|
10638
|
+
}
|
|
10639
|
+
if (!isControlled) setInternal(updated);
|
|
10640
|
+
onSelect?.(updated);
|
|
10641
|
+
},
|
|
10642
|
+
[current, isControlled, max, minSelection, onSelect]
|
|
10643
|
+
);
|
|
10644
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10645
|
+
"fieldset",
|
|
10646
|
+
{
|
|
10647
|
+
className: cn(
|
|
10648
|
+
"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4",
|
|
10649
|
+
className
|
|
10650
|
+
),
|
|
10651
|
+
children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
10652
|
+
MediaOptionItem,
|
|
10653
|
+
{
|
|
10654
|
+
option,
|
|
10655
|
+
isChecked: current.includes(option.value),
|
|
10656
|
+
onToggle: toggleOption,
|
|
10657
|
+
thumbnailHeight
|
|
10658
|
+
},
|
|
10659
|
+
option.value
|
|
10660
|
+
))
|
|
10661
|
+
}
|
|
10662
|
+
);
|
|
10663
|
+
}
|
|
10664
|
+
function renderTileIcon(item) {
|
|
10665
|
+
if (item.icon != null) {
|
|
10666
|
+
if (React4.isValidElement(item.icon)) {
|
|
10667
|
+
return React4.cloneElement(item.icon, {
|
|
10668
|
+
className: cn(item.icon.props.className, "size-5 shrink-0")
|
|
10669
|
+
});
|
|
10670
|
+
}
|
|
10671
|
+
return item.icon;
|
|
10672
|
+
}
|
|
10673
|
+
return resolveIconName(item.iconName);
|
|
10674
|
+
}
|
|
10675
|
+
function IconCheckboxes({
|
|
10676
|
+
options,
|
|
10677
|
+
selectedValues,
|
|
10678
|
+
defaultSelectedValues,
|
|
10679
|
+
onSelect,
|
|
10680
|
+
minSelection = 0,
|
|
10681
|
+
maxSelection,
|
|
10682
|
+
className
|
|
10683
|
+
}) {
|
|
10684
|
+
const isControlled = Array.isArray(selectedValues);
|
|
10685
|
+
const [internal, setInternal] = React4.useState(
|
|
10686
|
+
defaultSelectedValues ?? []
|
|
10687
|
+
);
|
|
10688
|
+
const current = isControlled ? selectedValues : internal;
|
|
10689
|
+
const max = maxSelection ?? options.length;
|
|
10690
|
+
const commit = (updated) => {
|
|
10691
|
+
if (!isControlled) setInternal(updated);
|
|
10692
|
+
onSelect?.(updated);
|
|
10693
|
+
};
|
|
10694
|
+
const toggleOption = (value) => {
|
|
10695
|
+
const isSelected = current.includes(value);
|
|
10696
|
+
let updated;
|
|
10697
|
+
if (isSelected) {
|
|
10698
|
+
updated = current.filter((v) => v !== value);
|
|
10699
|
+
if (updated.length < minSelection) return;
|
|
10700
|
+
} else if (max === 1) {
|
|
10701
|
+
updated = [value];
|
|
10702
|
+
} else {
|
|
10703
|
+
if (current.length >= max) return;
|
|
10704
|
+
updated = [...current, value];
|
|
10705
|
+
}
|
|
10706
|
+
commit(updated);
|
|
10707
|
+
};
|
|
10708
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
10709
|
+
"fieldset",
|
|
10710
|
+
{
|
|
10711
|
+
className: cn(
|
|
10712
|
+
"grid w-full max-w-sm grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-3",
|
|
10713
|
+
className
|
|
10714
|
+
),
|
|
10715
|
+
children: options.map((item) => {
|
|
10716
|
+
const { value, label, disabled } = item;
|
|
10717
|
+
const isChecked = current.includes(value);
|
|
10718
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
10719
|
+
"label",
|
|
10720
|
+
{
|
|
10721
|
+
className: cn(
|
|
10722
|
+
"block",
|
|
10723
|
+
disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"
|
|
10724
|
+
),
|
|
10725
|
+
children: [
|
|
10726
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10727
|
+
"input",
|
|
10728
|
+
{
|
|
10729
|
+
type: "checkbox",
|
|
10730
|
+
className: "peer sr-only",
|
|
10731
|
+
checked: isChecked,
|
|
10732
|
+
disabled,
|
|
10733
|
+
onChange: () => toggleOption(value)
|
|
10734
|
+
}
|
|
10735
|
+
),
|
|
10736
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
10737
|
+
"span",
|
|
10738
|
+
{
|
|
10739
|
+
className: cn(
|
|
10740
|
+
"relative flex min-h-[88px] flex-col items-start justify-center rounded-lg border bg-card px-4 py-3 text-left text-muted-foreground transition-all duration-200 ease-in-out",
|
|
10741
|
+
"border-input hover:border-border hover:bg-accent/40",
|
|
10742
|
+
"peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background",
|
|
10743
|
+
isChecked && "border-primary bg-primary/5 text-primary shadow-xs ring-1 ring-primary/20 hover:border-primary hover:bg-primary/5",
|
|
10744
|
+
disabled && "pointer-events-none"
|
|
10745
|
+
),
|
|
10746
|
+
children: [
|
|
10747
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10748
|
+
"span",
|
|
10749
|
+
{
|
|
10750
|
+
"aria-hidden": "true",
|
|
10751
|
+
className: "mb-3 flex size-5 items-center justify-center",
|
|
10752
|
+
children: renderTileIcon(item)
|
|
10753
|
+
}
|
|
10754
|
+
),
|
|
10755
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-full break-words text-sm font-medium leading-tight transition-colors duration-200 ease-in-out", children: label }),
|
|
10756
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
10757
|
+
lucideReact.CircleCheck,
|
|
10758
|
+
{
|
|
10759
|
+
"aria-hidden": "true",
|
|
10760
|
+
className: cn(
|
|
10761
|
+
"absolute right-2 top-2 size-5 rounded-full fill-primary text-primary-foreground transition-all duration-200 ease-in-out",
|
|
10762
|
+
isChecked ? "scale-100 opacity-100" : "scale-75 opacity-0"
|
|
10763
|
+
)
|
|
10764
|
+
}
|
|
10765
|
+
)
|
|
10766
|
+
]
|
|
10767
|
+
}
|
|
10768
|
+
)
|
|
10769
|
+
]
|
|
10770
|
+
},
|
|
10771
|
+
value
|
|
10772
|
+
);
|
|
10773
|
+
})
|
|
10774
|
+
}
|
|
10775
|
+
);
|
|
10776
|
+
}
|
|
9952
10777
|
var ARTIFACT_REGISTRY = {
|
|
9953
10778
|
chart: ({ payload, className }) => payload.chart ? /* @__PURE__ */ jsxRuntime.jsx(ChartContainer, { data: payload.chart, className }) : null,
|
|
9954
10779
|
metrics: ({ payload, className }) => payload.metrics ? /* @__PURE__ */ jsxRuntime.jsx(MetricsGrid, { metrics: payload.metrics, className }) : null,
|
|
@@ -9966,7 +10791,10 @@ var ARTIFACT_REGISTRY = {
|
|
|
9966
10791
|
"deep-research-progress": ({ payload, className }) => payload.deepResearchProgress ? /* @__PURE__ */ jsxRuntime.jsx(DeepResearchProgress, { ...payload.deepResearchProgress, className }) : null,
|
|
9967
10792
|
tracker: ({ payload, className }) => payload.tracker ? /* @__PURE__ */ jsxRuntime.jsx(Tracker, { ...payload.tracker, className }) : null,
|
|
9968
10793
|
"built-in-questions": ({ payload, className }) => payload.builtInQuestions ? /* @__PURE__ */ jsxRuntime.jsx(BuiltInQuestions, { ...payload.builtInQuestions, className }) : null,
|
|
9969
|
-
"audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsxRuntime.jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null
|
|
10794
|
+
"audio-player": ({ payload, className }) => payload.audioPlayer ? /* @__PURE__ */ jsxRuntime.jsx(AudioPlayer, { ...payload.audioPlayer, className }) : null,
|
|
10795
|
+
"link-input": ({ payload, className }) => payload.linkInput ? /* @__PURE__ */ jsxRuntime.jsx(LinkInput, { ...payload.linkInput, className }) : null,
|
|
10796
|
+
"media-checkboxes": ({ payload, className }) => payload.mediaCheckboxes ? /* @__PURE__ */ jsxRuntime.jsx(MediaCheckboxes, { ...payload.mediaCheckboxes, className }) : null,
|
|
10797
|
+
"icon-checkboxes": ({ payload, className }) => payload.iconCheckboxes ? /* @__PURE__ */ jsxRuntime.jsx(IconCheckboxes, { ...payload.iconCheckboxes, className }) : null
|
|
9970
10798
|
};
|
|
9971
10799
|
function DataPayloadView({ payload, className }) {
|
|
9972
10800
|
const render = ARTIFACT_REGISTRY[payload.type];
|
|
@@ -11425,6 +12253,7 @@ exports.ConfirmationPanel = ConfirmationPanel;
|
|
|
11425
12253
|
exports.ControlGrid = ControlGrid;
|
|
11426
12254
|
exports.ConversationAnalytics = ConversationAnalytics;
|
|
11427
12255
|
exports.ConversationArtifact = ConversationArtifact;
|
|
12256
|
+
exports.DEFAULT_OPEN_GRAPH_ENDPOINT = DEFAULT_OPEN_GRAPH_ENDPOINT;
|
|
11428
12257
|
exports.DataPayloadView = DataPayloadView;
|
|
11429
12258
|
exports.DataTable = DataTable;
|
|
11430
12259
|
exports.DeepResearchProgress = DeepResearchProgress;
|
|
@@ -11435,13 +12264,17 @@ exports.FloatingWidget = FloatingWidget;
|
|
|
11435
12264
|
exports.FullBleedSurface = FullBleedSurface;
|
|
11436
12265
|
exports.FullscreenDashboard = FullscreenDashboard;
|
|
11437
12266
|
exports.GuidedLessonFlow = GuidedLessonFlow;
|
|
12267
|
+
exports.IconCheckboxes = IconCheckboxes;
|
|
11438
12268
|
exports.ImageGenerator = ImageGenerator;
|
|
11439
12269
|
exports.InlineSuggestionsInput = InlineSuggestionsInput;
|
|
11440
12270
|
exports.Input = Input;
|
|
11441
12271
|
exports.KpiCardWithChart = KpiCardWithChart;
|
|
11442
12272
|
exports.KpiCardWithSparklines = KpiCardWithSparklines;
|
|
12273
|
+
exports.LinkInput = LinkInput;
|
|
12274
|
+
exports.LinkInputGroup = LinkInputGroup;
|
|
11443
12275
|
exports.ListingFeed = ListingFeed;
|
|
11444
12276
|
exports.LocationsRevenueCard = LocationsRevenueCard;
|
|
12277
|
+
exports.MediaCheckboxes = MediaCheckboxes;
|
|
11445
12278
|
exports.MediaEditorCanvas = MediaEditorCanvas;
|
|
11446
12279
|
exports.MediaGallery = MediaGallery;
|
|
11447
12280
|
exports.MessageActions = MessageActions;
|
|
@@ -11509,6 +12342,8 @@ exports.copyToClipboard = copyToClipboard;
|
|
|
11509
12342
|
exports.createMockBackend = createMockBackend;
|
|
11510
12343
|
exports.debounce = debounce;
|
|
11511
12344
|
exports.delay = delay;
|
|
12345
|
+
exports.extractLinkPreview = extractLinkPreview;
|
|
12346
|
+
exports.fetchOpenGraphPreview = fetchOpenGraphPreview;
|
|
11512
12347
|
exports.findComponentsByCapability = findComponentsByCapability;
|
|
11513
12348
|
exports.findComponentsByCategory = findComponentsByCategory;
|
|
11514
12349
|
exports.findComponentsBySurface = findComponentsBySurface;
|