Expose text tracking, layered/inset shadows, and border styles in StyleDesc

[drewnekota]

While porting a React interface to native GPUIX, I cannot express two styles used by the reference UI: negative letter spacing and multiple box shadows. Is there an existing supported equivalent, or could these be exposed through StyleDesc?

Environment: macOS, @gpuix/react 0.7.0. Checked the npm release and the upstream main-branch StyleDesc on 2026-09-08.

Reference styles

.heading {
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 40px;
  letter-spacing: -0.9px;
}
.composer {
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06),
              0 1px 2px rgba(0,0,0,.04);
}

The font in this minimal example is deliberately a common system serif; the tracking limitation is independent of a particular font.

Current API

Upstream StyleDesc has fontSize, fontFamily, fontWeight and lineHeight, but no letterSpacing. boxShadow accepts one BoxShadow struct (offsetX, offsetY, blurRadius, spreadRadius, color), with no layer list or inset flag.

The following TypeScript is a compile-time reproducer. In a project using the stated version, tsc --noEmit accepts it only because each unsupported assignment is explicitly marked @ts-expect-error. Remove those markers to see the diagnostics. It makes no claim about support for untyped runtime values.

Desired behavior

• Tracking is applied during native text shaping/layout, including wrapping, selection and measurement. Negative values should work; the heading example is -0.9px.
• Multiple shadows preserve layer order and independent blur/offset/alpha values. Existing single-shadow callers remain valid.
• If inset shadows are supported natively, expose that option as well.

A separate missing capability is dashed borders (the reference uses them in empty-state cards). This is secondary and could be tracked separately.

These requests concern expressible styles. Identical browser/native glyph antialiasing is not assumed, and screenshots from the two renderers should still be compared after support is added.

Existing GPUI support

When checked on 2026-09-08, the GPUIX main submodule pointed to remorses/zed commit 1f9d1cd88656cf1759b0bdad32fa3e2df3c4b0b9. Its GPUI style implementation already has a Vec, an inset flag and border_style. These should be investigated as thin GPUIX translations, not assumed to require new GPUI behavior.

Tracking has an existing Zed PR #53475, whose GitHub API state was open/unmerged and mergeable_state dirty when checked. Head: 4bfefa2e196193fb57f9a77f6f7ebf40fcbb42c6. It touches shaping and platform text implementations and cannot be treated as a tested drop-in dependency.

Mapping points found in GPUIX source

• packages/native/src/style.rs: BoxShadowValue and StyleDesc.box_shadow currently deserialize one shadow.
• packages/native/src/renderer.rs: apply_styles translates that single value through the GPUI shadow API.
• packages/react/src/types/host.ts: public shadow and border property types need to match any approved native extension.

A proposed extension should accept the existing single-shadow shape plus a layer array, default inset to false for compatibility, preserve ordered layers, and map the border style directly to GPUI. This is an implementation proposal only, not a built or tested patch.

Following the external-contributor guidelines, I am opening this issue before proposing native changes. Would you be open to exposing these capabilities, particularly the shadow and border options already supported by GPUI?

TypeScript reproducer

import type { StyleDesc as Style } from "@gpuix/react";

const heading: Style = {
  fontSize: 36,
  lineHeight: 40,
  // @ts-expect-error GPUIX 0.7.0 has no text tracking property.
  letterSpacing: -0.9,
};
const layered: Style = {
  // @ts-expect-error GPUIX 0.7.0 accepts a single shadow, not an array.
  boxShadow: [
    { offsetX: 0, offsetY: 4, blurRadius: 24, spreadRadius: 0, color: "#0000000f" },
    { offsetX: 0, offsetY: 1, blurRadius: 2, spreadRadius: 0, color: "#0000000a" },
  ],
};
const inset: Style = {
  boxShadow: {
    offsetX: 0, offsetY: 1, blurRadius: 2, spreadRadius: 0, color: "#0000000a",
    // @ts-expect-error GPUIX 0.7.0 does not expose an inset flag.
    inset: true,
  },
};
const dashed: Style = {
  // @ts-expect-error GPUIX 0.7.0 has no borderStyle property.
  borderStyle: "dashed",
};
void [heading, layered, inset, dashed];