npm - @mieweb/ui - Versions diffs - 0.8.0-dev.15 → 0.8.0-dev.16 - Mend

@mieweb/ui 0.8.0-dev.15 → 0.8.0-dev.16

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.

Files changed (120) hide show

package/dist/{chunk-FN6VHMLM.cjs.map → chunk-IB54SKWB.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Markdown/HtmlPreviewBlock.tsx"],"names":["useState","useRef","useEffect","useCallback","jsxs","Fragment","Button","jsx","Code","Eye","Maximize2","FenceBlock"],"mappings":"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","file":"chunk-~~FN6VHMLM~~.cjs","sourcesContent":["/** Sandboxed iframe preview for HTML code blocks. */\nimport { Code, Eye, Maximize2 } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\nimport { FenceBlock } from './FenceBlock';\n\ninterface HtmlPreviewBlockProps {\n code: string;\n id: string;\n}\n\nfunction isFullDocument(html: string): boolean {\n return /<!DOCTYPE\|<html/i.test(html);\n}\n\nfunction wrapFragment(html: string): string {\n return `<!DOCTYPE html>\n<html>\n<head><meta charset=\"utf-8\"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>\n<body>${html}</body>\n</html>`;\n}\n\nexport const HtmlPreviewBlock: React.FC<HtmlPreviewBlockProps> = ({\n code,\n id,\n}) => {\n const [showPreview, setShowPreview] = useState(false);\n const [expanded, setExpanded] = useState(false);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const [iframeHeight, setIframeHeight] = useState(200);\n\n const srcdoc = isFullDocument(code) ? code : wrapFragment(code);\n\n useEffect(() => {\n function handleMessage(event: globalThis.MessageEvent) {\n // Sandboxed srcDoc iframes report origin \"null\"; validate source to prevent spoofing.\n if (event.origin !== 'null' && event.origin !== window.location.origin)\n return;\n if (event.source !== iframeRef.current?.contentWindow) return;\n if (event.data?.type === 'HTML_PREVIEW_RESIZE' && event.data?.id === id) {\n setIframeHeight(Math.min(Math.max(event.data.height, 200), 4000));\n }\n }\n window.addEventListener('message', handleMessage);\n return () => window.removeEventListener('message', handleMessage);\n }, [id]);\n\n useEffect(() => {\n if (!expanded) return;\n function handleKey(e: KeyboardEvent) {\n if (e.key === 'Escape') setExpanded(false);\n }\n document.addEventListener('keydown', handleKey);\n return () => document.removeEventListener('keydown', handleKey);\n }, [expanded]);\n\n const togglePreview = useCallback(() => setShowPreview((v) => !v), []);\n\n const headerActions = (\n <>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={togglePreview}\n className=\"h-7 gap-1 px-2 text-xs\"\n >\n {showPreview ? (\n <Code className=\"h-3 w-3\" />\n ) : (\n <Eye className=\"h-3 w-3\" />\n )}\n {showPreview ? 'Code' : 'Preview'}\n </Button>\n {showPreview && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setExpanded(true)}\n className=\"h-7 w-7 p-0\"\n aria-label=\"Expand preview\"\n >\n <Maximize2 className=\"h-3 w-3\" />\n </Button>\n )}\n </>\n );\n\n return (\n <>\n <FenceBlock code={code} language=\"html\" headerActions={headerActions}>\n <div className=\"relative\">\n {showPreview ? (\n <iframe\n ref={iframeRef}\n srcDoc={srcdoc}\n // `allow-scripts` lets previewed HTML run its own JS (charts, demos,\n // and the optional resize-postMessage handshake). It is intentionally\n // NOT paired with `allow-same-origin`, so the content runs in an\n // opaque (null) origin with no access to this page, cookies, or storage.\n sandbox=\"allow-scripts allow-forms\"\n referrerPolicy=\"no-referrer\"\n className=\"w-full border-0\"\n style={{ height: iframeHeight }}\n title=\"HTML Preview\"\n />\n ) : (\n <pre className=\"overflow-x-auto p-3 text-sm\">\n <code>{code}</code>\n </pre>\n )}\n </div>\n </FenceBlock>\n\n {expanded && (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"HTML Preview\"\n >\n <button\n type=\"button\"\n aria-label=\"Close preview\"\n className=\"absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0\"\n onClick={() => setExpanded(false)}\n />\n <div className=\"relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900\">\n <div className=\"flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700\">\n <span className=\"text-sm font-medium\">HTML Preview</span>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setExpanded(false)}\n >\n Close\n </Button>\n </div>\n <iframe\n srcDoc={srcdoc}\n sandbox=\"allow-scripts allow-forms\"\n referrerPolicy=\"no-referrer\"\n className=\"h-full w-full border-0\"\n title=\"HTML Preview (expanded)\"\n />\n </div>\n </div>\n )}\n </>\n );\n};\n"]}
1	+ {"version":3,"sources":["../src/components/Markdown/HtmlPreviewBlock.tsx"],"names":["useState","useRef","useEffect","useCallback","jsxs","Fragment","Button","jsx","Code","Eye","Maximize2","FenceBlock"],"mappings":"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","file":"chunk-IB54SKWB.cjs","sourcesContent":["/** Sandboxed iframe preview for HTML code blocks. */\nimport { Code, Eye, Maximize2 } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\nimport { FenceBlock } from './FenceBlock';\n\ninterface HtmlPreviewBlockProps {\n code: string;\n id: string;\n}\n\nfunction isFullDocument(html: string): boolean {\n return /<!DOCTYPE\|<html/i.test(html);\n}\n\nfunction wrapFragment(html: string): string {\n return `<!DOCTYPE html>\n<html>\n<head><meta charset=\"utf-8\"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>\n<body>${html}</body>\n</html>`;\n}\n\nexport const HtmlPreviewBlock: React.FC<HtmlPreviewBlockProps> = ({\n code,\n id,\n}) => {\n const [showPreview, setShowPreview] = useState(false);\n const [expanded, setExpanded] = useState(false);\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const [iframeHeight, setIframeHeight] = useState(200);\n\n const srcdoc = isFullDocument(code) ? code : wrapFragment(code);\n\n useEffect(() => {\n function handleMessage(event: globalThis.MessageEvent) {\n // Sandboxed srcDoc iframes report origin \"null\"; validate source to prevent spoofing.\n if (event.origin !== 'null' && event.origin !== window.location.origin)\n return;\n if (event.source !== iframeRef.current?.contentWindow) return;\n if (event.data?.type === 'HTML_PREVIEW_RESIZE' && event.data?.id === id) {\n setIframeHeight(Math.min(Math.max(event.data.height, 200), 4000));\n }\n }\n window.addEventListener('message', handleMessage);\n return () => window.removeEventListener('message', handleMessage);\n }, [id]);\n\n useEffect(() => {\n if (!expanded) return;\n function handleKey(e: KeyboardEvent) {\n if (e.key === 'Escape') setExpanded(false);\n }\n document.addEventListener('keydown', handleKey);\n return () => document.removeEventListener('keydown', handleKey);\n }, [expanded]);\n\n const togglePreview = useCallback(() => setShowPreview((v) => !v), []);\n\n const headerActions = (\n <>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={togglePreview}\n className=\"h-7 gap-1 px-2 text-xs\"\n >\n {showPreview ? (\n <Code className=\"h-3 w-3\" />\n ) : (\n <Eye className=\"h-3 w-3\" />\n )}\n {showPreview ? 'Code' : 'Preview'}\n </Button>\n {showPreview && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setExpanded(true)}\n className=\"h-7 w-7 p-0\"\n aria-label=\"Expand preview\"\n >\n <Maximize2 className=\"h-3 w-3\" />\n </Button>\n )}\n </>\n );\n\n return (\n <>\n <FenceBlock code={code} language=\"html\" headerActions={headerActions}>\n <div className=\"relative\">\n {showPreview ? (\n <iframe\n ref={iframeRef}\n srcDoc={srcdoc}\n // `allow-scripts` lets previewed HTML run its own JS (charts, demos,\n // and the optional resize-postMessage handshake). It is intentionally\n // NOT paired with `allow-same-origin`, so the content runs in an\n // opaque (null) origin with no access to this page, cookies, or storage.\n sandbox=\"allow-scripts allow-forms\"\n referrerPolicy=\"no-referrer\"\n className=\"w-full border-0\"\n style={{ height: iframeHeight }}\n title=\"HTML Preview\"\n />\n ) : (\n <pre className=\"overflow-x-auto p-3 text-sm\">\n <code>{code}</code>\n </pre>\n )}\n </div>\n </FenceBlock>\n\n {expanded && (\n <div\n className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label=\"HTML Preview\"\n >\n <button\n type=\"button\"\n aria-label=\"Close preview\"\n className=\"absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0\"\n onClick={() => setExpanded(false)}\n />\n <div className=\"relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900\">\n <div className=\"flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700\">\n <span className=\"text-sm font-medium\">HTML Preview</span>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={() => setExpanded(false)}\n >\n Close\n </Button>\n </div>\n <iframe\n srcDoc={srcdoc}\n sandbox=\"allow-scripts allow-forms\"\n referrerPolicy=\"no-referrer\"\n className=\"h-full w-full border-0\"\n title=\"HTML Preview (expanded)\"\n />\n </div>\n </div>\n )}\n </>\n );\n};\n"]}

package/dist/{chunk-JP5SGIXA.cjs → chunk-IFDC4TXM.cjs} RENAMED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var chunkRDGRKYQ5_cjs = require('./chunk-RDGRKYQ5.cjs');
+var chunkIINZWUGK_cjs = require('./chunk-IINZWUGK.cjs');
 var chunkJYZW2PZS_cjs = require('./chunk-JYZW2PZS.cjs');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
@@ -119,7 +119,7 @@ var MediaPlayer = React__namespace.forwardRef(
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-destructive-700 dark:text-destructive-300 m-0 text-sm", children: error }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              chunkRDGRKYQ5_cjs.Button,
+              chunkIINZWUGK_cjs.Button,
               {
                 variant: "outline",
                 size: "sm",
@@ -163,5 +163,5 @@ MediaPlayer.displayName = "MediaPlayer";
 exports.MediaPlayer = MediaPlayer;
 exports.inferMediaKind = inferMediaKind;
 exports.mediaPlayerVariants = mediaPlayerVariants;
-//# sourceMappingURL=chunk-JP5SGIXA.cjs.map
-//# sourceMappingURL=chunk-JP5SGIXA.cjs.map
+//# sourceMappingURL=chunk-IFDC4TXM.cjs.map
+//# sourceMappingURL=chunk-IFDC4TXM.cjs.map

package/dist/{chunk-JP5SGIXA.cjs.map → chunk-IFDC4TXM.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/MediaPlayer/MediaPlayer.tsx"],"names":["cva","React","useMediaTransport","jsx","jsxs","Button"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,IAAM,mBAAA,GAAsBA,0BAAA;AAAA,EAC1B,gDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,KAAA,EAAO,EAAA;AAAA,QACP,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAMA,IAAM,gBAAA,GAAmB,gCAAA;AAGlB,SAAS,eAAe,GAAA,EAAwB;AAIrD,EAAA,MAAM,OAAO,GAAA,CAAI,KAAA,CAAM,MAAA,EAAQ,CAAC,EAAE,CAAC,CAAA;AACnC,EAAA,OAAO,gBAAA,CAAiB,IAAA,CAAK,IAAI,CAAA,GAAI,OAAA,GAAU,OAAA;AACjD;AAeO,IAAM,WAAA,GAAoBC,gBAAA,CAAA,UAAA;AAAA,EAC/B,CACE;AAAA,IACE,GAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,OAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA,EAAc,SAAA;AAAA,IACd;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAUA,0BAAwB,IAAI,CAAA;AAK5D,IAAMA,2BAAU,MAAM;AACpB,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,IACf,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AACR,IAAA,MAAM,YAAA,GAAe,IAAA,IAAQ,cAAA,CAAe,GAAG,CAAA;AAE/C,IAAA,MAAM,YAAYC,mCAAA,CAAkB;AAAA,MAClC,YAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,OAAA,EAAS,CAAC,GAAA,KAAQ;AAChB,QAAA,QAAA,CAAS,sDAAsD,CAAA;AAC/D,QAAA,OAAA,GAAU,GAAG,CAAA;AAAA,MACf,CAAA;AAAA,MACA,UAAA,EAAY,QAAA;AAAA,MACZ,UAAA,EAAY,UAAU,GAAG,CAAA;AAAA,KAC1B,CAAA;AAED,IAAA,MAAM,EAAE,eAAA,EAAiB,YAAA,EAAa,GAAI,SAAA;AAE1C,IAAA,MAAM,UAAA,GAAmBD,gBAAA,CAAA,WAAA;AAAA,MACvB,CAAC,EAAA,KAAmD;AAClD,QAAA,eAAA,CAAgB,EAAE,CAAA;AAClB,QAAA,IAAI,eAAA,EAAiB;AACnB,UAAC,gBAAsD,OAAA,GAAU,EAAA;AAAA,QACnE;AAAA,MACF,CAAA;AAAA,MACA,CAAC,iBAAiB,eAAe;AAAA,KACnC;AAEA,IAAMA,gBAAA,CAAA,mBAAA;AAAA,MACJ,GAAA;AAAA,MACA,OAAuB;AAAA,QACrB,UAAU,SAAA,CAAU,QAAA;AAAA,QACpB,MAAM,SAAA,CAAU,IAAA;AAAA,QAChB,OAAO,SAAA,CAAU,KAAA;AAAA,QACjB,kBAAkB,SAAA,CAAU,gBAAA;AAAA,QAC5B,eAAe,SAAA,CAAU,aAAA;AAAA,QACzB,UAAU,SAAA,CAAU,QAAA;AAAA,QACpB,iBAAiB,SAAA,CAAU,eAAA;AAAA,QAC3B,IAAI,YAAA,GAAe;AACjB,UAAA,OAAO,YAAA;AAAA,QACT;AAAA,OACF,CAAA;AAAA,MACA,CAAC,WAAW,YAAY;AAAA,KAC1B;AAEA,IAAA,MAAM,WAAA,GAAoBA,6BAAY,MAAM;AAC1C,MAAA,QAAA,CAAS,IAAI,CAAA;AACb,MAAA,YAAA,EAAc,IAAA,EAAK;AAAA,IACrB,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,IAAA,MAAM,gBAAA,GAAmB;AAAA,MACvB,GAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA,EAAc;AAAA,KAChB;AAEA,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,uBACEE,cAAA,CAAC,SAAI,SAAA,EAAW,mBAAA,CAAoB,EAAE,OAAA,EAAS,SAAA,EAAW,CAAA,EACxD,QAAA,kBAAAC,eAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,OAAA;AAAA,UACL,SAAA,EAAU,oIAAA;AAAA,UAIV,QAAA,EAAA;AAAA,4BAAAD,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4DAAA,EACV,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,4BAGAA,cAAA;AAAA,cAACE,wBAAA;AAAA,cAAA;AAAA,gBACC,OAAA,EAAQ,SAAA;AAAA,gBACR,IAAA,EAAK,IAAA;AAAA,gBACL,SAAA,EAAU,eAAA;AAAA,gBACV,OAAA,EAAS,WAAA;AAAA,gBACV,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,OACF,EACF,CAAA;AAAA,IAEJ;AAEA,IAAA,uBACEF,cAAA,CAAC,SAAI,SAAA,EAAW,mBAAA,CAAoB,EAAE,OAAA,EAAS,SAAA,EAAW,CAAA,EACvD,QAAA,EAAA,YAAA,KAAiB,OAAA;AAAA;AAAA;AAAA;AAAA,sBAIhBA,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,UAAA;AAAA,UACL,WAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAU,oDAAA;AAAA,UACT,GAAG;AAAA;AAAA;AACN;AAAA;AAAA,sBAGAA,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,UAAA;AAAA,UACL,SAAA,EAAU,uBAAA;AAAA,UACT,GAAG;AAAA;AAAA;AACN,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-JP5SGIXA.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '../Button';\nimport { useMediaTransport } from '../../hooks/useMediaTransport';\n\n// ============================================================================\n// Types & Interfaces\n// ============================================================================\n\nexport type MediaPlayerState =\n \| 'idle'\n \| 'loading'\n \| 'playing'\n \| 'paused'\n \| 'error';\n\nexport type MediaKind = 'video' \| 'audio';\n\n/** Ref handle for controlling {@link MediaPlayer} programmatically. /\nexport interface MediaPlayerRef {\n /* Seek to a specific time in milliseconds. /\n seekToMs: (timeMs: number) => void;\n /* Start playback. /\n play: () => void;\n /* Pause playback. /\n pause: () => void;\n /* Get current playback time in milliseconds. /\n getCurrentTimeMs: () => number;\n /* Get total duration in milliseconds. /\n getDurationMs: () => number;\n /* Whether playback is currently paused. /\n isPaused: () => boolean;\n /* Set playback speed multiplier. /\n setPlaybackRate: (rate: number) => void;\n /\n The underlying media element.\n * Escape hatch for host integrations (e.g. thumbnail capture); prefer the\n * typed methods above for playback control.\n /\n mediaElement: HTMLVideoElement \| HTMLAudioElement \| null;\n}\n\nexport interface MediaPlayerProps extends VariantProps<\n typeof mediaPlayerVariants\n> {\n /* Media source URL. /\n src: string;\n /* Force the media kind; when omitted it is inferred from the src extension. /\n kind?: MediaKind;\n /* Whether to show native controls (default `true`). /\n controls?: boolean;\n /* Callback when playback state changes. /\n onStateChange?: (state: MediaPlayerState) => void;\n /* Callback when playback ends. /\n onEnded?: () => void;\n /* Callback when an error occurs. /\n onError?: (error: Error) => void;\n /* Callback on time updates (milliseconds). /\n onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n /* Additional class name. /\n className?: string;\n /* Accessible label for the media element. /\n 'aria-label'?: string;\n /\n Transitional: exposes the raw media element to legacy consumers.\n * Prefer {@link MediaPlayerRef} for playback control.\n /\n mediaElementRef?: React.RefObject<HTMLVideoElement \| HTMLAudioElement \| null>;\n}\n\n// ============================================================================\n// Variants\n// ============================================================================\n\nconst mediaPlayerVariants = cva(\n 'flex h-full w-full items-center justify-center',\n {\n variants: {\n variant: {\n plain: '',\n card: 'rounded-xl border border-border bg-card text-card-foreground p-2',\n },\n },\n defaultVariants: {\n variant: 'plain',\n },\n }\n);\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst VIDEO_EXTENSIONS = /\\.(mp4\|mov\|avi\|webm\|mkv\|m4v)$/i;\n\n/* Infer media kind from a URL's file extension; defaults to audio. /\nexport function inferMediaKind(src: string): MediaKind {\n // Strip any query string / fragment before matching. Testing the extension\n // against the full URL required a trailing `.`, which backtracks\n // polynomially on crafted inputs (ReDoS); splitting first is linear.\n const path = src.split(/[?#]/, 1)[0];\n return VIDEO_EXTENSIONS.test(path) ? 'video' : 'audio';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/*\n Media playback surface for audio and video with a shared imperative handle.\n \n Renders a native `<video>` or `<audio>` element (kind inferred from the src\n * extension unless forced) with themed error/retry handling. Playback state and\n * controls come from the shared {@link useMediaTransport} hook and are exposed\n * through {@link MediaPlayerRef} (all times in milliseconds) — consumers should\n * not reach into the DOM element directly.\n /\nexport const MediaPlayer = React.forwardRef<MediaPlayerRef, MediaPlayerProps>(\n (\n {\n src,\n kind,\n controls = true,\n variant,\n onStateChange,\n onEnded,\n onError,\n onTimeUpdate,\n className,\n 'aria-label': ariaLabel,\n mediaElementRef,\n },\n ref\n ) => {\n const [error, setError] = React.useState<string \| null>(null);\n\n // A failed load must not outlive its src: clearing on change lets a host\n // swap in a corrected URL without being trapped on the error surface\n // (which unmounts the media element, so the new src would never load).\n React.useEffect(() => {\n setError(null);\n }, [src]);\n const resolvedKind = kind ?? inferMediaKind(src);\n\n const transport = useMediaTransport({\n onTimeUpdate,\n onStateChange,\n onEnded,\n onError: (err) => {\n setError('Unable to load media. The server may be unavailable.');\n onError?.(err);\n },\n endedState: 'paused',\n errorLabel: `media: ${src}`,\n });\n\n const { setMediaElement, mediaElement } = transport;\n\n const setElement = React.useCallback(\n (el: HTMLVideoElement \| HTMLAudioElement \| null) => {\n setMediaElement(el);\n if (mediaElementRef) {\n (mediaElementRef as React.MutableRefObject<typeof el>).current = el;\n }\n },\n [setMediaElement, mediaElementRef]\n );\n\n React.useImperativeHandle(\n ref,\n (): MediaPlayerRef => ({\n seekToMs: transport.seekToMs,\n play: transport.play,\n pause: transport.pause,\n getCurrentTimeMs: transport.getCurrentTimeMs,\n getDurationMs: transport.getDurationMs,\n isPaused: transport.isPaused,\n setPlaybackRate: transport.setPlaybackRate,\n get mediaElement() {\n return mediaElement;\n },\n }),\n [transport, mediaElement]\n );\n\n const handleRetry = React.useCallback(() => {\n setError(null);\n mediaElement?.load();\n }, [mediaElement]);\n\n const sharedMediaProps = {\n src,\n controls,\n 'aria-label': ariaLabel,\n };\n\n if (error) {\n return (\n <div className={mediaPlayerVariants({ variant, className })}>\n <div\n role=\"alert\"\n className=\"border-destructive/30 bg-destructive/10 flex min-h-36 flex-col items-center justify-center gap-3 rounded-lg border p-8 text-center\"\n >\n {/ destructive-700/300 instead of the base token: #dc2626 on the\n destructive/10 tint is 4.14:1 — below WCAG AA (axe: color-contrast). /}\n <p className=\"text-destructive-700 dark:text-destructive-300 m-0 text-sm\">\n {error}\n </p>\n {/ bg-background: the outline button is transparent, and its text on\n the destructive/10 tint sits exactly at the 4.5:1 AA boundary. */}\n <Button\n variant=\"outline\"\n size=\"sm\"\n className=\"bg-background\"\n onClick={handleRetry}\n >\n Retry\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <div className={mediaPlayerVariants({ variant, className })}>\n {resolvedKind === 'video' ? (\n // Generic media surface: caption tracks belong to the consumer's media\n // resource and are supplied via children, not this transport component.\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <video\n ref={setElement as React.Ref<HTMLVideoElement>}\n playsInline\n className=\"h-auto max-h-full w-auto max-w-full object-contain\"\n {...sharedMediaProps}\n />\n ) : (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <audio\n ref={setElement as React.Ref<HTMLAudioElement>}\n className=\"my-4 w-[90%] max-w-lg\"\n {...sharedMediaProps}\n />\n )}\n </div>\n );\n }\n);\n\nMediaPlayer.displayName = 'MediaPlayer';\n\nexport { mediaPlayerVariants };\n"]}
1	+ {"version":3,"sources":["../src/components/MediaPlayer/MediaPlayer.tsx"],"names":["cva","React","useMediaTransport","jsx","jsxs","Button"],"mappings":"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","file":"chunk-IFDC4TXM.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { Button } from '../Button';\nimport { useMediaTransport } from '../../hooks/useMediaTransport';\n\n// ============================================================================\n// Types & Interfaces\n// ============================================================================\n\nexport type MediaPlayerState =\n \| 'idle'\n \| 'loading'\n \| 'playing'\n \| 'paused'\n \| 'error';\n\nexport type MediaKind = 'video' \| 'audio';\n\n/** Ref handle for controlling {@link MediaPlayer} programmatically. /\nexport interface MediaPlayerRef {\n /* Seek to a specific time in milliseconds. /\n seekToMs: (timeMs: number) => void;\n /* Start playback. /\n play: () => void;\n /* Pause playback. /\n pause: () => void;\n /* Get current playback time in milliseconds. /\n getCurrentTimeMs: () => number;\n /* Get total duration in milliseconds. /\n getDurationMs: () => number;\n /* Whether playback is currently paused. /\n isPaused: () => boolean;\n /* Set playback speed multiplier. /\n setPlaybackRate: (rate: number) => void;\n /\n The underlying media element.\n * Escape hatch for host integrations (e.g. thumbnail capture); prefer the\n * typed methods above for playback control.\n /\n mediaElement: HTMLVideoElement \| HTMLAudioElement \| null;\n}\n\nexport interface MediaPlayerProps extends VariantProps<\n typeof mediaPlayerVariants\n> {\n /* Media source URL. /\n src: string;\n /* Force the media kind; when omitted it is inferred from the src extension. /\n kind?: MediaKind;\n /* Whether to show native controls (default `true`). /\n controls?: boolean;\n /* Callback when playback state changes. /\n onStateChange?: (state: MediaPlayerState) => void;\n /* Callback when playback ends. /\n onEnded?: () => void;\n /* Callback when an error occurs. /\n onError?: (error: Error) => void;\n /* Callback on time updates (milliseconds). /\n onTimeUpdate?: (currentTimeMs: number, durationMs: number) => void;\n /* Additional class name. /\n className?: string;\n /* Accessible label for the media element. /\n 'aria-label'?: string;\n /\n Transitional: exposes the raw media element to legacy consumers.\n * Prefer {@link MediaPlayerRef} for playback control.\n /\n mediaElementRef?: React.RefObject<HTMLVideoElement \| HTMLAudioElement \| null>;\n}\n\n// ============================================================================\n// Variants\n// ============================================================================\n\nconst mediaPlayerVariants = cva(\n 'flex h-full w-full items-center justify-center',\n {\n variants: {\n variant: {\n plain: '',\n card: 'rounded-xl border border-border bg-card text-card-foreground p-2',\n },\n },\n defaultVariants: {\n variant: 'plain',\n },\n }\n);\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nconst VIDEO_EXTENSIONS = /\\.(mp4\|mov\|avi\|webm\|mkv\|m4v)$/i;\n\n/* Infer media kind from a URL's file extension; defaults to audio. /\nexport function inferMediaKind(src: string): MediaKind {\n // Strip any query string / fragment before matching. Testing the extension\n // against the full URL required a trailing `.`, which backtracks\n // polynomially on crafted inputs (ReDoS); splitting first is linear.\n const path = src.split(/[?#]/, 1)[0];\n return VIDEO_EXTENSIONS.test(path) ? 'video' : 'audio';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/*\n Media playback surface for audio and video with a shared imperative handle.\n \n Renders a native `<video>` or `<audio>` element (kind inferred from the src\n * extension unless forced) with themed error/retry handling. Playback state and\n * controls come from the shared {@link useMediaTransport} hook and are exposed\n * through {@link MediaPlayerRef} (all times in milliseconds) — consumers should\n * not reach into the DOM element directly.\n /\nexport const MediaPlayer = React.forwardRef<MediaPlayerRef, MediaPlayerProps>(\n (\n {\n src,\n kind,\n controls = true,\n variant,\n onStateChange,\n onEnded,\n onError,\n onTimeUpdate,\n className,\n 'aria-label': ariaLabel,\n mediaElementRef,\n },\n ref\n ) => {\n const [error, setError] = React.useState<string \| null>(null);\n\n // A failed load must not outlive its src: clearing on change lets a host\n // swap in a corrected URL without being trapped on the error surface\n // (which unmounts the media element, so the new src would never load).\n React.useEffect(() => {\n setError(null);\n }, [src]);\n const resolvedKind = kind ?? inferMediaKind(src);\n\n const transport = useMediaTransport({\n onTimeUpdate,\n onStateChange,\n onEnded,\n onError: (err) => {\n setError('Unable to load media. The server may be unavailable.');\n onError?.(err);\n },\n endedState: 'paused',\n errorLabel: `media: ${src}`,\n });\n\n const { setMediaElement, mediaElement } = transport;\n\n const setElement = React.useCallback(\n (el: HTMLVideoElement \| HTMLAudioElement \| null) => {\n setMediaElement(el);\n if (mediaElementRef) {\n (mediaElementRef as React.MutableRefObject<typeof el>).current = el;\n }\n },\n [setMediaElement, mediaElementRef]\n );\n\n React.useImperativeHandle(\n ref,\n (): MediaPlayerRef => ({\n seekToMs: transport.seekToMs,\n play: transport.play,\n pause: transport.pause,\n getCurrentTimeMs: transport.getCurrentTimeMs,\n getDurationMs: transport.getDurationMs,\n isPaused: transport.isPaused,\n setPlaybackRate: transport.setPlaybackRate,\n get mediaElement() {\n return mediaElement;\n },\n }),\n [transport, mediaElement]\n );\n\n const handleRetry = React.useCallback(() => {\n setError(null);\n mediaElement?.load();\n }, [mediaElement]);\n\n const sharedMediaProps = {\n src,\n controls,\n 'aria-label': ariaLabel,\n };\n\n if (error) {\n return (\n <div className={mediaPlayerVariants({ variant, className })}>\n <div\n role=\"alert\"\n className=\"border-destructive/30 bg-destructive/10 flex min-h-36 flex-col items-center justify-center gap-3 rounded-lg border p-8 text-center\"\n >\n {/ destructive-700/300 instead of the base token: #dc2626 on the\n destructive/10 tint is 4.14:1 — below WCAG AA (axe: color-contrast). /}\n <p className=\"text-destructive-700 dark:text-destructive-300 m-0 text-sm\">\n {error}\n </p>\n {/ bg-background: the outline button is transparent, and its text on\n the destructive/10 tint sits exactly at the 4.5:1 AA boundary. */}\n <Button\n variant=\"outline\"\n size=\"sm\"\n className=\"bg-background\"\n onClick={handleRetry}\n >\n Retry\n </Button>\n </div>\n </div>\n );\n }\n\n return (\n <div className={mediaPlayerVariants({ variant, className })}>\n {resolvedKind === 'video' ? (\n // Generic media surface: caption tracks belong to the consumer's media\n // resource and are supplied via children, not this transport component.\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <video\n ref={setElement as React.Ref<HTMLVideoElement>}\n playsInline\n className=\"h-auto max-h-full w-auto max-w-full object-contain\"\n {...sharedMediaProps}\n />\n ) : (\n // eslint-disable-next-line jsx-a11y/media-has-caption\n <audio\n ref={setElement as React.Ref<HTMLAudioElement>}\n className=\"my-4 w-[90%] max-w-lg\"\n {...sharedMediaProps}\n />\n )}\n </div>\n );\n }\n);\n\nMediaPlayer.displayName = 'MediaPlayer';\n\nexport { mediaPlayerVariants };\n"]}

package/dist/{chunk-RDGRKYQ5.cjs → chunk-IINZWUGK.cjs} RENAMED Viewed

@@ -25,6 +25,38 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+// src/components/Button/button-critical.ts
+var STYLE_ID = "mieweb-ui-button-critical";
+var CRITICAL_CSS = [
+  "@layer utilities{",
+  // Structure: keep icon + label on one line (matches the base utilities
+  // inline-flex items-center justify-center gap-2 min-w-0 whitespace-nowrap).
+  `:where(button[data-slot='button']){display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0.5rem;min-width:0;white-space:nowrap;}`,
+  // Icons and the loading spinner never shrink (matches shrink-0).
+  `:where(button[data-slot='button']) > :where([data-slot='button-icon'],svg){flex-shrink:0;}`,
+  // Label truncates instead of wrapping/overflowing (matches truncate).
+  `:where(button[data-slot='button']) > :where([data-slot='button-label']){min-width:0;overflow:hidden;text-overflow:ellipsis;}`,
+  "}",
+  // Icons passed as children land inside the label span; Tailwind preflight
+  // makes SVGs display:block, which forces line breaks inside the inline
+  // label. Restore inline flow. This rule is deliberately UNLAYERED at
+  // specificity (0,2,2): it must beat Tailwind 3's unlayered preflight
+  // `svg{display:block}` (0,0,1) — layering it would neuter the fix for
+  // exactly the broken-TW3 apps it exists for. It also outranks the
+  // (0,1,1) [&_svg]:inline-block utility on the label, but both declare
+  // the same values, so they never conflict. Known tradeoff:
+  // display utilities on an SVG inside the label slot won't win; consumers
+  // should conditionally render icons instead.
+  `button[data-slot='button'] [data-slot='button-label'] svg{display:inline-block;vertical-align:middle;}`
+].join("");
+function injectButtonCriticalStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CRITICAL_CSS;
+  document.head.appendChild(style);
+}
 var buttonVariants = classVarianceAuthority.cva(
   // Base styles
   [
@@ -97,6 +129,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
+var labelClasses = "truncate [&_svg]:inline-block [&_svg]:align-middle";
 var Button = React__namespace.forwardRef(
   ({
     className,
@@ -116,6 +149,9 @@ var Button = React__namespace.forwardRef(
     const labelRef = React__namespace.useRef(null);
     const innerRef = React__namespace.useRef(null);
     React__namespace.useImperativeHandle(ref, () => innerRef.current);
+    React__namespace.useInsertionEffect(() => {
+      injectButtonCriticalStyles();
+    }, []);
     React__namespace.useLayoutEffect(() => {
       const label = labelRef.current;
       const button = innerRef.current;
@@ -149,11 +185,27 @@ var Button = React__namespace.forwardRef(
         ...props,
         children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {}),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children: loadingText || children })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: labelRef,
+              "data-slot": "button-label",
+              className: labelClasses,
+              children: loadingText || children
+            }
+          )
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          React__namespace.isValidElement(leftIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leftIcon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children }),
-          React__namespace.isValidElement(rightIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: rightIcon })
+          React__namespace.isValidElement(leftIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "button-icon", className: "shrink-0", children: leftIcon }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              ref: labelRef,
+              "data-slot": "button-label",
+              className: labelClasses,
+              children
+            }
+          ),
+          React__namespace.isValidElement(rightIcon) && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "button-icon", className: "shrink-0", children: rightIcon })
         ] })
       }
     );
@@ -196,5 +248,5 @@ function LoadingSpinner() {
 exports.Button = Button;
 exports.buttonVariants = buttonVariants;
-//# sourceMappingURL=chunk-RDGRKYQ5.cjs.map
-//# sourceMappingURL=chunk-RDGRKYQ5.cjs.map
+//# sourceMappingURL=chunk-IINZWUGK.cjs.map
+//# sourceMappingURL=chunk-IINZWUGK.cjs.map

package/dist/chunk-IINZWUGK.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/Button/button-critical.ts","../src/components/Button/Button.tsx"],"names":["cva","React","jsx","cn","jsxs","Fragment"],"mappings":"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","file":"chunk-IINZWUGK.cjs","sourcesContent":["/**\n * Self-healing structural CSS for Button.\n *\n * Button layout relies on Tailwind utilities (`inline-flex`,\n * `whitespace-nowrap`, ...). Consumer apps with a stale safelist copy or a\n * missing `@source` line never generate those classes, so the button falls\n * back to `inline-block` and the icon stacks above the label.\n *\n * Injecting these rules from the component guarantees every consumer gets\n * correct button structure just by upgrading the library — no app-side\n * changes required.\n *\n * Override safety, by consumer setup:\n * - Tailwind 4: utilities live in `@layer utilities`. The structural rules\n * below join that same layer, so conflicts resolve by specificity — and\n * every selector is wrapped in `:where()` (zero specificity), so real\n * utilities (`hidden`, `gap-0`, ...) always win. (A new layer name can't\n * be used: layers declared later outrank `utilities`.)\n * - Tailwind 3 / no Tailwind: consumer CSS is unlayered, and unlayered\n * always beats layered, so the structural rules stay a pure fallback.\n */\n\nconst STYLE_ID = 'mieweb-ui-button-critical';\n\nconst CRITICAL_CSS = [\n '@layer utilities{',\n // Structure: keep icon + label on one line (matches the base utilities\n // inline-flex items-center justify-center gap-2 min-w-0 whitespace-nowrap).\n `:where(button[data-slot='button']){display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0.5rem;min-width:0;white-space:nowrap;}`,\n // Icons and the loading spinner never shrink (matches shrink-0).\n `:where(button[data-slot='button']) > :where([data-slot='button-icon'],svg){flex-shrink:0;}`,\n // Label truncates instead of wrapping/overflowing (matches truncate).\n `:where(button[data-slot='button']) > :where([data-slot='button-label']){min-width:0;overflow:hidden;text-overflow:ellipsis;}`,\n '}',\n // Icons passed as children land inside the label span; Tailwind preflight\n // makes SVGs display:block, which forces line breaks inside the inline\n // label. Restore inline flow. This rule is deliberately UNLAYERED at\n // specificity (0,2,2): it must beat Tailwind 3's unlayered preflight\n // `svg{display:block}` (0,0,1) — layering it would neuter the fix for\n // exactly the broken-TW3 apps it exists for. It also outranks the\n // (0,1,1) [&_svg]:inline-block utility on the label, but both declare\n // the same values, so they never conflict. Known tradeoff:\n // display utilities on an SVG inside the label slot won't win; consumers\n // should conditionally render icons instead.\n `button[data-slot='button'] [data-slot='button-label'] svg{display:inline-block;vertical-align:middle;}`,\n].join('');\n\n/** Injects the critical Button styles once per document. SSR-safe. */\nexport function injectButtonCriticalStyles(): void {\n if (typeof document === 'undefined') return;\n if (document.getElementById(STYLE_ID)) return;\n const style = document.createElement('style');\n style.id = STYLE_ID;\n style.textContent = CRITICAL_CSS;\n document.head.appendChild(style);\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { injectButtonCriticalStyles } from './button-critical';\n\nconst buttonVariants = cva(\n // Base styles\n [\n 'inline-flex items-center justify-center gap-2',\n 'min-w-0 whitespace-nowrap',\n 'font-semibold transition-all duration-200',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'active:scale-[0.98]',\n ],\n {\n variants: {\n variant: {\n primary: [\n 'bg-primary-800 text-white',\n 'hover:bg-primary-900',\n 'active:bg-primary-950',\n ],\n secondary: [\n 'bg-neutral-200 text-neutral-900',\n 'hover:bg-neutral-300',\n 'active:bg-neutral-400',\n 'dark:bg-neutral-700 dark:text-neutral-100',\n 'dark:hover:bg-neutral-600',\n 'dark:active:bg-neutral-500',\n ],\n ghost: [\n 'bg-transparent text-neutral-600',\n 'hover:bg-neutral-100',\n 'active:bg-neutral-200',\n 'dark:text-neutral-400',\n 'dark:hover:bg-neutral-800',\n 'dark:active:bg-neutral-700',\n ],\n outline: [\n 'border-2 border-primary-800 text-primary-800 bg-transparent',\n 'hover:bg-primary-50 hover:text-primary-900',\n 'active:bg-primary-100',\n 'dark:border-primary-400 dark:text-primary-400',\n 'dark:hover:bg-primary-950',\n 'dark:active:bg-primary-900',\n ],\n danger: [\n 'bg-red-600 text-white',\n 'hover:bg-red-700',\n 'active:bg-red-800',\n ],\n link: [\n 'text-primary-800 underline-offset-4',\n 'hover:underline hover:text-primary-900',\n 'active:text-primary-950',\n 'dark:text-primary-400',\n ],\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-md',\n md: 'h-10 px-4 text-base rounded-lg',\n lg: 'h-12 px-6 text-lg rounded-xl',\n icon: 'h-10 w-10 rounded-lg',\n },\n fullWidth: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n fullWidth: false,\n },\n }\n);\n\n/**\n * Label wrapper classes. Icons passed as `children` (rather than\n * leftIcon/rightIcon) land inside this span; preflight makes SVGs\n * display:block which would force line breaks inside the inline span,\n * so restore inline flow for them.\n */\nconst labelClasses = 'truncate [&_svg]:inline-block [&_svg]:align-middle';\n\nexport interface ButtonProps\n extends\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Optional icon element to render before the button text */\n leftIcon?: React.ReactElement | null;\n /** Optional icon element to render after the button text */\n rightIcon?: React.ReactElement | null;\n /** Shows a loading spinner and disables the button */\n isLoading?: boolean;\n /** Accessible label for the loading state */\n loadingText?: string;\n}\n\n/**\n * A versatile button component with multiple variants and sizes.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"md\">Click me</Button>\n * <Button variant=\"danger\" leftIcon={<TrashIcon />}>Delete</Button>\n * <Button variant=\"ghost\" isLoading loadingText=\"Saving...\">Save</Button>\n * ```\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n fullWidth,\n leftIcon,\n rightIcon,\n isLoading,\n loadingText,\n disabled,\n children,\n title,\n ...props\n },\n ref\n ) => {\n const resolvedSize = size ?? 'md';\n const labelRef = React.useRef<HTMLSpanElement>(null);\n const innerRef = React.useRef<HTMLButtonElement>(null);\n React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);\n\n // Guarantees correct icon/label layout even when the consumer's Tailwind\n // build is missing our utility classes. See button-critical.ts.\n React.useInsertionEffect(() => {\n injectButtonCriticalStyles();\n }, []);\n\n // When the label truncates, expose the full text as a native tooltip.\n // A consumer-provided `title` always takes precedence.\n React.useLayoutEffect(() => {\n const label = labelRef.current;\n const button = innerRef.current;\n if (!label || !button || title !== undefined) return;\n\n const update = () => {\n if (label.scrollWidth > label.clientWidth) {\n button.title = label.textContent ?? '';\n } else {\n button.removeAttribute('title');\n }\n };\n\n update();\n if (typeof globalThis.ResizeObserver === 'undefined') return;\n const observer = new globalThis.ResizeObserver(update);\n observer.observe(label);\n return () => observer.disconnect();\n }, [title, children, isLoading, loadingText]);\n\n return (\n <button\n data-slot=\"button\"\n data-size={resolvedSize}\n className={cn(\n buttonVariants({ variant, size: resolvedSize, fullWidth }),\n className\n )}\n ref={innerRef}\n disabled={disabled || isLoading}\n aria-busy={isLoading}\n title={title}\n {...props}\n >\n {isLoading ? (\n <>\n <LoadingSpinner />\n <span\n ref={labelRef}\n data-slot=\"button-label\"\n className={labelClasses}\n >\n {loadingText || children}\n </span>\n </>\n ) : (\n <>\n {React.isValidElement(leftIcon) && (\n <span data-slot=\"button-icon\" className=\"shrink-0\">\n {leftIcon}\n </span>\n )}\n <span\n ref={labelRef}\n data-slot=\"button-label\"\n className={labelClasses}\n >\n {children}\n </span>\n {React.isValidElement(rightIcon) && (\n <span data-slot=\"button-icon\" className=\"shrink-0\">\n {rightIcon}\n </span>\n )}\n </>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\n/**\n * Simple loading spinner for the button\n */\nfunction LoadingSpinner() {\n return (\n <svg\n className=\"h-4 w-4 shrink-0 animate-spin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n );\n}\n\nexport { Button, buttonVariants };\n"]}

package/dist/{chunk-D2GID3YK.js → chunk-KREUYVMZ.js} RENAMED Viewed

@@ -3,6 +3,38 @@ import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+// src/components/Button/button-critical.ts
+var STYLE_ID = "mieweb-ui-button-critical";
+var CRITICAL_CSS = [
+  "@layer utilities{",
+  // Structure: keep icon + label on one line (matches the base utilities
+  // inline-flex items-center justify-center gap-2 min-w-0 whitespace-nowrap).
+  `:where(button[data-slot='button']){display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0.5rem;min-width:0;white-space:nowrap;}`,
+  // Icons and the loading spinner never shrink (matches shrink-0).
+  `:where(button[data-slot='button']) > :where([data-slot='button-icon'],svg){flex-shrink:0;}`,
+  // Label truncates instead of wrapping/overflowing (matches truncate).
+  `:where(button[data-slot='button']) > :where([data-slot='button-label']){min-width:0;overflow:hidden;text-overflow:ellipsis;}`,
+  "}",
+  // Icons passed as children land inside the label span; Tailwind preflight
+  // makes SVGs display:block, which forces line breaks inside the inline
+  // label. Restore inline flow. This rule is deliberately UNLAYERED at
+  // specificity (0,2,2): it must beat Tailwind 3's unlayered preflight
+  // `svg{display:block}` (0,0,1) — layering it would neuter the fix for
+  // exactly the broken-TW3 apps it exists for. It also outranks the
+  // (0,1,1) [&_svg]:inline-block utility on the label, but both declare
+  // the same values, so they never conflict. Known tradeoff:
+  // display utilities on an SVG inside the label slot won't win; consumers
+  // should conditionally render icons instead.
+  `button[data-slot='button'] [data-slot='button-label'] svg{display:inline-block;vertical-align:middle;}`
+].join("");
+function injectButtonCriticalStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = CRITICAL_CSS;
+  document.head.appendChild(style);
+}
 var buttonVariants = cva(
   // Base styles
   [
@@ -75,6 +107,7 @@ var buttonVariants = cva(
     }
   }
 );
+var labelClasses = "truncate [&_svg]:inline-block [&_svg]:align-middle";
 var Button = React.forwardRef(
   ({
     className,
@@ -94,6 +127,9 @@ var Button = React.forwardRef(
     const labelRef = React.useRef(null);
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current);
+    React.useInsertionEffect(() => {
+      injectButtonCriticalStyles();
+    }, []);
     React.useLayoutEffect(() => {
       const label = labelRef.current;
       const button = innerRef.current;
@@ -127,11 +163,27 @@ var Button = React.forwardRef(
         ...props,
         children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(LoadingSpinner, {}),
-          /* @__PURE__ */ jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children: loadingText || children })
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: labelRef,
+              "data-slot": "button-label",
+              className: labelClasses,
+              children: loadingText || children
+            }
+          )
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          React.isValidElement(leftIcon) && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
-          /* @__PURE__ */ jsx("span", { ref: labelRef, "data-slot": "button-label", className: "truncate", children }),
-          React.isValidElement(rightIcon) && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon })
+          React.isValidElement(leftIcon) && /* @__PURE__ */ jsx("span", { "data-slot": "button-icon", className: "shrink-0", children: leftIcon }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ref: labelRef,
+              "data-slot": "button-label",
+              className: labelClasses,
+              children
+            }
+          ),
+          React.isValidElement(rightIcon) && /* @__PURE__ */ jsx("span", { "data-slot": "button-icon", className: "shrink-0", children: rightIcon })
         ] })
       }
     );
@@ -173,5 +225,5 @@ function LoadingSpinner() {
 }
 export { Button, buttonVariants };
-//# sourceMappingURL=chunk-D2GID3YK.js.map
-//# sourceMappingURL=chunk-D2GID3YK.js.map
+//# sourceMappingURL=chunk-KREUYVMZ.js.map
+//# sourceMappingURL=chunk-KREUYVMZ.js.map

package/dist/chunk-KREUYVMZ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/Button/button-critical.ts","../src/components/Button/Button.tsx"],"names":[],"mappings":"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","file":"chunk-KREUYVMZ.js","sourcesContent":["/**\n * Self-healing structural CSS for Button.\n *\n * Button layout relies on Tailwind utilities (`inline-flex`,\n * `whitespace-nowrap`, ...). Consumer apps with a stale safelist copy or a\n * missing `@source` line never generate those classes, so the button falls\n * back to `inline-block` and the icon stacks above the label.\n *\n * Injecting these rules from the component guarantees every consumer gets\n * correct button structure just by upgrading the library — no app-side\n * changes required.\n *\n * Override safety, by consumer setup:\n * - Tailwind 4: utilities live in `@layer utilities`. The structural rules\n * below join that same layer, so conflicts resolve by specificity — and\n * every selector is wrapped in `:where()` (zero specificity), so real\n * utilities (`hidden`, `gap-0`, ...) always win. (A new layer name can't\n * be used: layers declared later outrank `utilities`.)\n * - Tailwind 3 / no Tailwind: consumer CSS is unlayered, and unlayered\n * always beats layered, so the structural rules stay a pure fallback.\n */\n\nconst STYLE_ID = 'mieweb-ui-button-critical';\n\nconst CRITICAL_CSS = [\n '@layer utilities{',\n // Structure: keep icon + label on one line (matches the base utilities\n // inline-flex items-center justify-center gap-2 min-w-0 whitespace-nowrap).\n `:where(button[data-slot='button']){display:inline-flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:0.5rem;min-width:0;white-space:nowrap;}`,\n // Icons and the loading spinner never shrink (matches shrink-0).\n `:where(button[data-slot='button']) > :where([data-slot='button-icon'],svg){flex-shrink:0;}`,\n // Label truncates instead of wrapping/overflowing (matches truncate).\n `:where(button[data-slot='button']) > :where([data-slot='button-label']){min-width:0;overflow:hidden;text-overflow:ellipsis;}`,\n '}',\n // Icons passed as children land inside the label span; Tailwind preflight\n // makes SVGs display:block, which forces line breaks inside the inline\n // label. Restore inline flow. This rule is deliberately UNLAYERED at\n // specificity (0,2,2): it must beat Tailwind 3's unlayered preflight\n // `svg{display:block}` (0,0,1) — layering it would neuter the fix for\n // exactly the broken-TW3 apps it exists for. It also outranks the\n // (0,1,1) [&_svg]:inline-block utility on the label, but both declare\n // the same values, so they never conflict. Known tradeoff:\n // display utilities on an SVG inside the label slot won't win; consumers\n // should conditionally render icons instead.\n `button[data-slot='button'] [data-slot='button-label'] svg{display:inline-block;vertical-align:middle;}`,\n].join('');\n\n/** Injects the critical Button styles once per document. SSR-safe. */\nexport function injectButtonCriticalStyles(): void {\n if (typeof document === 'undefined') return;\n if (document.getElementById(STYLE_ID)) return;\n const style = document.createElement('style');\n style.id = STYLE_ID;\n style.textContent = CRITICAL_CSS;\n document.head.appendChild(style);\n}\n","import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { injectButtonCriticalStyles } from './button-critical';\n\nconst buttonVariants = cva(\n // Base styles\n [\n 'inline-flex items-center justify-center gap-2',\n 'min-w-0 whitespace-nowrap',\n 'font-semibold transition-all duration-200',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:pointer-events-none disabled:opacity-50',\n 'active:scale-[0.98]',\n ],\n {\n variants: {\n variant: {\n primary: [\n 'bg-primary-800 text-white',\n 'hover:bg-primary-900',\n 'active:bg-primary-950',\n ],\n secondary: [\n 'bg-neutral-200 text-neutral-900',\n 'hover:bg-neutral-300',\n 'active:bg-neutral-400',\n 'dark:bg-neutral-700 dark:text-neutral-100',\n 'dark:hover:bg-neutral-600',\n 'dark:active:bg-neutral-500',\n ],\n ghost: [\n 'bg-transparent text-neutral-600',\n 'hover:bg-neutral-100',\n 'active:bg-neutral-200',\n 'dark:text-neutral-400',\n 'dark:hover:bg-neutral-800',\n 'dark:active:bg-neutral-700',\n ],\n outline: [\n 'border-2 border-primary-800 text-primary-800 bg-transparent',\n 'hover:bg-primary-50 hover:text-primary-900',\n 'active:bg-primary-100',\n 'dark:border-primary-400 dark:text-primary-400',\n 'dark:hover:bg-primary-950',\n 'dark:active:bg-primary-900',\n ],\n danger: [\n 'bg-red-600 text-white',\n 'hover:bg-red-700',\n 'active:bg-red-800',\n ],\n link: [\n 'text-primary-800 underline-offset-4',\n 'hover:underline hover:text-primary-900',\n 'active:text-primary-950',\n 'dark:text-primary-400',\n ],\n },\n size: {\n sm: 'h-8 px-3 text-sm rounded-md',\n md: 'h-10 px-4 text-base rounded-lg',\n lg: 'h-12 px-6 text-lg rounded-xl',\n icon: 'h-10 w-10 rounded-lg',\n },\n fullWidth: {\n true: 'w-full',\n false: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n size: 'md',\n fullWidth: false,\n },\n }\n);\n\n/**\n * Label wrapper classes. Icons passed as `children` (rather than\n * leftIcon/rightIcon) land inside this span; preflight makes SVGs\n * display:block which would force line breaks inside the inline span,\n * so restore inline flow for them.\n */\nconst labelClasses = 'truncate [&_svg]:inline-block [&_svg]:align-middle';\n\nexport interface ButtonProps\n extends\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Optional icon element to render before the button text */\n leftIcon?: React.ReactElement | null;\n /** Optional icon element to render after the button text */\n rightIcon?: React.ReactElement | null;\n /** Shows a loading spinner and disables the button */\n isLoading?: boolean;\n /** Accessible label for the loading state */\n loadingText?: string;\n}\n\n/**\n * A versatile button component with multiple variants and sizes.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"md\">Click me</Button>\n * <Button variant=\"danger\" leftIcon={<TrashIcon />}>Delete</Button>\n * <Button variant=\"ghost\" isLoading loadingText=\"Saving...\">Save</Button>\n * ```\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n className,\n variant,\n size,\n fullWidth,\n leftIcon,\n rightIcon,\n isLoading,\n loadingText,\n disabled,\n children,\n title,\n ...props\n },\n ref\n ) => {\n const resolvedSize = size ?? 'md';\n const labelRef = React.useRef<HTMLSpanElement>(null);\n const innerRef = React.useRef<HTMLButtonElement>(null);\n React.useImperativeHandle(ref, () => innerRef.current as HTMLButtonElement);\n\n // Guarantees correct icon/label layout even when the consumer's Tailwind\n // build is missing our utility classes. See button-critical.ts.\n React.useInsertionEffect(() => {\n injectButtonCriticalStyles();\n }, []);\n\n // When the label truncates, expose the full text as a native tooltip.\n // A consumer-provided `title` always takes precedence.\n React.useLayoutEffect(() => {\n const label = labelRef.current;\n const button = innerRef.current;\n if (!label || !button || title !== undefined) return;\n\n const update = () => {\n if (label.scrollWidth > label.clientWidth) {\n button.title = label.textContent ?? '';\n } else {\n button.removeAttribute('title');\n }\n };\n\n update();\n if (typeof globalThis.ResizeObserver === 'undefined') return;\n const observer = new globalThis.ResizeObserver(update);\n observer.observe(label);\n return () => observer.disconnect();\n }, [title, children, isLoading, loadingText]);\n\n return (\n <button\n data-slot=\"button\"\n data-size={resolvedSize}\n className={cn(\n buttonVariants({ variant, size: resolvedSize, fullWidth }),\n className\n )}\n ref={innerRef}\n disabled={disabled || isLoading}\n aria-busy={isLoading}\n title={title}\n {...props}\n >\n {isLoading ? (\n <>\n <LoadingSpinner />\n <span\n ref={labelRef}\n data-slot=\"button-label\"\n className={labelClasses}\n >\n {loadingText || children}\n </span>\n </>\n ) : (\n <>\n {React.isValidElement(leftIcon) && (\n <span data-slot=\"button-icon\" className=\"shrink-0\">\n {leftIcon}\n </span>\n )}\n <span\n ref={labelRef}\n data-slot=\"button-label\"\n className={labelClasses}\n >\n {children}\n </span>\n {React.isValidElement(rightIcon) && (\n <span data-slot=\"button-icon\" className=\"shrink-0\">\n {rightIcon}\n </span>\n )}\n </>\n )}\n </button>\n );\n }\n);\n\nButton.displayName = 'Button';\n\n/**\n * Simple loading spinner for the button\n */\nfunction LoadingSpinner() {\n return (\n <svg\n className=\"h-4 w-4 shrink-0 animate-spin\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n />\n </svg>\n );\n}\n\nexport { Button, buttonVariants };\n"]}

package/dist/{chunk-F57VRLKP.js → chunk-KRYJJMYN.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import { Switch } from './chunk-AQ564XO7.js';
 import { Sheet, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter } from './chunk-LMBXJZLG.js';
-import { Button } from './chunk-D2GID3YK.js';
+import { Button } from './chunk-KREUYVMZ.js';
 import { cn } from './chunk-TQONQSJO.js';
 import * as React2 from 'react';
 import { createPortal } from 'react-dom';
@@ -704,5 +704,5 @@ var CustomizableDashboard = React2.forwardRef(function CustomizableDashboard2({
 });
 export { CustomizableDashboard, DashboardCustomizePanel, consolidateColumns, mergeColumnOrder, moveAcrossColumns, reorderOnDrop, requiredColumns };
-//# sourceMappingURL=chunk-F57VRLKP.js.map
-//# sourceMappingURL=chunk-F57VRLKP.js.map
+//# sourceMappingURL=chunk-KRYJJMYN.js.map
+//# sourceMappingURL=chunk-KRYJJMYN.js.map