@lobehub/ui 6.0.0-beta.1 → 6.0.0-beta.11

package/es/Video/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nimport { videoMarker } from './marker.stylex';\n\nexport const maskHoverCls = 'lobe-video-mask';\n\nexport const styles = stylex.create({\n  filled: {\n    borderColor: cssVar.colorBorderSecondary,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: cssVar.colorFillTertiary,\n  },\n  mask: {\n    inset: 0,\n    transition: 'opacity 0.2s ease',\n    backgroundColor: cssVar.colorBgMask,\n    opacity: { default: 0, [stylex.when.ancestor(':hover', videoMarker)]: 1 },\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 1,\n    height: '100%',\n    width: '100%',\n  },\n  root: {\n    borderRadius: cssVar.borderRadius,\n    overflow: 'hidden',\n    backgroundColor: cssVar.colorFillTertiary,\n    marginBlockEnd: '1em',\n    marginBlockStart: 0,\n    position: 'relative',\n    height: 'auto',\n    maxHeight: 'var(--video-max-height, 100%)',\n    maxWidth: 'var(--video-max-width, 100%)',\n    minHeight: 'var(--video-min-height, unset)',\n    minWidth: 'var(--video-min-width, unset)',\n    width: '100%',\n  },\n  video: {\n    cursor: 'pointer',\n    width: '100%',\n  },\n});\n"],"mappings":";AAKA,MAAa,eAAe;AAC5B,MAAa,SAAS;CACpB,QAAQ;EACN,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,MAAM;EACJ,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,OAAO;EACL,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;AACF"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Video/style.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\n\nimport { cssVar } from '@/styles/stylex/cssVar.stylex';\n\nconst reducedMotion = '@media (prefers-reduced-motion: reduce)';\nconst chromeBar = '#151515';\n\nconst labelFromBelow = stylex.keyframes({\n  from: { opacity: 0, transform: 'translateY(70%)' },\n  to: { opacity: 1, transform: 'none' },\n});\nconst labelFromAbove = stylex.keyframes({\n  from: { opacity: 0, transform: 'translateY(-70%)' },\n  to: { opacity: 1, transform: 'none' },\n});\n\n// The chrome stays dark in both themes: it sits on the black letterbox and\n// must not flash white around a dark recording.\nexport const styles = stylex.create({\n  barButton: {\n    padding: 0,\n    borderRadius: 6,\n    borderStyle: 'none',\n    flex: 'none',\n    outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n    alignItems: 'center',\n    backgroundColor: {\n      'default': 'transparent',\n      ':hover': 'rgb(255 255 255 / 12%)',\n    },\n    color: 'inherit',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    justifyContent: 'center',\n    height: 28,\n    minWidth: 28,\n  },\n  barButtonActive: {\n    backgroundColor: 'rgb(255 255 255 / 18%)',\n  },\n  caption: {\n    borderRadius: 8,\n    paddingBlock: 8,\n    paddingInline: 12,\n    transition: { default: 'inset-block-end 200ms ease', [reducedMotion]: 'none' },\n    backgroundColor: 'rgb(0 0 0 / 78%)',\n    color: '#fff',\n    fontSize: 13,\n    insetBlockEnd: 16,\n    insetInlineStart: 16,\n    lineHeight: 1.5,\n    position: 'absolute',\n    zIndex: 2,\n    maxWidth: '70%',\n  },\n  captionItem: {\n    marginBlockStart: { 'default': 8, ':first-child': 0 },\n  },\n  captionRaised: {\n    insetBlockEnd: 76,\n  },\n  captionTitle: {\n    gap: 6,\n    alignItems: 'center',\n    display: 'flex',\n    fontWeight: 600,\n  },\n  centerPlay: {\n    borderRadius: '50%',\n    borderStyle: 'none',\n    alignItems: 'center',\n    backgroundColor: 'rgb(0 0 0 / 55%)',\n    color: '#fff',\n    cursor: 'pointer',\n    display: 'flex',\n    insetBlockStart: '50%',\n    insetInlineStart: '50%',\n    justifyContent: 'center',\n    position: 'absolute',\n    transform: 'translate(-50%, -50%)',\n    zIndex: 2,\n    height: 56,\n    width: 56,\n  },\n  chip: {\n    borderRadius: 6,\n    borderStyle: 'none',\n    gap: 2,\n    overflow: 'hidden',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'rgb(255 255 255 / 10%)', ':hover': 'rgb(255 255 255 / 16%)' },\n    color: 'inherit',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    paddingInlineEnd: 4,\n    paddingInlineStart: 8,\n    height: 24,\n    maxWidth: '40%',\n    minWidth: 0,\n  },\n  chipLabelBackward: {\n    animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n    animationName: labelFromAbove,\n    animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n  },\n  chipLabelForward: {\n    animationDuration: { default: '220ms', [reducedMotion]: '0s' },\n    animationName: labelFromBelow,\n    animationTimingFunction: 'cubic-bezier(0.2, 0, 0, 1)',\n  },\n  chipText: {\n    overflow: 'hidden',\n    display: 'block',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  },\n  controls: {\n    paddingInline: 12,\n    color: '#fff',\n    paddingBlockEnd: 6,\n  },\n  controlsBelow: {\n    backgroundColor: chromeBar,\n    paddingBlockStart: 6,\n  },\n  controlsHidden: {\n    opacity: 0,\n    pointerEvents: 'none',\n  },\n  controlsOverlay: {\n    insetInline: 0,\n    transition: { default: 'opacity 200ms ease', [reducedMotion]: 'none' },\n    backgroundImage: 'linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 72%))',\n    insetBlockEnd: 0,\n    paddingBlockStart: 40,\n    position: 'absolute',\n    zIndex: 3,\n  },\n  disabled: {\n    opacity: 0.4,\n    pointerEvents: 'none',\n  },\n  dot: {\n    borderRadius: '50%',\n    flex: 'none',\n    height: 6,\n    width: 6,\n  },\n  error: {\n    inset: 0,\n    gap: 10,\n    alignItems: 'center',\n    backgroundColor: '#000',\n    color: '#ccc',\n    display: 'flex',\n    flexDirection: 'column',\n    fontSize: 13,\n    justifyContent: 'center',\n    position: 'absolute',\n    zIndex: 4,\n  },\n  errorActions: {\n    gap: 8,\n    display: 'flex',\n  },\n  errorButton: {\n    borderColor: 'rgb(255 255 255 / 20%)',\n    borderRadius: 6,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    paddingInline: 10,\n    textDecoration: 'none',\n    alignItems: 'center',\n    backgroundColor: { 'default': 'rgb(255 255 255 / 8%)', ':hover': 'rgb(255 255 255 / 14%)' },\n    color: '#fff',\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    height: 28,\n  },\n  frame: {\n    overflow: 'hidden',\n    backgroundColor: '#000',\n    position: 'relative',\n    width: '100%',\n  },\n  frameNo: {\n    color: '#8a8a8a',\n    fontFamily: cssVar.fontFamilyCode,\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n  },\n  hairline: {\n    backgroundColor: 'rgb(0 0 0 / 55%)',\n    insetBlockStart: 8,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 4,\n    width: 1,\n  },\n  head: {\n    borderRadius: '50%',\n    backgroundColor: '#fff',\n    insetBlockStart: 4,\n    marginInlineStart: -6,\n    pointerEvents: 'none',\n    position: 'absolute',\n    height: 12,\n    width: 12,\n  },\n  marker: {\n    padding: 0,\n    borderColor: 'rgb(0 0 0 / 60%)',\n    borderRadius: '50%',\n    borderStyle: 'solid',\n    borderWidth: 1.5,\n    outline: { 'default': 'none', ':focus-visible': '2px solid #fff' },\n    transition: { default: 'transform 120ms ease', [reducedMotion]: 'none' },\n    cursor: 'pointer',\n    insetBlockStart: -2,\n    marginInlineStart: -5,\n    position: 'absolute',\n    transform: { 'default': null, ':hover': 'scale(1.3)' },\n    zIndex: 1,\n    height: 10,\n    width: 10,\n  },\n  preview: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    flexDirection: 'column',\n    insetBlockEnd: 24,\n    marginInlineStart: -88,\n    pointerEvents: 'none',\n    position: 'absolute',\n    zIndex: 2,\n    width: 176,\n  },\n  previewCanvas: {\n    borderColor: '#333',\n    borderRadius: 8,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    backgroundColor: '#000',\n    display: 'block',\n    height: 99,\n    width: 176,\n  },\n  previewLabel: {\n    borderRadius: 6,\n    overflow: 'hidden',\n    paddingBlock: 3,\n    paddingInline: 8,\n    backgroundColor: 'rgb(0 0 0 / 82%)',\n    fontSize: 12,\n    lineHeight: 1.4,\n    textAlign: 'center',\n    textOverflow: 'ellipsis',\n    maxWidth: 176,\n  },\n  previewTime: {\n    color: '#ddd',\n    fontFamily: cssVar.fontFamilyCode,\n    fontSize: 11,\n  },\n  previewTitle: {\n    fontWeight: 600,\n    whiteSpace: 'nowrap',\n  },\n  root: {\n    borderRadius: cssVar.borderRadiusLG,\n    outline: 'none',\n    overflow: 'hidden',\n    backgroundColor: '#000',\n    boxShadow: { 'default': null, ':focus-visible': `0 0 0 2px ${cssVar.colorPrimaryBorder}` },\n    color: '#fff',\n    lineHeight: 1,\n    position: 'relative',\n    maxWidth: '100%',\n  },\n  rateButton: {\n    paddingInline: 6,\n    fontFamily: cssVar.fontFamilyCode,\n  },\n  row: {\n    gap: 4,\n    alignItems: 'center',\n    display: 'flex',\n    fontSize: 12,\n    height: 32,\n  },\n  sectionChip: {\n    borderColor: 'rgb(255 255 255 / 14%)',\n    borderRadius: 6,\n    borderStyle: 'solid',\n    borderWidth: 1,\n    gap: 6,\n    outline: { 'default': 'none', ':focus-visible': '2px solid rgb(255 255 255 / 60%)' },\n    paddingInline: 8,\n    alignItems: 'center',\n    backgroundColor: { 'default': 'transparent', ':hover': 'rgb(255 255 255 / 8%)' },\n    color: { 'default': '#bbb', ':hover': '#fff' },\n    cursor: 'pointer',\n    display: 'inline-flex',\n    fontFamily: 'inherit',\n    fontSize: 12,\n    height: 24,\n  },\n  sectionChipActive: {\n    backgroundColor: 'rgb(255 255 255 / 16%)',\n    color: '#fff',\n  },\n  sectionChipTime: {\n    fontFamily: cssVar.fontFamilyCode,\n    opacity: 0.7,\n  },\n  sectionList: {\n    gap: 6,\n    paddingBlock: 8,\n    paddingInline: 12,\n    backgroundColor: '#151515',\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  segment: {\n    borderRadius: 2,\n    overflow: 'hidden',\n    transition: {\n      default: 'height 120ms ease, inset-block-start 120ms ease',\n      [reducedMotion]: 'none',\n    },\n    backgroundColor: 'rgb(255 255 255 / 24%)',\n    insetBlockStart: 8,\n    position: 'absolute',\n    height: 4,\n  },\n  segmentFill: {\n    insetBlock: 0,\n    insetInlineStart: 0,\n    position: 'absolute',\n  },\n  segmentHovered: {\n    insetBlockStart: 6,\n    height: 8,\n  },\n  spacer: {\n    flex: '1',\n  },\n  surface: {\n    inset: 0,\n    cursor: 'pointer',\n    position: 'absolute',\n  },\n  time: {\n    color: '#ddd',\n    fontFamily: cssVar.fontFamilyCode,\n    fontVariantNumeric: 'tabular-nums',\n    whiteSpace: 'nowrap',\n  },\n  track: {\n    outline: 'none',\n    cursor: 'pointer',\n    position: 'relative',\n    touchAction: 'none',\n    height: 20,\n  },\n  video: {\n    display: 'block',\n    objectFit: 'contain',\n    height: '100%',\n    width: '100%',\n  },\n});\n\nexport const markerColor = (color?: string) => {\n  switch (color) {\n    case undefined:\n    case 'info': {\n      return cssVar.colorInfo;\n    }\n    case 'success': {\n      return cssVar.colorSuccess;\n    }\n    case 'warning': {\n      return cssVar.colorWarning;\n    }\n    case 'error': {\n      return cssVar.colorError;\n    }\n    default: {\n      return color;\n    }\n  }\n};\n"],"mappings":"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"}

package/es/Video/time.mjs

@@ -0,0 +1,60 @@
+const pad = (value) => String(value).padStart(2, "0");
+const formatTime = (seconds) => {
+	const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;
+	const hours = Math.floor(total / 3600);
+	const minutes = Math.floor(total % 3600 / 60);
+	const rest = total % 60;
+	return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;
+};
+const frameOf = (seconds, fps) => Math.floor(seconds * fps + 1e-6);
+const steppedTime = (current, frames, duration, fps) => Math.min(Math.max((frameOf(current, fps) + frames + .5) / fps, 0), duration);
+const sortSections = (sections) => [...sections].sort((a, b) => a.start - b.start);
+const sectionAt = (sorted, time) => sorted.findLast((section) => section.start <= time + .01);
+const markersAt = (markers, time, fps) => {
+	let latest;
+	for (const marker of markers) {
+		if (marker.content === void 0 || marker.content === null) continue;
+		if (time >= marker.time - .5 / fps && time < marker.time + 2 && (latest === void 0 || marker.time > latest)) latest = marker.time;
+	}
+	if (latest === void 0) return [];
+	return markers.filter((marker) => marker.time === latest && marker.content !== void 0 && marker.content !== null);
+};
+const mergeSegments = (sorted, duration, trackPx, minPx = 12) => {
+	if (!(duration > 0)) return {
+		hairlines: [],
+		segments: []
+	};
+	const bounds = [
+		0,
+		...[...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration))],
+		duration
+	];
+	const segments = [];
+	const hairlines = [];
+	const minSeconds = trackPx > 0 ? minPx / trackPx * duration : 0;
+	let carry = false;
+	for (let i = 0; i < bounds.length - 1; i++) {
+		const raw = {
+			end: bounds[i + 1],
+			start: bounds[i]
+		};
+		const narrow = raw.end - raw.start < minSeconds;
+		const last = segments.at(-1);
+		if (last && (narrow || carry)) {
+			last.end = raw.end;
+			hairlines.push(raw.start);
+			carry = false;
+			continue;
+		}
+		segments.push(raw);
+		carry = narrow;
+	}
+	return {
+		hairlines,
+		segments
+	};
+};
+//#endregion
+export { formatTime, frameOf, markersAt, mergeSegments, sectionAt, sortSections, steppedTime };
+
+//# sourceMappingURL=time.mjs.map

package/es/Video/time.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.mjs","names":[],"sources":["../../src/Video/time.ts"],"sourcesContent":["import type { VideoMarker, VideoSection } from './type';\n\nexport const CAPTION_SECONDS = 2;\nexport const MIN_SEGMENT_PX = 12;\n\nconst pad = (value: number) => String(value).padStart(2, '0');\n\nexport const formatTime = (seconds: number) => {\n  const total = Number.isFinite(seconds) && seconds > 0 ? Math.floor(seconds) : 0;\n  const hours = Math.floor(total / 3600);\n  const minutes = Math.floor((total % 3600) / 60);\n  const rest = total % 60;\n  return hours > 0 ? `${hours}:${pad(minutes)}:${pad(rest)}` : `${minutes}:${pad(rest)}`;\n};\n\n// The epsilon absorbs float error at exact frame boundaries.\nexport const frameOf = (seconds: number, fps: number) => Math.floor(seconds * fps + 1e-6);\n\n// Landing on frame centres means repeated steps never skip a frame or show one twice.\nexport const steppedTime = (current: number, frames: number, duration: number, fps: number) =>\n  Math.min(Math.max((frameOf(current, fps) + frames + 0.5) / fps, 0), duration);\n\nexport const sortSections = (sections: VideoSection[]) =>\n  [...sections].sort((a, b) => a.start - b.start);\n\nexport const sectionAt = (sorted: VideoSection[], time: number) =>\n  sorted.findLast((section) => section.start <= time + 0.01);\n\nexport const markersAt = (markers: VideoMarker[], time: number, fps: number): VideoMarker[] => {\n  let latest: number | undefined;\n  for (const marker of markers) {\n    if (marker.content === undefined || marker.content === null) continue;\n    const onScreen = time >= marker.time - 0.5 / fps && time < marker.time + CAPTION_SECONDS;\n    if (onScreen && (latest === undefined || marker.time > latest)) latest = marker.time;\n  }\n  if (latest === undefined) return [];\n  return markers.filter(\n    (marker) => marker.time === latest && marker.content !== undefined && marker.content !== null,\n  );\n};\n\nexport interface Segment {\n  end: number;\n  start: number;\n}\n\nexport const mergeSegments = (\n  sorted: VideoSection[],\n  duration: number,\n  trackPx: number,\n  minPx = MIN_SEGMENT_PX,\n): { hairlines: number[]; segments: Segment[] } => {\n  if (!(duration > 0)) return { hairlines: [], segments: [] };\n\n  const cuts = [\n    ...new Set(sorted.map((s) => s.start).filter((start) => start > 0 && start < duration)),\n  ];\n  const bounds = [0, ...cuts, duration];\n  const segments: Segment[] = [];\n  const hairlines: number[] = [];\n  const minSeconds = trackPx > 0 ? (minPx / trackPx) * duration : 0;\n  let carry = false;\n\n  for (let i = 0; i < bounds.length - 1; i++) {\n    const raw = { end: bounds[i + 1], start: bounds[i] };\n    const narrow = raw.end - raw.start < minSeconds;\n    const last = segments.at(-1);\n    if (last && (narrow || carry)) {\n      last.end = raw.end;\n      hairlines.push(raw.start);\n      carry = false;\n      continue;\n    }\n    segments.push(raw);\n    carry = narrow;\n  }\n\n  return { hairlines, segments };\n};\n"],"mappings":"AAKA,MAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;AAE5D,MAAa,cAAc,YAAoB;CAC7C,MAAM,QAAQ,OAAO,SAAS,OAAO,KAAK,UAAU,IAAI,KAAK,MAAM,OAAO,IAAI;CAC9E,MAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;CACrC,MAAM,UAAU,KAAK,MAAO,QAAQ,OAAQ,EAAE;CAC9C,MAAM,OAAO,QAAQ;CACrB,OAAO,QAAQ,IAAI,GAAG,MAAM,GAAG,IAAI,OAAO,EAAE,GAAG,IAAI,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI,IAAI;AACrF;AAGA,MAAa,WAAW,SAAiB,QAAgB,KAAK,MAAM,UAAU,MAAM,IAAI;AAGxF,MAAa,eAAe,SAAiB,QAAgB,UAAkB,QAC7E,KAAK,IAAI,KAAK,KAAK,QAAQ,SAAS,GAAG,IAAI,SAAS,MAAO,KAAK,CAAC,GAAG,QAAQ;AAE9E,MAAa,gBAAgB,aAC3B,CAAC,GAAG,QAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK;AAEhD,MAAa,aAAa,QAAwB,SAChD,OAAO,UAAU,YAAY,QAAQ,SAAS,OAAO,GAAI;AAE3D,MAAa,aAAa,SAAwB,MAAc,QAA+B;CAC7F,IAAI;CACJ,KAAK,MAAM,UAAU,SAAS;EAC5B,IAAI,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,MAAM;EAE7D,IADiB,QAAQ,OAAO,OAAO,KAAM,OAAO,OAAO,OAAO,OAAA,MACjD,WAAW,KAAA,KAAa,OAAO,OAAO,SAAS,SAAS,OAAO;CAClF;CACA,IAAI,WAAW,KAAA,GAAW,OAAO,CAAC;CAClC,OAAO,QAAQ,QACZ,WAAW,OAAO,SAAS,UAAU,OAAO,YAAY,KAAA,KAAa,OAAO,YAAY,IAC3F;AACF;AAOA,MAAa,iBACX,QACA,UACA,SACA,QAAA,OACiD;CACjD,IAAI,EAAE,WAAW,IAAI,OAAO;EAAE,WAAW,CAAC;EAAG,UAAU,CAAC;CAAE;CAK1D,MAAM,SAAS;EAAC;EAAG,GAAG,CAFpB,GAAG,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,UAAU,QAAQ,KAAK,QAAQ,QAAQ,CAAC,CAE/D;EAAG;CAAQ;CACpC,MAAM,WAAsB,CAAC;CAC7B,MAAM,YAAsB,CAAC;CAC7B,MAAM,aAAa,UAAU,IAAK,QAAQ,UAAW,WAAW;CAChE,IAAI,QAAQ;CAEZ,KAAK,IAAI,IAAI,GAAG,IAAI,OAAO,SAAS,GAAG,KAAK;EAC1C,MAAM,MAAM;GAAE,KAAK,OAAO,IAAI;GAAI,OAAO,OAAO;EAAG;EACnD,MAAM,SAAS,IAAI,MAAM,IAAI,QAAQ;EACrC,MAAM,OAAO,SAAS,GAAG,EAAE;EAC3B,IAAI,SAAS,UAAU,QAAQ;GAC7B,KAAK,MAAM,IAAI;GACf,UAAU,KAAK,IAAI,KAAK;GACxB,QAAQ;GACR;EACF;EACA,SAAS,KAAK,GAAG;EACjB,QAAQ;CACV;CAEA,OAAO;EAAE;EAAW;CAAS;AAC/B"}

package/es/Video/type.d.mts

@@ -0,0 +1,125 @@
+import { CSSProperties, Key, ReactEventHandler, ReactNode, Ref } from "react";
+//#region src/Video/type.d.ts
+export interface VideoSection {
+  start: number;
+  title: string;
+}
+export type VideoMarkerColor = 'success' | 'warning' | 'error' | 'info' | (string & {});
+export interface VideoMarker {
+  color?: VideoMarkerColor;
+  content?: ReactNode;
+  key?: Key;
+  label?: ReactNode;
+  time: number;
+}
+export type VideoStatus = 'loading' | 'ready' | 'error';
+export interface VideoState {
+  activeMarkers: VideoMarker[];
+  activeSection?: VideoSection;
+  captions: boolean;
+  duration: number;
+  muted: boolean;
+  paused: boolean;
+  rate: number;
+  size?: {
+    height: number;
+    width: number;
+  };
+  status: VideoStatus;
+  time: number;
+}
+export interface VideoPlayer {
+  getState: () => VideoState;
+  pause: () => void;
+  play: () => Promise<void>;
+  requestFullscreen: () => Promise<void>;
+  readonly root: HTMLDivElement | null;
+  seek: (seconds: number) => void;
+  setCaptions: (captions: boolean) => void;
+  setMuted: (muted: boolean) => void;
+  setRate: (rate: number) => void;
+  step: (frames: number) => void;
+  subscribe: (listener: (state: VideoState) => void) => () => void;
+  toggle: () => void;
+  toggleMute: () => void;
+  readonly video: HTMLVideoElement | null;
+}
+export interface VideoMediaProps {
+  autoPlay?: boolean;
+  loop?: boolean;
+  onEnded?: ReactEventHandler<HTMLVideoElement>;
+  onError?: ReactEventHandler<HTMLVideoElement>;
+  onPause?: ReactEventHandler<HTMLVideoElement>;
+  onPlay?: ReactEventHandler<HTMLVideoElement>;
+  onTimeUpdate?: ReactEventHandler<HTMLVideoElement>;
+  poster?: string;
+  preload?: HTMLVideoElement['preload'];
+  src: string;
+}
+export interface VideoRootProps extends VideoMediaProps {
+  captions?: boolean;
+  children?: ReactNode;
+  className?: string;
+  defaultPlaybackRate?: number;
+  fps?: number;
+  height?: number | string;
+  markers?: VideoMarker[];
+  maxHeight?: number;
+  muted?: boolean;
+  onMarkerClick?: (marker: VideoMarker) => void;
+  onMutedChange?: (muted: boolean) => void;
+  onRateChange?: (rate: number) => void;
+  onRetry?: () => Promise<unknown> | void;
+  playbackRates?: number[];
+  player?: VideoPlayer;
+  ref?: Ref<VideoPlayer>;
+  sections?: VideoSection[];
+  style?: CSSProperties;
+  width?: number | string;
+}
+export interface VideoTimelineProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  thumbnails?: boolean;
+}
+export interface VideoControlsProps {
+  children?: ReactNode;
+  className?: string;
+  extra?: ReactNode;
+  frameStep?: boolean;
+  style?: CSSProperties;
+}
+export interface VideoCaptionProps {
+  action?: (marker: VideoMarker) => ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoFrameProps {
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoSectionListProps {
+  className?: string;
+  style?: CSSProperties;
+}
+export interface VideoProps extends Omit<VideoRootProps, 'children'> {
+  classNames?: {
+    controls?: string;
+    frame?: string;
+    root?: string;
+    timeline?: string;
+  };
+  frameStep?: boolean;
+  overlay?: (state: VideoState) => ReactNode;
+  styles?: {
+    controls?: CSSProperties;
+    frame?: CSSProperties;
+    root?: CSSProperties;
+    timeline?: CSSProperties;
+  };
+  thumbnails?: boolean;
+}
+//#endregion
+//# sourceMappingURL=type.d.mts.map

package/es/Video/useControlsIdle.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/Video/useControlsIdle.ts
+const IDLE_HIDE_MS = 2e3;
+const useControlsIdle = (forceVisible) => {
+	const [active, setActive] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [held, setHeld] = useState(false);
+	const timer = useRef(void 0);
+	const clear = useCallback(() => {
+		if (timer.current === void 0) return;
+		window.clearTimeout(timer.current);
+		timer.current = void 0;
+	}, []);
+	const wake = useCallback(() => {
+		setActive(true);
+		clear();
+		timer.current = window.setTimeout(() => {
+			timer.current = void 0;
+			setActive(false);
+		}, IDLE_HIDE_MS);
+	}, [clear]);
+	const sleep = useCallback(() => {
+		clear();
+		setActive(false);
+	}, [clear]);
+	useEffect(() => clear, [clear]);
+	return {
+		hold: setHeld,
+		setFocused,
+		sleep,
+		visible: forceVisible || active || focused || held,
+		wake
+	};
+};
+//#endregion
+export { useControlsIdle };
+
+//# sourceMappingURL=useControlsIdle.mjs.map

package/es/Video/useControlsIdle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlsIdle.mjs","names":[],"sources":["../../src/Video/useControlsIdle.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nconst IDLE_HIDE_MS = 2000;\n\nexport const useControlsIdle = (forceVisible: boolean) => {\n  const [active, setActive] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [held, setHeld] = useState(false);\n  const timer = useRef<number | undefined>(undefined);\n\n  const clear = useCallback(() => {\n    if (timer.current === undefined) return;\n    window.clearTimeout(timer.current);\n    timer.current = undefined;\n  }, []);\n\n  const wake = useCallback(() => {\n    setActive(true);\n    clear();\n    timer.current = window.setTimeout(() => {\n      timer.current = undefined;\n      setActive(false);\n    }, IDLE_HIDE_MS);\n  }, [clear]);\n\n  const sleep = useCallback(() => {\n    clear();\n    setActive(false);\n  }, [clear]);\n\n  useEffect(() => clear, [clear]);\n\n  return {\n    hold: setHeld,\n    setFocused,\n    sleep,\n    visible: forceVisible || active || focused || held,\n    wake,\n  };\n};\n"],"mappings":";;;AAIA,MAAM,eAAe;AAErB,MAAa,mBAAmB,iBAA0B;CACxD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CACtC,MAAM,QAAQ,OAA2B,KAAA,CAAS;CAElD,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,MAAM,YAAY,KAAA,GAAW;EACjC,OAAO,aAAa,MAAM,OAAO;EACjC,MAAM,UAAU,KAAA;CAClB,GAAG,CAAC,CAAC;CAEL,MAAM,OAAO,kBAAkB;EAC7B,UAAU,IAAI;EACd,MAAM;EACN,MAAM,UAAU,OAAO,iBAAiB;GACtC,MAAM,UAAU,KAAA;GAChB,UAAU,KAAK;EACjB,GAAG,YAAY;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,kBAAkB;EAC9B,MAAM;EACN,UAAU,KAAK;CACjB,GAAG,CAAC,KAAK,CAAC;CAEV,gBAAgB,OAAO,CAAC,KAAK,CAAC;CAE9B,OAAO;EACL,MAAM;EACN;EACA;EACA,SAAS,gBAAgB,UAAU,WAAW;EAC9C;CACF;AACF"}

package/es/Video/useFullscreen.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useEffect, useState } from "react";
+//#region src/Video/useFullscreen.ts
+const useFullscreen = (store) => {
+	const [fullscreen, setFullscreen] = useState(false);
+	useEffect(() => {
+		const sync = () => setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);
+		sync();
+		document.addEventListener("fullscreenchange", sync);
+		return () => document.removeEventListener("fullscreenchange", sync);
+	}, [store]);
+	return fullscreen;
+};
+//#endregion
+export { useFullscreen };
+
+//# sourceMappingURL=useFullscreen.mjs.map

package/es/Video/useFullscreen.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFullscreen.mjs","names":[],"sources":["../../src/Video/useFullscreen.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const useFullscreen = (store: VideoStore) => {\n  const [fullscreen, setFullscreen] = useState(false);\n  useEffect(() => {\n    const sync = () =>\n      setFullscreen(Boolean(store.root) && document.fullscreenElement === store.root);\n    sync();\n    document.addEventListener('fullscreenchange', sync);\n    return () => document.removeEventListener('fullscreenchange', sync);\n  }, [store]);\n  return fullscreen;\n};\n"],"mappings":";;;AAMA,MAAa,iBAAiB,UAAsB;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,gBAAgB;EACd,MAAM,aACJ,cAAc,QAAQ,MAAM,IAAI,KAAK,SAAS,sBAAsB,MAAM,IAAI;EAChF,KAAK;EACL,SAAS,iBAAiB,oBAAoB,IAAI;EAClD,aAAa,SAAS,oBAAoB,oBAAoB,IAAI;CACpE,GAAG,CAAC,KAAK,CAAC;CACV,OAAO;AACT"}

package/es/Video/useKeyboard.mjs

@@ -0,0 +1,60 @@
+//#region src/Video/useKeyboard.ts
+const DEFAULT_PLAYBACK_RATES = [
+	.5,
+	1,
+	1.5,
+	2
+];
+const nextRate = (rates, current, direction) => {
+	const index = rates.indexOf(current);
+	const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;
+	return rates[Math.min(Math.max((from === -1 ? rates.length - 1 : from) + direction, 0), rates.length - 1)];
+};
+const handleVideoKey = (event, store, rates = DEFAULT_PLAYBACK_RATES) => {
+	if (event.altKey || event.ctrlKey || event.metaKey) return false;
+	const target = event.target;
+	const host = event.currentTarget;
+	if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target)) return false;
+	if (target?.isContentEditable || target?.closest?.("input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])")) return false;
+	if (target instanceof HTMLButtonElement && (event.key === " " || event.key === "Enter")) return false;
+	const state = store.getState();
+	if (state.status !== "ready") return false;
+	switch (event.key.toLowerCase()) {
+		case " ":
+		case "k":
+			store.toggle();
+			return true;
+		case ",":
+			store.step(-1);
+			return true;
+		case ".":
+			store.step(1);
+			return true;
+		case "arrowleft":
+			store.seek(state.time - (event.shiftKey ? 5 : 1));
+			return true;
+		case "arrowright":
+			store.seek(state.time + (event.shiftKey ? 5 : 1));
+			return true;
+		case "j":
+			store.setRate(nextRate(rates, state.rate, -1));
+			return true;
+		case "l":
+			store.setRate(nextRate(rates, state.rate, 1));
+			return true;
+		case "m":
+			store.toggleMute();
+			return true;
+		case "c":
+			store.setCaptions(!state.captions);
+			return true;
+		case "f":
+			store.toggleFullscreen();
+			return true;
+		default: return false;
+	}
+};
+//#endregion
+export { DEFAULT_PLAYBACK_RATES, handleVideoKey };
+
+//# sourceMappingURL=useKeyboard.mjs.map

package/es/Video/useKeyboard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboard.mjs","names":[],"sources":["../../src/Video/useKeyboard.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent } from 'react';\n\nimport type { VideoStore } from './store';\n\nexport const DEFAULT_PLAYBACK_RATES = [0.5, 1, 1.5, 2];\n\nconst nextRate = (rates: number[], current: number, direction: 1 | -1) => {\n  const index = rates.indexOf(current);\n  const from = index === -1 ? rates.findIndex((rate) => rate >= current) : index;\n  const next = Math.min(\n    Math.max((from === -1 ? rates.length - 1 : from) + direction, 0),\n    rates.length - 1,\n  );\n  return rates[next];\n};\n\nexport const handleVideoKey = (\n  event: KeyboardEvent | ReactKeyboardEvent,\n  store: VideoStore,\n  rates: number[] = DEFAULT_PLAYBACK_RATES,\n) => {\n  if (event.altKey || event.ctrlKey || event.metaKey) return false;\n  const target = event.target as HTMLElement | null;\n  // Portalled content (menus) bubbles through React to Root without being inside it.\n  const host = event.currentTarget as Node | null;\n  if (host instanceof Node && target instanceof Node && host !== target && !host.contains(target))\n    return false;\n  if (\n    target?.isContentEditable ||\n    target?.closest?.(\n      'input, textarea, select, [role=\"menuitem\"], [contenteditable]:not([contenteditable=\"false\"])',\n    )\n  )\n    return false;\n  if (target instanceof HTMLButtonElement && (event.key === ' ' || event.key === 'Enter'))\n    return false;\n  const state = store.getState();\n  if (state.status !== 'ready') return false;\n\n  switch (event.key.toLowerCase()) {\n    case ' ':\n    case 'k': {\n      store.toggle();\n      return true;\n    }\n    case ',': {\n      store.step(-1);\n      return true;\n    }\n    case '.': {\n      store.step(1);\n      return true;\n    }\n    case 'arrowleft': {\n      store.seek(state.time - (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'arrowright': {\n      store.seek(state.time + (event.shiftKey ? 5 : 1));\n      return true;\n    }\n    case 'j': {\n      store.setRate(nextRate(rates, state.rate, -1));\n      return true;\n    }\n    case 'l': {\n      store.setRate(nextRate(rates, state.rate, 1));\n      return true;\n    }\n    case 'm': {\n      store.toggleMute();\n      return true;\n    }\n    case 'c': {\n      store.setCaptions(!state.captions);\n      return true;\n    }\n    case 'f': {\n      store.toggleFullscreen();\n      return true;\n    }\n    default: {\n      return false;\n    }\n  }\n};\n"],"mappings":";AAIA,MAAa,yBAAyB;CAAC;CAAK;CAAG;CAAK;AAAC;AAErD,MAAM,YAAY,OAAiB,SAAiB,cAAsB;CACxE,MAAM,QAAQ,MAAM,QAAQ,OAAO;CACnC,MAAM,OAAO,UAAU,KAAK,MAAM,WAAW,SAAS,QAAQ,OAAO,IAAI;CAKzE,OAAO,MAJM,KAAK,IAChB,KAAK,KAAK,SAAS,KAAK,MAAM,SAAS,IAAI,QAAQ,WAAW,CAAC,GAC/D,MAAM,SAAS,CAED;AAClB;AAEA,MAAa,kBACX,OACA,OACA,QAAkB,2BACf;CACH,IAAI,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS,OAAO;CAC3D,MAAM,SAAS,MAAM;CAErB,MAAM,OAAO,MAAM;CACnB,IAAI,gBAAgB,QAAQ,kBAAkB,QAAQ,SAAS,UAAU,CAAC,KAAK,SAAS,MAAM,GAC5F,OAAO;CACT,IACE,QAAQ,qBACR,QAAQ,UACN,kGACF,GAEA,OAAO;CACT,IAAI,kBAAkB,sBAAsB,MAAM,QAAQ,OAAO,MAAM,QAAQ,UAC7E,OAAO;CACT,MAAM,QAAQ,MAAM,SAAS;CAC7B,IAAI,MAAM,WAAW,SAAS,OAAO;CAErC,QAAQ,MAAM,IAAI,YAAY,GAA9B;EACE,KAAK;EACL,KAAK;GACH,MAAM,OAAO;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,EAAE;GACb,OAAO;EAET,KAAK;GACH,MAAM,KAAK,CAAC;GACZ,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,KAAK,MAAM,QAAQ,MAAM,WAAW,IAAI,EAAE;GAChD,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,EAAE,CAAC;GAC7C,OAAO;EAET,KAAK;GACH,MAAM,QAAQ,SAAS,OAAO,MAAM,MAAM,CAAC,CAAC;GAC5C,OAAO;EAET,KAAK;GACH,MAAM,WAAW;GACjB,OAAO;EAET,KAAK;GACH,MAAM,YAAY,CAAC,MAAM,QAAQ;GACjC,OAAO;EAET,KAAK;GACH,MAAM,iBAAiB;GACvB,OAAO;EAET,SACE,OAAO;CAEX;AACF"}

package/es/Video/useVideo.d.mts

@@ -0,0 +1,9 @@
+import { VideoPlayer, VideoState } from "./type.mjs";
+//#region src/Video/useVideo.d.ts
+export declare function useVideoState(player: VideoPlayer): VideoState;
+export declare function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;
+export declare function useVideo(): VideoState;
+export declare function useVideo<T>(selector: (state: VideoState) => T): T;
+export declare const useVideoPlayer: () => VideoPlayer;
+//#endregion
+//# sourceMappingURL=useVideo.d.mts.map

package/es/Video/useVideo.mjs

@@ -0,0 +1,17 @@
+"use client";
+import { useVideoContext } from "./context.mjs";
+import { createVideoStore } from "./store.mjs";
+import { useState, useSyncExternalStore } from "react";
+//#region src/Video/useVideo.ts
+const identity = (state) => state;
+function useVideoState(player, selector = identity) {
+	return useSyncExternalStore(player.subscribe, () => selector(player.getState()), () => selector(player.getState()));
+}
+function useVideo(selector = identity) {
+	return useVideoState(useVideoContext().store, selector);
+}
+const useVideoPlayer = () => useState(createVideoStore)[0];
+//#endregion
+export { useVideo, useVideoPlayer, useVideoState };
+
+//# sourceMappingURL=useVideo.mjs.map

package/es/Video/useVideo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideo.mjs","names":[],"sources":["../../src/Video/useVideo.ts"],"sourcesContent":["'use client';\n\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useVideoContext } from './context';\nimport { createVideoStore } from './store';\nimport type { VideoPlayer, VideoState } from './type';\n\nconst identity = (state: VideoState) => state as unknown;\n\nexport function useVideoState(player: VideoPlayer): VideoState;\nexport function useVideoState<T>(player: VideoPlayer, selector: (state: VideoState) => T): T;\nexport function useVideoState(\n  player: VideoPlayer,\n  selector: (state: VideoState) => unknown = identity,\n) {\n  return useSyncExternalStore(\n    player.subscribe,\n    () => selector(player.getState()),\n    () => selector(player.getState()),\n  );\n}\n\nexport function useVideo(): VideoState;\nexport function useVideo<T>(selector: (state: VideoState) => T): T;\nexport function useVideo(selector: (state: VideoState) => unknown = identity) {\n  return useVideoState(useVideoContext().store, selector);\n}\n\nexport const useVideoPlayer = (): VideoPlayer => useState(createVideoStore)[0];\n"],"mappings":";;;;;AAQA,MAAM,YAAY,UAAsB;AAIxC,SAAgB,cACd,QACA,WAA2C,UAC3C;CACA,OAAO,qBACL,OAAO,iBACD,SAAS,OAAO,SAAS,CAAC,SAC1B,SAAS,OAAO,SAAS,CAAC,CAClC;AACF;AAIA,SAAgB,SAAS,WAA2C,UAAU;CAC5E,OAAO,cAAc,gBAAgB,CAAC,CAAC,OAAO,QAAQ;AACxD;AAEA,MAAa,uBAAoC,SAAS,gBAAgB,CAAC,CAAC"}

package/es/awesome/Features/FeatureItem.mjs

@@ -9,7 +9,7 @@ import Text from "../../Text/Text.mjs";
 import { childStyles, styles } from "./style.mjs";
 import { memo, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
+import clsx$1 from "clsx";
 import * as stylex from "@stylexjs/stylex";
 //#region src/awesome/Features/FeatureItem.tsx
 const Image = memo(({ image, className, title, style }) => {
@@ -32,7 +32,7 @@ const Item = memo(({ style, className, row, column, description, image, title, l
 		"--features-title-hover-size": hasLink ? "14px" : "20px"
 	}), [rowNumber, hasLink]);
 	return /* @__PURE__ */ jsx("div", {
-		...styleProps(styles.container, clsx("lobe-features-item", className), {
+		...styleProps(styles.container, clsx$1("lobe-features-item", className), {
 			...cssVariables,
 			gridColumn: `span ${column || 1}`,
 			gridRow: `span ${rowNumber}`,

package/es/awesome/Features/FeatureItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureItem.mjs","names":["Flexbox"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { childStyles, styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        {...styleProps(styles.container, clsx('lobe-features-item', className), {\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        })}\n        {...rest}\n      >\n        <div {...stylex.props(styles.cell)}>\n          {image ||\n            (icon && (\n              <Center {...styleProps(styles.imgContainer, undefined, imageStyle)}>\n                {icon && <Icon icon={icon} style={childStyles.img} />}\n                {image && <Image image={image} style={childStyles.img} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox\n              horizontal\n              align={'center'}\n              as={'h3'}\n              className={stylex.props(styles.title).className}\n              gap={8}\n            >\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              style={childStyles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div {...stylex.props(styles.link)}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,QAAQ,MAKV,EACF,OACA,WACA,OACA,YACI;CACJ,OAAO,MAAM,WAAW,MAAM,IAAI,oBAAC,KAAD;EAAK,KAAK;EAAkB;EAAW,KAAK;EAAc;CAAQ,CAAA,IAAI,oBAAC,QAAD;EAAmB;EAAkB;EACtI,UAAA;CACK,CAAA;AACd,CAAC;AACD,MAAM,OAAO,MAAwB,EACnC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,IAAI;CAC5B,MAAM,eAAe,eAAuC;EAC1D,sBAAsB,OAAO,SAAS;EACtC,+BAA+B,UAAU,SAAS;CACpD,IAAI,CAAC,WAAW,OAAO,CAAC;CACxB,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAW,KAAK,sBAAsB,SAAS,GAAG;GAClF,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;EACL,CAAC;EAAG,GAAI;EACF,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAjC,UAAA;IACG,SAAS,QAAQ,qBAAC,QAAD;KAAQ,GAAI,WAAW,OAAO,cAAc,KAAA,GAAW,UAAU;KAAjE,UAAA,CACX,QAAQ,oBAAC,MAAD;MAAY;MAAM,OAAO,YAAY;KAAM,CAAA,GACnD,SAAS,oBAAC,OAAD;MAAc;MAAO,OAAO,YAAY;MAAY;KAAQ,CAAA,CAChE;;IACX,SAAS,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;KAAW,KAAK;KAC1G,UAAA;IACM,CAAA;IACV,eAAe,oBAAC,MAAD;KAAM,OAAO,YAAY;KAAM,UAAU,EAC3D,MAAM,EACR;KACS,UAAA;IACG,CAAA;IACP,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,IAAI;KACtC,UAAA,oBAAC,GAAD;MAAG,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW,KAAA;MAAW,UAAA;KAE1E,CAAA;IACA,CAAA;GACJ;;CACF,CAAA;AACX,CAAC;AACD,KAAK,cAAc"}
+{"version":3,"file":"FeatureItem.mjs","names":["clsx","Flexbox"],"sources":["../../../src/awesome/Features/FeatureItem.tsx"],"sourcesContent":["'use client';\n\nimport './style.css';\n\nimport * as stylex from '@stylexjs/stylex';\nimport clsx from 'clsx';\nimport { type CSSProperties, memo, useMemo } from 'react';\n\nimport A from '@/A';\nimport { Center, Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport Img from '@/Img';\nimport { styleProps } from '@/styles/stylex/props';\nimport Text from '@/Text';\n\nimport { childStyles, styles } from './style';\nimport type { FeatureItemProps } from './type';\n\nconst Image = memo<{ className?: string; image: string; style?: CSSProperties; title: string }>(\n  ({ image, className, title, style }) => {\n    return image.startsWith('http') ? (\n      <Img alt={title} className={className} src={image} style={style} />\n    ) : (\n      <Center className={className} style={style}>\n        {image}\n      </Center>\n    );\n  },\n);\n\nconst Item = memo<FeatureItemProps>(\n  ({\n    style,\n    className,\n    row,\n    column,\n    description,\n    image,\n    title,\n    link,\n    icon,\n    imageStyle,\n    openExternal,\n    ...rest\n  }) => {\n    const rowNumber = row || 7;\n    const hasLink = Boolean(link);\n\n    const cssVariables = useMemo<Record<string, string>>(\n      () => ({\n        '--features-row-num': String(rowNumber),\n        '--features-title-hover-size': hasLink ? '14px' : '20px',\n      }),\n      [rowNumber, hasLink],\n    );\n\n    return (\n      <div\n        {...styleProps(styles.container, clsx('lobe-features-item', className), {\n          ...cssVariables,\n          gridColumn: `span ${column || 1}`,\n          gridRow: `span ${rowNumber}`,\n          ...style,\n        })}\n        {...rest}\n      >\n        <div {...stylex.props(styles.cell)}>\n          {image ||\n            (icon && (\n              <Center {...styleProps(styles.imgContainer, undefined, imageStyle)}>\n                {icon && <Icon icon={icon} style={childStyles.img} />}\n                {image && <Image image={image} style={childStyles.img} title={title} />}\n              </Center>\n            ))}\n          {title && (\n            <Flexbox\n              horizontal\n              align={'center'}\n              as={'h3'}\n              className={stylex.props(styles.title).className}\n              gap={8}\n            >\n              {title}\n            </Flexbox>\n          )}\n          {description && (\n            <Text\n              style={childStyles.desc}\n              ellipsis={{\n                rows: 4,\n              }}\n            >\n              {description}\n            </Text>\n          )}\n          {link && (\n            <div {...stylex.props(styles.link)}>\n              <A href={link} rel=\"noreferrer\" target={openExternal ? '_blank' : undefined}>\n                Read More\n              </A>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nItem.displayName = 'FeatureItem';\n\nexport default Item;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,QAAQ,MAKV,EACF,OACA,WACA,OACA,YACI;CACJ,OAAO,MAAM,WAAW,MAAM,IAAI,oBAAC,KAAD;EAAK,KAAK;EAAkB;EAAW,KAAK;EAAc;CAAQ,CAAA,IAAI,oBAAC,QAAD;EAAmB;EAAkB;EACtI,UAAA;CACK,CAAA;AACd,CAAC;AACD,MAAM,OAAO,MAAwB,EACnC,OACA,WACA,KACA,QACA,aACA,OACA,OACA,MACA,MACA,YACA,cACA,GAAG,WACC;CACJ,MAAM,YAAY,OAAO;CACzB,MAAM,UAAU,QAAQ,IAAI;CAC5B,MAAM,eAAe,eAAuC;EAC1D,sBAAsB,OAAO,SAAS;EACtC,+BAA+B,UAAU,SAAS;CACpD,IAAI,CAAC,WAAW,OAAO,CAAC;CACxB,OAAO,oBAAC,OAAD;EAAK,GAAI,WAAW,OAAO,WAAWA,OAAK,sBAAsB,SAAS,GAAG;GAClF,GAAG;GACH,YAAY,QAAQ,UAAU;GAC9B,SAAS,QAAQ;GACjB,GAAG;EACL,CAAC;EAAG,GAAI;EACF,UAAA,qBAAC,OAAD;GAAK,GAAI,OAAO,MAAM,OAAO,IAAI;GAAjC,UAAA;IACG,SAAS,QAAQ,qBAAC,QAAD;KAAQ,GAAI,WAAW,OAAO,cAAc,KAAA,GAAW,UAAU;KAAjE,UAAA,CACX,QAAQ,oBAAC,MAAD;MAAY;MAAM,OAAO,YAAY;KAAM,CAAA,GACnD,SAAS,oBAAC,OAAD;MAAc;MAAO,OAAO,YAAY;MAAY;KAAQ,CAAA,CAChE;;IACX,SAAS,oBAACC,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,IAAI;KAAM,WAAW,OAAO,MAAM,OAAO,KAAK,CAAC,CAAC;KAAW,KAAK;KAC1G,UAAA;IACM,CAAA;IACV,eAAe,oBAAC,MAAD;KAAM,OAAO,YAAY;KAAM,UAAU,EAC3D,MAAM,EACR;KACS,UAAA;IACG,CAAA;IACP,QAAQ,oBAAC,OAAD;KAAK,GAAI,OAAO,MAAM,OAAO,IAAI;KACtC,UAAA,oBAAC,GAAD;MAAG,MAAM;MAAM,KAAI;MAAa,QAAQ,eAAe,WAAW,KAAA;MAAW,UAAA;KAE1E,CAAA;IACA,CAAA;GACJ;;CACF,CAAA;AACX,CAAC;AACD,KAAK,cAAc"}

package/es/awesome/Giscus/style.mjs

@@ -1,7 +1,7 @@
+import { withAlpha } from "../../utils/colorMath.mjs";
 import { useTheme } from "../../styles/theme/scope.mjs";
 import { safeReadableColor } from "../../utils/safeReadableColor.mjs";
 import { useMemo } from "react";
-import { rgba } from "polished";
 //#region src/awesome/Giscus/style.ts
 const useStyles = () => {
 	const theme = useTheme();
@@ -26,22 +26,22 @@ const useStyles = () => {
       --color-prettylights-syntax-variable: ${colorRed};
       --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};
       --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};
-      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, .4)};
+      --color-prettylights-syntax-invalid-illegal-bg: ${withAlpha(colorRed, .4)};
       --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};
-      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, .6)};
+      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(colorRed, .6)};
       --color-prettylights-syntax-string-regexp: ${colorGreen};
       --color-prettylights-syntax-markup-list: ${colorOrange};
       --color-prettylights-syntax-markup-heading: ${colorBlue};
       --color-prettylights-syntax-markup-italic: ${colorTextSecondary};
       --color-prettylights-syntax-markup-bold: ${colorTextSecondary};
       --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-deleted-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-inserted-text: ${colorGreen};
-      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, .2)};
+      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, .2)};
       --color-prettylights-syntax-markup-changed-text: ${colorOrange};
-      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, .2)};
+      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, .2)};
       --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};
-      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, .2)};
+      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(colorBlue, .2)};
       --color-prettylights-syntax-meta-diff-range: ${colorOrange};
       --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};
       --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};
@@ -70,8 +70,8 @@ const useStyles = () => {
         ${safeReadableColor(theme.colorPrimary)} 50%,
         transparent
       );
-      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, .5)};
-      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, .5)};
+      --color-btn-primary-disabled-bg: ${withAlpha(theme.colorPrimary, .5)};
+      --color-btn-primary-disabled-border: ${withAlpha(theme.colorPrimaryBorder, .5)};
       --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};
       --color-segmented-control-bg: ${theme.colorFillTertiary};
       --color-segmented-control-button-bg: transparent;

package/es/awesome/Giscus/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { rgba } from 'polished';\nimport { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const styles = `\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${rgba(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${rgba(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${rgba(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${rgba(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${rgba(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${rgba(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${rgba(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,SAAS;;6CAE4B,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;0DAClB,mBAAmB;wDACrB,KAAK,UAAU,EAAG,EAAE;mDACzB,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,KAAK,UAAU,EAAG,EAAE;0DACjB,WAAW;wDACb,KAAK,YAAY,EAAG,EAAE;yDACrB,YAAY;uDACd,KAAK,UAAU,EAAG,EAAE;yDAClB,mBAAmB;uDACrB,KAAK,WAAW,EAAG,EAAE;qDACvB,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,KAAK,MAAM,cAAc,EAAG,EAAE;6CAC1B,KAAK,MAAM,oBAAoB,EAAG,EAAE;mDAC9B,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/Giscus/style.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { useTheme } from '@/styles/theme/scope';\nimport { withAlpha } from '@/utils/colorMath';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\nexport const useStyles = () => {\n  const theme = useTheme();\n  const colorText = theme.colorText;\n  const colorTextSecondary = theme.colorTextSecondary;\n  const colorTextTertiary = theme.colorTextTertiary;\n  const colorRed = theme.colorError;\n  const colorOrange = theme.colorWarning;\n  const colorGreen = theme.colorSuccess;\n  const colorBlue = theme.colorInfo;\n  const loaderContainer = theme.isDarkMode\n    ? 'https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg'\n    : 'https://github.com/images/modules/pulls/progressive-disclosure-line.svg';\n  const loadingImage = theme.isDarkMode\n    ? 'https://github.githubassets.com/images/mona-loading-dark.gif'\n    : 'https://github.githubassets.com/images/mona-loading-default.gif';\n  const styles = `\n    main {\n      --color-prettylights-syntax-comment: ${colorTextTertiary};\n      --color-prettylights-syntax-constant: ${colorGreen};\n      --color-prettylights-syntax-entity: ${colorOrange};\n      --color-prettylights-syntax-storage-modifier-import: ${colorRed};\n      --color-prettylights-syntax-entity-tag: ${colorBlue};\n      --color-prettylights-syntax-keyword: ${colorBlue};\n      --color-prettylights-syntax-string: ${colorGreen};\n      --color-prettylights-syntax-variable: ${colorRed};\n      --color-prettylights-syntax-brackethighlighter-unmatched: ${colorRed};\n      --color-prettylights-syntax-invalid-illegal-text: ${colorTextSecondary};\n      --color-prettylights-syntax-invalid-illegal-bg: ${withAlpha(colorRed, 0.4)};\n      --color-prettylights-syntax-carriage-return-text: ${colorTextSecondary};\n      --color-prettylights-syntax-carriage-return-bg: ${withAlpha(colorRed, 0.6)};\n      --color-prettylights-syntax-string-regexp: ${colorGreen};\n      --color-prettylights-syntax-markup-list: ${colorOrange};\n      --color-prettylights-syntax-markup-heading: ${colorBlue};\n      --color-prettylights-syntax-markup-italic: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-bold: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-deleted-bg: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-inserted-text: ${colorGreen};\n      --color-prettylights-syntax-markup-inserted-bg: ${withAlpha(colorGreen, 0.2)};\n      --color-prettylights-syntax-markup-changed-text: ${colorOrange};\n      --color-prettylights-syntax-markup-changed-bg: ${withAlpha(colorRed, 0.2)};\n      --color-prettylights-syntax-markup-ignored-text: ${colorTextSecondary};\n      --color-prettylights-syntax-markup-ignored-bg: ${withAlpha(colorBlue, 0.2)};\n      --color-prettylights-syntax-meta-diff-range: ${colorOrange};\n      --color-prettylights-syntax-brackethighlighter-angle: ${colorTextSecondary};\n      --color-prettylights-syntax-sublimelinter-gutter-mark: ${colorTextTertiary};\n      --color-prettylights-syntax-constant-other-reference-link: ${colorBlue};\n      --color-btn-text: ${theme.colorText};\n      --color-btn-bg: ${theme.colorFillTertiary};\n      --color-btn-border: ${theme.colorBorderSecondary};\n      --color-btn-shadow: 0 0 transparent;\n      --color-btn-inset-shadow: 0 0 transparent;\n      --color-btn-hover-bg: ${theme.colorFillSecondary};\n      --color-btn-hover-border: ${theme.colorBorder};\n      --color-btn-active-bg: ${theme.colorFillSecondary};\n      --color-btn-active-border: ${theme.colorBorder};\n      --color-btn-selected-bg: ${theme.colorFillSecondary};\n      --color-btn-primary-text: ${safeReadableColor(theme.colorPrimary)};\n      --color-btn-primary-bg: ${theme.colorPrimary};\n      --color-btn-primary-border: ${theme.colorPrimaryBorder};\n      --color-btn-primary-shadow: 0 0 transparent;\n      --color-btn-primary-inset-shadow: 0 0 transparent;\n      --color-btn-primary-hover-bg: ${theme.colorPrimaryHover};\n      --color-btn-primary-hover-border: ${theme.colorPrimaryBorderHover};\n      --color-btn-primary-selected-bg: ${theme.colorPrimaryActive};\n      --color-btn-primary-selected-shadow: 0 0 transparent;\n      --color-btn-primary-disabled-text: color-mix(\n        in srgb,\n        ${safeReadableColor(theme.colorPrimary)} 50%,\n        transparent\n      );\n      --color-btn-primary-disabled-bg: ${withAlpha(theme.colorPrimary, 0.5)};\n      --color-btn-primary-disabled-border: ${withAlpha(theme.colorPrimaryBorder, 0.5)};\n      --color-action-list-item-default-hover-bg: ${theme.colorFillQuaternary};\n      --color-segmented-control-bg: ${theme.colorFillTertiary};\n      --color-segmented-control-button-bg: transparent;\n      --color-segmented-control-button-selected-border: ${theme.colorBorder};\n      --color-fg-default: ${theme.colorText};\n      --color-fg-muted: ${theme.colorTextSecondary};\n      --color-fg-subtle: ${theme.colorTextQuaternary};\n      --color-canvas-default: transparent;\n      --color-canvas-overlay: ${theme.colorBgElevated};\n      --color-canvas-inset: transparent;\n      --color-canvas-subtle: ${theme.colorFillQuaternary};\n      --color-border-default: ${theme.colorBorder};\n      --color-border-muted: ${theme.colorBorderSecondary};\n      --color-neutral-muted: ${theme.colorFillQuaternary};\n      --color-neutral-subtle: ${theme.colorFillTertiary};\n      --color-accent-fg: ${theme.colorInfo};\n      --color-accent-emphasis: ${theme.colorInfoBorderHover};\n      --color-accent-muted: ${theme.colorInfoBorder};\n      --color-accent-subtle: ${theme.colorInfoBg};\n      --color-success-fg: ${theme.colorSuccess};\n      --color-attention-fg: ${theme.colorWarning};\n      --color-attention-muted: ${theme.colorWarningBorder};\n      --color-attention-subtle: ${theme.colorWarningBg};\n      --color-danger-fg: ${theme.colorError};\n      --color-danger-muted: ${theme.colorErrorBorder};\n      --color-danger-subtle: ${theme.colorErrorBg};\n      --color-primer-shadow-inset: 0 0 transparent;\n      --color-scale-gray-7: ${theme.colorBgContainer};\n      --color-scale-blue-8: ${theme.colorInfoBg};\n      --color-social-reaction-bg-hover: ${theme.colorFillSecondary};\n      --color-social-reaction-bg-reacted-hover: ${theme.colorInfoBgHover};\n\n      .markdown pre {\n        color: ${colorText};\n      }\n\n      .pagination-loader-container {\n        background-image: url(${loaderContainer});\n      }\n\n      .gsc-pagination-button {\n        background-color: var(--color-btn-bg);\n      }\n\n      .gsc-reactions-popover {\n        width: 170px;\n\n        > .m-2 {\n          display: flex;\n          flex-wrap: wrap;\n          gap: 8px;\n        }\n      }\n\n      .gsc-emoji-button.has-reacted {\n        border-color: ${theme.colorInfoBorderHover};\n        border-radius: ${theme.borderRadius}px;\n      }\n\n      .gsc-loading-image {\n        background-image: url(${loadingImage});\n      }\n    }\n  `;\n\n  return useMemo(() => `data:text/css;base64,${btoa(styles)}`, [styles]);\n};\n\nexport const formatLang = (lang: string) => {\n  if (['zh_CN', 'zh_TW'].includes(lang)) {\n    return lang.replace('_', '-');\n  } else if (lang === 'zh_HK') {\n    return 'zh-TW';\n  } else {\n    return lang.split('_')[0];\n  }\n};\n"],"mappings":";;;;;AAMA,MAAa,kBAAkB;CAC7B,MAAM,QAAQ,SAAS;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,qBAAqB,MAAM;CACjC,MAAM,oBAAoB,MAAM;CAChC,MAAM,WAAW,MAAM;CACvB,MAAM,cAAc,MAAM;CAC1B,MAAM,aAAa,MAAM;CACzB,MAAM,YAAY,MAAM;CACxB,MAAM,kBAAkB,MAAM,aAC1B,iFACA;CACJ,MAAM,eAAe,MAAM,aACvB,iEACA;CACJ,MAAM,SAAS;;6CAE4B,kBAAkB;8CACjB,WAAW;4CACb,YAAY;6DACK,SAAS;gDACtB,UAAU;6CACb,UAAU;4CACX,WAAW;8CACT,SAAS;kEACW,SAAS;0DACjB,mBAAmB;wDACrB,UAAU,UAAU,EAAG,EAAE;0DACvB,mBAAmB;wDACrB,UAAU,UAAU,EAAG,EAAE;mDAC9B,WAAW;iDACb,YAAY;oDACT,UAAU;mDACX,mBAAmB;iDACrB,mBAAmB;yDACX,mBAAmB;uDACrB,UAAU,UAAU,EAAG,EAAE;0DACtB,WAAW;wDACb,UAAU,YAAY,EAAG,EAAE;yDAC1B,YAAY;uDACd,UAAU,UAAU,EAAG,EAAE;yDACvB,mBAAmB;uDACrB,UAAU,WAAW,EAAG,EAAE;qDAC5B,YAAY;8DACH,mBAAmB;+DAClB,kBAAkB;mEACd,UAAU;0BACnD,MAAM,UAAU;wBAClB,MAAM,kBAAkB;4BACpB,MAAM,qBAAqB;;;8BAGzB,MAAM,mBAAmB;kCACrB,MAAM,YAAY;+BACrB,MAAM,mBAAmB;mCACrB,MAAM,YAAY;iCACpB,MAAM,mBAAmB;kCACxB,kBAAkB,MAAM,YAAY,EAAE;gCACxC,MAAM,aAAa;oCACf,MAAM,mBAAmB;;;sCAGvB,MAAM,kBAAkB;0CACpB,MAAM,wBAAwB;yCAC/B,MAAM,mBAAmB;;;;UAIxD,kBAAkB,MAAM,YAAY,EAAE;;;yCAGP,UAAU,MAAM,cAAc,EAAG,EAAE;6CAC/B,UAAU,MAAM,oBAAoB,EAAG,EAAE;mDACnC,MAAM,oBAAoB;sCACvC,MAAM,kBAAkB;;0DAEJ,MAAM,YAAY;4BAChD,MAAM,UAAU;0BAClB,MAAM,mBAAmB;2BACxB,MAAM,oBAAoB;;gCAErB,MAAM,gBAAgB;;+BAEvB,MAAM,oBAAoB;gCACzB,MAAM,YAAY;8BACpB,MAAM,qBAAqB;+BAC1B,MAAM,oBAAoB;gCACzB,MAAM,kBAAkB;2BAC7B,MAAM,UAAU;iCACV,MAAM,qBAAqB;8BAC9B,MAAM,gBAAgB;+BACrB,MAAM,YAAY;4BACrB,MAAM,aAAa;8BACjB,MAAM,aAAa;iCAChB,MAAM,mBAAmB;kCACxB,MAAM,eAAe;2BAC5B,MAAM,WAAW;8BACd,MAAM,iBAAiB;+BACtB,MAAM,aAAa;;8BAEpB,MAAM,iBAAiB;8BACvB,MAAM,YAAY;0CACN,MAAM,mBAAmB;kDACjB,MAAM,iBAAiB;;;iBAGxD,UAAU;;;;gCAIK,gBAAgB;;;;;;;;;;;;;;;;;;wBAkBxB,MAAM,qBAAqB;yBAC1B,MAAM,aAAa;;;;gCAIZ,aAAa;;;;CAK3C,OAAO,cAAc,wBAAwB,KAAK,MAAM,KAAK,CAAC,MAAM,CAAC;AACvE;AAEA,MAAa,cAAc,SAAiB;CAC1C,IAAI,CAAC,SAAS,OAAO,CAAC,CAAC,SAAS,IAAI,GAClC,OAAO,KAAK,QAAQ,KAAK,GAAG;MACvB,IAAI,SAAS,SAClB,OAAO;MAEP,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC;AAE3B"}

package/es/awesome/Grainient/Grainient.d.mts

@@ -0,0 +1,11 @@
+import { GrainientProps } from "./type.mjs";
+//#region src/awesome/Grainient/Grainient.d.ts
+/**
+ * Animated grainy gradient (WebGL2, no extra dependency). Fills its nearest positioned ancestor,
+ * pauses when off-screen or the tab is hidden, and draws one still frame when reduced motion is
+ * preferred. Without WebGL2 it renders nothing, so give the parent a fallback background.
+ */
+declare const Grainient: import("react").NamedExoticComponent<GrainientProps>;
+//#endregion
+export { Grainient as default };
+//# sourceMappingURL=Grainient.d.mts.map