npm - @inkly-org/cli - Versions diffs - 0.5.1 - Mend

@inkly-org/cli 0.5.1

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 (13) hide show

package/README.md +94 -0
package/dist/capture-listener.js +320 -0
package/dist/cli.js +5501 -0
package/dist/template/demo.html +567 -0
package/dist/template/hub-index.html +406 -0
package/package.json +53 -0
package/template/demo.html +567 -0
package/template/hub-index.html +406 -0
package/vendor/react-dom-client.mjs +48 -0
package/vendor/react-dom.mjs +17 -0
package/vendor/react-jsx-runtime.mjs +16 -0
package/vendor/react.mjs +16 -0
package/vendor/vendor-manifest.json +27 -0

package/dist/template/hub-index.html ADDED Viewed

@@ -0,0 +1,406 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>inkly dev — hub</title>
+    <!-- Default to the Inkly platform favicon; replaced below if the hub
+         sets its own `brand.favicon`. -->
+    <link rel="icon" href="https://www.inklyai.dev/favicon.ico" />
+    <!-- Same runtime.css the per-demo viewer uses. It now also ships the
+         `.inkly-hub-index` styles so the CLI hub index, platform hub
+         viewer, and future CDN viewer all render from the same CSS. -->
+    <link rel="stylesheet" href="/__inkly/runtime.css" />
+    <script type="importmap">{"imports":{"react":"/__inkly/vendor/react.mjs","react-dom":"/__inkly/vendor/react-dom.mjs","react-dom/client":"/__inkly/vendor/react-dom-client.mjs","react/jsx-runtime":"/__inkly/vendor/react-jsx-runtime.mjs"}}</script>
+    <link rel="modulepreload" href="/__inkly/vendor/react.mjs" crossorigin="anonymous" />
+    <link rel="modulepreload" href="/__inkly/vendor/react-dom.mjs" crossorigin="anonymous" />
+    <link rel="modulepreload" href="/__inkly/vendor/react-dom-client.mjs" crossorigin="anonymous" />
+    <link rel="modulepreload" href="/__inkly/vendor/react-jsx-runtime.mjs" crossorigin="anonymous" />
+    <link rel="prefetch" href="/__inkly/runtime.js" as="script" crossorigin />
+    <script id="__inkly_hub_data" type="application/json">{"hub":{"name":""},"demos":[]}</script>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        min-height: 100%;
+        overflow: hidden;
+      }
+      body {
+        display: flex;
+        flex-direction: column;
+      }
+      #root {
+        flex: 1 1 auto;
+        min-height: 0;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .inkly-hub-loading {
+        font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+        color: #1f1f1f;
+      }
+      .inkly-hub-skeleton {
+        min-height: 100vh;
+        background: #f7f7f7;
+        color: #1f1f1f;
+      }
+      .inkly-hub-skeleton-head {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        /* Match the 56px demo viewer header height. */
+        height: 56px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 24px;
+        padding: 0 28px;
+        border-bottom: 1px solid #dedede;
+        background: rgba(252, 252, 252, 0.92);
+        backdrop-filter: blur(10px);
+      }
+      .inkly-hub-skeleton-brand,
+      .inkly-hub-skeleton-tabs,
+      .inkly-hub-skeleton-actions,
+      .inkly-hub-skeleton-title,
+      .inkly-hub-skeleton-subtitle,
+      .inkly-hub-skeleton-card,
+      .inkly-hub-skeleton-line {
+        position: relative;
+        overflow: hidden;
+        background: #e8e8e8;
+      }
+      .inkly-hub-skeleton-brand,
+      .inkly-hub-skeleton-tabs,
+      .inkly-hub-skeleton-actions,
+      .inkly-hub-skeleton-title,
+      .inkly-hub-skeleton-subtitle,
+      .inkly-hub-skeleton-card,
+      .inkly-hub-skeleton-line {
+        animation: inklySkeletonPulse 1.35s ease-in-out infinite;
+      }
+      .inkly-hub-skeleton-brand {
+        width: 168px;
+        height: 30px;
+        border-radius: 7px;
+      }
+      .inkly-hub-skeleton-tabs {
+        width: min(420px, 38vw);
+        height: 34px;
+        border-radius: 8px;
+      }
+      .inkly-hub-skeleton-actions {
+        width: 116px;
+        height: 32px;
+        border-radius: 7px;
+      }
+      .inkly-hub-skeleton-body {
+        width: min(1180px, calc(100vw - 48px));
+        margin: 0 auto;
+        padding: 34px 0 48px;
+      }
+      .inkly-hub-skeleton-row {
+        display: flex;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 24px;
+        margin-bottom: 26px;
+      }
+      .inkly-hub-skeleton-title {
+        width: min(340px, 54vw);
+        height: 42px;
+        border-radius: 8px;
+      }
+      .inkly-hub-skeleton-subtitle {
+        width: min(240px, 40vw);
+        height: 16px;
+        margin-top: 12px;
+        border-radius: 5px;
+      }
+      .inkly-hub-skeleton-count {
+        width: 86px;
+      }
+      .inkly-hub-skeleton-line {
+        height: 13px;
+        margin-top: 9px;
+        border-radius: 5px;
+      }
+      .inkly-hub-skeleton-grid {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 18px;
+      }
+      .inkly-hub-skeleton-card {
+        aspect-ratio: 16 / 9;
+        border: 1px solid #dedede;
+        border-radius: 8px;
+        background: #ececec;
+      }
+      .inkly-hub-skeleton-card::after {
+        content: "";
+        position: absolute;
+        left: 18px;
+        right: 18px;
+        bottom: 18px;
+        height: 42px;
+        border-radius: 7px;
+        background: rgba(255, 255, 255, 0.58);
+      }
+      @media (max-width: 820px) {
+        .inkly-hub-skeleton-head {
+          height: auto;
+          align-items: stretch;
+          flex-direction: column;
+          padding: 16px;
+        }
+        .inkly-hub-skeleton-tabs,
+        .inkly-hub-skeleton-actions,
+        .inkly-hub-skeleton-brand {
+          width: 100%;
+        }
+        .inkly-hub-skeleton-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+      @keyframes inklySkeletonPulse {
+        0%, 100% { opacity: 0.62; }
+        50% { opacity: 1; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root">
+      <div class="inkly-hub-loading inkly-hub-skeleton" aria-busy="true" aria-label="Loading hub">
+        <div class="inkly-hub-skeleton-head">
+          <div class="inkly-hub-skeleton-brand"></div>
+          <div class="inkly-hub-skeleton-tabs"></div>
+          <div class="inkly-hub-skeleton-actions"></div>
+        </div>
+        <main class="inkly-hub-skeleton-body">
+          <div class="inkly-hub-skeleton-row">
+            <div>
+              <div class="inkly-hub-skeleton-title"></div>
+              <div class="inkly-hub-skeleton-subtitle"></div>
+            </div>
+            <div class="inkly-hub-skeleton-count">
+              <div class="inkly-hub-skeleton-line"></div>
+              <div class="inkly-hub-skeleton-line"></div>
+            </div>
+          </div>
+          <section class="inkly-hub-skeleton-grid">
+            <div class="inkly-hub-skeleton-card"></div>
+            <div class="inkly-hub-skeleton-card"></div>
+            <div class="inkly-hub-skeleton-card"></div>
+            <div class="inkly-hub-skeleton-card"></div>
+            <div class="inkly-hub-skeleton-card"></div>
+            <div class="inkly-hub-skeleton-card"></div>
+          </section>
+        </main>
+      </div>
+    </div>
+    <script type="module">
+      // Same runtime artifact the demo page loads. React is externalized
+      // and resolved by the import map above.
+      let createElement;
+      let createRoot;
+      let HubIndex;
+      try {
+        ({ createElement, createRoot, HubIndex } = await import('/__inkly/runtime.js'));
+      } catch (err) {
+        const errorEl = document.createElement('div');
+        errorEl.className = 'inkly-hub-loading';
+        const title = document.createElement('strong');
+        title.textContent = 'Runtime bundle missing';
+        const body = document.createElement('pre');
+        body.textContent =
+          'The hub loaded, but the Inkly runtime did not.\n\n' +
+          'Check /__inkly/runtime.js and /__inkly/vendor/react*.mjs, then restart inkly dev.\n\n' +
+          String(err && err.stack ? err.stack : err);
+        errorEl.append(title, document.createElement('br'), body);
+        const rootEl = document.getElementById('root');
+        if (rootEl) rootEl.replaceChildren(errorEl);
+        throw err;
+      }
+      const rootEl = document.getElementById('root');
+      const root = createRoot(rootEl);
+      function readInlineData() {
+        const node = document.getElementById('__inkly_hub_data');
+        if (!node) return { hub: { name: 'hub' }, demos: [] };
+        try { return JSON.parse(node.textContent || '{}'); } catch (e) { return { hub: { name: 'hub' }, demos: [] }; }
+      }
+      function currentCollection() {
+        try {
+          return new URLSearchParams(window.location.search).get('collection') || 'all';
+        } catch (e) {
+          return 'all';
+        }
+      }
+      let latestHubData = readInlineData();
+      function collectionKeyFromHref(href) {
+        try {
+          const url = new URL(href, window.location.origin);
+          if (url.origin !== window.location.origin) return null;
+          if (url.pathname !== '/') return null;
+          return url.searchParams.get('collection') || 'all';
+        } catch (e) {
+          return null;
+        }
+      }
+      function hrefForCollection(key) {
+        return key === 'all' ? '/' : '/?collection=' + encodeURIComponent(key);
+      }
+      function hrefForDemo(slug) {
+        return '/' + String(slug || '').split('/').map(encodeURIComponent).join('/');
+      }
+      function navigateCollection(key, mode) {
+        const href = hrefForCollection(key);
+        if (
+          window.location.pathname + window.location.search !== href
+        ) {
+          const fn = mode === 'replace' ? 'replaceState' : 'pushState';
+          window.history[fn]({ inklyCollection: key }, '', href);
+        }
+        renderHub(latestHubData, key);
+      }
+      function cliRenderLink(props) {
+        const children = props.children;
+        const attrs = Object.assign({}, props);
+        delete attrs.children;
+        const isCollectionLink = props['data-inkly-nav'] === 'collection';
+        if (isCollectionLink) {
+          attrs.onClick = function (event) {
+            if (
+              event.defaultPrevented ||
+              event.button !== 0 ||
+              event.metaKey ||
+              event.altKey ||
+              event.ctrlKey ||
+              event.shiftKey ||
+              props.target
+            ) {
+              return;
+            }
+            const key = collectionKeyFromHref(props.href);
+            if (!key) return;
+            event.preventDefault();
+            navigateCollection(key, 'push');
+          };
+        }
+        return createElement('a', attrs, children);
+      }
+      // Stylesheet element holding the active preset's hub-index CSS.
+      // Re-fetched whenever the active theme changes. Created once,
+      // mutated on subsequent renders so multiple themes can't pile up.
+      let themeStyleEl = null;
+      function applyTheme(themeId) {
+        if (!themeId) themeId = 'inkly';
+        if (themeStyleEl && themeStyleEl.dataset.themeId === themeId) return;
+        if (!themeStyleEl) {
+          themeStyleEl = document.createElement('link');
+          themeStyleEl.rel = 'stylesheet';
+          document.head.appendChild(themeStyleEl);
+        }
+        themeStyleEl.href = '/__inkly/theme/' + encodeURIComponent(themeId) + '.css';
+        themeStyleEl.dataset.themeId = themeId;
+      }
+      function renderHub(data, activeCollection) {
+        latestHubData = data;
+        const hubName = (data && data.hub && data.hub.name) || 'hub';
+        document.title = hubName + ' — inkly dev';
+        // Load the preset's CSS into the document. <HubIndex/> owns the
+        // root div, the data-layout / data-theme attrs, and the CSS
+        // variable application — we just supply the merged tokens and
+        // inject the preset CSS into <head> for the scoped selectors to
+        // match.
+        const injectedTheme = (data && data.theme) || {};
+        const themeId = injectedTheme.id || (data && data.hub && data.hub.theme) || 'inkly';
+        applyTheme(themeId);
+        // Merge preset defaults → hub tokens, same cascade as the hosted
+        // hub page. The CLI injects the current preset because the browser
+        // runtime bundle does not ship the server-only theme catalog.
+        const tokens = Object.assign(
+          {},
+          injectedTheme.tokens || {},
+          (data && data.hub && data.hub.tokens) || {},
+        );
+        const favicon = data && data.hub && data.hub.brand && data.hub.brand.favicon;
+        if (favicon) {
+          let link = document.querySelector('link[rel="icon"]');
+          if (!link) {
+            link = document.createElement('link');
+            link.rel = 'icon';
+            document.head.appendChild(link);
+          }
+          link.href = favicon;
+        }
+        root.render(
+          createElement(HubIndex, {
+            data,
+            tokens,
+            activeCollection: activeCollection || currentCollection(),
+            demoHref: hrefForDemo,
+            collectionHref: (key) =>
+              key === 'all' ? '/' : '/?collection=' + encodeURIComponent(key),
+            renderLink: cliRenderLink,
+            thumbnailThemeId: themeId,
+            thumbnailThemeTokens: injectedTheme.tokens || undefined,
+            thumbnailThemeCss: injectedTheme.css || undefined,
+            // CLI serves HTML snapshots at /__inkly/snapshot/<slug>/<path>;
+            // platform serves them at /api/demo-html/<slug>/<path>. The
+            // shared <HubThumbnail> uses whatever the host hands it.
+            resolveHtmlThumbnailSrc: (slug, snapshotPath) =>
+              '/__inkly/snapshot/' + String(slug || '').split('/').map(encodeURIComponent).join('/') + '/' +
+              snapshotPath.split('/').map(encodeURIComponent).join('/'),
+          }),
+        );
+      }
+      renderHub(latestHubData);
+      window.addEventListener('popstate', function () {
+        renderHub(latestHubData, currentCollection());
+      });
+      // HMR: re-fetch the hub payload when the dev server tells us the
+      // hub or any demo config changed.
+      async function refetchAndRender() {
+        try {
+          const [hubRes, demosRes] = await Promise.all([
+            fetch('/__inkly/hub', { cache: 'no-store' }),
+            fetch('/__inkly/demos', { cache: 'no-store' }),
+          ]);
+          if (!hubRes.ok || !demosRes.ok) return;
+          const hub = await hubRes.json();
+          const demos = await demosRes.json();
+          renderHub({ hub, demos, theme: latestHubData && latestHubData.theme }, currentCollection());
+        } catch (e) {
+          /* ignore — keep last render */
+        }
+      }
+      if (import.meta.hot) {
+        import.meta.hot.on('inkly:hub-changed', refetchAndRender);
+      }
+    </script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "name": "@inkly-org/cli",
+  "version": "0.5.1",
+  "description": "Inkly CLI — scaffold and locally preview demo configs.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "bin": {
+    "inkly": "./dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "vendor",
+    "template",
+    "README.md",
+    "!dist/**/*.map"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "prepublishOnly": "npm run build && npm run typecheck && npm run test"
+  },
+  "dependencies": {
+    "@opentelemetry/core": "^2.7.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.1",
+    "@sentry/node": "^10.56.0",
+    "chokidar": "^4.0.1",
+    "fflate": "^0.8.3",
+    "mri": "^1.2.0",
+    "posthog-node": "^5.35.13",
+    "sharp": "^0.34.5",
+    "subset-font": "^2.5.0",
+    "vite": "^5.4.10",
+    "ws": "^8.20.0"
+  },
+  "devDependencies": {
+    "@inkly/demo-react": "*",
+    "@inkly/demo-schema": "*",
+    "@inkly/hub-skeleton": "*",
+    "@inkly/shared-html-capture": "*",
+    "@types/node": "^20.17.6",
+    "@types/ws": "^8.18.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  }
+}