@gallop.software/studio 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as ImageSize, S as SizeEntry, I as ImageEntry, b as StudioMeta } from './types-BvdwylVD.mjs';
+export { C as CdnStatus, F as FileItem, c as StudioConfig } from './types-BvdwylVD.mjs';
+
+/**
+ * Floating button that opens the Studio modal.
+ * Fixed position in bottom-right corner.
+ * Only renders in development mode.
+ *
+ * Usage:
+ * ```tsx
+ * import { StudioButton } from '@gallop.software/studio'
+ *
+ * // In your layout
+ * <StudioButton />
+ * ```
+ */
+declare function StudioButton(): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * The meta object containing all image metadata.
+ * This is read from _data/_meta.json in the consuming project.
+ */
+declare const meta: StudioMeta;
+/**
+ * Initialize meta from a JSON object (called during build/runtime)
+ */
+declare function initializeMeta(data: StudioMeta): void;
+/**
+ * Get the resolved URL for an image, handling CDN vs local paths
+ */
+declare function getImageUrl(imageKey: string, size?: ImageSize): string | undefined;
+/**
+ * Get the full image entry for a key
+ */
+declare function getStudioMeta(imageKey: string): ImageEntry | undefined;
+/**
+ * Get size data for an image
+ */
+declare function getImageSize(imageKey: string, size?: ImageSize): SizeEntry | undefined;
+
+export { ImageEntry, ImageSize, SizeEntry, StudioButton, StudioMeta, getImageSize, getImageUrl, getStudioMeta, initializeMeta, meta };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as ImageSize, S as SizeEntry, I as ImageEntry, b as StudioMeta } from './types-BvdwylVD.js';
+export { C as CdnStatus, F as FileItem, c as StudioConfig } from './types-BvdwylVD.js';
+
+/**
+ * Floating button that opens the Studio modal.
+ * Fixed position in bottom-right corner.
+ * Only renders in development mode.
+ *
+ * Usage:
+ * ```tsx
+ * import { StudioButton } from '@gallop.software/studio'
+ *
+ * // In your layout
+ * <StudioButton />
+ * ```
+ */
+declare function StudioButton(): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * The meta object containing all image metadata.
+ * This is read from _data/_meta.json in the consuming project.
+ */
+declare const meta: StudioMeta;
+/**
+ * Initialize meta from a JSON object (called during build/runtime)
+ */
+declare function initializeMeta(data: StudioMeta): void;
+/**
+ * Get the resolved URL for an image, handling CDN vs local paths
+ */
+declare function getImageUrl(imageKey: string, size?: ImageSize): string | undefined;
+/**
+ * Get the full image entry for a key
+ */
+declare function getStudioMeta(imageKey: string): ImageEntry | undefined;
+/**
+ * Get size data for an image
+ */
+declare function getImageSize(imageKey: string, size?: ImageSize): SizeEntry | undefined;
+
+export { ImageEntry, ImageSize, SizeEntry, StudioButton, StudioMeta, getImageSize, getImageUrl, getStudioMeta, initializeMeta, meta };

package/dist/index.js

@@ -0,0 +1,103 @@
+"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; } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+// src/components/StudioButton.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var StudioUI = _react.lazy.call(void 0, () => Promise.resolve().then(() => _interopRequireWildcard(require("./StudioUI-BH7PWCKH.js"))));
+function StudioButton() {
+  const [isOpen, setIsOpen] = _react.useState.call(void 0, false);
+  if (process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    !isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        className: "fixed bottom-6 right-6 z-[9998] w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 flex items-center justify-center group",
+        title: "Open Studio",
+        "aria-label": "Open Studio media manager",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImageIcon, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute inset-0 rounded-full bg-purple-400 opacity-0 group-hover:opacity-0 animate-ping" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "fixed inset-0 z-[9999]", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-8 bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden", 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) }) }) })
+    ] })
+  ] });
+}
+function ImageIcon() {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "w-6 h-6",
+      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", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-gray-500", children: "Loading Studio..." })
+  ] }) });
+}
+
+// src/lib/meta.ts
+var _meta = {
+  $schema: "https://gallop.software/schemas/studio-meta.json",
+  version: 1,
+  generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+  images: {}
+};
+var meta = _meta;
+function initializeMeta(data) {
+  _meta = data;
+  Object.assign(meta, data);
+}
+function getImageUrl(imageKey, size = "medium") {
+  const image = meta.images[imageKey];
+  if (!image) return void 0;
+  const sizeData = image.sizes[size] || image.sizes.full;
+  if (!sizeData) return void 0;
+  if (_optionalChain([image, 'access', _ => _.cdn, 'optionalAccess', _2 => _2.synced]) && image.cdn.baseUrl) {
+    return `${image.cdn.baseUrl}${sizeData.path}`;
+  }
+  return sizeData.path;
+}
+function getStudioMeta(imageKey) {
+  return meta.images[imageKey];
+}
+function getImageSize(imageKey, size = "medium") {
+  const image = meta.images[imageKey];
+  if (!image) return void 0;
+  return image.sizes[size] || image.sizes.full;
+}
+
+
+
+
+
+
+
+exports.StudioButton = StudioButton; exports.getImageSize = getImageSize; exports.getImageUrl = getImageUrl; exports.getStudioMeta = getStudioMeta; exports.initializeMeta = initializeMeta; exports.meta = meta;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/chrisb/Sites/studio/dist/index.js","../src/components/StudioButton.tsx","../src/lib/meta.ts"],"names":[],"mappings":"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","file":"/Users/chrisb/Sites/studio/dist/index.js","sourcesContent":[null,"'use client'\n\nimport { useState, lazy, Suspense } from 'react'\n\n// Lazy load the full Studio UI to avoid bundling in production\nconst StudioUI = lazy(() => import('./StudioUI'))\n\n/**\n * Floating button that opens the Studio modal.\n * Fixed position in bottom-right corner.\n * Only renders in development mode.\n * \n * Usage:\n * ```tsx\n * import { StudioButton } from '@gallop.software/studio'\n * \n * // In your layout\n * <StudioButton />\n * ```\n */\nexport function StudioButton() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  // Only render in development\n  if (process.env.NODE_ENV !== 'development') {\n    return null\n  }\n\n  return (\n    <>\n      {/* Floating button - hidden when modal is open */}\n      {!isOpen && (\n        <button\n          onClick={() => setIsOpen(true)}\n          className=\"fixed bottom-6 right-6 z-[9998] w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 flex items-center justify-center group\"\n          title=\"Open Studio\"\n          aria-label=\"Open Studio media manager\"\n        >\n          <ImageIcon />\n          <span className=\"absolute inset-0 rounded-full bg-purple-400 opacity-0 group-hover:opacity-0 animate-ping\" />\n        </button>\n      )}\n\n      {/* Modal overlay with lazy-loaded UI */}\n      {isOpen && (\n        <div className=\"fixed inset-0 z-[9999]\">\n          {/* Backdrop */}\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={() => setIsOpen(false)}\n          />\n\n          {/* Modal */}\n          <div className=\"absolute inset-8 bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden\">\n            <Suspense fallback={<LoadingState />}>\n              <StudioUI onClose={() => setIsOpen(false)} />\n            </Suspense>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n\nfunction ImageIcon() {\n  return (\n    <svg\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      className=\"w-6 h-6\"\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 className=\"flex items-center justify-center h-full\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600\" />\n        <p className=\"text-gray-500\">Loading Studio...</p>\n      </div>\n    </div>\n  )\n}\n","import type { StudioMeta, ImageEntry, ImageSize, SizeEntry } from '../types'\n\n// Default empty meta - will be populated when reading from project\nlet _meta: StudioMeta = {\n  $schema: 'https://gallop.software/schemas/studio-meta.json',\n  version: 1,\n  generatedAt: new Date().toISOString(),\n  images: {},\n}\n\n/**\n * The meta object containing all image metadata.\n * This is read from _data/_meta.json in the consuming project.\n */\nexport const meta: StudioMeta = _meta\n\n/**\n * Initialize meta from a JSON object (called during build/runtime)\n */\nexport function initializeMeta(data: StudioMeta): void {\n  _meta = data\n  Object.assign(meta, data)\n}\n\n/**\n * Get the resolved URL for an image, handling CDN vs local paths\n */\nexport function getImageUrl(\n  imageKey: string,\n  size: ImageSize = 'medium'\n): string | undefined {\n  const image = meta.images[imageKey]\n  if (!image) return undefined\n\n  const sizeData = image.sizes[size] || image.sizes.full\n  if (!sizeData) return undefined\n\n  // If synced to CDN, use CDN URL\n  if (image.cdn?.synced && image.cdn.baseUrl) {\n    return `${image.cdn.baseUrl}${sizeData.path}`\n  }\n\n  // Otherwise use local path\n  return sizeData.path\n}\n\n/**\n * Get the full image entry for a key\n */\nexport function getStudioMeta(imageKey: string): ImageEntry | undefined {\n  return meta.images[imageKey]\n}\n\n/**\n * Get size data for an image\n */\nexport function getImageSize(\n  imageKey: string,\n  size: ImageSize = 'medium'\n): SizeEntry | undefined {\n  const image = meta.images[imageKey]\n  if (!image) return undefined\n  return image.sizes[size] || image.sizes.full\n}\n"]}

package/dist/index.mjs

@@ -0,0 +1,103 @@
+"use client";
+
+// src/components/StudioButton.tsx
+import { useState, lazy, Suspense } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var StudioUI = lazy(() => import("./StudioUI-4ST2P6R7.mjs"));
+function StudioButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  if (process.env.NODE_ENV !== "development") {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !isOpen && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(true),
+        className: "fixed bottom-6 right-6 z-[9998] w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 flex items-center justify-center group",
+        title: "Open Studio",
+        "aria-label": "Open Studio media manager",
+        children: [
+          /* @__PURE__ */ jsx(ImageIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-purple-400 opacity-0 group-hover:opacity-0 animate-ping" })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[9999]", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+          onClick: () => setIsOpen(false)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-8 bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden", children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(LoadingState, {}), children: /* @__PURE__ */ jsx(StudioUI, { onClose: () => setIsOpen(false) }) }) })
+    ] })
+  ] });
+}
+function ImageIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "w-6 h-6",
+      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", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" }),
+    /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "Loading Studio..." })
+  ] }) });
+}
+
+// src/lib/meta.ts
+var _meta = {
+  $schema: "https://gallop.software/schemas/studio-meta.json",
+  version: 1,
+  generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+  images: {}
+};
+var meta = _meta;
+function initializeMeta(data) {
+  _meta = data;
+  Object.assign(meta, data);
+}
+function getImageUrl(imageKey, size = "medium") {
+  const image = meta.images[imageKey];
+  if (!image) return void 0;
+  const sizeData = image.sizes[size] || image.sizes.full;
+  if (!sizeData) return void 0;
+  if (image.cdn?.synced && image.cdn.baseUrl) {
+    return `${image.cdn.baseUrl}${sizeData.path}`;
+  }
+  return sizeData.path;
+}
+function getStudioMeta(imageKey) {
+  return meta.images[imageKey];
+}
+function getImageSize(imageKey, size = "medium") {
+  const image = meta.images[imageKey];
+  if (!image) return void 0;
+  return image.sizes[size] || image.sizes.full;
+}
+export {
+  StudioButton,
+  getImageSize,
+  getImageUrl,
+  getStudioMeta,
+  initializeMeta,
+  meta
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StudioButton.tsx","../src/lib/meta.ts"],"sourcesContent":["'use client'\n\nimport { useState, lazy, Suspense } from 'react'\n\n// Lazy load the full Studio UI to avoid bundling in production\nconst StudioUI = lazy(() => import('./StudioUI'))\n\n/**\n * Floating button that opens the Studio modal.\n * Fixed position in bottom-right corner.\n * Only renders in development mode.\n * \n * Usage:\n * ```tsx\n * import { StudioButton } from '@gallop.software/studio'\n * \n * // In your layout\n * <StudioButton />\n * ```\n */\nexport function StudioButton() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  // Only render in development\n  if (process.env.NODE_ENV !== 'development') {\n    return null\n  }\n\n  return (\n    <>\n      {/* Floating button - hidden when modal is open */}\n      {!isOpen && (\n        <button\n          onClick={() => setIsOpen(true)}\n          className=\"fixed bottom-6 right-6 z-[9998] w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-lg hover:shadow-xl hover:scale-105 transition-all duration-200 flex items-center justify-center group\"\n          title=\"Open Studio\"\n          aria-label=\"Open Studio media manager\"\n        >\n          <ImageIcon />\n          <span className=\"absolute inset-0 rounded-full bg-purple-400 opacity-0 group-hover:opacity-0 animate-ping\" />\n        </button>\n      )}\n\n      {/* Modal overlay with lazy-loaded UI */}\n      {isOpen && (\n        <div className=\"fixed inset-0 z-[9999]\">\n          {/* Backdrop */}\n          <div\n            className=\"absolute inset-0 bg-black/50 backdrop-blur-sm\"\n            onClick={() => setIsOpen(false)}\n          />\n\n          {/* Modal */}\n          <div className=\"absolute inset-8 bg-white rounded-2xl shadow-2xl flex flex-col overflow-hidden\">\n            <Suspense fallback={<LoadingState />}>\n              <StudioUI onClose={() => setIsOpen(false)} />\n            </Suspense>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n\nfunction ImageIcon() {\n  return (\n    <svg\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      className=\"w-6 h-6\"\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 className=\"flex items-center justify-center h-full\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600\" />\n        <p className=\"text-gray-500\">Loading Studio...</p>\n      </div>\n    </div>\n  )\n}\n","import type { StudioMeta, ImageEntry, ImageSize, SizeEntry } from '../types'\n\n// Default empty meta - will be populated when reading from project\nlet _meta: StudioMeta = {\n  $schema: 'https://gallop.software/schemas/studio-meta.json',\n  version: 1,\n  generatedAt: new Date().toISOString(),\n  images: {},\n}\n\n/**\n * The meta object containing all image metadata.\n * This is read from _data/_meta.json in the consuming project.\n */\nexport const meta: StudioMeta = _meta\n\n/**\n * Initialize meta from a JSON object (called during build/runtime)\n */\nexport function initializeMeta(data: StudioMeta): void {\n  _meta = data\n  Object.assign(meta, data)\n}\n\n/**\n * Get the resolved URL for an image, handling CDN vs local paths\n */\nexport function getImageUrl(\n  imageKey: string,\n  size: ImageSize = 'medium'\n): string | undefined {\n  const image = meta.images[imageKey]\n  if (!image) return undefined\n\n  const sizeData = image.sizes[size] || image.sizes.full\n  if (!sizeData) return undefined\n\n  // If synced to CDN, use CDN URL\n  if (image.cdn?.synced && image.cdn.baseUrl) {\n    return `${image.cdn.baseUrl}${sizeData.path}`\n  }\n\n  // Otherwise use local path\n  return sizeData.path\n}\n\n/**\n * Get the full image entry for a key\n */\nexport function getStudioMeta(imageKey: string): ImageEntry | undefined {\n  return meta.images[imageKey]\n}\n\n/**\n * Get size data for an image\n */\nexport function getImageSize(\n  imageKey: string,\n  size: ImageSize = 'medium'\n): SizeEntry | undefined {\n  const image = meta.images[imageKey]\n  if (!image) return undefined\n  return image.sizes[size] || image.sizes.full\n}\n"],"mappings":";;;AAEA,SAAS,UAAU,MAAM,gBAAgB;AA2BrC,mBASM,KANF,YAHJ;AAxBJ,IAAM,WAAW,KAAK,MAAM,OAAO,yBAAY,CAAC;AAezC,SAAS,eAAe;AAC7B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAG1C,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,WAAO;AAAA,EACT;AAEA,SACE,iCAEG;AAAA,KAAC,UACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,MAAM,UAAU,IAAI;AAAA,QAC7B,WAAU;AAAA,QACV,OAAM;AAAA,QACN,cAAW;AAAA,QAEX;AAAA,8BAAC,aAAU;AAAA,UACX,oBAAC,UAAK,WAAU,4FAA2F;AAAA;AAAA;AAAA,IAC7G;AAAA,IAID,UACC,qBAAC,SAAI,WAAU,0BAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAM,UAAU,KAAK;AAAA;AAAA,MAChC;AAAA,MAGA,oBAAC,SAAI,WAAU,kFACb,8BAAC,YAAS,UAAU,oBAAC,gBAAa,GAChC,8BAAC,YAAS,SAAS,MAAM,UAAU,KAAK,GAAG,GAC7C,GACF;AAAA,OACF;AAAA,KAEJ;AAEJ;AAEA,SAAS,YAAY;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAM;AAAA,MACN,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAO;AAAA,MACP,aAAa;AAAA,MACb,eAAc;AAAA,MACd,gBAAe;AAAA,MACf,WAAU;AAAA,MAEV;AAAA,4BAAC,UAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,KAAI,IAAG,KAAI;AAAA,QACvD,oBAAC,YAAO,IAAG,OAAM,IAAG,OAAM,GAAE,OAAM;AAAA,QAClC,oBAAC,cAAS,QAAO,oBAAmB;AAAA;AAAA;AAAA,EACtC;AAEJ;AAEA,SAAS,eAAe;AACtB,SACE,oBAAC,SAAI,WAAU,2CACb,+BAAC,SAAI,WAAU,oCACb;AAAA,wBAAC,SAAI,WAAU,kEAAiE;AAAA,IAChF,oBAAC,OAAE,WAAU,iBAAgB,+BAAiB;AAAA,KAChD,GACF;AAEJ;;;ACzFA,IAAI,QAAoB;AAAA,EACtB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,cAAa,oBAAI,KAAK,GAAE,YAAY;AAAA,EACpC,QAAQ,CAAC;AACX;AAMO,IAAM,OAAmB;AAKzB,SAAS,eAAe,MAAwB;AACrD,UAAQ;AACR,SAAO,OAAO,MAAM,IAAI;AAC1B;AAKO,SAAS,YACd,UACA,OAAkB,UACE;AACpB,QAAM,QAAQ,KAAK,OAAO,QAAQ;AAClC,MAAI,CAAC,MAAO,QAAO;AAEnB,QAAM,WAAW,MAAM,MAAM,IAAI,KAAK,MAAM,MAAM;AAClD,MAAI,CAAC,SAAU,QAAO;AAGtB,MAAI,MAAM,KAAK,UAAU,MAAM,IAAI,SAAS;AAC1C,WAAO,GAAG,MAAM,IAAI,OAAO,GAAG,SAAS,IAAI;AAAA,EAC7C;AAGA,SAAO,SAAS;AAClB;AAKO,SAAS,cAAc,UAA0C;AACtE,SAAO,KAAK,OAAO,QAAQ;AAC7B;AAKO,SAAS,aACd,UACA,OAAkB,UACK;AACvB,QAAM,QAAQ,KAAK,OAAO,QAAQ;AAClC,MAAI,CAAC,MAAO,QAAO;AACnB,SAAO,MAAM,MAAM,IAAI,KAAK,MAAM,MAAM;AAC1C;","names":[]}

package/dist/types-BvdwylVD.d.mts

@@ -0,0 +1,75 @@
+/**
+ * Image size variants
+ */
+type ImageSize = 'small' | 'medium' | 'large' | 'full';
+/**
+ * Size entry with path and dimensions
+ */
+interface SizeEntry {
+    path: string;
+    width: number;
+    height: number;
+}
+/**
+ * CDN sync status
+ */
+interface CdnStatus {
+    synced: boolean;
+    baseUrl: string;
+    syncedAt: string;
+}
+/**
+ * Image entry in meta
+ */
+interface ImageEntry {
+    original: {
+        path: string;
+        width: number;
+        height: number;
+        fileSize: number;
+    };
+    sizes: Record<ImageSize, SizeEntry>;
+    blurhash: string;
+    dominantColor: string;
+    cdn: CdnStatus | null;
+}
+/**
+ * Studio meta schema
+ */
+interface StudioMeta {
+    $schema: string;
+    version: number;
+    generatedAt: string;
+    images: Record<string, ImageEntry>;
+}
+/**
+ * File/folder item for browser
+ */
+interface FileItem {
+    name: string;
+    path: string;
+    type: 'file' | 'folder';
+    size?: number;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+    cdnSynced?: boolean;
+}
+/**
+ * Studio configuration
+ */
+interface StudioConfig {
+    r2AccountId?: string;
+    r2AccessKeyId?: string;
+    r2SecretAccessKey?: string;
+    r2BucketName?: string;
+    r2PublicUrl?: string;
+    thumbnailSizes?: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+}
+
+export type { CdnStatus as C, FileItem as F, ImageEntry as I, SizeEntry as S, ImageSize as a, StudioMeta as b, StudioConfig as c };

package/dist/types-BvdwylVD.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Image size variants
+ */
+type ImageSize = 'small' | 'medium' | 'large' | 'full';
+/**
+ * Size entry with path and dimensions
+ */
+interface SizeEntry {
+    path: string;
+    width: number;
+    height: number;
+}
+/**
+ * CDN sync status
+ */
+interface CdnStatus {
+    synced: boolean;
+    baseUrl: string;
+    syncedAt: string;
+}
+/**
+ * Image entry in meta
+ */
+interface ImageEntry {
+    original: {
+        path: string;
+        width: number;
+        height: number;
+        fileSize: number;
+    };
+    sizes: Record<ImageSize, SizeEntry>;
+    blurhash: string;
+    dominantColor: string;
+    cdn: CdnStatus | null;
+}
+/**
+ * Studio meta schema
+ */
+interface StudioMeta {
+    $schema: string;
+    version: number;
+    generatedAt: string;
+    images: Record<string, ImageEntry>;
+}
+/**
+ * File/folder item for browser
+ */
+interface FileItem {
+    name: string;
+    path: string;
+    type: 'file' | 'folder';
+    size?: number;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+    cdnSynced?: boolean;
+}
+/**
+ * Studio configuration
+ */
+interface StudioConfig {
+    r2AccountId?: string;
+    r2AccessKeyId?: string;
+    r2SecretAccessKey?: string;
+    r2BucketName?: string;
+    r2PublicUrl?: string;
+    thumbnailSizes?: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+}
+
+export type { CdnStatus as C, FileItem as F, ImageEntry as I, SizeEntry as S, ImageSize as a, StudioMeta as b, StudioConfig as c };

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@gallop.software/studio",
+  "version": "0.1.0",
+  "description": "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",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./handlers": {
+      "types": "./dist/handlers.d.ts",
+      "import": "./dist/handlers.mjs",
+      "require": "./dist/handlers.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "media-manager",
+    "image-processing",
+    "cloudflare-r2",
+    "nextjs",
+    "gallop",
+    "cdn"
+  ],
+  "author": "Gallop Software",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gallop-software/studio.git"
+  },
+  "homepage": "https://github.com/gallop-software/studio#readme",
+  "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",
+    "blurhash": "^2.0.5",
+    "clsx": "^2.1.1",
+    "react-dropzone": "^14.3.5",
+    "sharp": "^0.33.5"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "eslint": "^9.17.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
+  }
+}