@takuhon/ui 0.10.0 → 0.12.0

package/dist/ActivitySection.module-SQFQYFCW.module.css

@@ -0,0 +1,18 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--takuhon-space-3);
+  margin-top: var(--takuhon-space-5);
+}
+
+.heading {
+  margin: 0;
+  font-size: var(--takuhon-font-size-xl);
+  color: var(--takuhon-color-text);
+}
+
+/* The card is a fixed-width SVG; scale it down on narrow viewports. */
+.card svg {
+  max-width: 100%;
+  height: auto;
+}

package/dist/ImageField.module-CC3IBMDB.module.css

@@ -0,0 +1,23 @@
+.uploadRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--takuhon-space-2);
+  margin-block-start: var(--takuhon-space-2);
+}
+
+.uploadLabel {
+  font-family: var(--takuhon-font-family);
+  font-size: var(--takuhon-font-size-sm);
+  color: var(--takuhon-color-text-muted);
+}
+
+.uploadStatus {
+  font-size: var(--takuhon-font-size-sm);
+  color: var(--takuhon-color-text-muted);
+}
+
+.uploadError {
+  font-size: var(--takuhon-font-size-sm);
+  color: #b42318;
+}

package/dist/admin/index.d.ts

@@ -135,6 +135,47 @@ interface CheckboxFieldProps {
  */
 declare function CheckboxField({ label, checked, onChange }: CheckboxFieldProps): React.JSX.Element;
 
+/** Outcome of an asset upload, returned by {@link UploadAsset}. */
+type AssetUploadResult = {
+    status: 'uploaded';
+    url: string;
+    publicUrl: string;
+} | {
+    status: 'error';
+    message?: string;
+};
+/**
+ * Upload one image file and resolve where it now lives. Supplied by the host's
+ * transport layer (it carries the admin token / origin); the UI stays
+ * transport-agnostic.
+ */
+type UploadAsset = (file: File) => Promise<AssetUploadResult>;
+interface ImageFieldProps {
+    label: string;
+    /** Current image URL stored in the document. */
+    value: string;
+    onChange: (url: string) => void;
+    errors?: readonly string[];
+    hint?: string;
+    /**
+     * When provided, a file-upload control is rendered alongside the URL input;
+     * a successful upload sets the URL to the returned (relative) path. When
+     * omitted, the field is URL-only.
+     */
+    uploadAsset?: UploadAsset;
+}
+/**
+ * Avatar / image field: a URL input plus, when {@link ImageFieldProps.uploadAsset}
+ * is supplied, a file picker that uploads the chosen image and writes the
+ * returned URL back into the field. The relative `url` (not the absolute
+ * `publicUrl`) is stored so the reference stays valid across origins.
+ *
+ * No `<img>` preview is rendered: the admin CSP is `img-src 'self' blob:`, so a
+ * preview of an arbitrary external URL would be blocked — the URL input is the
+ * portable, CSP-safe surface, and the public preview shows the real image.
+ */
+declare function ImageField({ label, value, onChange, errors, hint, uploadAsset, }: ImageFieldProps): React.JSX.Element;
+
 interface LocaleTabsProps {
     /** Group label, e.g. `"Display name"`. */
     label: string;
@@ -229,6 +270,8 @@ declare const EN: {
     readonly 'status.error': "Something went wrong. Please try again.";
     readonly 'status.imported': "Imported. Review the fields, then save to apply.";
     readonly 'status.importInvalid': "The imported file is not a valid takuhon document.";
+    readonly 'status.uploading': "Uploading…";
+    readonly 'status.uploadError': "Upload failed. Please try again.";
     readonly 'section.profile': "Profile";
     readonly 'section.about': "About";
     readonly 'section.links': "Links";
@@ -240,6 +283,7 @@ declare const EN: {
     readonly 'field.tagline': "Tagline";
     readonly 'field.bio': "Bio";
     readonly 'field.avatarUrl': "Avatar URL";
+    readonly 'field.avatarUpload': "Upload image";
     readonly 'field.avatarAlt': "Avatar alternative text";
     readonly 'field.location.country': "Country";
     readonly 'field.location.region': "Region";
@@ -283,6 +327,7 @@ declare const EN: {
     readonly 'empty.projects': "No projects yet.";
     readonly 'empty.skills': "No skills yet.";
     readonly 'hint.avatarNoUpload': "Paste an image URL. Uploading image files is not available yet.";
+    readonly 'hint.avatarUpload': "Paste an image URL, or upload a JPEG, PNG, WebP, or GIF.";
     readonly 'hint.month': "Format: YYYY-MM (e.g. 2024-03).";
     readonly 'hint.country': "ISO 3166-1 alpha-2 code, e.g. US.";
     readonly 'hint.tags': "Comma-separated.";
@@ -306,13 +351,18 @@ interface ProfileFormProps {
     locales: readonly LocaleTag[];
     errors?: FieldErrorIndex;
     formatLocale?: (locale: LocaleTag) => string;
+    /**
+     * Upload an avatar image file. When provided, the avatar field offers a file
+     * picker; when omitted, it stays URL-only.
+     */
+    uploadAsset?: UploadAsset;
 }
 /**
- * Basic profile + About: display name, tagline, bio, avatar URL, and a
- * structured location (spec §6.5 / §14.2). Image upload is not wired yet, so
- * the avatar is a URL field only.
+ * Basic profile + About: display name, tagline, bio, avatar, and a structured
+ * location (spec §6.5 / §14.2). The avatar accepts a URL and, when
+ * `uploadAsset` is supplied by the host, an uploaded image file.
  */
-declare function ProfileForm({ value, onChange, locales, errors, formatLocale, }: ProfileFormProps): React.JSX.Element;
+declare function ProfileForm({ value, onChange, locales, errors, formatLocale, uploadAsset, }: ProfileFormProps): React.JSX.Element;
 
 interface LinksFormProps {
     value: readonly Link[];
@@ -404,6 +454,12 @@ interface AdminEditorProps {
      */
     onImport?: () => Promise<unknown>;
     formatLocale?: (locale: LocaleTag) => string;
+    /**
+     * Upload an avatar image file (host-supplied; carries the admin token). When
+     * provided, the profile form's avatar field offers a file picker; otherwise
+     * the avatar stays URL-only.
+     */
+    uploadAsset?: UploadAsset;
 }
 /**
  * Top-level admin editor: holds the working draft, switches between the field
@@ -411,6 +467,6 @@ interface AdminEditorProps {
  * delegating persistence to the host via `onSave` (transport-agnostic). Server
  * (RFC 7807) and client (`validate`) errors map to the same fields.
  */
-declare function AdminEditor({ initialDocument, onSave, onReload, onExport, onImport, formatLocale, }: AdminEditorProps): React.JSX.Element;
+declare function AdminEditor({ initialDocument, onSave, onReload, onExport, onImport, formatLocale, uploadAsset, }: AdminEditorProps): React.JSX.Element;
 
-export { AdminEditor, type AdminEditorProps, type AdminLabelKey, type AdminSaveOutcome, CareersForm, type CareersFormProps, CheckboxField, type CheckboxFieldProps, Field, type FieldControlProps, type FieldErrorIndex, type FieldErrorLike, type FieldProps, LinksForm, type LinksFormProps, LocaleTabs, type LocaleTabsProps, NO_FIELD_ERRORS, ProfileForm, type ProfileFormProps, ProjectsForm, type ProjectsFormProps, RawJsonEditor, type RawJsonEditorProps, Repeater, type RepeaterProps, SelectField, type SelectFieldProps, type SelectOption, SettingsForm, type SettingsFormProps, SkillsForm, type SkillsFormProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, canonicalPointer, collectErrorsUnder, errorsAt, getAdminLabel, hasErrorsUnder, indexErrors, indexValidationErrors };
+export { AdminEditor, type AdminEditorProps, type AdminLabelKey, type AdminSaveOutcome, type AssetUploadResult, CareersForm, type CareersFormProps, CheckboxField, type CheckboxFieldProps, Field, type FieldControlProps, type FieldErrorIndex, type FieldErrorLike, type FieldProps, ImageField, type ImageFieldProps, LinksForm, type LinksFormProps, LocaleTabs, type LocaleTabsProps, NO_FIELD_ERRORS, ProfileForm, type ProfileFormProps, ProjectsForm, type ProjectsFormProps, RawJsonEditor, type RawJsonEditorProps, Repeater, type RepeaterProps, SelectField, type SelectFieldProps, type SelectOption, SettingsForm, type SettingsFormProps, SkillsForm, type SkillsFormProps, TextAreaField, type TextAreaFieldProps, TextField, type TextFieldProps, type UploadAsset, canonicalPointer, collectErrorsUnder, errorsAt, getAdminLabel, hasErrorsUnder, indexErrors, indexValidationErrors };