@gallop.software/studio 1.5.9 → 2.0.0

package/dist/index.d.mts

@@ -1,12 +1,3 @@
-import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-
-/**
- * Floating button that opens the Studio modal.
- * Fixed position in bottom-right corner.
- * Only renders in development mode.
- */
-declare function StudioButton(): _emotion_react_jsx_runtime.JSX.Element | null;
-
 /**
  * Dimensions object {w, h}
  */
@@ -28,6 +19,15 @@ interface MetaEntry {
     f?: Dimensions;
     c?: number;
 }
+/**
+ * Full meta schema including special keys
+ * _cdns: Array of CDN base URLs
+ * Other keys: file paths from public folder
+ */
+interface FullMeta {
+    _cdns?: string[];
+    [key: string]: MetaEntry | string[] | undefined;
+}
 /**
  * Meta schema - keyed by path from public folder
  * Example: { "/portfolio/photo.jpg": { o: {w:2400,h:1600}, b: "...", sm: {w:300,h:200}, ... } }
@@ -82,5 +82,9 @@ declare function getThumbnailPath(originalPath: string, size: 'sm' | 'md' | 'lg'
  * Get all thumbnail paths for an image
  */
 declare function getAllThumbnailPaths(originalPath: string): string[];
+/**
+ * Check if an image entry is processed (has any thumbnail dimensions)
+ */
+declare function isProcessed(entry: MetaEntry | undefined): boolean;
 
-export { type FileItem, type LeanImageEntry, type LeanMeta, StudioButton, type StudioConfig, getAllThumbnailPaths, getThumbnailPath };
+export { type Dimensions, type FileItem, type FullMeta, type LeanImageEntry, type LeanMeta, type MetaEntry, type StudioConfig, getAllThumbnailPaths, getThumbnailPath, isProcessed };

package/dist/index.d.ts

@@ -1,12 +1,3 @@
-import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-
-/**
- * Floating button that opens the Studio modal.
- * Fixed position in bottom-right corner.
- * Only renders in development mode.
- */
-declare function StudioButton(): _emotion_react_jsx_runtime.JSX.Element | null;
-
 /**
  * Dimensions object {w, h}
  */
@@ -28,6 +19,15 @@ interface MetaEntry {
     f?: Dimensions;
     c?: number;
 }
+/**
+ * Full meta schema including special keys
+ * _cdns: Array of CDN base URLs
+ * Other keys: file paths from public folder
+ */
+interface FullMeta {
+    _cdns?: string[];
+    [key: string]: MetaEntry | string[] | undefined;
+}
 /**
  * Meta schema - keyed by path from public folder
  * Example: { "/portfolio/photo.jpg": { o: {w:2400,h:1600}, b: "...", sm: {w:300,h:200}, ... } }
@@ -82,5 +82,9 @@ declare function getThumbnailPath(originalPath: string, size: 'sm' | 'md' | 'lg'
  * Get all thumbnail paths for an image
  */
 declare function getAllThumbnailPaths(originalPath: string): string[];
+/**
+ * Check if an image entry is processed (has any thumbnail dimensions)
+ */
+declare function isProcessed(entry: MetaEntry | undefined): boolean;
 
-export { type FileItem, type LeanImageEntry, type LeanMeta, StudioButton, type StudioConfig, getAllThumbnailPaths, getThumbnailPath };
+export { type Dimensions, type FileItem, type FullMeta, type LeanImageEntry, type LeanMeta, type MetaEntry, type StudioConfig, getAllThumbnailPaths, getThumbnailPath, isProcessed };

package/dist/index.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
 
@@ -7,180 +7,5 @@ var _chunkVI6QG6WTjs = require('./chunk-VI6QG6WT.js');
 
 
 
-
-var _chunkN6JYTJCBjs = require('./chunk-N6JYTJCB.js');
-
-// src/components/StudioButton.tsx
-var _react = require('react');
-var _react3 = require('@emotion/react');
-var _jsxruntime = require('@emotion/react/jsx-runtime');
-var StudioUI = _react.lazy.call(void 0, () => Promise.resolve().then(() => _interopRequireWildcard(require("./StudioUI-GJK45R3T.js"))));
-var spin = _react3.keyframes`
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var styles = {
-  button: _react3.css`
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 9998;
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    background: ${_chunkN6JYTJCBjs.colors.primary};
-    color: white;
-    box-shadow: 0 4px 12px ${_chunkN6JYTJCBjs.colors.shadowDark}, 0 1px 3px ${_chunkN6JYTJCBjs.colors.shadow};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-family: ${_chunkN6JYTJCBjs.fontStack};
-    
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px ${_chunkN6JYTJCBjs.colors.shadowDark}, 0 2px 6px ${_chunkN6JYTJCBjs.colors.shadow};
-      background: ${_chunkN6JYTJCBjs.colors.primaryHover};
-    }
-    
-    &:active {
-      transform: translateY(0);
-    }
-  `,
-  buttonIcon: _react3.css`
-    width: 24px;
-    height: 24px;
-  `,
-  overlay: _react3.css`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9999;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-  `,
-  overlayHidden: _react3.css`
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  `,
-  backdrop: _react3.css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(26, 31, 54, 0.4);
-    backdrop-filter: blur(4px);
-  `,
-  modal: _react3.css`
-    ${_chunkN6JYTJCBjs.baseReset}
-    position: absolute;
-    top: 24px;
-    right: 24px;
-    bottom: 24px;
-    left: 24px;
-    background-color: ${_chunkN6JYTJCBjs.colors.surface};
-    border-radius: 12px;
-    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  `,
-  loading: _react3.css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    background: ${_chunkN6JYTJCBjs.colors.background};
-    font-family: ${_chunkN6JYTJCBjs.fontStack};
-  `,
-  loadingContent: _react3.css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-  `,
-  spinner: _react3.css`
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 3px solid ${_chunkN6JYTJCBjs.colors.border};
-    border-top-color: ${_chunkN6JYTJCBjs.colors.primary};
-    animation: ${spin} 0.8s linear infinite;
-  `,
-  loadingText: _react3.css`
-    color: ${_chunkN6JYTJCBjs.colors.textSecondary};
-    font-size: ${_chunkN6JYTJCBjs.fontSize.base};
-    font-weight: 500;
-    margin: 0;
-    letter-spacing: -0.01em;
-  `
-};
-function StudioButton() {
-  const [mounted, setMounted] = _react.useState.call(void 0, false);
-  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
-  const [hasBeenOpened, setHasBeenOpened] = _react.useState.call(void 0, false);
-  _react.useEffect.call(void 0, () => {
-    setMounted(true);
-  }, []);
-  const handleOpen = () => {
-    setIsOpen(true);
-    setHasBeenOpened(true);
-  };
-  if (!mounted || process.env.NODE_ENV !== "development") {
-    return null;
-  }
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    !isOpen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "button",
-      {
-        css: styles.button,
-        onClick: handleOpen,
-        title: "Open Studio",
-        "aria-label": "Open Studio media manager",
-        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageIcon, {})
-      }
-    ),
-    hasBeenOpened && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: [styles.overlay, !isOpen && styles.overlayHidden], children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.backdrop, onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.modal, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react.Suspense, { fallback: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LoadingState, {}), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StudioUI, { onClose: () => setIsOpen(false), isVisible: isOpen }) }) })
-    ] })
-  ] });
-}
-function ImageIcon() {
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    "svg",
-    {
-      css: styles.buttonIcon,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "polyline", { points: "21 15 16 10 5 21" })
-      ]
-    }
-  );
-}
-function LoadingState() {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.loading, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { css: styles.loadingContent, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { css: styles.spinner }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { css: styles.loadingText, children: "Loading Studio..." })
-  ] }) });
-}
-
-
-
-
-exports.StudioButton = StudioButton; exports.getAllThumbnailPaths = _chunkVI6QG6WTjs.getAllThumbnailPaths; exports.getThumbnailPath = _chunkVI6QG6WTjs.getThumbnailPath;
+exports.getAllThumbnailPaths = _chunkVI6QG6WTjs.getAllThumbnailPaths; exports.getThumbnailPath = _chunkVI6QG6WTjs.getThumbnailPath; exports.isProcessed = _chunkVI6QG6WTjs.isProcessed;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/chrisb/Sites/studio/dist/index.js","../src/components/StudioButton.tsx"],"names":[],"mappings":"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","file":"/Users/chrisb/Sites/studio/dist/index.js","sourcesContent":[null,"/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useState, useEffect, lazy, Suspense } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontStack, fontSize, baseReset } from './tokens'\n\n// Lazy load the full Studio UI to avoid bundling in production\nconst StudioUI = lazy(() => import('./StudioUI'))\n\nconst spin = keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nconst styles = {\n  button: css`\n    position: fixed;\n    bottom: 24px;\n    right: 24px;\n    z-index: 9998;\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: ${colors.primary};\n    color: white;\n    box-shadow: 0 4px 12px ${colors.shadowDark}, 0 1px 3px ${colors.shadow};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: ${fontStack};\n    \n    &:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 20px ${colors.shadowDark}, 0 2px 6px ${colors.shadow};\n      background: ${colors.primaryHover};\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n  `,\n  buttonIcon: css`\n    width: 24px;\n    height: 24px;\n  `,\n  overlay: css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9999;\n    transition: opacity 0.2s ease, visibility 0.2s ease;\n  `,\n  overlayHidden: css`\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  `,\n  backdrop: css`\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(26, 31, 54, 0.4);\n    backdrop-filter: blur(4px);\n  `,\n  modal: css`\n    ${baseReset}\n    position: absolute;\n    top: 24px;\n    right: 24px;\n    bottom: 24px;\n    left: 24px;\n    background-color: ${colors.surface};\n    border-radius: 12px;\n    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  `,\n  loading: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    background: ${colors.background};\n    font-family: ${fontStack};\n  `,\n  loadingContent: css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n  `,\n  spinner: css`\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    border: 3px solid ${colors.border};\n    border-top-color: ${colors.primary};\n    animation: ${spin} 0.8s linear infinite;\n  `,\n  loadingText: css`\n    color: ${colors.textSecondary};\n    font-size: ${fontSize.base};\n    font-weight: 500;\n    margin: 0;\n    letter-spacing: -0.01em;\n  `,\n}\n\n/**\n * Floating button that opens the Studio modal.\n * Fixed position in bottom-right corner.\n * Only renders in development mode.\n */\nexport function StudioButton() {\n  const [mounted, setMounted] = useState(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const [hasBeenOpened, setHasBeenOpened] = useState(false)\n\n  // Only render on client to avoid hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const handleOpen = () => {\n    setIsOpen(true)\n    setHasBeenOpened(true)\n  }\n\n  // Only render in development and on client\n  if (!mounted || process.env.NODE_ENV !== 'development') {\n    return null\n  }\n\n  return (\n    <>\n      {!isOpen && (\n        <button\n          css={styles.button}\n          onClick={handleOpen}\n          title=\"Open Studio\"\n          aria-label=\"Open Studio media manager\"\n        >\n          <ImageIcon />\n        </button>\n      )}\n\n      {/* Keep mounted once opened to preserve state */}\n      {hasBeenOpened && (\n        <div css={[styles.overlay, !isOpen && styles.overlayHidden]}>\n          <div css={styles.backdrop} onClick={() => setIsOpen(false)} />\n          <div css={styles.modal}>\n            <Suspense fallback={<LoadingState />}>\n              <StudioUI onClose={() => setIsOpen(false)} isVisible={isOpen} />\n            </Suspense>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n\nfunction ImageIcon() {\n  return (\n    <svg\n      css={styles.buttonIcon}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  )\n}\n\nfunction LoadingState() {\n  return (\n    <div css={styles.loading}>\n      <div css={styles.loadingContent}>\n        <div css={styles.spinner} />\n        <p css={styles.loadingText}>Loading Studio...</p>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"sources":["/Users/chrisb/Sites/studio/dist/index.js"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,sDAA4B;AAC5B;AACE;AACA;AACA;AACF,uLAAC","file":"/Users/chrisb/Sites/studio/dist/index.js"}

package/dist/index.mjs

@@ -1,186 +1,11 @@
-"use client";
 import {
   getAllThumbnailPaths,
-  getThumbnailPath
+  getThumbnailPath,
+  isProcessed
 } from "./chunk-TRYWHLJ2.mjs";
-import {
-  baseReset,
-  colors,
-  fontSize,
-  fontStack
-} from "./chunk-RHI3UROE.mjs";
-
-// src/components/StudioButton.tsx
-import { useState, useEffect, lazy, Suspense } from "react";
-import { css, keyframes } from "@emotion/react";
-import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
-var StudioUI = lazy(() => import("./StudioUI-QZ54STXE.mjs"));
-var spin = keyframes`
-  to {
-    transform: rotate(360deg);
-  }
-`;
-var styles = {
-  button: css`
-    position: fixed;
-    bottom: 24px;
-    right: 24px;
-    z-index: 9998;
-    width: 52px;
-    height: 52px;
-    border-radius: 50%;
-    background: ${colors.primary};
-    color: white;
-    box-shadow: 0 4px 12px ${colors.shadowDark}, 0 1px 3px ${colors.shadow};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    font-family: ${fontStack};
-    
-    &:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 20px ${colors.shadowDark}, 0 2px 6px ${colors.shadow};
-      background: ${colors.primaryHover};
-    }
-    
-    &:active {
-      transform: translateY(0);
-    }
-  `,
-  buttonIcon: css`
-    width: 24px;
-    height: 24px;
-  `,
-  overlay: css`
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9999;
-    transition: opacity 0.2s ease, visibility 0.2s ease;
-  `,
-  overlayHidden: css`
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  `,
-  backdrop: css`
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(26, 31, 54, 0.4);
-    backdrop-filter: blur(4px);
-  `,
-  modal: css`
-    ${baseReset}
-    position: absolute;
-    top: 24px;
-    right: 24px;
-    bottom: 24px;
-    left: 24px;
-    background-color: ${colors.surface};
-    border-radius: 12px;
-    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  `,
-  loading: css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    background: ${colors.background};
-    font-family: ${fontStack};
-  `,
-  loadingContent: css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-  `,
-  spinner: css`
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 3px solid ${colors.border};
-    border-top-color: ${colors.primary};
-    animation: ${spin} 0.8s linear infinite;
-  `,
-  loadingText: css`
-    color: ${colors.textSecondary};
-    font-size: ${fontSize.base};
-    font-weight: 500;
-    margin: 0;
-    letter-spacing: -0.01em;
-  `
-};
-function StudioButton() {
-  const [mounted, setMounted] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [hasBeenOpened, setHasBeenOpened] = useState(false);
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  const handleOpen = () => {
-    setIsOpen(true);
-    setHasBeenOpened(true);
-  };
-  if (!mounted || process.env.NODE_ENV !== "development") {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isOpen && /* @__PURE__ */ jsx(
-      "button",
-      {
-        css: styles.button,
-        onClick: handleOpen,
-        title: "Open Studio",
-        "aria-label": "Open Studio media manager",
-        children: /* @__PURE__ */ jsx(ImageIcon, {})
-      }
-    ),
-    hasBeenOpened && /* @__PURE__ */ jsxs("div", { css: [styles.overlay, !isOpen && styles.overlayHidden], children: [
-      /* @__PURE__ */ jsx("div", { css: styles.backdrop, onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ jsx("div", { css: styles.modal, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingState, {}), children: /* @__PURE__ */ jsx(StudioUI, { onClose: () => setIsOpen(false), isVisible: isOpen }) }) })
-    ] })
-  ] });
-}
-function ImageIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      css: styles.buttonIcon,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [
-        /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
-      ]
-    }
-  );
-}
-function LoadingState() {
-  return /* @__PURE__ */ jsx("div", { css: styles.loading, children: /* @__PURE__ */ jsxs("div", { css: styles.loadingContent, children: [
-    /* @__PURE__ */ jsx("div", { css: styles.spinner }),
-    /* @__PURE__ */ jsx("p", { css: styles.loadingText, children: "Loading Studio..." })
-  ] }) });
-}
 export {
-  StudioButton,
   getAllThumbnailPaths,
-  getThumbnailPath
+  getThumbnailPath,
+  isProcessed
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/StudioButton.tsx"],"sourcesContent":["/** @jsxImportSource @emotion/react */\n'use client'\n\nimport { useState, useEffect, lazy, Suspense } from 'react'\nimport { css, keyframes } from '@emotion/react'\nimport { colors, fontStack, fontSize, baseReset } from './tokens'\n\n// Lazy load the full Studio UI to avoid bundling in production\nconst StudioUI = lazy(() => import('./StudioUI'))\n\nconst spin = keyframes`\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nconst styles = {\n  button: css`\n    position: fixed;\n    bottom: 24px;\n    right: 24px;\n    z-index: 9998;\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: ${colors.primary};\n    color: white;\n    box-shadow: 0 4px 12px ${colors.shadowDark}, 0 1px 3px ${colors.shadow};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-family: ${fontStack};\n    \n    &:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 20px ${colors.shadowDark}, 0 2px 6px ${colors.shadow};\n      background: ${colors.primaryHover};\n    }\n    \n    &:active {\n      transform: translateY(0);\n    }\n  `,\n  buttonIcon: css`\n    width: 24px;\n    height: 24px;\n  `,\n  overlay: css`\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 9999;\n    transition: opacity 0.2s ease, visibility 0.2s ease;\n  `,\n  overlayHidden: css`\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n  `,\n  backdrop: css`\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(26, 31, 54, 0.4);\n    backdrop-filter: blur(4px);\n  `,\n  modal: css`\n    ${baseReset}\n    position: absolute;\n    top: 24px;\n    right: 24px;\n    bottom: 24px;\n    left: 24px;\n    background-color: ${colors.surface};\n    border-radius: 12px;\n    box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  `,\n  loading: css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    background: ${colors.background};\n    font-family: ${fontStack};\n  `,\n  loadingContent: css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 16px;\n  `,\n  spinner: css`\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    border: 3px solid ${colors.border};\n    border-top-color: ${colors.primary};\n    animation: ${spin} 0.8s linear infinite;\n  `,\n  loadingText: css`\n    color: ${colors.textSecondary};\n    font-size: ${fontSize.base};\n    font-weight: 500;\n    margin: 0;\n    letter-spacing: -0.01em;\n  `,\n}\n\n/**\n * Floating button that opens the Studio modal.\n * Fixed position in bottom-right corner.\n * Only renders in development mode.\n */\nexport function StudioButton() {\n  const [mounted, setMounted] = useState(false)\n  const [isOpen, setIsOpen] = useState(false)\n  const [hasBeenOpened, setHasBeenOpened] = useState(false)\n\n  // Only render on client to avoid hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const handleOpen = () => {\n    setIsOpen(true)\n    setHasBeenOpened(true)\n  }\n\n  // Only render in development and on client\n  if (!mounted || process.env.NODE_ENV !== 'development') {\n    return null\n  }\n\n  return (\n    <>\n      {!isOpen && (\n        <button\n          css={styles.button}\n          onClick={handleOpen}\n          title=\"Open Studio\"\n          aria-label=\"Open Studio media manager\"\n        >\n          <ImageIcon />\n        </button>\n      )}\n\n      {/* Keep mounted once opened to preserve state */}\n      {hasBeenOpened && (\n        <div css={[styles.overlay, !isOpen && styles.overlayHidden]}>\n          <div css={styles.backdrop} onClick={() => setIsOpen(false)} />\n          <div css={styles.modal}>\n            <Suspense fallback={<LoadingState />}>\n              <StudioUI onClose={() => setIsOpen(false)} isVisible={isOpen} />\n            </Suspense>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n\nfunction ImageIcon() {\n  return (\n    <svg\n      css={styles.buttonIcon}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n      <circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\" />\n      <polyline points=\"21 15 16 10 5 21\" />\n    </svg>\n  )\n}\n\nfunction LoadingState() {\n  return (\n    <div css={styles.loading}>\n      <div css={styles.loadingContent}>\n        <div css={styles.spinner} />\n        <p css={styles.loadingText}>Loading Studio...</p>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/next.config.mjs

@@ -0,0 +1,22 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Enable standalone output for better CLI experience
+  output: 'standalone',
+  
+  // Emotion requires this for the css prop to work
+  compiler: {
+    emotion: true,
+  },
+  
+  // Disable static generation for this dev tool
+  experimental: {
+    // Allow importing from src/ in app/
+  },
+  
+  // Environment variables to expose to the client
+  env: {
+    NEXT_PUBLIC_STUDIO_WORKSPACE: process.env.STUDIO_WORKSPACE || process.cwd(),
+  },
+}
+
+export default nextConfig

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@gallop.software/studio",
-  "version": "1.5.9",
-  "description": "Media manager for Gallop templates - upload, process, and sync images to CDN",
+  "version": "2.0.0",
+  "description": "Standalone media manager for Gallop templates - upload, process, and sync images to CDN",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "studio": "./bin/studio.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -18,11 +21,16 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "bin",
+    "app",
+    "src",
+    "next.config.mjs"
   ],
   "scripts": {
     "build": "tsup",
-    "dev": "tsup --watch",
+    "dev": "next dev -p 3001",
+    "start": "next dev -p 3001",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run build"
@@ -33,7 +41,8 @@
     "cloudflare-r2",
     "nextjs",
     "gallop",
-    "cdn"
+    "cdn",
+    "cli"
   ],
   "author": "Gallop Software",
   "license": "MIT",
@@ -45,16 +54,15 @@
   "bugs": {
     "url": "https://github.com/gallop-software/studio/issues"
   },
-  "peerDependencies": {
-    "next": ">=14.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
-  },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.705.0",
     "@emotion/react": "^11.14.0",
     "blurhash": "^2.0.5",
     "clsx": "^2.1.1",
+    "next": "^15.1.0",
+    "open": "^10.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "sharp": "^0.33.5"
   },