Switched to a new branch

Thinking...

Conversation compacted

Explored 4 files

Installation

pnpm dlx kliping@latest add marker

Usage

<script setup lang="ts">
import { Marker, MarkerContent, MarkerIcon, } from '@/components/ui/marker'
</script>

<template>
  <Marker>
    <MarkerIcon>
      <CheckIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </Marker>
</template>

Composition

Susunan berikut adalah cara membangun sebuah marker:

Marker
├── MarkerIcon
└── MarkerContent

Features

• Tersedia varian marker sebaris, baris bergaris tepi, dan pemisah berlabel.
• Slot ikon dekoratif yang disembunyikan dari teknologi bantu.
• Elemen akar polimorfik lewat render, untuk marker berupa tautan dan tombol.
• Bisa dipadukan dengan utility shimmer untuk teks status yang mengalir.
• Style tiap bagian bisa disesuaikan lewat prop class.

Examples

Varian

Pakai variant untuk berpindah antara marker sebaris, baris bergaris tepi, dan pemisah berlabel.

A default marker for inline notes.

A separator marker

A border marker for row boundaries.

Variant	Description
default	An inline marker for status, notes, and actions.
border	A default marker with a bottom border under the row.
separator	A centered label with divider lines on each side.

Status

Isi role="status" dan sertakan Spinner pada marker yang sedang berjalan, supaya pembaruannya ikut dibacakan.

Compacting conversation

Running tests

Shimmer

Tambahkan utility class shimmer pada MarkerContent untuk efek teks mengalir. Cara pemasangannya ada di dokumentasi shimmer.

Thinking...

Reading 4 files

Separator

Pakai varian separator untuk pembatas berlabel di dalam percakapan, misalnya tanggal atau jeda antar bagian.

Today

Worked for 42s

Conversation compacted

Garis Tepi

Pakai varian border untuk baris status yang tetap mengikuti perataan marker bawaan sekaligus memisahkan baris berikutnya.

Switched to release-candidate

Reviewed 8 related files

Opened implementation notes

Dengan Ikon

Pakai MarkerIcon untuk menampilkan ikon di samping konten. Pakai flex-col kalau ikonnya ingin ditumpuk di atas konten.

Switched to a new branch

Explored 4 files

Syncing completed

Tautan dan Tombol

Ubah marker menjadi tautan atau tombol lewat prop render pada Marker.

View the pull request

import { Marker, MarkerContent } from "@/components/ui/marker"

<template>
  <Marker as-child>
    <a href="#links-and-buttons">
      <MarkerIcon>
        <GitBranchIcon />
      </MarkerIcon>
      <MarkerContent>View the pull request</MarkerContent>
    </a>
  </Marker>
</template>

Accessibility

Marker bersifat presentasional secara bawaan. Makna yang tepat bergantung pada cara Anda memakainya, jadi pilih role sesuai maksudnya, bukan mengandalkan satu nilai bawaan.

Status dan Progres

Untuk marker yang sedang berjalan seperti "Sedang berpikir..." atau tool yang aktif, isi role="status" supaya teknologi bantu membacakan pembaruannya begitu muncul. Marker meneruskan role ke elemen di baliknya.

<Marker role="status">
  <MarkerIcon>
    <Spinner />
  </MarkerIcon>
  <MarkerContent>Compacting conversation</MarkerContent>
</Marker>

Pemisah Berlabel

Pemisah yang memuat teks — misalnya tanggal atau label bagian — tidak butuh role. Garis pembatasnya hanya pseudo-element CSS yang dekoratif, dan teksnya dibacakan sebagai konten biasa.

<Marker variant="separator">
  <MarkerContent>Today</MarkerContent>
</Marker>

Catatan: jangan menambahkan role="separator" pada pembatas berlabel. Sebuah separator mengambil nama aksesibelnya dari aria-label, bukan dari teksnya, dan isinya dianggap presentasional — sehingga label yang terlihat justru tidak akan dibacakan. Simpan role="separator" untuk pembatas yang memang tanpa teks bermakna.

Marker Bergaris Tepi

Marker bergaris tepi punya makna yang sama dengan marker biasa. Garis bawahnya dekoratif, jadi pilih role="status", render, atau tanpa role sama sekali, sesuai tujuan markernya.

<Marker variant="border">
  <MarkerIcon>
    <FileTextIcon />
  </MarkerIcon>
  <MarkerContent>Opened implementation notes</MarkerContent>
</Marker>

Ikon Dekoratif

MarkerIcon bersifat dekoratif dan disembunyikan dari teknologi bantu lewat aria-hidden, jadi maknanya dipegang MarkerContent di sebelahnya. Untuk marker yang hanya berisi ikon, berilah aria-label atau teks yang terlihat supaya tidak terbaca kosong.

<Marker aria-label="Synced">
  <MarkerIcon>
    <CheckIcon />
  </MarkerIcon>
</Marker>

Marker yang Interaktif

Kalau marker berfungsi sebagai tautan atau pemicu aksi, tampilkan sebagai <button> atau <a> sungguhan lewat prop render, supaya bisa di-focus dan punya role yang benar. Nama aksesibelnya diambil dari teks marker.

<Marker as-child>
  <a href="/files" >
    <MarkerIcon>
      <FileTextIcon />
    </MarkerIcon>
    <MarkerContent>Explored 4 files</MarkerContent>
  </a>
</Marker>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	class-variance-authority@^0.7.1, reka-ui@^2.10.3
Files	components/ui/marker/marker.vue components/ui/marker/marker-content.vue components/ui/marker/marker-icon.vue components/ui/marker/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<Marker>
  <MarkerIcon />
  <MarkerContent />
</Marker>

API Reference

Marker

Elemen akar marker. Berkasnya juga mengekspor markerVariants supaya style marker bisa Anda pakai ulang di komponen sendiri.

Prop	Type	Default	Description
variant?	"default" | "separator" | "border"	—	The marker layout.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	"div"	The element or component this component should render as. Can be overwritten by asChild.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"marker"
[data-variant]	"default" | "separator" | "border"

MarkerIcon

Slot ikon dekoratif. Disembunyikan dari teknologi bantu lewat aria-hidden.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"marker-icon"

MarkerContent

Isi teks marker.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"marker-content"

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --foreground, --muted-foreground.