@hyve-sdk/js 2.5.0-canary.1 → 2.5.0-canary.2

package/dist/react.d.mts

@@ -544,5 +544,91 @@ interface MachineViewProps {
  * <MachineView machineId="daily-streak" style={{ width: "100%", height: 400 }} />
  */
 declare function MachineView({ machineId, className, style }: MachineViewProps): react_jsx_runtime.JSX.Element | null;
+interface MachineViewButtonProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Button content */
+    children?: ReactNode;
+    /** Optional className applied to the trigger button */
+    className?: string;
+    /** Optional inline styles applied to the trigger button */
+    style?: CSSProperties;
+    /** Optional title shown in the dialog header */
+    title?: string;
+    /** Width of the dialog panel. Defaults to 520 */
+    dialogWidth?: number | string;
+    /** Height of the MachineView iframe inside the dialog. Defaults to 400 */
+    viewHeight?: number | string;
+}
+/**
+ * A button that opens a dialog containing a MachineView for the given machine ID.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineViewButton machineId="daily-streak" title="Daily Streak">
+ *   Open Streak
+ * </MachineViewButton>
+ */
+declare function MachineViewButton({ machineId, children, className, style, title, dialogWidth, viewHeight, }: MachineViewButtonProps): react_jsx_runtime.JSX.Element;
+interface MachineViewImageButtonProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Optional className applied to the trigger button */
+    className?: string;
+    /** Optional inline styles applied to the trigger button */
+    style?: CSSProperties;
+    /** Optional inline styles applied to the img element */
+    imgStyle?: CSSProperties;
+    /** Optional title shown in the dialog header */
+    title?: string;
+    /** Width of the dialog panel. Defaults to 520 */
+    dialogWidth?: number | string;
+    /** Height of the MachineView iframe inside the dialog. Defaults to 400 */
+    viewHeight?: number | string;
+}
+/**
+ * An image that acts as a button to open a dialog containing a MachineView.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineViewImageButton
+ *   machineId="daily-streak"
+ *   src="/icons/streak.png"
+ *   alt="Daily Streak"
+ *   title="Daily Streak"
+ *   imgStyle={{ width: 48, height: 48 }}
+ * />
+ */
+declare function MachineViewImageButton({ machineId, src, alt, className, style, imgStyle, title, dialogWidth, viewHeight, }: MachineViewImageButtonProps): react_jsx_runtime.JSX.Element;
+interface MachineViewFullscreenProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Called when the user dismisses the dialog (ESC key or close button) */
+    onClose?: () => void;
+    /** Optional title shown in the top bar */
+    title?: string;
+}
+/**
+ * Renders a MachineView fullscreen immediately on mount.
+ * Adapts to all viewport sizes including mobile portrait and landscape.
+ * Must be used within a HyveSdkProvider.
+ *
+ * Mount this component to show the fullscreen view; unmount it to hide it.
+ *
+ * @example
+ * // Conditionally render to show/hide
+ * {showStreak && (
+ *   <MachineViewFullscreen
+ *     machineId="daily-streak"
+ *     title="Daily Streak"
+ *     onClose={() => setShowStreak(false)}
+ *   />
+ * )}
+ */
+declare function MachineViewFullscreen({ machineId, onClose, title, }: MachineViewFullscreenProps): react_jsx_runtime.JSX.Element;
 
-export { HyveSdkProvider, MachineView, useHyveSdk };
+export { HyveSdkProvider, MachineView, MachineViewButton, MachineViewFullscreen, MachineViewImageButton, useHyveSdk };

package/dist/react.d.ts

@@ -544,5 +544,91 @@ interface MachineViewProps {
  * <MachineView machineId="daily-streak" style={{ width: "100%", height: 400 }} />
  */
 declare function MachineView({ machineId, className, style }: MachineViewProps): react_jsx_runtime.JSX.Element | null;
+interface MachineViewButtonProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Button content */
+    children?: ReactNode;
+    /** Optional className applied to the trigger button */
+    className?: string;
+    /** Optional inline styles applied to the trigger button */
+    style?: CSSProperties;
+    /** Optional title shown in the dialog header */
+    title?: string;
+    /** Width of the dialog panel. Defaults to 520 */
+    dialogWidth?: number | string;
+    /** Height of the MachineView iframe inside the dialog. Defaults to 400 */
+    viewHeight?: number | string;
+}
+/**
+ * A button that opens a dialog containing a MachineView for the given machine ID.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineViewButton machineId="daily-streak" title="Daily Streak">
+ *   Open Streak
+ * </MachineViewButton>
+ */
+declare function MachineViewButton({ machineId, children, className, style, title, dialogWidth, viewHeight, }: MachineViewButtonProps): react_jsx_runtime.JSX.Element;
+interface MachineViewImageButtonProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Image source URL */
+    src: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Optional className applied to the trigger button */
+    className?: string;
+    /** Optional inline styles applied to the trigger button */
+    style?: CSSProperties;
+    /** Optional inline styles applied to the img element */
+    imgStyle?: CSSProperties;
+    /** Optional title shown in the dialog header */
+    title?: string;
+    /** Width of the dialog panel. Defaults to 520 */
+    dialogWidth?: number | string;
+    /** Height of the MachineView iframe inside the dialog. Defaults to 400 */
+    viewHeight?: number | string;
+}
+/**
+ * An image that acts as a button to open a dialog containing a MachineView.
+ * Must be used within a HyveSdkProvider.
+ *
+ * @example
+ * <MachineViewImageButton
+ *   machineId="daily-streak"
+ *   src="/icons/streak.png"
+ *   alt="Daily Streak"
+ *   title="Daily Streak"
+ *   imgStyle={{ width: 48, height: 48 }}
+ * />
+ */
+declare function MachineViewImageButton({ machineId, src, alt, className, style, imgStyle, title, dialogWidth, viewHeight, }: MachineViewImageButtonProps): react_jsx_runtime.JSX.Element;
+interface MachineViewFullscreenProps {
+    /** The machine ID to pass to MachineView */
+    machineId: string;
+    /** Called when the user dismisses the dialog (ESC key or close button) */
+    onClose?: () => void;
+    /** Optional title shown in the top bar */
+    title?: string;
+}
+/**
+ * Renders a MachineView fullscreen immediately on mount.
+ * Adapts to all viewport sizes including mobile portrait and landscape.
+ * Must be used within a HyveSdkProvider.
+ *
+ * Mount this component to show the fullscreen view; unmount it to hide it.
+ *
+ * @example
+ * // Conditionally render to show/hide
+ * {showStreak && (
+ *   <MachineViewFullscreen
+ *     machineId="daily-streak"
+ *     title="Daily Streak"
+ *     onClose={() => setShowStreak(false)}
+ *   />
+ * )}
+ */
+declare function MachineViewFullscreen({ machineId, onClose, title, }: MachineViewFullscreenProps): react_jsx_runtime.JSX.Element;
 
-export { HyveSdkProvider, MachineView, useHyveSdk };
+export { HyveSdkProvider, MachineView, MachineViewButton, MachineViewFullscreen, MachineViewImageButton, useHyveSdk };

package/dist/react.js

@@ -22,6 +22,9 @@ var react_exports = {};
 __export(react_exports, {
   HyveSdkProvider: () => HyveSdkProvider,
   MachineView: () => MachineView,
+  MachineViewButton: () => MachineViewButton,
+  MachineViewFullscreen: () => MachineViewFullscreen,
+  MachineViewImageButton: () => MachineViewImageButton,
   useHyveSdk: () => useHyveSdk
 });
 module.exports = __toCommonJS(react_exports);
@@ -2293,9 +2296,290 @@ function MachineView({ machineId, className, style }) {
     }
   );
 }
+var OVERLAY_STYLE = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(0, 0, 0, 0.6)",
+  padding: "16px"
+};
+var PANEL_STYLE = {
+  position: "relative",
+  backgroundColor: "#ffffff",
+  borderRadius: "12px",
+  overflow: "hidden",
+  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.35)",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+};
+var HEADER_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "16px 20px",
+  borderBottom: "1px solid #e5e7eb",
+  flexShrink: 0
+};
+var TITLE_STYLE = {
+  margin: 0,
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#111827",
+  lineHeight: 1.4
+};
+var CLOSE_BUTTON_BASE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "32px",
+  height: "32px",
+  border: "none",
+  borderRadius: "6px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  fontSize: "20px",
+  lineHeight: 1,
+  flexShrink: 0
+};
+var CLOSE_BUTTON_ABSOLUTE = {
+  ...CLOSE_BUTTON_BASE,
+  position: "absolute",
+  top: "10px",
+  right: "10px",
+  zIndex: 1
+};
+function MachineViewDialog({
+  machineId,
+  open,
+  onClose,
+  title,
+  dialogWidth,
+  viewHeight
+}) {
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  const panelWidth = typeof dialogWidth === "number" ? `${dialogWidth}px` : dialogWidth;
+  const iframeHeight = typeof viewHeight === "number" ? `${viewHeight}px` : viewHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: OVERLAY_STYLE,
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...PANEL_STYLE, maxWidth: panelWidth }, children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: HEADER_STYLE, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: TITLE_STYLE, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              style: CLOSE_BUTTON_BASE,
+              onClick: onClose,
+              "aria-label": "Close dialog",
+              children: "\u2715"
+            }
+          )
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            style: CLOSE_BUTTON_ABSOLUTE,
+            onClick: onClose,
+            "aria-label": "Close dialog",
+            children: "\u2715"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          MachineView,
+          {
+            machineId,
+            style: {
+              width: "100%",
+              height: iframeHeight,
+              border: "none",
+              display: "block"
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+function MachineViewButton({
+  machineId,
+  children = "Open",
+  className,
+  style,
+  title,
+  dialogWidth = 520,
+  viewHeight = 400
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const close = (0, import_react.useCallback)(() => setOpen(false), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { className, style, onClick: () => setOpen(true), children }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MachineViewDialog,
+      {
+        machineId,
+        open,
+        onClose: close,
+        title,
+        dialogWidth,
+        viewHeight
+      }
+    )
+  ] });
+}
+var IMAGE_BUTTON_STYLE = {
+  padding: 0,
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+function MachineViewImageButton({
+  machineId,
+  src,
+  alt = "",
+  className,
+  style,
+  imgStyle,
+  title,
+  dialogWidth = 520,
+  viewHeight = 400
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const close = (0, import_react.useCallback)(() => setOpen(false), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        className,
+        style: { ...IMAGE_BUTTON_STYLE, ...style },
+        onClick: () => setOpen(true),
+        "aria-label": alt || title || "Open",
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src, alt, style: imgStyle })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MachineViewDialog,
+      {
+        machineId,
+        open,
+        onClose: close,
+        title,
+        dialogWidth,
+        viewHeight
+      }
+    )
+  ] });
+}
+var FULLSCREEN_CONTAINER_STYLE = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: "#ffffff"
+};
+var FULLSCREEN_TOPBAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "52px",
+  minHeight: "52px",
+  padding: "0 12px 0 20px",
+  borderBottom: "1px solid #e5e7eb",
+  flexShrink: 0
+};
+var FULLSCREEN_TITLE_STYLE = {
+  margin: 0,
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#111827",
+  lineHeight: 1.4,
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+var FULLSCREEN_CLOSE_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "44px",
+  height: "44px",
+  border: "none",
+  borderRadius: "8px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  fontSize: "20px",
+  lineHeight: 1,
+  flexShrink: 0
+};
+var FULLSCREEN_IFRAME_STYLE = {
+  flex: 1,
+  minHeight: 0,
+  width: "100%",
+  border: "none",
+  display: "block"
+};
+function MachineViewFullscreen({
+  machineId,
+  onClose,
+  title
+}) {
+  (0, import_react.useEffect)(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!onClose) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: FULLSCREEN_CONTAINER_STYLE, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: FULLSCREEN_TOPBAR_STYLE, children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: FULLSCREEN_TITLE_STYLE, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+      onClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          style: FULLSCREEN_CLOSE_STYLE,
+          onClick: onClose,
+          "aria-label": "Close",
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MachineView, { machineId, style: FULLSCREEN_IFRAME_STYLE })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   HyveSdkProvider,
   MachineView,
+  MachineViewButton,
+  MachineViewFullscreen,
+  MachineViewImageButton,
   useHyveSdk
 });

package/dist/react.mjs

@@ -1,6 +1,7 @@
 // src/react.tsx
 import {
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useRef,
@@ -2187,7 +2188,7 @@ var HyveClient = class {
 };
 
 // src/react.tsx
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var HyveSdkContext = createContext(null);
 function HyveSdkProvider({
   client,
@@ -2273,8 +2274,289 @@ function MachineView({ machineId, className, style }) {
     }
   );
 }
+var OVERLAY_STYLE = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "rgba(0, 0, 0, 0.6)",
+  padding: "16px"
+};
+var PANEL_STYLE = {
+  position: "relative",
+  backgroundColor: "#ffffff",
+  borderRadius: "12px",
+  overflow: "hidden",
+  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.35)",
+  display: "flex",
+  flexDirection: "column",
+  width: "100%"
+};
+var HEADER_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "16px 20px",
+  borderBottom: "1px solid #e5e7eb",
+  flexShrink: 0
+};
+var TITLE_STYLE = {
+  margin: 0,
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#111827",
+  lineHeight: 1.4
+};
+var CLOSE_BUTTON_BASE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "32px",
+  height: "32px",
+  border: "none",
+  borderRadius: "6px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  fontSize: "20px",
+  lineHeight: 1,
+  flexShrink: 0
+};
+var CLOSE_BUTTON_ABSOLUTE = {
+  ...CLOSE_BUTTON_BASE,
+  position: "absolute",
+  top: "10px",
+  right: "10px",
+  zIndex: 1
+};
+function MachineViewDialog({
+  machineId,
+  open,
+  onClose,
+  title,
+  dialogWidth,
+  viewHeight
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open, onClose]);
+  if (!open) return null;
+  const panelWidth = typeof dialogWidth === "number" ? `${dialogWidth}px` : dialogWidth;
+  const iframeHeight = typeof viewHeight === "number" ? `${viewHeight}px` : viewHeight;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: OVERLAY_STYLE,
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      children: /* @__PURE__ */ jsxs("div", { style: { ...PANEL_STYLE, maxWidth: panelWidth }, children: [
+        title ? /* @__PURE__ */ jsxs("div", { style: HEADER_STYLE, children: [
+          /* @__PURE__ */ jsx("p", { style: TITLE_STYLE, children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: CLOSE_BUTTON_BASE,
+              onClick: onClose,
+              "aria-label": "Close dialog",
+              children: "\u2715"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: CLOSE_BUTTON_ABSOLUTE,
+            onClick: onClose,
+            "aria-label": "Close dialog",
+            children: "\u2715"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          MachineView,
+          {
+            machineId,
+            style: {
+              width: "100%",
+              height: iframeHeight,
+              border: "none",
+              display: "block"
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+function MachineViewButton({
+  machineId,
+  children = "Open",
+  className,
+  style,
+  title,
+  dialogWidth = 520,
+  viewHeight = 400
+}) {
+  const [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("button", { className, style, onClick: () => setOpen(true), children }),
+    /* @__PURE__ */ jsx(
+      MachineViewDialog,
+      {
+        machineId,
+        open,
+        onClose: close,
+        title,
+        dialogWidth,
+        viewHeight
+      }
+    )
+  ] });
+}
+var IMAGE_BUTTON_STYLE = {
+  padding: 0,
+  border: "none",
+  background: "none",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+function MachineViewImageButton({
+  machineId,
+  src,
+  alt = "",
+  className,
+  style,
+  imgStyle,
+  title,
+  dialogWidth = 520,
+  viewHeight = 400
+}) {
+  const [open, setOpen] = useState(false);
+  const close = useCallback(() => setOpen(false), []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className,
+        style: { ...IMAGE_BUTTON_STYLE, ...style },
+        onClick: () => setOpen(true),
+        "aria-label": alt || title || "Open",
+        children: /* @__PURE__ */ jsx("img", { src, alt, style: imgStyle })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MachineViewDialog,
+      {
+        machineId,
+        open,
+        onClose: close,
+        title,
+        dialogWidth,
+        viewHeight
+      }
+    )
+  ] });
+}
+var FULLSCREEN_CONTAINER_STYLE = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 9999,
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: "#ffffff"
+};
+var FULLSCREEN_TOPBAR_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  height: "52px",
+  minHeight: "52px",
+  padding: "0 12px 0 20px",
+  borderBottom: "1px solid #e5e7eb",
+  flexShrink: 0
+};
+var FULLSCREEN_TITLE_STYLE = {
+  margin: 0,
+  fontSize: "16px",
+  fontWeight: 600,
+  color: "#111827",
+  lineHeight: 1.4,
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+var FULLSCREEN_CLOSE_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "44px",
+  height: "44px",
+  border: "none",
+  borderRadius: "8px",
+  cursor: "pointer",
+  backgroundColor: "transparent",
+  color: "#6b7280",
+  fontSize: "20px",
+  lineHeight: 1,
+  flexShrink: 0
+};
+var FULLSCREEN_IFRAME_STYLE = {
+  flex: 1,
+  minHeight: 0,
+  width: "100%",
+  border: "none",
+  display: "block"
+};
+function MachineViewFullscreen({
+  machineId,
+  onClose,
+  title
+}) {
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+  useEffect(() => {
+    if (!onClose) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [onClose]);
+  return /* @__PURE__ */ jsxs("div", { style: FULLSCREEN_CONTAINER_STYLE, children: [
+    /* @__PURE__ */ jsxs("div", { style: FULLSCREEN_TOPBAR_STYLE, children: [
+      title ? /* @__PURE__ */ jsx("p", { style: FULLSCREEN_TITLE_STYLE, children: title }) : /* @__PURE__ */ jsx("span", {}),
+      onClose && /* @__PURE__ */ jsx(
+        "button",
+        {
+          style: FULLSCREEN_CLOSE_STYLE,
+          onClick: onClose,
+          "aria-label": "Close",
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(MachineView, { machineId, style: FULLSCREEN_IFRAME_STYLE })
+  ] });
+}
 export {
   HyveSdkProvider,
   MachineView,
+  MachineViewButton,
+  MachineViewFullscreen,
+  MachineViewImageButton,
   useHyveSdk
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyve-sdk/js",
-  "version": "2.5.0-canary.1",
+  "version": "2.5.0-canary.2",
   "description": "Hyve SDK - TypeScript wrapper for Hyve game server integration",
   "private": false,
   "publishConfig": {