prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/{patterns/schedule.tsx → reference/components/gantt/examples/screen.tsx}

@@ -1,5 +1,6 @@
-/** A team schedule: PageToolbar with search, filters and team sections over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer. */
+/** A team schedule as a work screen: the title with the people shown and a PageToolbar with search, filters, team sections and the primary action in the app header over a full-height Gantt; moves saved or refused, new work drawn and named in a Modal, details in a Drawer — `scrollHeight`, `onBarChange`, `onBarCreate`, `onItemOpen`. */
 import {
+  AppHeader,
   Avatar,
   Badge,
   Button,
@@ -29,7 +30,7 @@ import {
 } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./schedule.module.css";
+import styles from "./screen.module.css";
 
 type Hue = NonNullable<GanttBar["color"]>;
 type TeamId = "rollout" | "analytics" | "support";
@@ -275,7 +276,7 @@ const wait = (ms: number) => new Promise((resolve) => window.setTimeout(resolve,
 /** `yyyy-MM-dd` from the Datepicker's hidden input → a local calendar day. */
 const parseDay = (value: FormDataEntryValue) => new Date(`${value}T00:00`);
 
-export default function SchedulePattern() {
+export default function GanttScreenExample() {
   const { notify } = useNotifications();
   const formId = React.useId();
   const [people, setPeople] = React.useState(PEOPLE);
@@ -440,15 +441,19 @@ export default function SchedulePattern() {
   const detail = selected?.bar;
 
   return (
-    <PageContent.Root fill>
-      <PageContent.Header>
-        <PageContent.Title>Загрузка команды</PageContent.Title>
-        <PageContent.Description>
-          Кто из команды внедрения чем занят у клиентов: проекты, отпуска и вехи запусков.
-        </PageContent.Description>
-      </PageContent.Header>
-      <PageContent.Body>
-        <div className={styles.board}>
+    <>
+      {/* A work screen: in an app this header fills the shell's `header` slot and carries the page —
+          the only h1 and the page's tools; main has no PageContent.Header. */}
+      <AppHeader.Root>
+        <AppHeader.Start>
+          <AppHeader.Title>
+            Загрузка команды
+            <AppHeader.Description>
+              {loading ? "Загружаем график…" : `Сотрудников: ${rows.length} из ${people.length}`}
+            </AppHeader.Description>
+          </AppHeader.Title>
+        </AppHeader.Start>
+        <AppHeader.Tools>
           <SmartFilter.Root
             fields={FIELDS}
             value={filter}
@@ -456,7 +461,7 @@ export default function SchedulePattern() {
             search={search}
             onSearchChange={setSearch}
           >
-            <PageToolbar.Root aria-label="График команды">
+            <PageToolbar.Root aria-label="Загрузка команды">
               <PageToolbar.Tools>
                 <SmartFilter.Toolbar />
               </PageToolbar.Tools>
@@ -498,7 +503,11 @@ export default function SchedulePattern() {
               </PageToolbar.Chips>
             </PageToolbar.Root>
           </SmartFilter.Root>
+        </AppHeader.Tools>
+      </AppHeader.Root>
 
+      <PageContent.Root fill>
+        <PageContent.Body>
           <Gantt<Person, Assignment>
             aria-label="Загрузка команды внедрения"
             className={styles.chart}
@@ -526,18 +535,13 @@ export default function SchedulePattern() {
             )}
             onBarChange={moveBar}
             onBarCreate={startCreate}
-            onSelect={(bar, row) => {
+            onItemOpen={(bar, row) => {
               setSelected({ bar, person: findPerson(row.id) });
               setDetailOpen(true);
             }}
             renderBarTooltip={(bar) => (bar.client ? CLIENTS[bar.client].name : KIND[bar.kind])}
             toolbar={
               <>
-                <Typography as="span" variant="body-s" tone="muted">
-                  {loading
-                    ? "Загружаем график…"
-                    : `Сотрудников: ${rows.length} из ${people.length}`}
-                </Typography>
                 {/* The legend of client hues: the bar's hue repeats its client, the tooltip names it. */}
                 {(Object.keys(CLIENTS) as ClientId[]).map((client) => (
                   <Badge.Root key={client} color={CLIENTS[client].color}>
@@ -564,159 +568,159 @@ export default function SchedulePattern() {
               </EmptyPage.Root>
             }
           />
-        </div>
-
-        <Modal.Root open={draft !== null} onOpenChange={closeDraft}>
-          <Modal.Content size="s">
-            <Modal.Header>
-              <Modal.Title>Новая задача</Modal.Title>
-              <Modal.Description>
-                {draftPerson && draft?.dates
-                  ? `${draftPerson.name} · ${formatPeriod(draft.dates)}`
-                  : "Сотрудник увидит задачу в своём графике."}
-              </Modal.Description>
-            </Modal.Header>
-            <Modal.Body>
-              <Modal.Guard busy={saving} />
-              <form id={formId} noValidate onSubmit={submit}>
-                <Fieldset aria-label="Задача" disabled={saving}>
-                  <Input.Root id={`${formId}-title`} label="Задача" required error={errors.title}>
-                    <Input.Wrapper>
-                      <Input.Field name="title" placeholder="Обучение пользователей" autoFocus />
-                    </Input.Wrapper>
-                  </Input.Root>
-                  <Select.Root
-                    name="client"
-                    label="Клиент"
-                    required
-                    placeholder="Выберите клиента"
-                    error={errors.client}
-                    id={`${formId}-client`}
-                  >
-                    <Select.Trigger>
-                      <Select.Value />
-                    </Select.Trigger>
-                    <Select.Content>
-                      {(Object.keys(CLIENTS) as ClientId[]).map((value) => (
-                        <Select.Item key={value} value={value}>
-                          {CLIENTS[value].name}
-                        </Select.Item>
-                      ))}
-                    </Select.Content>
-                  </Select.Root>
-                  {draft?.personId ? null : (
-                    <>
-                      <Select.Root
-                        name="person"
-                        label="Сотрудник"
-                        required
-                        placeholder="Выберите сотрудника"
-                        error={errors.person}
-                        id={`${formId}-person`}
-                      >
-                        <Select.Trigger>
-                          <Select.Value />
-                        </Select.Trigger>
-                        <Select.Content searchable>
-                          {people.map((person) => (
-                            <Select.Item key={person.id} value={person.id} keywords={person.role}>
-                              {person.name}
-                            </Select.Item>
-                          ))}
-                        </Select.Content>
-                      </Select.Root>
-                      <Datepicker.Root
-                        mode="range"
-                        name="period"
-                        label="Период"
-                        required
-                        fullWidth
-                        placeholder="Начало и конец работ"
-                        error={errors.period}
-                        id={`${formId}-period`}
-                      />
-                    </>
-                  )}
-                </Fieldset>
-              </form>
-            </Modal.Body>
-            <Modal.Footer>
-              <Modal.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Отмена
-                </Button.Root>
-              </Modal.Close>
-              <Button.Root type="submit" form={formId} loading={saving}>
-                Назначить
-              </Button.Root>
-            </Modal.Footer>
-          </Modal.Content>
-        </Modal.Root>
-
-        <Drawer.Root open={detailOpen} onOpenChange={setDetailOpen}>
-          <Drawer.Content size="s">
-            <Drawer.Header>
-              <Drawer.Title>{detail?.label}</Drawer.Title>
-              <Drawer.Description>{detail ? KIND[detail.kind] : null}</Drawer.Description>
-            </Drawer.Header>
-            <Drawer.Body>
-              {selected && detail ? (
-                <DescriptionList.Root orientation="vertical">
-                  <DescriptionList.Item label="Сотрудник">
-                    {selected.person.name} · {selected.person.role}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label="Клиент">
-                    {detail.client ? (
-                      <Badge.Root color={CLIENTS[detail.client].color}>
-                        {CLIENTS[detail.client].name}
-                      </Badge.Root>
-                    ) : (
-                      "Без клиента"
+
+          <Modal.Root open={draft !== null} onOpenChange={closeDraft}>
+            <Modal.Content size="s">
+              <Modal.Header>
+                <Modal.Title>Новая задача</Modal.Title>
+                <Modal.Description>
+                  {draftPerson && draft?.dates
+                    ? `${draftPerson.name} · ${formatPeriod(draft.dates)}`
+                    : "Сотрудник увидит задачу в своём графике."}
+                </Modal.Description>
+              </Modal.Header>
+              <Modal.Body>
+                <Modal.Guard busy={saving} />
+                <form id={formId} noValidate onSubmit={submit}>
+                  <Fieldset aria-label="Задача" disabled={saving}>
+                    <Input.Root id={`${formId}-title`} label="Задача" required error={errors.title}>
+                      <Input.Wrapper>
+                        <Input.Field name="title" placeholder="Обучение пользователей" autoFocus />
+                      </Input.Wrapper>
+                    </Input.Root>
+                    <Select.Root
+                      name="client"
+                      label="Клиент"
+                      required
+                      placeholder="Выберите клиента"
+                      error={errors.client}
+                      id={`${formId}-client`}
+                    >
+                      <Select.Trigger>
+                        <Select.Value />
+                      </Select.Trigger>
+                      <Select.Content>
+                        {(Object.keys(CLIENTS) as ClientId[]).map((value) => (
+                          <Select.Item key={value} value={value}>
+                            {CLIENTS[value].name}
+                          </Select.Item>
+                        ))}
+                      </Select.Content>
+                    </Select.Root>
+                    {draft?.personId ? null : (
+                      <>
+                        <Select.Root
+                          name="person"
+                          label="Сотрудник"
+                          required
+                          placeholder="Выберите сотрудника"
+                          error={errors.person}
+                          id={`${formId}-person`}
+                        >
+                          <Select.Trigger>
+                            <Select.Value />
+                          </Select.Trigger>
+                          <Select.Content searchable>
+                            {people.map((person) => (
+                              <Select.Item key={person.id} value={person.id} keywords={person.role}>
+                                {person.name}
+                              </Select.Item>
+                            ))}
+                          </Select.Content>
+                        </Select.Root>
+                        <Datepicker.Root
+                          mode="range"
+                          name="period"
+                          label="Период"
+                          required
+                          fullWidth
+                          placeholder="Начало и конец работ"
+                          error={errors.period}
+                          id={`${formId}-period`}
+                        />
+                      </>
                     )}
-                  </DescriptionList.Item>
-                  <DescriptionList.Item label={detail.kind === "milestone" ? "Дата" : "Период"}>
-                    {formatPeriod(detail)}
-                    {detail.kind === "milestone" ? null : ` · ${lengthInDays(detail)} дн.`}
-                  </DescriptionList.Item>
-                  {detail.progress === undefined ? null : (
-                    <DescriptionList.Item label="Выполнено">
-                      <ProgressBar
-                        value={Math.round(detail.progress * 100)}
-                        showValue
-                        aria-label="Выполнено"
-                      />
-                    </DescriptionList.Item>
-                  )}
-                </DescriptionList.Root>
-              ) : null}
-            </Drawer.Body>
-            <Drawer.Footer>
-              <Drawer.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Закрыть
+                  </Fieldset>
+                </form>
+              </Modal.Body>
+              <Modal.Footer>
+                <Modal.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Отмена
+                  </Button.Root>
+                </Modal.Close>
+                <Button.Root type="submit" form={formId} loading={saving}>
+                  Назначить
                 </Button.Root>
-              </Drawer.Close>
-              {detail && !detail.readOnly ? (
-                <ConfirmDialog.Root
-                  title={`Снять задачу «${detail.label}»?`}
-                  description={`${selected?.person.name} освободится на эти дни. Задачу можно будет назначить заново.`}
-                  confirmLabel="Снять задачу"
-                  onConfirm={removeSelected}
-                >
-                  <ConfirmDialog.Trigger>
-                    <Button.Root variant="soft" tone="danger">
-                      <Button.Icon>
-                        <Icon name="action.delete" />
-                      </Button.Icon>
-                      Снять задачу
-                    </Button.Root>
-                  </ConfirmDialog.Trigger>
-                </ConfirmDialog.Root>
-              ) : null}
-            </Drawer.Footer>
-          </Drawer.Content>
-        </Drawer.Root>
-      </PageContent.Body>
-    </PageContent.Root>
+              </Modal.Footer>
+            </Modal.Content>
+          </Modal.Root>
+
+          <Drawer.Root open={detailOpen} onOpenChange={setDetailOpen}>
+            <Drawer.Content size="s">
+              <Drawer.Header>
+                <Drawer.Title>{detail?.label}</Drawer.Title>
+                <Drawer.Description>{detail ? KIND[detail.kind] : null}</Drawer.Description>
+              </Drawer.Header>
+              <Drawer.Body>
+                {selected && detail ? (
+                  <DescriptionList.Root orientation="vertical">
+                    <DescriptionList.Item label="Сотрудник">
+                      {selected.person.name} · {selected.person.role}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Клиент">
+                      {detail.client ? (
+                        <Badge.Root color={CLIENTS[detail.client].color}>
+                          {CLIENTS[detail.client].name}
+                        </Badge.Root>
+                      ) : (
+                        "Без клиента"
+                      )}
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label={detail.kind === "milestone" ? "Дата" : "Период"}>
+                      {formatPeriod(detail)}
+                      {detail.kind === "milestone" ? null : ` · ${lengthInDays(detail)} дн.`}
+                    </DescriptionList.Item>
+                    {detail.progress === undefined ? null : (
+                      <DescriptionList.Item label="Выполнено">
+                        <ProgressBar
+                          value={Math.round(detail.progress * 100)}
+                          showValue
+                          aria-label="Выполнено"
+                        />
+                      </DescriptionList.Item>
+                    )}
+                  </DescriptionList.Root>
+                ) : null}
+              </Drawer.Body>
+              <Drawer.Footer>
+                <Drawer.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Закрыть
+                  </Button.Root>
+                </Drawer.Close>
+                {detail && !detail.readOnly ? (
+                  <ConfirmDialog.Root
+                    title={`Снять задачу «${detail.label}»?`}
+                    description={`${selected?.person.name} освободится на эти дни. Задачу можно будет назначить заново.`}
+                    confirmLabel="Снять задачу"
+                    onConfirm={removeSelected}
+                  >
+                    <ConfirmDialog.Trigger>
+                      <Button.Root variant="soft" tone="danger">
+                        <Button.Icon>
+                          <Icon name="action.delete" />
+                        </Button.Icon>
+                        Снять задачу
+                      </Button.Root>
+                    </ConfirmDialog.Trigger>
+                  </ConfirmDialog.Root>
+                ) : null}
+              </Drawer.Footer>
+            </Drawer.Content>
+          </Drawer.Root>
+        </PageContent.Body>
+      </PageContent.Root>
+    </>
   );
 }

package/dist/skill/reference/components/gantt/examples/sizes.tsx

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Room = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -26,21 +24,23 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function GanttSizesExample() {
   return (
-    <div className={styles.specimens}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.specimen}>
-          <Gantt
-            aria-label={`Бронирования, ${size}`}
-            size={size}
-            defaultScale="day"
-            rows={ROOMS}
-            getRowKey={(room) => room.id}
-            getRowLabel={(room) => room.name}
-            getRowBars={(room) => room.bars}
-          />
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
+        <div key={size}>
+          <div>
+            <Gantt
+              aria-label={`Бронирования, ${size}`}
+              size={size}
+              defaultScale="day"
+              rows={ROOMS}
+              getRowKey={(room) => room.id}
+              getRowLabel={(room) => room.name}
+              getRowBars={(room) => room.bars}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
     </div>

package/dist/skill/reference/components/gantt/examples/states.tsx

@@ -1,9 +1,7 @@
-/** Skeleton rows in the chart's geometry while it loads, an empty period and a plan you may only look at — `loading`, `empty`, `readOnly`. */
+/** Skeleton rows in the chart's geometry while it loads, an empty period and a report you may only look at, its today line on the report day — `loading`, `empty`, `readOnly`, `today`. */
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Vehicle = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -24,6 +22,9 @@ const FLEET: Vehicle[] = [
 
 const NO_VEHICLES: Vehicle[] = [];
 
+/** The day the dispatch report was made: its today line stands there, not on the real today. */
+const REPORT_DAY = at(2);
+
 const chartProps = {
   defaultScale: "day",
   getRowKey: (vehicle: Vehicle) => vehicle.id,
@@ -33,35 +34,42 @@ const chartProps = {
 
 export default function GanttStatesExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
-        <Typography as="span" variant="caption" tone="muted">
-          loading
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
+          <Typography as="span" variant="caption" tone="muted">
+            loading
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин"
-          rows={NO_VEHICLES}
-          empty="На этой неделе рейсов нет"
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          empty
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин"
+            rows={NO_VEHICLES}
+            empty="На этой неделе рейсов нет"
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            empty
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Рейсы машин, только просмотр"
-          rows={FLEET}
-          readOnly
-          onBarChange={() => undefined}
-          {...chartProps}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          readOnly
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Рейсы машин, только просмотр"
+            rows={FLEET}
+            readOnly
+            today={REPORT_DAY}
+            onBarChange={() => undefined}
+            {...chartProps}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            readOnly · today
+          </Typography>
+        </div>
       </div>
     </div>
   );

package/dist/skill/reference/components/gantt/examples/variants.tsx

@@ -2,8 +2,6 @@
 import { addDays, startOfToday, startOfWeek } from "date-fns";
 import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 type Row = { id: string; name: string; bars: GanttBar[] };
 
 const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
@@ -52,30 +50,34 @@ const BY_STATUS: Row[] = [
 
 export default function GanttVariantsExample() {
   return (
-    <div className={styles.specimens}>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Проекты по направлениям"
-          rows={BY_PROJECT}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          color
-        </Typography>
+    <div>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Проекты по направлениям"
+            rows={BY_PROJECT}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            color
+          </Typography>
+        </div>
       </div>
-      <div className={styles.specimen}>
-        <Gantt
-          aria-label="Задачи по статусу"
-          rows={BY_STATUS}
-          getRowKey={(row) => row.id}
-          getRowLabel={(row) => row.name}
-          getRowBars={(row) => row.bars}
-        />
-        <Typography as="span" variant="caption" tone="muted">
-          tone
-        </Typography>
+      <div>
+        <div>
+          <Gantt
+            aria-label="Задачи по статусу"
+            rows={BY_STATUS}
+            getRowKey={(row) => row.id}
+            getRowLabel={(row) => row.name}
+            getRowBars={(row) => row.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            tone
+          </Typography>
+        </div>
       </div>
     </div>
   );