Mixins / foldkit-mixins-ui

Image

namespace · packages/mixins-ui/src/image.ts:1

export * as Image from './image.js'

In the guides

Members

Image.Alt

const · packages/mixins-ui/src/image.ts:27

const Alt: Schema.TaggedUnion<{
  readonly Described: Schema.TaggedStruct<
    'Described',
    { readonly text: Schema.String }
  >
  readonly Decorative: Schema.TaggedStruct<'Decorative', {}>
}>

What an image says to someone who cannot see it, or that it says nothing.

Image.decorative

const · packages/mixins-ui/src/image.ts:36

const decorative: Alt

Image.described

function · packages/mixins-ui/src/image.ts:35

function described(text: string): Alt

Image.ImageSlots

const · packages/mixins-ui/src/image.ts:20

const ImageSlots: Slots.Contract<{
  readonly frame: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly source: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
  readonly image: Slot.UnnamedSlot<
    Capability.Capability<
      'Container',
      readonly [
        Capability.Capability<
          'Interactive',
          readonly [Capability.Capability<'Base', readonly []>]
        >,
      ]
    >,
    readonly Slot.EventName[],
    readonly Slot.AttributeName[],
    readonly Slot.RequirementName[],
    boolean
  >
}>

An image publishes its frame (a picture), a source per format, and the img; it owns no state or messages, and the browser owns loading and which candidate to fetch. The img carries the original's ratio as --fk-image-ratio and the placeholder's background as --fk-image-placeholder, the focal point as --fk-image-focus, and data-layout (fixed, constrained, full). A frame whose provider has no URL for the image is drawn empty, marked data-unavailable, holding the image's box (--fk-image-ratio, --fk-image-width) and its alt text.

Image.ImageView

interface · packages/mixins-ui/src/image.ts:39

interface ImageView<Message = never> {
  readonly asset: ImageAsset
  readonly provider: Provider.Provider
  readonly layout: Layout.Layout
  readonly alt: Alt
  readonly priority?: boolean | undefined
  readonly sizes?: string | undefined
  readonly placeholder?: 'detail' | 'average' | undefined
  readonly style?: NamedStyle<typeof ImageSlots> | undefined
  readonly mixins?: MixinList<Message> | undefined
}

An image in one call: its facts, where its variants live, how wide it is drawn, and what it says.

Image.view

function · packages/mixins-ui/src/image.ts:66

function view<Message = never>(
  options: ImageView<Message>,
  h: HtmlBuilder<Message>,
): Html

Image.watchLoad

const · packages/mixins-ui/src/image.ts:182

const watchLoad: Mixin<never>[]

Marks the img's data-state (loading, loaded, failed), for a style to read; Recipes.Image hides a failed image, keeping its box, so no broken-image glyph or stray alt text shows. Pass it beside the style. It sends no Message, so it is never on by default; without it (or before a page hydrates) the browser draws a failed image as it does.