@vtex/faststore 0.0.1

package/dist/matter/access-code-sign-in/access-code-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"access-code-sign-in.js","names":[],"sources":["../../../src/matter/access-code-sign-in/access-code-sign-in.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, FormEvent } from 'react';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport { AccessCodeField } from '../../particles/access-code-field/access-code-field.js';\nimport { EmailField, isValidEmail } from '../../particles/email-field/email-field.js';\nimport type { ComponentActions } from '../../sdk/actions/types.js';\nimport { useDataOverride } from '../../sdk/data/data-override-context.js';\nimport type { SessionUserError } from '../../sdk/session/auth-operations.js';\nimport { useSession } from '../session/session.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment (colocated, ADR-0011) — clientProfile.email seeds the draft email as a\n// convenience pre-fill for an already-identified shopper; sessionAuthProviders.accessKeyAuthentication\n// is the account gate. Authored as a raw string, mirroring EmailIdentificationControl/ShippingSimulator.\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment AccessCodeSignInData on Query {\n    clientProfile {\n      __typename\n      id\n      email\n    }\n    sessionAuthProviders {\n      accessKeyAuthentication\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\n/** Colocated fragment slice forwarded by the reactive runtime — `null` until both fields resolve. */\nexport type AccessCodeSignInSlice = {\n  clientProfile: { email: string | null } | null;\n  sessionAuthProviders: { accessKeyAuthentication: boolean } | null;\n};\n\nexport type AccessCodeSignInStep = 'request' | 'validate';\n\nexport type AccessCodeSignInContextValue = Readonly<{\n  /** The shopper's locally-typed draft email — never written to the cart; only ever an argument to\n   * requestAccessCode/validateAccessCode. Pre-fills from `clientProfile.email` when known, but a\n   * shopper edit is never persisted anywhere by this family. */\n  email: string;\n  /** Updates the draft email; marks it as shopper-touched so pre-fill no longer overwrites it. */\n  setEmail: (email: string) => void;\n  step: AccessCodeSignInStep;\n  /** Opaque token round-tripped from requestAccessCode into validateAccessCode. */\n  authenticationToken: string | null;\n  /** Called by AccessCodeRequestControl on a successful requestAccessCode. */\n  startValidation: (authenticationToken: string) => void;\n}>;\n\nexport type AccessCodeSignInRootProps = ComponentPropsWithRef<'div'> & {\n  $data?: AccessCodeSignInSlice | null;\n};\n\nexport type AccessCodeEmailControlProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  placeholder?: string;\n  invalidEmailMessage?: string;\n};\n\nexport type AccessCodeRequestControlProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  pendingLabel?: string;\n  sendLimitMessage?: string;\n  blockedMessage?: string;\n  networkErrorMessage?: string;\n  onRequested?: (authenticationToken: string) => void;\n  $actions?: ComponentActions;\n};\n\nexport type AccessCodeValidateControlProps = ComponentPropsWithRef<'div'> & {\n  label?: string;\n  placeholder?: string;\n  submitLabel?: string;\n  codeLength?: number;\n  invalidCodeMessage?: string;\n  blockedMessage?: string;\n  missingAuthContextMessage?: string;\n  networkErrorMessage?: string;\n  onValidated?: () => void;\n  $actions?: ComponentActions;\n};\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\nconst ACCESS_CODE_SIGN_IN_CONTEXT_UNSET = Symbol('AccessCodeSignInContextUnset');\n\nconst AccessCodeSignInContext = createContext<AccessCodeSignInContextValue | typeof ACCESS_CODE_SIGN_IN_CONTEXT_UNSET>(\n  ACCESS_CODE_SIGN_IN_CONTEXT_UNSET,\n);\n\n/**\n * Read the stepper state (email, step, authenticationToken) from the nearest `AccessCodeSignInRoot`.\n * Throws when called outside that subtree — a misplaced control is a composition bug that should\n * surface immediately, mirroring `useShippingSimulator()`/`useSession()`.\n */\nfunction useAccessCodeSignIn(): AccessCodeSignInContextValue {\n  const ctx = useContext(AccessCodeSignInContext);\n  if (ctx === ACCESS_CODE_SIGN_IN_CONTEXT_UNSET) {\n    throw new Error('AccessCodeSignIn components must be used inside AccessCodeSignInRoot.');\n  }\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Error-code → message mapping — every failure surfaces inline, at the control that produced it;\n// an unmapped code falls back to the server-supplied message rather than being silent.\n// ---------------------------------------------------------------------------\n\nfunction requestErrorMessage(\n  error: SessionUserError,\n  props: Pick<AccessCodeRequestControlProps, 'sendLimitMessage' | 'blockedMessage' | 'networkErrorMessage'>,\n): string {\n  switch (error.code) {\n    case 'ACCESS_CODE_SEND_LIMIT':\n      return props.sendLimitMessage ?? error.message;\n    case 'BLOCKED':\n      return props.blockedMessage ?? error.message;\n    case 'NETWORK_ERROR':\n      return props.networkErrorMessage ?? error.message;\n    default:\n      return error.message;\n  }\n}\n\nfunction validateErrorMessage(\n  error: SessionUserError,\n  props: Pick<\n    AccessCodeValidateControlProps,\n    'invalidCodeMessage' | 'blockedMessage' | 'missingAuthContextMessage' | 'networkErrorMessage'\n  >,\n): string {\n  switch (error.code) {\n    case 'INVALID_ACCESS_CODE':\n      return props.invalidCodeMessage ?? error.message;\n    case 'BLOCKED':\n      return props.blockedMessage ?? error.message;\n    case 'MISSING_AUTH_CONTEXT':\n      return props.missingAuthContextMessage ?? error.message;\n    case 'NETWORK_ERROR':\n      return props.networkErrorMessage ?? error.message;\n    default:\n      return error.message;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const AccessCodeSignInRootDefinition = defineComponent<AccessCodeSignInRootProps>({\n  name: 'AccessCodeSignInRoot',\n  importPath: '@vtex/faststore/components',\n  component: AccessCodeSignInRoot,\n  fragment,\n  fetchStrategy: 'reactive',\n  requiresContext: 'session',\n  editor: { label: 'Access Code Sign-In', category: 'identity' },\n  schema: {},\n  guideline:\n    'Self-gating root of the anonymous-or-identified, email + access-code sign-in: renders nothing once loggedIn or when the account disables accessKeyAuthentication, but is available from the anonymous state onward. Owns a locally-typed draft email (never written to the cart) and the request/validate stepper. Must be inside SessionRoot. See access-code-sign-in.md.',\n});\n\nexport const AccessCodeEmailControlDefinition = defineComponent<AccessCodeEmailControlProps>({\n  name: 'AccessCodeEmailControl',\n  importPath: '@vtex/faststore/components',\n  component: AccessCodeEmailControl,\n  editor: { label: 'Access Code Email', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    invalidEmailMessage: { type: 'string', label: 'Invalid email message' },\n  },\n  guideline:\n    'The draft email input for the access-code flow: visible only at the request step, pre-fills from clientProfile.email when known but never persists an edit anywhere — it is purely the argument requestAccessCode/validateAccessCode dispatch with. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md.',\n});\n\nexport const AccessCodeRequestControlDefinition = defineComponent<AccessCodeRequestControlProps>({\n  name: 'AccessCodeRequestControl',\n  importPath: '@vtex/faststore/components',\n  component: AccessCodeRequestControl,\n  actions: { session: ['requestAccessCode'] },\n  editor: { label: 'Access Code Request', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    sendLimitMessage: { type: 'string', label: 'Send-limit message' },\n    blockedMessage: { type: 'string', label: 'Blocked message' },\n    networkErrorMessage: { type: 'string', label: 'Network error message' },\n  },\n  guideline:\n    'Send-code step: disabled until the Root-owned draft email is a valid, non-empty address; dispatches $actions.session.requestAccessCode with it and advances the stepper on success. Failures render inline, never as a blocking error. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md.',\n});\n\nexport const AccessCodeValidateControlDefinition = defineComponent<AccessCodeValidateControlProps>({\n  name: 'AccessCodeValidateControl',\n  importPath: '@vtex/faststore/components',\n  component: AccessCodeValidateControl,\n  actions: { session: ['validateAccessCode'] },\n  editor: { label: 'Access Code Validate', category: 'identity' },\n  schema: {\n    label: { type: 'string', label: 'Label' },\n    placeholder: { type: 'string', label: 'Placeholder' },\n    submitLabel: { type: 'string', label: 'Submit label' },\n    codeLength: { type: 'number', default: 6, label: 'Code length' },\n    invalidCodeMessage: { type: 'string', label: 'Invalid code message' },\n    blockedMessage: { type: 'string', label: 'Blocked message' },\n    networkErrorMessage: { type: 'string', label: 'Network error message' },\n  },\n  guideline:\n    'Code-entry step: composes AccessCodeField and dispatches $actions.session.validateAccessCode with the Root-owned email and authenticationToken; a successful validate flips the session reactively and hides the Root. Must be inside AccessCodeSignInRoot. See access-code-sign-in.md.',\n});\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\n/**\n * Data-owning root of the access-code sign-in flow. Self-gates on two signals:\n * `useSession().state !== 'loggedIn'` (available from anonymous through identified; hides once\n * signed in) and `sessionAuthProviders.accessKeyAuthentication === true`. An unresolved fragment\n * read (`$data` still `null`) is treated as \"provider not enabled\" — the flow stays hidden rather\n * than flashing. Owns the `step`/`authenticationToken` stepper plus a locally-typed draft `email`\n * as local state, broadcasting all of it through context to its children. The draft email pre-fills\n * from `clientProfile.email` once (for an already-identified shopper) but a shopper edit is never\n * persisted anywhere by this family — it is purely the requestAccessCode/validateAccessCode\n * argument; the server sets clientProfileData.email as a side effect of a successful validate.\n * Reacts automatically once `useSession()` flips to `loggedIn` — no manual unmount call anywhere in\n * this family.\n */\nexport function AccessCodeSignInRoot({ $data: $dataProp, className, children, ...props }: AccessCodeSignInRootProps) {\n  const $data = useDataOverride($dataProp);\n  const { state } = useSession();\n\n  const [step, setStep] = useState<AccessCodeSignInStep>('request');\n  const [authenticationToken, setAuthenticationToken] = useState<string | null>(null);\n\n  const startValidation = useCallback((token: string) => {\n    setAuthenticationToken(token);\n    setStep('validate');\n  }, []);\n\n  const savedEmail = $data?.clientProfile?.email ?? '';\n  const [email, setEmailState] = useState('');\n  const [touched, setTouched] = useState(false);\n\n  // Pre-fill from the resolving/known profile email, but only while still at the request step and\n  // until the shopper edits the draft — mirrors ClientProfileForm's untouched-field re-seed, never\n  // clobbering an in-progress edit. Freezing the re-seed once the flow leaves 'request' keeps a\n  // mid-flow profile-cache change from diverging the email between requestAccessCode and\n  // validateAccessCode (the server rejects a validate whose email differs from the request).\n  useEffect(() => {\n    if (step === 'request' && !touched) setEmailState(savedEmail);\n  }, [savedEmail, touched, step]);\n\n  const setEmail = useCallback((next: string) => {\n    setTouched(true);\n    setEmailState(next);\n  }, []);\n\n  const providerEnabled = $data?.sessionAuthProviders?.accessKeyAuthentication ?? false;\n\n  const contextValue = useMemo<AccessCodeSignInContextValue>(\n    () => ({ email, setEmail, step, authenticationToken, startValidation }),\n    [email, setEmail, step, authenticationToken, startValidation],\n  );\n\n  const gated = state !== 'loggedIn' && providerEnabled;\n  if (!gated) return null;\n\n  return (\n    <AccessCodeSignInContext value={contextValue}>\n      <div {...props} className={className} data-fs-access-code-sign-in-root=\"\">\n        {children}\n      </div>\n    </AccessCodeSignInContext>\n  );\n}\n\n/**\n * The draft email input for the access-code flow. Renders only at the request step. Bound to the\n * Root's local `email`/`setEmail` — never a fragment, never a mutation of its own; typing here\n * never touches the cart. Format validation is `EmailField`'s own blur-triggered check (never\n * per-keystroke); `invalidEmailMessage` is only its fallback text, mirroring how\n * `EmailIdentificationControl` defers to the same particle for the same reason.\n */\nexport function AccessCodeEmailControl({\n  label,\n  placeholder,\n  invalidEmailMessage,\n  className,\n  ...props\n}: AccessCodeEmailControlProps) {\n  const { step, email, setEmail } = useAccessCodeSignIn();\n\n  if (step !== 'request') return null;\n\n  return (\n    <div {...props} className={className} data-fs-access-code-email-control=\"\">\n      <EmailField\n        label={label}\n        placeholder={placeholder}\n        value={email}\n        onValueChange={setEmail}\n        errorMessage={invalidEmailMessage}\n      />\n    </div>\n  );\n}\n\n/**\n * Renders only while the Root's stepper is at `step === 'request'`. Reads the draft email from\n * context and dispatches `$actions.session.requestAccessCode({ email })` once it is a valid,\n * non-empty address (no account-existence pre-check beyond that format gate). On a result with a\n * non-null token and no `userErrors`, advances the Root's stepper. Every `userErrors` entry renders\n * inline via a host-supplied, per-code message; the step never changes on error, so the shopper can\n * retry or abandon the method and continue as a guest.\n */\nexport function AccessCodeRequestControl({\n  label,\n  pendingLabel,\n  sendLimitMessage,\n  blockedMessage,\n  networkErrorMessage,\n  onRequested,\n  $actions,\n  className,\n  ...props\n}: AccessCodeRequestControlProps) {\n  const { step, email, startValidation } = useAccessCodeSignIn();\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<SessionUserError | null>(null);\n\n  if (step !== 'request') return null;\n\n  const canSubmit = !pending && isValidEmail(email);\n\n  async function handleClick() {\n    if (!canSubmit) return;\n    setPending(true);\n    setError(null);\n\n    try {\n      const result = (await $actions?.session?.requestAccessCode?.({ email })) ?? {\n        authenticationToken: null,\n        userErrors: [],\n      };\n\n      if (result.authenticationToken && result.userErrors.length === 0) {\n        startValidation(result.authenticationToken);\n        onRequested?.(result.authenticationToken);\n        return;\n      }\n\n      const [firstError] = result.userErrors;\n      if (firstError) setError(firstError);\n    } finally {\n      setPending(false);\n    }\n  }\n\n  const message = error ? requestErrorMessage(error, { sendLimitMessage, blockedMessage, networkErrorMessage }) : null;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-access-code-request-control=\"\"\n      {...(pending ? { 'data-fs-access-code-request-pending': '' } : {})}\n    >\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        disabled={!canSubmit}\n        aria-busy={pending || undefined}\n        data-fs-access-code-request-submit=\"\"\n        data-fs-button=\"\"\n      >\n        {pending ? (pendingLabel ?? label) : label}\n      </button>\n      {message ? (\n        <div role=\"alert\" data-fs-access-code-request-error=\"\">\n          {message}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Renders only while the Root's stepper is at `step === 'validate'`. Composes `AccessCodeField` for\n * the code value and a submit control, disabled below `codeLength` (a UX courtesy, never a\n * validity claim). Dispatches `$actions.session.validateAccessCode` with the email and\n * `authenticationToken` read from context. On a non-empty `userErrors` result, sets the field's\n * `invalid`/`errorMessage` from a host-supplied per-code message and retains the code/token so the\n * shopper can retry without re-requesting. On success it calls the optional `onValidated` and renders\n * no local \"success\" UI — `useSession()` flipping to `loggedIn` is what makes the whole Root\n * disappear.\n */\nexport function AccessCodeValidateControl({\n  label,\n  placeholder,\n  submitLabel,\n  codeLength = 6,\n  invalidCodeMessage,\n  blockedMessage,\n  missingAuthContextMessage,\n  networkErrorMessage,\n  onValidated,\n  $actions,\n  className,\n  ...props\n}: AccessCodeValidateControlProps) {\n  const { step, email, authenticationToken } = useAccessCodeSignIn();\n  const [code, setCode] = useState('');\n  const [pending, setPending] = useState(false);\n  const [error, setError] = useState<SessionUserError | null>(null);\n\n  if (step !== 'validate') return null;\n\n  const canSubmit = !pending && code.length >= codeLength && authenticationToken != null;\n\n  async function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (!canSubmit || authenticationToken == null) return;\n\n    setPending(true);\n    setError(null);\n\n    try {\n      const errors =\n        (await $actions?.session?.validateAccessCode?.({ email, accessCode: code, authenticationToken })) ?? [];\n\n      const [firstError] = errors;\n      if (firstError) {\n        setError(firstError);\n        return;\n      }\n    } finally {\n      setPending(false);\n    }\n\n    onValidated?.();\n  }\n\n  function handleCodeChange(next: string) {\n    setCode(next);\n    if (error) setError(null);\n  }\n\n  const errorMessage = error\n    ? validateErrorMessage(error, {\n        invalidCodeMessage,\n        blockedMessage,\n        missingAuthContextMessage,\n        networkErrorMessage,\n      })\n    : undefined;\n\n  return (\n    <div\n      {...props}\n      className={className}\n      data-fs-access-code-validate-control=\"\"\n      {...(pending ? { 'data-fs-access-code-validate-pending': '' } : {})}\n    >\n      <form onSubmit={handleSubmit}>\n        <AccessCodeField\n          label={label}\n          placeholder={placeholder}\n          value={code}\n          maxLength={codeLength}\n          onValueChange={handleCodeChange}\n          disabled={pending}\n          invalid={error != null}\n          errorMessage={errorMessage}\n        />\n        <button\n          type=\"submit\"\n          disabled={!canSubmit}\n          aria-busy={pending || undefined}\n          data-fs-access-code-validate-submit=\"\"\n          data-fs-button=\"\"\n        >\n          {submitLabel}\n        </button>\n      </form>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const AccessCodeSignIn = {\n  Root: AccessCodeSignInRoot,\n  Email: AccessCodeEmailControl,\n  Request: AccessCodeRequestControl,\n  Validate: AccessCodeValidateControl,\n};\n"],"mappings":"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"}

package/dist/matter/account-entry-point/account-entry-point.d.ts

@@ -0,0 +1,64 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/account-entry-point/account-entry-point.d.ts
+export declare const AccountEntryPointContent: {
+  readonly id: "account-entry-point";
+  readonly title: "Account Entry Point";
+  readonly description: "Labels and icon for the header sign-in / account control.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly properties: {
+      readonly signedOutLabel: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Signed-out label";
+      };
+      readonly signedInLabel: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Signed-in label";
+      };
+      readonly icon: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Icon";
+      };
+      readonly loadingLabel: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Loading announcement";
+      };
+    };
+  };
+};
+/** Props for {@link AccountEntryPoint}. Extends native `<a>` attributes (the rendered root). */
+export type AccountEntryPointProps = Omit<ComponentPropsWithRef<'a'>, 'href' | 'children'> & {
+  /** Label for anonymous and identified shoppers. Optional: the render gate, not the type,
+   *  requires a resolved value. */
+  signedOutLabel?: string;
+  /** Label for logged-in shoppers. Same gate. */
+  signedInLabel?: string;
+  /** Icon reference for the glyph. Never gated: a control with no glyph is a valid configuration. */
+  icon?: string;
+  /** Text the live region announces while the session resolves. */
+  loadingLabel?: string;
+  /** Merchant-authored fields, sliced from the page/layout content entry; win over the props field
+   *  by field when present. Absent in a non-CMS store — the props are the fallback. */
+  $content?: ContentValue<typeof AccountEntryPointContent>;
+};
+/** Props for {@link AccountEntryPointLoading}. Extends native `<span>` attributes. */
+export type AccountEntryPointLoadingProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;
+export declare const AccountEntryPointDefinition: ComponentDefinition<AccountEntryPointProps>;
+export declare function AccountEntryPoint({ signedOutLabel, signedInLabel, icon, loadingLabel, $content, className, ref, ...props }: AccountEntryPointProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * The visual stand-in occupying the control's slot while the session resolves. Purely visual: the
+ * wait is spoken by the sibling live region, so this is hidden from assistive technology rather
+ * than announced twice. Named for the state it represents, as `ShippingSimulatorLoading` is, not
+ * for the bar it draws.
+ */
+export declare function AccountEntryPointLoading({ className, ...props }: AccountEntryPointLoadingProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=account-entry-point.d.ts.map

package/dist/matter/account-entry-point/account-entry-point.js

@@ -0,0 +1,151 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import { defineContentType } from "../../core/dist/define-content-type.js";
+import "../../core/dist/index.js";
+import { useSession } from "../session/session.js";
+import { Icon } from "../../particles/icon/icon.js";
+import { resolveSafeHref } from "../../utils/safe-href.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { usePathname } from "next/navigation";
+//#region src/matter/account-entry-point/account-entry-point.tsx
+/** Deferred IO proxy. A fixed platform convention, never an authored value. */
+const SIGN_IN_ROUTE = "/login";
+const ACCOUNT_ROUTE = "/account";
+const AccountEntryPointContent = defineContentType({
+	id: "account-entry-point",
+	title: "Account Entry Point",
+	description: "Labels and icon for the header sign-in / account control.",
+	schema: {
+		type: "object",
+		additionalProperties: false,
+		properties: {
+			signedOutLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Signed-out label"
+			},
+			signedInLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Signed-in label"
+			},
+			icon: {
+				type: "string",
+				minLength: 1,
+				title: "Icon"
+			},
+			loadingLabel: {
+				type: "string",
+				minLength: 1,
+				title: "Loading announcement"
+			}
+		}
+	}
+});
+const AccountEntryPointDefinition = defineComponent({
+	name: "AccountEntryPoint",
+	importPath: "@vtex/faststore/components",
+	component: AccountEntryPoint,
+	content: AccountEntryPointContent,
+	editor: {
+		label: "Account Entry Point",
+		category: "identity"
+	},
+	requiresContext: "session",
+	schema: {
+		signedOutLabel: {
+			type: "string",
+			label: "Signed-out Label"
+		},
+		signedInLabel: {
+			type: "string",
+			label: "Signed-in Label"
+		},
+		icon: {
+			type: "icon",
+			label: "Icon"
+		},
+		loadingLabel: {
+			type: "string",
+			label: "Loading Announcement"
+		}
+	},
+	guideline: "Session-aware header control rendering one link: the signed-out label toward /login for anonymous and identified shoppers, the signed-in label toward the account route for logged-in ones, and a politely announced placeholder while the session resolves. Both destinations are fixed conventions, not props, so no authored value can misroute the auth flow. Must be inside a SessionRoot, normally the one hosted by the shared layout — a page-hosted provider resolves the session server-side without the shopper cookie and sticks on the signed-out label. Author the label for a state or that state renders nothing; the labels are optional in the type only because a CMS entry may supply them, and an entry overrides all four fields at runtime. Style it through data-fs-account-entry-point and switch on data-fs-account-entry-point-state."
+});
+/**
+* Builds the sign-in destination, carrying the current path so the deferred proxy can return the
+* shopper where they started. Defense in depth only: the proxy has to validate the parameter on its
+* own side, since nothing stops a hand-crafted link. A path `resolveSafeHref` refuses — protocol-
+* relative, scheme-smuggled, absolute — drops the parameter instead of travelling encoded.
+*/
+function signInHref(pathname) {
+	if (!pathname) return SIGN_IN_ROUTE;
+	const destination = resolveSafeHref(pathname);
+	if (!destination.safe || !destination.href.startsWith("/")) return SIGN_IN_ROUTE;
+	return `${SIGN_IN_ROUTE}?returnUrl=${encodeURIComponent(destination.href)}`;
+}
+function AccountEntryPoint({ signedOutLabel, signedInLabel, icon, loadingLabel, $content, className, ref, ...props }) {
+	const { state, loading } = useSession();
+	const pathname = usePathname();
+	const entrySignedOutLabel = $content?.signedOutLabel?.trim() ? $content.signedOutLabel : signedOutLabel;
+	const entrySignedInLabel = $content?.signedInLabel?.trim() ? $content.signedInLabel : signedInLabel;
+	const entryIcon = $content?.icon?.trim() ? $content.icon : icon;
+	const entryLoadingLabel = $content?.loadingLabel?.trim() ? $content.loadingLabel : loadingLabel;
+	const [announcement, setAnnouncement] = useState("");
+	const resolvingLabel = loading ? entryLoadingLabel : void 0;
+	useEffect(() => {
+		setAnnouncement(resolvingLabel ?? "");
+	}, [resolvingLabel]);
+	if (loading) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AccountEntryPointLoading, {
+		...props,
+		className
+	}), /* @__PURE__ */ jsx(AccountEntryPointAnnouncement, { children: announcement })] });
+	const signedIn = state === "loggedIn";
+	const label = signedIn ? entrySignedInLabel : entrySignedOutLabel;
+	if (!label?.trim()) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(NavigationLink, {
+		...props,
+		ref,
+		href: signedIn ? ACCOUNT_ROUTE : signInHref(pathname),
+		prefetch: signedIn ? void 0 : false,
+		className,
+		"data-fs-account-entry-point": "",
+		"data-fs-account-entry-point-state": signedIn ? "signed-in" : "signed-out",
+		children: [entryIcon ? /* @__PURE__ */ jsx(Icon, { name: entryIcon }) : null, /* @__PURE__ */ jsx("span", {
+			"data-fs-account-entry-point-label": "",
+			children: label
+		})]
+	}), /* @__PURE__ */ jsx(AccountEntryPointAnnouncement, { children: announcement })] });
+}
+/**
+* The live region that carries the control across the wait. Separate from the visual placeholder
+* because it has to outlive it: the placeholder is only in the tree while the session resolves,
+* while the region has to be there before the text lands for the text to be announced at all.
+*/
+function AccountEntryPointAnnouncement({ children }) {
+	return /* @__PURE__ */ jsx("output", {
+		"aria-live": "polite",
+		"data-fs-account-entry-point-announcement": "",
+		children
+	});
+}
+/**
+* The visual stand-in occupying the control's slot while the session resolves. Purely visual: the
+* wait is spoken by the sibling live region, so this is hidden from assistive technology rather
+* than announced twice. Named for the state it represents, as `ShippingSimulatorLoading` is, not
+* for the bar it draws.
+*/
+function AccountEntryPointLoading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className,
+		"data-fs-account-entry-point-loading": ""
+	});
+}
+//#endregion
+export { AccountEntryPoint, AccountEntryPointContent, AccountEntryPointDefinition, AccountEntryPointLoading };
+
+//# sourceMappingURL=account-entry-point.js.map

package/dist/matter/account-entry-point/account-entry-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"account-entry-point.js","names":[],"sources":["../../../src/matter/account-entry-point/account-entry-point.tsx"],"sourcesContent":["'use client';\n\nimport { type ContentValue, defineComponent, defineContentType } from '@vtex/fs-core';\nimport { usePathname } from 'next/navigation';\nimport { type ComponentPropsWithRef, useEffect, useState } from 'react';\nimport { Icon } from '../../particles/icon/icon.js';\nimport { NavigationLink } from '../../particles/navigation-link/navigation-link.js';\nimport { resolveSafeHref } from '../../utils/safe-href.js';\nimport { useSession } from '../session/session.js';\n\n/** Deferred IO proxy. A fixed platform convention, never an authored value. */\nconst SIGN_IN_ROUTE = '/login';\n\n// Provisional: unlike `/login`, no route for the FastStore-native My Account page is settled yet.\n// Pin this with the My Account epic before the signed-in link is anything but dead.\nconst ACCOUNT_ROUTE = '/account';\n\n// Nothing is required: an entry may author any subset, and a slice missing a required property is\n// shape-invalid, which drops the whole element rather than the one field.\nexport const AccountEntryPointContent = defineContentType({\n  id: 'account-entry-point',\n  title: 'Account Entry Point',\n  description: 'Labels and icon for the header sign-in / account control.',\n  schema: {\n    type: 'object',\n    additionalProperties: false,\n    properties: {\n      signedOutLabel: { type: 'string', minLength: 1, title: 'Signed-out label' },\n      signedInLabel: { type: 'string', minLength: 1, title: 'Signed-in label' },\n      icon: { type: 'string', minLength: 1, title: 'Icon' },\n      loadingLabel: { type: 'string', minLength: 1, title: 'Loading announcement' },\n    },\n  },\n});\n\n/** Props for {@link AccountEntryPoint}. Extends native `<a>` attributes (the rendered root). */\nexport type AccountEntryPointProps = Omit<ComponentPropsWithRef<'a'>, 'href' | 'children'> & {\n  /** Label for anonymous and identified shoppers. Optional: the render gate, not the type,\n   *  requires a resolved value. */\n  signedOutLabel?: string;\n  /** Label for logged-in shoppers. Same gate. */\n  signedInLabel?: string;\n  /** Icon reference for the glyph. Never gated: a control with no glyph is a valid configuration. */\n  icon?: string;\n  /** Text the live region announces while the session resolves. */\n  loadingLabel?: string;\n  /** Merchant-authored fields, sliced from the page/layout content entry; win over the props field\n   *  by field when present. Absent in a non-CMS store — the props are the fallback. */\n  $content?: ContentValue<typeof AccountEntryPointContent>;\n};\n\n/** Props for {@link AccountEntryPointLoading}. Extends native `<span>` attributes. */\nexport type AccountEntryPointLoadingProps = Omit<ComponentPropsWithRef<'span'>, 'children'>;\n\nexport const AccountEntryPointDefinition = defineComponent<AccountEntryPointProps>({\n  name: 'AccountEntryPoint',\n  importPath: '@vtex/faststore/components',\n  component: AccountEntryPoint,\n  content: AccountEntryPointContent,\n  editor: { label: 'Account Entry Point', category: 'identity' },\n  requiresContext: 'session',\n  schema: {\n    signedOutLabel: { type: 'string', label: 'Signed-out Label' },\n    signedInLabel: { type: 'string', label: 'Signed-in Label' },\n    icon: { type: 'icon', label: 'Icon' },\n    loadingLabel: { type: 'string', label: 'Loading Announcement' },\n  },\n  guideline:\n    'Session-aware header control rendering one link: the signed-out label toward /login for anonymous and identified shoppers, the signed-in label toward the account route for logged-in ones, and a politely announced placeholder while the session resolves. Both destinations are fixed conventions, not props, so no authored value can misroute the auth flow. Must be inside a SessionRoot, normally the one hosted by the shared layout — a page-hosted provider resolves the session server-side without the shopper cookie and sticks on the signed-out label. Author the label for a state or that state renders nothing; the labels are optional in the type only because a CMS entry may supply them, and an entry overrides all four fields at runtime. Style it through data-fs-account-entry-point and switch on data-fs-account-entry-point-state.',\n});\n\n/**\n * Builds the sign-in destination, carrying the current path so the deferred proxy can return the\n * shopper where they started. Defense in depth only: the proxy has to validate the parameter on its\n * own side, since nothing stops a hand-crafted link. A path `resolveSafeHref` refuses — protocol-\n * relative, scheme-smuggled, absolute — drops the parameter instead of travelling encoded.\n */\nfunction signInHref(pathname: string | null): string {\n  if (!pathname) {\n    return SIGN_IN_ROUTE;\n  }\n  const destination = resolveSafeHref(pathname);\n  // `resolveSafeHref` admits absolute http(s) values, which are legitimate for an authored link but\n  // are exactly what would turn the proxy into an open redirect. Narrow to the site-relative subset\n  // it has already cleared of protocol-relative and scheme-smuggled spellings.\n  if (!destination.safe || !destination.href.startsWith('/')) {\n    return SIGN_IN_ROUTE;\n  }\n  return `${SIGN_IN_ROUTE}?returnUrl=${encodeURIComponent(destination.href)}`;\n}\n\nexport function AccountEntryPoint({\n  signedOutLabel,\n  signedInLabel,\n  icon,\n  loadingLabel,\n  $content,\n  className,\n  ref,\n  ...props\n}: AccountEntryPointProps) {\n  const { state, loading } = useSession();\n  const pathname = usePathname();\n\n  // Blank entry fields fall through, so clearing one in the Admin reads as unauthored.\n  const entrySignedOutLabel = $content?.signedOutLabel?.trim() ? $content.signedOutLabel : signedOutLabel;\n  const entrySignedInLabel = $content?.signedInLabel?.trim() ? $content.signedInLabel : signedInLabel;\n  const entryIcon = $content?.icon?.trim() ? $content.icon : icon;\n  const entryLoadingLabel = $content?.loadingLabel?.trim() ? $content.loadingLabel : loadingLabel;\n\n  // Assistive technology only reports a change inside a region that was already in the tree, so a\n  // region mounted together with its text announces nothing. The region therefore holds the same\n  // position in both branches — React keeps it mounted across the swap — and starts empty, with the\n  // label written on the pass after mount and cleared again once the session resolves.\n  //\n  // It trails the branch content rather than leading it so the authored swatch, which lands on\n  // whichever element leads, can still reach the region through a following-sibling selector.\n  const [announcement, setAnnouncement] = useState('');\n  const resolvingLabel = loading ? entryLoadingLabel : undefined;\n  useEffect(() => {\n    setAnnouncement(resolvingLabel ?? '');\n  }, [resolvingLabel]);\n\n  // Gate on `loading` before `state`: an unresolved session reports `anonymous`, so reading the\n  // tri-state first would flash \"Sign In\" at a shopper who is already signed in.\n  if (loading) {\n    return (\n      <>\n        <AccountEntryPointLoading {...props} className={className} />\n        <AccountEntryPointAnnouncement>{announcement}</AccountEntryPointAnnouncement>\n      </>\n    );\n  }\n\n  // `identified` stays on the signed-out link: an identified but unauthenticated shopper cannot\n  // reach their account yet.\n  const signedIn = state === 'loggedIn';\n  const label = signedIn ? entrySignedInLabel : entrySignedOutLabel;\n\n  // A focusable link a screen reader announces as its bare URL is worse than no control at all.\n  if (!label?.trim()) {\n    return null;\n  }\n\n  return (\n    <>\n      <NavigationLink\n        {...props}\n        ref={ref}\n        href={signedIn ? ACCOUNT_ROUTE : signInHref(pathname)}\n        // The signed-out destination is a deferred auth proxy that may set a cookie or redirect, and\n        // a header control is always in the viewport — the default prefetch would fire that GET on\n        // every page view. The account route is an ordinary page, so it keeps the default.\n        prefetch={signedIn ? undefined : false}\n        className={className}\n        data-fs-account-entry-point=\"\"\n        data-fs-account-entry-point-state={signedIn ? 'signed-in' : 'signed-out'}\n      >\n        {entryIcon ? <Icon name={entryIcon} /> : null}\n        <span data-fs-account-entry-point-label=\"\">{label}</span>\n      </NavigationLink>\n      <AccountEntryPointAnnouncement>{announcement}</AccountEntryPointAnnouncement>\n    </>\n  );\n}\n\n/**\n * The live region that carries the control across the wait. Separate from the visual placeholder\n * because it has to outlive it: the placeholder is only in the tree while the session resolves,\n * while the region has to be there before the text lands for the text to be announced at all.\n */\nfunction AccountEntryPointAnnouncement({ children }: { children: string }) {\n  return (\n    <output aria-live=\"polite\" data-fs-account-entry-point-announcement=\"\">\n      {children}\n    </output>\n  );\n}\n\n/**\n * The visual stand-in occupying the control's slot while the session resolves. Purely visual: the\n * wait is spoken by the sibling live region, so this is hidden from assistive technology rather\n * than announced twice. Named for the state it represents, as `ShippingSimulatorLoading` is, not\n * for the bar it draws.\n */\nexport function AccountEntryPointLoading({ className, ...props }: AccountEntryPointLoadingProps) {\n  return <span {...props} aria-hidden=\"true\" className={className} data-fs-account-entry-point-loading=\"\" />;\n}\n"],"mappings":"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"}

package/dist/matter/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,40 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/breadcrumb/breadcrumb.d.ts
+type RawBreadcrumbData = {
+  breadcrumbs: Array<{
+    name: string;
+    url: string;
+    position: number;
+  }>;
+};
+type BreadcrumbItemData = {
+  name: string;
+  url: string;
+  position: number;
+};
+export type BreadcrumbRootProps = ComponentPropsWithRef<'nav'> & {
+  items?: BreadcrumbItemData[];
+  $data?: RawBreadcrumbData | null;
+  label?: string;
+};
+export type BreadcrumbListProps = ComponentPropsWithRef<'ol'>;
+export type BreadcrumbLinkProps = ComponentPropsWithRef<'a'>;
+export type BreadcrumbSeparatorProps = ComponentPropsWithRef<'span'>;
+export declare const BreadcrumbRootDefinition: ComponentDefinition<BreadcrumbRootProps>;
+export declare const BreadcrumbListDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>>;
+export declare const BreadcrumbLinkDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
+export declare const BreadcrumbSeparatorDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare function BreadcrumbRoot({ items, $data, label, className, children, ...props }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbList({ className, children, style, ...props }: BreadcrumbListProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbLink({ className, children, ...props }: BreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbSeparator({ className, children, ...props }: BreadcrumbSeparatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const Breadcrumb: {
+  Root: typeof BreadcrumbRoot;
+  List: typeof BreadcrumbList;
+  Link: typeof BreadcrumbLink;
+  Separator: typeof BreadcrumbSeparator;
+};
+//#endregion
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/matter/breadcrumb/breadcrumb.js

@@ -0,0 +1,155 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { NavigationLink } from "../../particles/navigation-link/navigation-link.js";
+import { createContext, useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/matter/breadcrumb/breadcrumb.tsx
+const fragment = `
+  fragment BreadcrumbData on Query {
+    productBySlug(slug: $slug) {
+      breadcrumbs {
+        name
+        url
+        position
+      }
+    }
+  }
+`;
+const BreadcrumbContext = createContext({ items: [] });
+const BreadcrumbItemContext = createContext(null);
+function useBreadcrumbItem() {
+	const item = useContext(BreadcrumbItemContext);
+	if (!item) throw new Error("Breadcrumb item components must be used inside BreadcrumbList.");
+	return item;
+}
+function transformBreadcrumbData(data) {
+	return data.breadcrumbs;
+}
+const BreadcrumbRootDefinition = defineComponent({
+	name: "BreadcrumbRoot",
+	importPath: "@vtex/faststore/components",
+	component: BreadcrumbRoot,
+	fragment,
+	editor: {
+		label: "Breadcrumb Root",
+		category: "navigation"
+	},
+	schema: { label: {
+		type: "string",
+		default: "Breadcrumb",
+		label: "Aria Label"
+	} },
+	guideline: "Root container for breadcrumb navigation; compose as BreadcrumbRoot > BreadcrumbList > [BreadcrumbLink + BreadcrumbSeparator]."
+});
+const BreadcrumbListDefinition = defineComponent({
+	name: "BreadcrumbList",
+	importPath: "@vtex/faststore/components",
+	component: BreadcrumbList,
+	editor: {
+		label: "Breadcrumb List",
+		category: "navigation"
+	},
+	schema: {},
+	guideline: "Ordered list of breadcrumb items; must be a direct child of BreadcrumbRoot."
+});
+const BreadcrumbLinkDefinition = defineComponent({
+	name: "BreadcrumbLink",
+	importPath: "@vtex/faststore/components",
+	component: BreadcrumbLink,
+	editor: {
+		label: "Breadcrumb Link",
+		category: "navigation"
+	},
+	schema: {},
+	guideline: "Renders the label and link for a breadcrumb item; must be inside BreadcrumbList."
+});
+const BreadcrumbSeparatorDefinition = defineComponent({
+	name: "BreadcrumbSeparator",
+	importPath: "@vtex/faststore/components",
+	component: BreadcrumbSeparator,
+	editor: {
+		label: "Breadcrumb Separator",
+		category: "navigation"
+	},
+	schema: {},
+	guideline: "Decorative separator rendered between breadcrumb items; must be inside BreadcrumbList."
+});
+const scrollbarHideStyles = "[data-fs-breadcrumb-list]::-webkit-scrollbar{display:none}";
+function BreadcrumbRoot({ items, $data, label = "Breadcrumb", className, children, ...props }) {
+	const resolvedItems = items ?? ($data ? transformBreadcrumbData($data) : []);
+	return /* @__PURE__ */ jsx(BreadcrumbContext, {
+		value: { items: resolvedItems },
+		children: /* @__PURE__ */ jsx("nav", {
+			...props,
+			"aria-label": label,
+			className,
+			"data-fs-breadcrumb": "",
+			children
+		})
+	});
+}
+function BreadcrumbList({ className, children, style, ...props }) {
+	const { items } = useContext(BreadcrumbContext);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", { children: scrollbarHideStyles }), /* @__PURE__ */ jsx("ol", {
+		...props,
+		className,
+		"data-fs-breadcrumb-list": "",
+		style: {
+			display: "flex",
+			flexWrap: "nowrap",
+			overflowX: "auto",
+			scrollbarWidth: "none",
+			msOverflowStyle: "none",
+			...style
+		},
+		children: items.map((item, index) => /* @__PURE__ */ jsx(BreadcrumbItemContext, {
+			value: {
+				...item,
+				isLast: index === items.length - 1
+			},
+			children: /* @__PURE__ */ jsx("li", {
+				"data-fs-breadcrumb-item": "",
+				children
+			})
+		}, item.position))
+	})] });
+}
+function BreadcrumbLink({ className, children, ...props }) {
+	const { name, url, isLast } = useBreadcrumbItem();
+	if (isLast) return /* @__PURE__ */ jsx("span", {
+		...props,
+		className,
+		"aria-current": "page",
+		"data-fs-breadcrumb-link": "",
+		"data-fs-breadcrumb-current": "",
+		children: children ?? name
+	});
+	return /* @__PURE__ */ jsx(NavigationLink, {
+		href: url,
+		className,
+		"data-fs-breadcrumb-link": "",
+		children: children ?? name
+	});
+}
+function BreadcrumbSeparator({ className, children, ...props }) {
+	const { isLast } = useBreadcrumbItem();
+	if (isLast) return null;
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		className,
+		"data-fs-breadcrumb-separator": "",
+		children: children ?? "/"
+	});
+}
+const Breadcrumb = {
+	Root: BreadcrumbRoot,
+	List: BreadcrumbList,
+	Link: BreadcrumbLink,
+	Separator: BreadcrumbSeparator
+};
+//#endregion
+export { Breadcrumb, BreadcrumbLink, BreadcrumbLinkDefinition, BreadcrumbList, BreadcrumbListDefinition, BreadcrumbRoot, BreadcrumbRootDefinition, BreadcrumbSeparator, BreadcrumbSeparatorDefinition };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/matter/breadcrumb/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../../../src/matter/breadcrumb/breadcrumb.tsx"],"sourcesContent":["'use client';\n\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef } from 'react';\nimport { createContext, useContext } from 'react';\nimport { NavigationLink } from '../../particles/navigation-link/navigation-link.js';\n\n// ---------------------------------------------------------------------------\n// GraphQL Fragment\n// ---------------------------------------------------------------------------\n\nconst fragment = /* GraphQL */ `\n  fragment BreadcrumbData on Query {\n    productBySlug(slug: $slug) {\n      breadcrumbs {\n        name\n        url\n        position\n      }\n    }\n  }\n`;\n\n// ---------------------------------------------------------------------------\n// Raw data types (shape of the fragment result)\n// ---------------------------------------------------------------------------\n\ntype RawBreadcrumbData = {\n  breadcrumbs: Array<{\n    name: string;\n    url: string;\n    position: number;\n  }>;\n};\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype BreadcrumbItemData = {\n  name: string;\n  url: string;\n  position: number;\n};\n\ntype BreadcrumbContextValue = {\n  items: BreadcrumbItemData[];\n};\n\ntype BreadcrumbItemContextValue = BreadcrumbItemData & {\n  isLast: boolean;\n};\n\nexport type BreadcrumbRootProps = ComponentPropsWithRef<'nav'> & {\n  items?: BreadcrumbItemData[];\n  $data?: RawBreadcrumbData | null;\n  label?: string;\n};\n\nexport type BreadcrumbListProps = ComponentPropsWithRef<'ol'>;\n\nexport type BreadcrumbLinkProps = ComponentPropsWithRef<'a'>;\n\nexport type BreadcrumbSeparatorProps = ComponentPropsWithRef<'span'>;\n\n// ---------------------------------------------------------------------------\n// Contexts\n// ---------------------------------------------------------------------------\n\nconst BreadcrumbContext = createContext<BreadcrumbContextValue>({ items: [] });\n\nconst BreadcrumbItemContext = createContext<BreadcrumbItemContextValue | null>(null);\n\nfunction useBreadcrumbItem(): BreadcrumbItemContextValue {\n  const item = useContext(BreadcrumbItemContext);\n  if (!item) {\n    throw new Error('Breadcrumb item components must be used inside BreadcrumbList.');\n  }\n  return item;\n}\n\n// ---------------------------------------------------------------------------\n// Transform\n// ---------------------------------------------------------------------------\n\nfunction transformBreadcrumbData(data: RawBreadcrumbData): BreadcrumbItemData[] {\n  return data.breadcrumbs;\n}\n\n// ---------------------------------------------------------------------------\n// Definitions\n// ---------------------------------------------------------------------------\n\nexport const BreadcrumbRootDefinition = defineComponent<BreadcrumbRootProps>({\n  name: 'BreadcrumbRoot',\n  importPath: '@vtex/faststore/components',\n  component: BreadcrumbRoot,\n  fragment,\n  editor: { label: 'Breadcrumb Root', category: 'navigation' },\n  schema: {\n    label: { type: 'string', default: 'Breadcrumb', label: 'Aria Label' },\n  },\n  guideline:\n    'Root container for breadcrumb navigation; compose as BreadcrumbRoot > BreadcrumbList > [BreadcrumbLink + BreadcrumbSeparator].',\n});\n\nexport const BreadcrumbListDefinition = defineComponent<BreadcrumbListProps>({\n  name: 'BreadcrumbList',\n  importPath: '@vtex/faststore/components',\n  component: BreadcrumbList,\n  editor: { label: 'Breadcrumb List', category: 'navigation' },\n  schema: {},\n  guideline: 'Ordered list of breadcrumb items; must be a direct child of BreadcrumbRoot.',\n});\n\nexport const BreadcrumbLinkDefinition = defineComponent<BreadcrumbLinkProps>({\n  name: 'BreadcrumbLink',\n  importPath: '@vtex/faststore/components',\n  component: BreadcrumbLink,\n  editor: { label: 'Breadcrumb Link', category: 'navigation' },\n  schema: {},\n  guideline: 'Renders the label and link for a breadcrumb item; must be inside BreadcrumbList.',\n});\n\nexport const BreadcrumbSeparatorDefinition = defineComponent<BreadcrumbSeparatorProps>({\n  name: 'BreadcrumbSeparator',\n  importPath: '@vtex/faststore/components',\n  component: BreadcrumbSeparator,\n  editor: { label: 'Breadcrumb Separator', category: 'navigation' },\n  schema: {},\n  guideline: 'Decorative separator rendered between breadcrumb items; must be inside BreadcrumbList.',\n});\n\n// ---------------------------------------------------------------------------\n// Scrollbar hiding styles\n// ---------------------------------------------------------------------------\n\nconst scrollbarHideStyles = '[data-fs-breadcrumb-list]::-webkit-scrollbar{display:none}';\n\n// ---------------------------------------------------------------------------\n// Implementations\n// ---------------------------------------------------------------------------\n\nexport function BreadcrumbRoot({\n  items,\n  $data,\n  label = 'Breadcrumb',\n  className,\n  children,\n  ...props\n}: BreadcrumbRootProps) {\n  const resolvedItems = items ?? ($data ? transformBreadcrumbData($data) : []);\n\n  return (\n    <BreadcrumbContext value={{ items: resolvedItems }}>\n      <nav {...props} aria-label={label} className={className} data-fs-breadcrumb=\"\">\n        {children}\n      </nav>\n    </BreadcrumbContext>\n  );\n}\n\nexport function BreadcrumbList({ className, children, style, ...props }: BreadcrumbListProps) {\n  const { items } = useContext(BreadcrumbContext);\n\n  return (\n    <>\n      <style>{scrollbarHideStyles}</style>\n      <ol\n        {...props}\n        className={className}\n        data-fs-breadcrumb-list=\"\"\n        style={{\n          display: 'flex',\n          flexWrap: 'nowrap',\n          overflowX: 'auto',\n          scrollbarWidth: 'none',\n          msOverflowStyle: 'none',\n          ...style,\n        }}\n      >\n        {items.map((item, index) => (\n          <BreadcrumbItemContext key={item.position} value={{ ...item, isLast: index === items.length - 1 }}>\n            <li data-fs-breadcrumb-item=\"\">{children}</li>\n          </BreadcrumbItemContext>\n        ))}\n      </ol>\n    </>\n  );\n}\n\nexport function BreadcrumbLink({ className, children, ...props }: BreadcrumbLinkProps) {\n  const { name, url, isLast } = useBreadcrumbItem();\n\n  if (isLast) {\n    return (\n      <span\n        {...props}\n        className={className}\n        aria-current=\"page\"\n        data-fs-breadcrumb-link=\"\"\n        data-fs-breadcrumb-current=\"\"\n      >\n        {children ?? name}\n      </span>\n    );\n  }\n\n  return (\n    <NavigationLink href={url} className={className} data-fs-breadcrumb-link=\"\">\n      {children ?? name}\n    </NavigationLink>\n  );\n}\n\nexport function BreadcrumbSeparator({ className, children, ...props }: BreadcrumbSeparatorProps) {\n  const { isLast } = useBreadcrumbItem();\n\n  if (isLast) return null;\n\n  return (\n    <span {...props} aria-hidden=\"true\" className={className} data-fs-breadcrumb-separator=\"\">\n      {children ?? '/'}\n    </span>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Namespace export\n// ---------------------------------------------------------------------------\n\nexport const Breadcrumb = {\n  Root: BreadcrumbRoot,\n  List: BreadcrumbList,\n  Link: BreadcrumbLink,\n  Separator: BreadcrumbSeparator,\n};\n"],"mappings":"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"}

package/dist/matter/buy-button/buy-button.d.ts

@@ -0,0 +1,95 @@
+import { ContentValue } from "../../core/dist/define-content-type.js";
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import "../../sdk/generated/graphql.js";
+import { ComponentActions } from "../../sdk/actions/types.js";
+import { ComponentPropsWithRef } from "react";
+//#region src/matter/buy-button/buy-button.d.ts
+type MoneyValue = {
+  amount: number;
+  currencyCode: string;
+};
+type RawBuyButtonData = {
+  id: string;
+  title: string;
+  slug: string;
+  images: {
+    edges: Array<{
+      node: {
+        url: string;
+        altText: string | null;
+      };
+    }>;
+  };
+  variants: {
+    edges: Array<{
+      node: {
+        id: string;
+        sku: string;
+        availableForSale: boolean;
+        sellers: Array<{
+          id: string;
+          isDefault: boolean;
+          offer: {
+            price: MoneyValue;
+            listPrice: MoneyValue;
+          } | null;
+        }>;
+      };
+    }>;
+  };
+};
+export declare const BuyButtonLabels: {
+  readonly id: "buy-button-labels";
+  readonly title: "Buy Button Labels";
+  readonly description: "Editorial labels for the add-to-cart button.";
+  readonly schema: {
+    readonly type: "object";
+    readonly additionalProperties: false;
+    readonly required: readonly ["availableLabel", "unavailableLabel"];
+    readonly properties: {
+      readonly availableLabel: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Available label";
+        readonly default: "Comprar";
+      };
+      readonly unavailableLabel: {
+        readonly type: "string";
+        readonly minLength: 1;
+        readonly title: "Unavailable label";
+        readonly default: "Indisponivel";
+      };
+    };
+  };
+};
+export type BuyButtonRootProps = ComponentPropsWithRef<'div'> & {
+  $data?: RawBuyButtonData | null;
+  /** Page-supplied viewed SKU; adds this variant before the shopper interacts. A published swatch
+   *  selection wins over it once set. */
+  selectedVariantId?: string;
+};
+export type BuyButtonButtonProps = ComponentPropsWithRef<'button'> & {
+  availableLabel?: string;
+  unavailableLabel?: string;
+  /** Merchant-authored labels, sliced from the page/layout content entry; win over the label props
+   *  when present. Absent in a non-CMS store — the label props (and their defaults) are the fallback. */
+  $content?: ContentValue<typeof BuyButtonLabels>;
+  /** Injected by the compiler from `actions: { cart: ['addItem'] }`; the cart write surface. */
+  $actions?: ComponentActions;
+};
+export declare const BuyButtonRootDefinition: ComponentDefinition<BuyButtonRootProps>;
+export declare const BuyButtonButtonDefinition: ComponentDefinition<BuyButtonButtonProps>;
+export declare function BuyButtonRoot({ $data, selectedVariantId, children, ...props }: BuyButtonRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BuyButtonRoot {
+  var Skeleton: typeof BuyButtonSkeleton;
+}
+export declare function BuyButtonButton({ availableLabel, unavailableLabel, className, children, onClick, $content, $actions, ...props }: BuyButtonButtonProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function BuyButtonSkeleton({ className, ...props }: ComponentPropsWithRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const BuyButton: {
+  Root: typeof BuyButtonRoot;
+  Button: typeof BuyButtonButton;
+  Skeleton: typeof BuyButtonSkeleton;
+};
+//#endregion
+//# sourceMappingURL=buy-button.d.ts.map