@tenderprompt/cli 0.1.27 → 0.1.28

package/dist/index.js

@@ -434,8 +434,8 @@ Examples:
   printf "$SHOPIFY_APP_AUTOMATION_TOKEN" | tender connectors shopify app-automation-token set conn_123 --token-stdin --expires-at 2026-08-22 --profile account --json
   tender connectors shopify verify conn_123 --profile account --json
   tender connectors shopify source init conn_123 --dir ./shopify-app --client-id abc --tender-app-url https://example.tenderprompt.app/client.js --tender-element tender-widget --profile account --json
-  tender connectors shopify source validate --dir ./shopify-app --execute --json
-  SHOPIFY_APP_AUTOMATION_TOKEN=shpat_... tender connectors shopify source deploy --dir ./shopify-app --confirm deploy --json
+  tender connectors shopify source validate conn_123 --dir ./shopify-app --execute --json
+  SHOPIFY_APP_AUTOMATION_TOKEN=shpat_... tender connectors shopify source deploy conn_123 --dir ./shopify-app --confirm deploy --json
   tender connectors bind SHOPIFY_CONNECTOR conn_123 --instance default --json`;
 }
 function connectorsShopifyCreateHelp() {
@@ -1476,6 +1476,47 @@ function tenderCliCapabilities() {
             persistence: 'session_only',
             writesToCheckout: false,
         },
+        connectors: {
+            mode: 'tenant_owned_platform_bindings',
+            listCommand: 'tender connectors list --profile account --json',
+            bindCommand: 'tender connectors bind <binding-name> <connector-id> --instance <instance-id> --json',
+            shopify: {
+                playbookId: 'shopify-connector-custom-app',
+                playbookCommand: 'tender playbooks get shopify-connector-custom-app --json',
+                customerMetadataPlaybookCommand: 'tender playbooks get shopify-connector-customer-metadata-widget --json',
+                whatItIs: 'A merchant-owned Shopify custom app exposed to Tender apps through an explicit platform connector binding.',
+                whenToUse: [
+                    'Shopify Admin GraphQL reads or writes',
+                    'customer metafields or customer-linked metaobjects',
+                    'app-owned custom data definitions',
+                    'Theme App Extension app blocks',
+                    'privileged background Shopify work that browser code cannot safely perform',
+                ],
+                whenNotToUse: [
+                    'pure frontend widgets',
+                    'Tender analytics only',
+                    'public Shopify data already present on the page',
+                    'client-side event publishing without Admin API writes',
+                ],
+                binding: {
+                    name: 'SHOPIFY_CONNECTOR',
+                    source: 'platform:shopify_connector',
+                    interface: 'ShopifyConnector',
+                    callShape: 'await this.env.SHOPIFY_CONNECTOR.invoke("shopify.graphql", { query, variables })',
+                },
+                sourceProject: {
+                    durableIdentity: 'connector.sourceProject.sourceArtifactId',
+                    targetPackId: 'shopify-connector-source',
+                    visibility: 'internal_source_artifact_not_customer_facing_app',
+                },
+                guardrails: [
+                    'Use the account profile because connectors are account-level resources.',
+                    'Use minimum Shopify scopes for the requested job.',
+                    'Never commit client secrets, Admin API tokens, app automation tokens, Tender tokens, or customer data exports.',
+                    'Do not create bindings/<id>/ files for Shopify connectors; use the platform connector source in app.json.',
+                ],
+            },
+        },
         analyticsAuthoring: {
             command: ANALYTICS_AUTHORING_COMMAND,
             playbookId: ANALYTICS_AUTHORING_PLAYBOOK_ID,
@@ -1502,6 +1543,8 @@ function tenderCliCapabilities() {
                 'tender app db --help',
                 'tender app bindings outbound --help',
                 'tender app outbound-auth --help',
+                'tender connectors --help',
+                'tender connectors shopify source init --help',
             ],
         },
         workflows: [
@@ -1527,6 +1570,23 @@ function tenderCliCapabilities() {
                     'Do not write fetched playbook contents into the checkout or install them as skills.',
                 ],
             },
+            {
+                name: 'shopify_connector_discovery',
+                when: 'When a Tender App needs Shopify Admin API access, customer metadata, app blocks, app-owned custom data, or a merchant-owned Shopify custom app.',
+                commands: [
+                    'tender capabilities --json',
+                    'tender playbooks list --json',
+                    'tender playbooks get shopify-connector-custom-app --json',
+                    'tender connectors list --profile account --json',
+                    'tender connectors bind SHOPIFY_CONNECTOR <connector-id> --instance default --json',
+                ],
+                notes: [
+                    'Connectors are tenant-owned platform bindings, not generated binding workers.',
+                    'The merchant owns the Shopify custom app; Tender stores connector credentials and app source metadata.',
+                    'Use connector.sourceProject.sourceArtifactId as the durable Shopify app source identity.',
+                    'Fetch shopify-connector-customer-metadata-widget when the requested job involves customer metafields, metaobjects, or profile writes.',
+                ],
+            },
             {
                 name: 'create_new_app_with_preview',
                 when: 'When the user wants a new Tender App that is immediately visible.',
@@ -11116,7 +11176,9 @@ function defaultDogProfileScopes(connectorScopes, override) {
 }
 function tenderWidgetAssetJs() {
     return `(function () {
-  const loader = (window.TenderPromptBlockLoader ||= { scripts: new Map() });
+  const loader = (window.TenderPromptBlockLoader ||= {});
+  loader.scripts ||= new Map();
+  loader.stylesheets ||= new Map();
 
   function loadScript(src) {
     if (!src) return Promise.reject(new Error("Missing Tender runtime URL"));
@@ -11142,6 +11204,96 @@ function tenderWidgetAssetJs() {
     return promise;
   }
 
+  function preloadStylesheet(src) {
+    if (!src) return Promise.resolve();
+    const existing = loader.stylesheets.get(src);
+    if (existing) return existing.promise;
+
+    const promise = new Promise((resolve) => {
+      const link = document.createElement("link");
+      link.rel = "preload";
+      link.as = "style";
+      link.href = src;
+      link.onload = resolve;
+      link.onerror = resolve;
+      document.head.appendChild(link);
+    });
+
+    loader.stylesheets.set(src, { status: "loading", promise });
+    promise.then(() => loader.stylesheets.set(src, { status: "loaded", promise }));
+    return promise;
+  }
+
+  function afterFrame(callback) {
+    requestAnimationFrame(() => requestAnimationFrame(callback));
+  }
+
+  function stylesheetLoaded(href) {
+    return performance.getEntriesByName(href).some((entry) => entry.responseEnd > 0);
+  }
+
+  function waitForWidgetPaintReady(widget, stylesheetUrl) {
+    const stylesheetHref = stylesheetUrl ? new URL(stylesheetUrl, document.baseURI).href : null;
+
+    return new Promise((resolve) => {
+      let settled = false;
+      let noShadowTimer = null;
+      let rootWithoutStylesheetTimer = null;
+      const finish = () => {
+        if (settled) return;
+        settled = true;
+        clearInterval(interval);
+        clearTimeout(timeout);
+        clearTimeout(noShadowTimer);
+        clearTimeout(rootWithoutStylesheetTimer);
+        afterFrame(resolve);
+      };
+
+      const check = () => {
+        const root = widget.shadowRoot;
+        if (!root) {
+          noShadowTimer ||= setTimeout(finish, 350);
+          return;
+        }
+
+        clearTimeout(noShadowTimer);
+        const links = Array.from(root.querySelectorAll('link[rel="stylesheet"]'));
+        const stylesheet = stylesheetHref
+          ? links.find((link) => link.href === stylesheetHref)
+          : links[0];
+
+        if (!stylesheet) {
+          rootWithoutStylesheetTimer ||= setTimeout(finish, 500);
+          return;
+        }
+
+        clearTimeout(rootWithoutStylesheetTimer);
+        if (stylesheet.sheet || stylesheetLoaded(stylesheet.href)) {
+          finish();
+          return;
+        }
+
+        stylesheet.addEventListener("load", finish, { once: true });
+        stylesheet.addEventListener("error", finish, { once: true });
+      };
+
+      const interval = setInterval(check, 25);
+      const timeout = setTimeout(finish, 2200);
+      check();
+    });
+  }
+
+  function revealWidget(mount, widget) {
+    const placeholder = mount.querySelector("[data-tender-placeholder]");
+    widget.style.visibility = "";
+    widget.style.position = "";
+    widget.style.inset = "";
+    widget.style.pointerEvents = "";
+    placeholder?.remove();
+    mount.dataset.tenderReady = "true";
+    mount.setAttribute("aria-busy", "false");
+  }
+
   class TenderPromptWidgetBlock extends HTMLElement {
     connectedCallback() {
       this.mount();
@@ -11152,7 +11304,13 @@ function tenderWidgetAssetJs() {
       const elementTag = this.dataset.tenderElementTag;
       if (!mount || !elementTag || mount.dataset.tenderMounted === "true") return;
 
+      mount.setAttribute("aria-busy", "true");
+      preloadStylesheet(this.dataset.stylesheetUrl);
       await loadScript(this.dataset.tenderRuntimeSrc);
+      await Promise.race([
+        customElements.whenDefined(elementTag),
+        new Promise((resolve) => setTimeout(resolve, 1000)),
+      ]);
 
       const widget = document.createElement(elementTag);
       for (const [key, value] of Object.entries(this.dataset)) {
@@ -11160,8 +11318,14 @@ function tenderWidgetAssetJs() {
         widget.dataset[key] = value;
       }
 
-      mount.replaceChildren(widget);
+      widget.style.visibility = "hidden";
+      widget.style.position = "absolute";
+      widget.style.inset = "0";
+      widget.style.pointerEvents = "none";
+      mount.appendChild(widget);
       mount.dataset.tenderMounted = "true";
+      await waitForWidgetPaintReady(widget, this.dataset.stylesheetUrl);
+      revealWidget(mount, widget);
     }
   }
 
@@ -11180,6 +11344,7 @@ function buildShopifySourceFiles(input) {
     const scopes = defaultDogProfileScopes(input.connector.scopes, input.scopes);
     const artifactId = input.artifactId ?? 'artifact_replace_me';
     const publicId = input.publicId ?? 'tender-widget';
+    const stylesheetUrl = new URL('./styles.css', input.tenderAppUrl).href;
     const blockName = input.blockName.trim().slice(0, 120) || 'Tender Prompt Widget';
     const connectorManifest = {
         version: 1,
@@ -11196,6 +11361,7 @@ function buildShopifySourceFiles(input) {
             publicId,
             elementTag: tenderElement,
             runtimeUrl: input.tenderAppUrl,
+            stylesheetUrl,
         },
         secrets: {
             clientSecret: 'stored in Tender connector credentials, not in this source tree',
@@ -11258,8 +11424,13 @@ access.admin = "merchant_read_write"
 
 {% liquid
   assign artifact_id = block.settings.artifact_id | default: ${tomlString(artifactId)}
-  assign runtime_src = block.settings.runtime_src | default: ${tomlString(input.tenderAppUrl)}
   assign widget_version = block.settings.widget_version | default: 'latest'
+
+  case widget_version
+    else
+      assign runtime_src = ${tomlString(input.tenderAppUrl)}
+      assign stylesheet_src = ${tomlString(stylesheetUrl)}
+  endcase
 %}
 
 <tender-prompt-widget-block
@@ -11269,6 +11440,7 @@ access.admin = "merchant_read_write"
   data-tender-public-id="{{ block.settings.public_id | escape }}"
   data-tender-version="{{ widget_version | escape }}"
   data-tender-runtime-src="{{ runtime_src | escape }}"
+  data-stylesheet-url="{{ stylesheet_src | escape }}"
   data-tender-element-tag="{{ block.settings.element_tag | escape }}"
   data-tender-mode="shopify_app_block"
   data-surface="shopify_theme_app_extension"
@@ -11285,8 +11457,21 @@ access.admin = "merchant_read_write"
     data-tender-product-handle="{{ product.handle | escape }}"
   {% endif %}
 >
-  <div data-tender-mount>
-    <p>{{ block.settings.heading }}</p>
+  <div data-tender-mount style="position: relative;">
+    <div
+      data-tender-placeholder
+      style="box-sizing: border-box; display: grid; gap: 14px; min-height: 260px; padding: 28px; border: 1px solid rgba(0,0,0,.12); border-radius: 8px; background: rgba(255,255,255,.78); color: currentColor;"
+    >
+      <div style="display: grid; gap: 8px;">
+        <p style="margin: 0; font: inherit; font-weight: 700;">{{ block.settings.heading }}</p>
+        <p style="margin: 0; max-width: 42rem; opacity: .72;">{{ block.settings.intro }}</p>
+      </div>
+      <div style="display: grid; gap: 10px;" aria-hidden="true">
+        <span style="display: block; width: 52%; height: 12px; border-radius: 999px; background: rgba(0,0,0,.10);"></span>
+        <span style="display: block; width: 100%; height: 44px; border-radius: 8px; background: rgba(0,0,0,.07);"></span>
+        <span style="display: block; width: 88%; height: 44px; border-radius: 8px; background: rgba(0,0,0,.07);"></span>
+      </div>
+    </div>
   </div>
 </tender-prompt-widget-block>
 
@@ -11296,12 +11481,6 @@ access.admin = "merchant_read_write"
   "target": "section",
   "javascript": "tender-widget.js",
   "settings": [
-    {
-      "type": "text",
-      "id": "runtime_src",
-      "label": "Tender runtime URL",
-      "default": ${JSON.stringify(input.tenderAppUrl)}
-    },
     {
       "type": "text",
       "id": "element_tag",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tenderprompt/cli",
-	"version": "0.1.27",
+	"version": "0.1.28",
 	"type": "module",
 	"bin": {
 		"tender": "bin/tender.js"