SDK components and styling

Components receive content (also exposed as values), data, assets, settings, design, preview and mode. The SDK exports the SiteProps interface; generated project types describe the actual fields. Mode is fixture, preview or published.

Responsive images

This example uses the Studio definition and its hero.image asset binding. The current selected asset ID comes from content, so owner changes are reflected in the image:

---
import Picture from '@shoplifter/presentation-sdk/Picture.astro';
const { content, assets } = Astro.props;
const heroImage = content.hero.image ? assets[content.hero.image] : undefined;
---
<section>
  <h1>{content.hero.title}</h1>
  {heroImage && <Picture asset={heroImage} alt={heroImage.alt ?? ''} sizes="100vw" />}
</section>

Use Picture for raster images. Published images must use channel-owned assets. Local images are fixture inputs. Use @shoplifter/presentation-sdk/Decorative.astro for decorative SVG under /assets/; SVG may not embed raster images. Local fonts are also allowed.

YouTube thumbnails and external images (SDK 0.3.0)

---
import YouTubeThumbnail from '@shoplifter/presentation-sdk/YouTubeThumbnail.astro';
import ExternalImage from '@shoplifter/presentation-sdk/ExternalImage.astro';
---
<YouTubeThumbnail url="https://youtu.be/dQw4w9WgXcQ?t=90" alt="Video" />
<ExternalImage src="https://images.example/photo.jpg" alt="Photo" width={640} height={480} />

YouTubeThumbnail accepts watch, shortened, Shorts, live and embed links, including scheme-less URLs. It generates the YouTube thumbnail internally and defaults to 480×360. Both components require alt (empty is allowed for decorative images), default to lazy loading and asynchronous decoding, and accept styling/loading props. URLs, dimensions and SDK markers are protected from attribute overrides.

Using ExternalImage is explicit consent: visitors contact a third-party host, and the image may change or disappear. The CLI, build and publication logs issue a non-blocking warning. No dashboard toggle or domain allowlist is needed. Provide an absolute HTTPS URL without credentials and positive numeric width/height. The SDK does not download, proxy or optimize external images. YouTube thumbnails are allowed directly without this warning. Raw image tags, external CSS images and responsive alternatives (srcset or picture wrappers) remain restricted for these components.

Import parseYouTubeUrl, youtubeThumbnailUrl and youtubeEmbedUrl from @shoplifter/presentation-sdk/youtube. Parsing returns { videoId, startSeconds? } or null; timestamps use t, then start, then #t precedence. Malformed timestamps are ignored. Pass the parsed result to youtubeEmbedUrl, optionally with { autoplay: true }, to retain the start time. Keep carousel layout, advancement and player overlays in the presentation.

Public imports

Import	Use
@shoplifter/presentation-sdk	Runtime helpers and TypeScript interfaces
@shoplifter/presentation-sdk/integration	Managed Astro integration
@shoplifter/presentation-sdk/Picture.astro	Responsive images
@shoplifter/presentation-sdk/Decorative.astro	Decorative vectors
@shoplifter/presentation-sdk/YouTubeThumbnail.astro	Validated YouTube thumbnails
@shoplifter/presentation-sdk/ExternalImage.astro	Explicit external HTTPS images
@shoplifter/presentation-sdk/youtube	Shared YouTube URL helpers
@shoplifter/presentation-sdk/InquiryForm.astro	Inquiry component
@shoplifter/presentation-sdk/leads	Typed lead forms and submissions
@shoplifter/presentation-sdk/links	telephoneHref and publicWebUrl
@shoplifter/presentation-sdk/theme	Existing theme helpers

Keep the managed Astro configuration. Author CSS in project components/styles rather than replacing SDK route or document templates. The SDK controls document language and direction; use logical CSS properties and isolate code/URLs in mixed-direction text.

The /live entrypoint is trusted-server functionality, never a browser import. Private renderer APIs are not part of ordinary presentation authoring.